WordPress

表示されない?!WordPressウィジェットの作成・編集方法・おすすめまで完全解説

tree 200795 1920 - 表示されない?!Wordpressウィジェットの作成・編集方法・おすすめまで完全解説

WordPressの「ウィジェット」という言葉を耳にしたことはあるでしょうか?

実は、Wordpressではウィジェットを使うことで、コードを書き直さなくても簡単に機能を追加することができます。

そこで今回は、ウィジェットの作成方法や編集方法、おすすめのウィジェットをご紹介します。

WordPressで登場するウィジェットとは?

tools 1209300 640 - 表示されない?!Wordpressウィジェットの作成・編集方法・おすすめまで完全解説

まず、ウィジェットとは、日本語に訳すと「部品」や「小型装置」という意味を指します。

WordPressにおいては、「Webサイトのサイドバーなどを簡単に編集できる便利な機能」を指します。

ウィジェットを使うと、SNSのシェアボタンや人気投稿一覧、記事のカテゴリなどを表示できるようになります。PHPの知識があれば、独自のウィジェットエリアを作成できます。

管理画面から「どんなウィジェットを追加するのか」、「どこにウィジェットを表示するか」設定できます。

ウィジェットを使う3つのメリット

ウィジェットを使うメリットは以下の3つがあります。

  • ソースコードを書き直す必要がない
  • 管理画面から簡単に設定できる
  • 同じウィジェットを別のエリアに設置することができる

「どのエリアにどのウィジェットを追加するのか」ということもドラッグアンドドロップで簡単に設定することができます。

WordPressのウィジェットの作り方

tool 1957451 640 - 表示されない?!Wordpressウィジェットの作成・編集方法・おすすめまで完全解説

続いて、ウィジェットの自作方法についてお伝えします。

ウィジェットを自作するためには、自分で「functions.php」にソースコードを記述する必要があります。PHPの知識が必要になるので、初心者の方は少し難しく感じるかもしれません。

実際、「functions.php」に1つでも間違いがあると、正しく動作しなかったり、管理画面にログインできなくなったりするので注意しましょう。

そのため、ファイルを変更する前に必ずバックアップを取っておきましょう。

続いて、ウィジェットを作成するために最低限記述しておくべきコードを紹介します。

ウィジェットを作成するために必要なコード(コピペOK)

以下のコードをひな形として使ってみましょう。

(ちなみに「/*~*/」や「//~~」は、コメントアウトです。メモ書きのようなものだと思ってもらって大丈夫です。)

この中に処理を書き加えてウィジェットを作ることができます。ウィジェットの名前はわかりやすい名前になっていれば、どんな名前を付けてもOKです。

ウィジェットを作るための関数などは細かく決められています。使う関数はコピペすれば大丈夫です。

なお、このサンプルコードは以下のサイトを参考にしています。(WORDPRESS Codex 日本版「WordPress ウィジェット API」より)

WordPressのウィジェットの追加方法

tax 468440 640 - 表示されない?!Wordpressウィジェットの作成・編集方法・おすすめまで完全解説

続いて、ウィジェットの追加は簡単です。

左側のメニュー→「外観」→「ウィジェット」をクリックしましょう。すると、以下のような画面が表示されます。

widget - 表示されない?!Wordpressウィジェットの作成・編集方法・おすすめまで完全解説

その後、追加したいウィジェットをドラッグアンドドロップすると、ウィジェットが追加されます。

逆に、使用を停止したいウィジェットを左側にドラッグアンドドロップすると、使用を停止することができます。

固定ページや投稿ページに追加する場合のやり方

投稿ページや固定ページにウィジェットを追加できるようなプラグインがあります。プラグインによっては自分でレイアウトを設定できることもあります。

Page Builder

https://ja.wordpress.org/plugins/siteorigin-panels/

「Page Builder」は、ウィジェットを固定ページに追加できるプラグインです。

投稿ページ上でレイアウトやウィジェットタイトルの設定もできるので、わざわざ別のページに移動して設定する必要もありません。

投稿ページに「ビジュアル」、「テキスト」のほかに「Page Builder」というタブが新たに追加されます。この画面からウィジェットの設定を行うことができます。

page builder - 表示されない?!Wordpressウィジェットの作成・編集方法・おすすめまで完全解説

任意の位置に追加する場合のやり方

使用するテーマによっては、ウィジェットを設置したい場所にウィジェットがないことがあります。そんなときは「functions.php」を編集してウィジェットを追加しましょう。

手順としては以下のようになります。

  1. 「functions.php」にコードを記述する
  2. テーマのファイルにショートコードを記述する
  3. 管理画面からウィジェットの設定をする

①「functions.php」にコードを記述する

「functions.php」に以下のコードを記述することによって、ウィジェットが使えるようになる関数を設定できます。

なお、コードを記述する前に必ずバックアップを取っておきましょう。

実際にコードを書くと、以下のようになります。

さらに、ウィジェットを追加したい場合は、「id」を別の名前に変えて記述することで追加できます。

② テーマのファイルにショートコードを記述する

このままの状態では、設定画面からウィジェットを追加できません。テーマ内のファイルにウィジェットを呼び出すためのコードを記述しましょう。

③ 管理画面からウィジェットの設定をする

最後に、管理画面からどのウィジェットをどのエリアに追加するのか設定しましょう。

実際にWebサイト上で確認して正しくウィジェットを設置できているかチェックしておいてくださいね。

WordPressのウィジェットの編集方法

iphone 518101 640 - 表示されない?!Wordpressウィジェットの作成・編集方法・おすすめまで完全解説

管理画面でウィジェットを任意の場所にドラッグアンドドロップすると、追加したいウィジェットの編集ができるようになります。

また、ウィジェットの右側にある▼をクリックすると、ボックスが開いて編集ができる状態になります。

例えば、「最近の投稿を何記事表示するのか」や「投稿日を表示するのか」といったように細かな設定ができます。

ウィジェットで画像を表示したいときは

リンク付きの画像をウィジェットに使いたいと思ったことはありませんか?

ウィジェットの設定で直接HTMLの記述をすれば表示することはできます。(少し強引なやり方ではありますが…)しかし、この方法は少し面倒だと感じる方も多いでしょう。

ウィジェットに画像を表示できるImage Widget

そこで、「Image Widget」というプラグインを使うと、ウィジェットに画像を表示できるようになります。

「Image Widget」は、インストールして有効化するだけですぐに使えるようになります。ウィジェットの編集画面では、「画像ウィジェット」と表示されます。

事前にウィジェットで表示させたい画像をアップロードしておきましょう。

必要な設定項目に入力を行い、「保存」をクリックしてください。すると、ウィジェットエリアに画像付きのリンクが表示されます。

image widget - 表示されない?!Wordpressウィジェットの作成・編集方法・おすすめまで完全解説

WordPressでウィジェットが表示されないときは…

hand 982062 640 - 表示されない?!Wordpressウィジェットの作成・編集方法・おすすめまで完全解説

稀にウィジェットの設定をしても正しく表示されないことがあります。そんな時は、以下の項目のチェックをしてみましょう。

「functions.php」の記述は正しいか?

ウィジェットエリアを自分で新たに追加した場合は、要注意です。

PHPファイルは記述ミスがあってもエラー表示されることはありません。そのため、自分で記述した部分を確認してみましょう。

特にスペルミスは見落としやすいので注意しましょう。見落としやすい記述ミスは以下の3つが挙げられます。

  • 「’(カンマ)」や「‘ ’(シングルクォーテーション)」が抜けていないか
  • 単語のスペルミスがないか
  • 「id」に大文字が含まれていないか(大文字が含まれている場合は表示されません)

設定したウィジェットが保存されているか?

次に「設定したウィジェットが正しく保存されているか」確認してみましょう。最後に「変更を保存」をクリックしなかったため、設定が保存されていない場合もあります。

また、「それぞれのウィジェットの設定が正しく保存されているか」確認してみましょう。

WordPressでおすすめのウィジェット

workstation 405768 640 - 表示されない?!Wordpressウィジェットの作成・編集方法・おすすめまで完全解説

最後に、おすすめのウィジェットや定番のウィジェットを紹介します。

どんなウィジェットを追加しようか悩んでいる方には、例えばオーソドックスに下記のようなウィジェットをいれてみてはいかがでしょうか?

おすすめのウィジェット
  • 最近の投稿
  • 人気記事一覧
  • サイト内検索
  • カテゴリ一覧
  • お問い合わせ

例えば、「人気記事一覧」や「最近の投稿」を表示しておくと、1ページだけでなく複数のページを見てもらえる可能性も上がります。

なお、あらかじめ用意されているウィジェットも多数あるので、あなた好みのウィジェットを組み合わせて使ってみても良いでしょう。

WordPressのウィジェットに関するまとめ

以上、いかがでしたか?

今回はWordPressのウィジェット機能についてお伝えしました。直接、ソースコードをいじらなくても、追加できるウィジェットは多いです。

おすすめのウィジェットとして紹介したウィジェットを使って、オリジナルサイトを作ってみてはいかがでしょうか?

最後まで読んでいただき、ありがとうございました。