WordPressウィジェットを表示する方法|典型的なテンプレートと一緒に・・・。

  • このエントリーをはてなブックマークに追加
ワードプレス,ウィジェット

ワードプレスのテーマ(テンプレート)を有効化してテンプレート側のデザインなど必要な設定をしたら、次にやってほしいのがウィジェットの設定です。

ウィジェットは、サイトの固定に表示したい項目を表示することができるので使いようによっては

・PV数の増加
・ファンを増やす
・オプトイン率
・広告収入の増加

などなど色んな効果が期待できるようにカスタマイズすることができます。

そこで、ここではウィジェットの設定の仕方と表示方法などに関して網羅的に解説していこうと思います。最も典型的なウィジェットの設定方法も3つほど紹介しますのでお役立てくださいませ。

※このトーラスウェブはワンカラムで作られているのでウィジェットは使っていませんが、他のサイトではウィジェットを有効活用しています

1.Word Pressのウィジェットとは?

ウィジェットというのは、基本的にはWordpressページのサイドバーを簡単に編集することができる非常に便利な機能です。

例えば、上の画像のようにWordpressをインストールしたデフォルトの状態だと、サイドバーは最低限のものになっていますが、このウィジェットを使って編集をしたりプラグインで項目を追加したりすることによって、プロフィールや人気記事のランキングを追加したりすることができます。

また表示する順番も簡単に変更することもできます。

もちろん、テーマなどによって追加できる項目も変わり、フッターや記事下などサイドバーだけじゃない場所も編集できるものもあったり、自分でウィジェットを作ることも可能です。

普通のホームページの場合は、HTMLなどのタグを書き込んだりしなければいけませんが、Wordpressの場合はこのウィジェット機能によって付箋のようにペタペタと貼ったり場所を変えたりすることができます。

実際に使って貰えばわかると思いますが非常に簡単です。

しかしウィジェットの操作の仕方はどれも変わらないので、これからお話するやり方を覚えておけばどのようなテーマでも問題なく設定をすることができるので安心してください。

それでは、実際の使い方を解説をしていきましょう。

2.ウィジェットを追加・変更・削除する方法

それでは、実際にウィジェットの使い方を網羅的に図解を使って解説をしていきたいと思います。

まずはウィジェットの設定画面を表示をしていきましょう。

WordPressの管理画面の左側のメニューから「外観」をクリックし「ウィジェット」をクリックをするとウィジェットの設定画面を表示をすることができるようになります。

ACTION

外観をクリック
ウィジェットをクリック

ここでウィジェットを全般的に設定することができます。

ACTION

①ウィジェットの設定画面を開く

では、次にウィジェットの各種項目を解説していきましょう。

2-2.ウィジェット各種項目をチェックする

下記の設定画面は、ハミングバードというワードプレステンプレートの場合の例ですから項目が少なかったり多かったりして違っている!と焦る必要はありません。

まず、このウィジェットの画面を解説していきます。

・左側が利用できるウィジェットの欄
・右側がウィジェットで編集できる項目

です。左側には「RSS」や「カテゴリー」など追加できるウィジェットが一覧で表示されていて、この項目を右側の項目にペタペタと貼り付けたり剥がしたりして設定をすることができます。

右側には以下の6つの項目がありますね。

・検索
・最新の投稿
・最近のコメント
・アーカイブ
・カテゴリー
・メタ情報

これらの左側の項目を右側にそれぞれ設定をすることができるようです。これはテンプレートによって変わってくるので各項目を見てどこを変更できるのかを予測するか、わからなければ実際にプラグインを導入してみて確認するといいでしょう。

2-5.ボックスを開く

ウィジェットを追加しようとする時に上の図のようにボックスが閉じてしまっている場合は、右側の「▼」をクリックすれば開くことができます。

ACTION

①ブログサイドバーの右側の「▼」をクリックして開く

ウィジェットを追加する際はボックスを開いてから追加していきましょう。

2-3.ウィジェットを追加する

それでは、実際にウィジェットを追加していきましょう。追加の仕方は簡単で左側の項目から追加したいウィジェットを右側の表示したい場所にドラッグ&ドロップするだけです。

とりあえず1つを選んで下記のように左側の利用できるウィジェットから右側に追加をしてみましょう。

ACTION

①追加したい項目を左→右にドラッグ&ドロップ

今回は例としてカテゴリーを追加しましたが、利用できるウィジェットから挿入したいところに貼り付けると追加され編集をすることができるようになります。

では、次に編集方法について解説をしていきます。

2-6.ドラッグ&ドロップができない場合

ドラッグ&ドロップをしてもウィジェットを追加できない場合がありますが、その際はとりあえず、ドラッグ&ドロップ以外の追加の方法をやりましょう。

やることは簡単で追加したいウィジェットをクリックして(例題としてカテゴリーでやってみますね)

ACTION

①追加したいウィジェットをクリックする

追加したい場所のボタンを選択してウィジェットを追加をクリックすれば追加されます。

ACTION

①追加したい場所を選択してウィジェットを追加をクリック

これで追加できました。

※ドラッグ&ドロップで追加ができないということは並び替えなどができなくなっている可能性があるのでできないのであれば解決をしておいたほうがいいです。

2-7.各種ウィジェットを設定する

挿入したウィジェットは設定をすることができますが、設定内容はウィジェットによって変わってきます。

今回は先程のカテゴリの設定をしていきます。(テキストについては後で解説していきます。)

まず、どのウィジェットでも設定することになるのがタイトルです。

今回はカテゴリーのウィジェットを例に解説しているのでタイトルは「Category」にして、カテゴリーの表示方法を選択をしていますが、タイトル以外に関してはウィジェット毎に設定の項目が変わります。

必要な設定や編集が完了したら保存をクリックしましょう。

あといくつか気になるウィジェットを適当に挿入してください。

ある程度貼り付けたらウィジェットが追加されたのかを一度WordPressページを見て確認をしましょう。

ちなみにタイトルを入力しなければ空白になるので表示したくない項目の場合は入力する必要はありません。

2-8.ウィジェットの並び替え

それでは、ウィジェットが表示されているのかを確認したら次にウィジェットの並び替えをしていこうと思いますが、並び替えも追加と同じようにドラッグ&ドロップで簡単に変更することができます。

要領は先ほどと一緒です。

並び替えが終わったら保存などしなくてもいいので実際に確認をしてみてください。

下図を見ていただけるとわかるのですが、先ほどは並び方が左(ピンクの枠)だったのに対して、並べ替えをしたことによって右(紫の枠)のようになりました。

このように非常に簡単に並び替えをおこなうことができます。

2-9.ウィジェットの停止方法

では、次に一度設定したウィジェットを停止し表示をさせない方法について解説していきます。

ウィジェットは、「停止」と「削除」がありまた使う可能性のあるウィジェットは、後に必要になった時に簡単に際挿入することができるので、「停止」をしましょう。

停止方法は簡単で左側の項目の「停止中のウィジェット」の場所にドラッグ&ドロップをするだけです。

今回は例題として「検索」のウィジェットでやってみましょう。

「検索」のウィジェットを「使用停止中のウィジェット」までドラッグ&ドロップします。

ACTION

①停止したいウィジェットを選ぶ
②「使用停止中のウィジェット」へドラッグ&ドロップ

これでできました。
停止をすると、設定した内容はそのままで保存されるので非常に便利です。

2-10.ウィジェットの削除方法

では、最後にウィジェットの削除方法にかんしてかいせつをしていきます。先ほどの停止と違って二度と使うことのないウィジェットや設定していないウィジェットを消す場合は削除をしていきましょう。

削除の方法は非常に簡単で、削除したいウィジェットの右側の「▼」をクリックして開いて

ACTION

①削除したいウィジェットを選択し、右側にある▼をクリック

左下の「削除」のリンクをクリックするだけです。

ACTION

①削除をクリックする

これで削除ができました。

停止と違って設定内容も全て消えてしまうので誤って削除しないように気をつけてください。

3.ウィジェットオススメカスタマイズ作成法●選

さて、ここまでウィジェットの基本的な操作を解説してきましたが使い方は大体覚えましたか?

それではここからは、「どんなウィジェットを挿入すればいいのかわからない。」という方向けに最も典型的なオススメウィジェットを紹介しながら設定方法を図解で解説をしていきますので、解説通りにやればウィジェットの使い方と最低限の設定ができるようになるので、そのままやってみてください。

それではいってみましょう。

3-1.ウィジェットを追加する

では、ここでは例として最も典型的なブログで使われているオススメのサイドバーのウィジェットを例に解説をしていきますが今回挿入するのは以下の5つです。

・検索窓
・カテゴリー
・テキスト
・新着記事
・タグ

本来は新着記事の部分を人気記事ランキングにしたいところですが、プラグインを挿入しないといけないので今回は見送ります。(人気記事ランキングを挿入したいのならば、Wordpress●●のプラグインを導入しましょう。

それでは、実際にウィジェットに各種項目をドラッグ&ドロップで挿入していきましょう。

順番を間違えないように注意してください。

ACTION

①ウィジェットを左から右へドラッグ&ドロップして順番通りに並べる

貼り付けが終わったら一度ページを確認して編集をしていきます。

こんな感じでできましたか?

それでは上から順番に解説をしていきますね。

3-2.検索窓

検索窓は、あなたのウェブサイト内のコンテンツを検索できるウィジェットですが、ユーザーがコンテンツを探す際に使われます。

コンテンツ量が少ない時には必要ないかもしれませんがとりあえずお試しで導入しましょう。

検索窓はタイトルを設定するだけですが・・・

ここでは試しに「検索」や「SERCH」などを赤枠の部分に挿入することもできますが、今回はタイトルもなしでいきます。

3-3.カテゴリー

そしたら次にカテゴリーを挿入していきます。カテゴリーの設定をしていなくても挿入はできるのでまだカテゴリーの設定をしていないのでしたら後でカテゴリーの設定をしていってください。

では、ドラッグ&ドロップでカテゴリーを挿入していきましょう。

ACTION

①「カテゴリー」をドラッグ&ドロップ

挿入しおわったら、次に設定をしていきます。

タイトルの欄に「Category」と入力をして、チェックボックスのところは「投稿数を表示」・「階層を表示」で選択をしてください。

ACTION

①タイトルの欄に「Category」と入力
②「投稿数を表示」・「階層を表示」のチェックボックスにチェックを入れる
保存ボタンをクリック

テンプレートによってはデザインが崩れてしまう場合があるので、そういう場合は「階層を表示」のみを選択してください。

 

ACTION

①デザインが崩れてしまう場合は「階層を表示」のチェックボックスのみにチェックをいれる。
保存ボタンをクリック

3-4. テキストウィジェットでプロフィール作成

次はプロフィールを作っていきますが、プロフィールはテキストウィジェットで作っていきます。

ただ、テキストウィジェットは、投稿などのようにビジュアルエディターではないのでそのまま文字をいれてもうまく反映されないので投稿画面のビジュアルエディターで一度作成してからコピー&ペーストで貼り付けていきます。

実際にやっていきましょう。

3-4-1.投稿画面を開く

「投稿」→「新規追加」で記事投稿の画面を開きます。

ACTION

投稿[btn4]をクリック
②[btn4]新規追加[btn4]をクリック

3-4-2.ビジュアルエディターでプロフィールを作る

投稿記事を書く部分にプロフィールにのせたい文章を書きます。
写真をいれたい方は、[btn4]メディアを追加で、載せたい画像を追加し、挿入します。

ACTION

①投稿記事を書く欄にプロフィールに載せたい文章を書く
②写真を入れたい場合はメディアを追加で載せ画像を追加し挿入する

3-4-3.テキストエディターを開きコピーをする

「ビジュアル」タブの横にある「テキスト」モードに切り替えます。
そうすると、写真画像の部分がこのような暗号みたいなタグに変換されます。

ACTION

ビジュアルモードタブの横にあるテキストタブをクリック

これらすべてを選択し、コピーをします。
文章の全選択は「Ctrl」キーを押しながら「A」ボタンを押すとできます。
さらに「Ctrl」キーを押しながら「C」ボタンを押すとコピーできます。

ACTION

①Ctrl+Aで全選択し、Ctrl+Cでコピーをする。

3-4-4.再びウィジェット画面に挿入する

ペーストする時に「テキスト」モードにするのを忘れないようにします。
タイトルも入れたら、「保存」ボタンをクリックします。

ACTION

①ペーストする時に「テキスト」モードにする
②タイトルを入力したら保存ボタンをクリックする。

3-4-5.保存をし確認をする

これで完成しました。


このようにプロフィールが完成するとちょっとテンション上がりますよね(笑)

基本的にHTMLなどに詳しくないのならば、この作り方が最も簡単ですので、他にもバナーやオプトインなど追加したいものがあるのならばこのやり方で挿入していきましょう。

注意1:隠しリンクはペナルティーの原因になる可能性が高いので絶対に挿入しないようにしましょう。
注意2:ウィジェットのリンクで外部リンクを指定する場合はSEOではnofolowの設定をしておくのがいいです。

3-5.新着記事

プロフィールが終わったらその下の新着記事をいれていきましょう。カテゴリーと同じ要領で作ることができるはずです。

タイトルは「新着記事・New Contents」などにし、表示する投稿数はお好な数値をいれて保存をクリックしてください。

ACTION

①タイトルに「新着記事・New Contents」などを入力する。
②表示する投稿数はお好な数値をいれる
保存をクリック。

もし、ここに人気記事ランキングを挿入したい場合は、●●●の記事を見て貰えばプラグインの挿入から設定方法まで図解で解説しているのでそちらをご覧になってください。

では、以上で全てのウィジェットの挿入が終わりましたので一度確認してみましょう。

あと、好みに合わせて同じ要領で

・広告
・ソーシャルボタン
・目次

などを挿入すれば完了です。

最後に

ウィジェットは非常に簡単にWordpressのサイドバーなどの機能やデザインを変更することができます。

このトーラスウェブは1カラムのためサイドバーを利用していないですが、2カラムでの運営には必ず導入しておきましょう。

ウィジェットで挿入したいものがあるのならば、検索をすれば結構なんでも出てくるので是非用途に合わせてカスタマイズをしてください。

 

  • このエントリーをはてなブックマークに追加
Comment form

*