WordPressのウィジェットとは?カスタマイズ法とおすすめプラグイン

こんにちは。ライターのmuramatsuです。

WordPressを使っていてサイドバーやフッターにプロフィール、人気記事一覧やアーカイブなどのウィジェットを好きなように載せたい、順番を変えたいなど思ったことはありませんか?

テーマを決めたら次に設定したい項目でもありますよね。設定しているテーマによっても変わって来ますが、大体の無料のテーマでは簡単にウィジェットを設定することができます。

この記事ではWordpress初心者の方向けに

  • ウィジェットとは?
  • ウィジェットの設定方法
  • ウィジェットに関するおすすめプラグイン

と、中級者の方向けに

  • ウィジェットを自作でカスタマイズする方法

までを解説していきます。ウィジェットの使い方をマスターして、自分なりのサイトを作っていきましょう!

ウィジェットとは?

ウィジェットと聞いて、何それ?と初めは思われた方が多いのではないでしょうか?ウィジェットとは、記事一覧やコンテンツなどの機能を持ったプログラムのことを呼びます。

基本的な記事の構成はヘッダー、サイドバー、ボディー/ コンテンツ、フッターの要素でできています。

cons_ill

ウィジェットは、上の画像の赤枠で囲まれた部分、主にサイドバーや、ヘッダー・フッターに位置します。またウィジェットを置く範囲のことをウィジェットエリアと呼びます。

エリアを追加することで、サイドバーやヘッダー・フッター以外の場所にウィジェットを置くことができるので、独自のサイトを作ることができます。

デフォルトを設定・編集する

ここでは例として、WordpressのTwenty Sixteenのテーマで利用できるウィジェットを設定していきます。

ウィジェットの管理画面

ウィジェットの設定をするには、まず管理画面を開きます。ダッシュボードの「外観」からウィジェットを選択し画面を開きます。

open_wedget

open_wedget2

ここで設定を行なっていきます。なお、これから追加や編集するウィジェットの場所は、テーマTwenty Sixteenの場合、以下画像のメイン画面上で見ると

  • サイドバーは右側にある赤枠
  • コンテンツ下1はプレビュー左側の青枠
  • コンテンツ下2はプレビュー真中の緑枠

となります。

add_widget1

また記事のページでは、サイドバーは右側、コンテンツ下1はフッターの左側、コンテンツ下2はフッターの右側となります。

ウィジェットを追加する

既存のウィジェットの追加・表示方法は、利用可能なウィジェットをサイドバー、コンテンツ下1、コンテンツ下2の表示エリアに移動させるだけです。

add_widget

デフォルトではサイドバーに「検索」「最近の投稿」「アーカイブ」などがすでに設定されており、表示されるようになっています。

試しにサイドバーにカレンダーを追加してみましょう。左側の「カレンダー」から右側のサイドバーのところにドラッグ&ドロップして好きな場所に持っていきます。

add_widget2

サイドバーの近くに持っていくと自動的に四角い点線の枠が出てきて、どの場所に置くかのアシストをしてくれます。

またドラッグ&ドロップをしなくても、表示したいウィジェットをワンクリックすると以下のように表示されます。どこにウィジェットを表示したいかを選択してウィジェットを追加ボタンを押します。

add_widget6

ドラッグ&ドロップ、または追加をすると以下のようになり、タイトルを入力します。もしタイトルをつけたくない場合は、何も入力せずに完了を押します。

add_widget3

タイトルを入力、または何も入力せずに保存ボタンを押します。

add_widget4

記事のプレビュー画面で見てみると以下のようになりました。

add_widget5

サイドバーの中に追加したカレンダーが表示されていますね。

ウィジェットの内容を設定する

ウィジェットの内容を設定・編集することができます。「最近の投稿」「最近のコメント」などは、表示する投稿数、投稿日を指定して表示することができます。

post

「アーカイブ」や「カテゴリー」などのウィジェットはドロップダウン表示をしたり、投稿件数を表示したりすることができます。

archive

ドロップダウンと投稿件数の両方を選択した場合

archive0

投稿件数のみを選択した場合

archive3

「動画」「画像」「音声」ウィジェットは追加ボタンでフォルダから表示したいファイルを選択して保存します。

movie

「テキスト」や「カスタムHTML」では中にHTMLコードを書くことができます。

text

custom_THML

「テキスト」では画像や動画の他、TwitterやFacebookを埋め込むことができます。「カスタムHTML」では比較的新しい機能で、Java Scriptも記述でき広告や登録フォームなどの設定がやりやすくなっています。

その他にも、Wordpressのテーマによって色々なウィジェットがありますので、1つ1つ試してみるといいですね!

ウィジェットを並び替える

サイドバーに設定したウィジェットの順番を変えるには、ドラッグ&ドロップで置きたい場所に持っていきます。

switch

ウィジェットの使用を停止する

使用を停止する場合は、表示エリア(サイドバー)から「使用停止中のウィジェット」に停止したいウィジェットをドラッグ&ドロップで移します。「使用停止中のウィジェット」は「利用できるウィジェット」の下にあります。

stop

「使用停止中のウィジェット」に移した場合、登録した内容は保持されたまま、表示されなくなります。もし再度使用したい場合は、ウィジェットをサイドバーなど任意の表示エリアに移動させます。

ウィジェットを削除する

削除したいウィジェットの右側にある「▼」をワンクリックして、内容を表示させます。

delete1

左下にある削除ボタンを押すと、登録されていた内容が消去されます。

delete2

利用停止と違い、再利用はできませんので注意しましょう。

アクセシビリティモードで管理する

アクセシビリティモードとは、画面上での操作方法の仕組みで、ドラッグ&ドロップを行わない操作方法となります。通常初期設定では、アクセシビリティモードは無効になっているので、ドラッグ&ドロップを使いたくない、という方は「有効」にします。

「外観」>「ウィジェット」画面の右上にある表示オプションを押します。

option1

アクセシビリティモードを有効にするが表示されるので、ワンクリックします。

option2

すると以下のような表示に変わります。

option3

アクセシビリティモードが無効の時は表示されていなかった追加や編集ボタンが増えています。それぞれのウィジェットで「追加」または「編集」ボタンを押すと以下のような画面になります。

タイトルや表示方法や内容などを設定し、ウィジェットを保存することで登録され、削除ボタンで登録された内容の消去となります。

option4

ウィジェット画面では操作方法が2種類、アクセシビリティモードとそうでない場合での操作が可能です。自分のやりやすい操作方法を選んでみましょう。

おすすめプラグイン

デフォルトで設定されているウィジェットはテーマによって事なってきます。追加したい、自作したいウィジェットがあっても、

どうやって設定をしたらいいかわからない
コードを貼り付けるけど、具体的なやり方がわからない
プログラミングの言語がわからない
エラーが出たらどうしよう

などと初心者の方にとってはなかなか難しいですよね。そこで、プラグインを導入することにより悩みを一気に解決できます。ここではウィジェットに関するオススメのプラグインを紹介していきます。

Widget Logic

Widget_Logic

Widget Logicはそれぞれのウィジェットに、条件をつけることができるプラグインです。条件をつけることにより、ページや端末などによってウィジェットを表示させたり、非表示にすることが可能となります。

例えば、

  • 特定のページにのみカレンダーを表示させる
  • 特定のページに広告を表示させない
  • パソコンの場合はこの画像を表示させるけど、スマホの場合はこっちの画像を表示させる

などと、細かく条件を設定することができます。設定方法や使い方などは以下に記載されています。
https://netaone.com/wp/widget-logic/

Newpost Catch

Newpost_Catch

Newpost Catchは最近の投稿にサムネイル(小さい画像)をつけて投稿することができるプラグインです。最近のサイドバーではよく見かけるようになってきましたが、画像付きの項目は目を引くので、クリック率が上がるかもしれませんね。

設定方法や使い方は以下をご参考ください。
https://netaone.com/wp/newpost-catch/

Popular Posts

Popular_Posts

Popular Postsは人気記事を表示するプラグインです。サムネイルも載せられたり、ランキングの設定をすることができます。

今や人気一覧を載せるのは当たり前となっているので、ぜひ入れたいところですね。設定方法は以下のサイトに記載されています。
https://bazubu.com/how-to-add-popular-posts-23487.html

自作ウィジェットでカスタマイズ

WordPressをある程度使ってきている方などは、

あまりプラグインを増やしたくない
カスタマイズできることは、なるべく自分で自作したい

と思っているのではないでしょうか?

自作でカスタマイズすると、ウィジェットエリアを増やしたり、プラグインを使わずに欲しい機能のウィジェットを設定することができます。自作でウィジェットエリア、ウィジェット自体を作る場合、function.phpに必要なコードを入力します。

エラーが出てしまうことも考え、設定前にfunction.phpのバックアップを必ず取るようにしましょう。詳しいウィジェットエリアの登録・表示方法は以下の記事が参考になります。
http://hublog.biz/bwpb/how-to-add-display-and-conditional-branching-display-of-wordpress-widget-area/

簡単なウィジェットの作り方は以下の記事を参考にしてみてください。
http://wp.kikuchisan.net/wordpress-widget.html#i-2

またある程度のPHPやHTML、CSSの知識も必要になってきますので、それぞれ以下のサイトを参考にしてみてくださいね。PHPの基礎を学びたい方は、まずは以下の記事から読んでみてください。

HTMLの基礎を以下で詳しく説明しています。

WordPressでCSSを編集する方法についての解説は以下の記事を参考にしてください。

ウィジェットを作成するには、持たせたい機能をPHPコードで書いていくので、難しいなと思う方はプラグインを導入することから初めても良いかもしれませんね。

まとめ

今回は、Wordpress初心者の方にウィジェットとは何か、デフォルトのウィジェット設定方法、編集方法を解説しました。またオススメのプラグインも使ってぜひ素敵なサイトを作ってくださいね。

もしウィジェットの使い方に慣れてきた、プラグインだけじゃ物足りない!と思った時は、自作のウィジェット作りにトライしてみてください。

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

muramatsu

muramatsu

世界中の人たちと友達になって、その友達の家を巡る旅をしたいと密かに思っている。

複雑な内容を誰にでもわかりやすく、そして納得のいくような解説をする、をモットーにしています!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説