文中の説明画像をクリックすると拡大します。
WordPressのサイドバーってどうやってカスタマイズするの？
WordPressでWebサイトやブログを運営する時、サイドバーをカスタマイズすることで、訪問者にとって使いやすくなるだけでなく、Webサイトやブログに個性を出すこともできると思います。
WordPressのサイドバーのカスタマイズには大きくわけて2つの方法があります。
- ウィジェットを使ってカスタマイズする方法
- sidebar.phpのコードを編集してカスタマイズする方法
「ウィジェット」とは、WordPressのデータを簡単に利用できるようにした部品のようなものです。
使用するテーマによっては、ウィジェットが登録されていないことがあるかもしれません。
このような場合は、functions.phpやsidebar.phpに、ウィジェットを使うためのコードを追記する必要があります。
この方法については、最後に紹介します。
サイドバーの使い方は、Webサイトやブログの運営者によって異なりますが、ナビゲーションメニューや最新の投稿一覧、人気記事一覧、月別アーカイブ、アフィリエイト広告、カレンダーなどを表示させることが一般的です。
サイドバーは、各ページへの存在や各ページへの経路を示し、または様々な機能を設置する役割を担うことになるでしょう。
WordPressのサイドバーをカスタマイズする方法（テーマ「Twenty Sixteen」を使った場合）
それでは、具体的にサイドバーのカスタマイズを行いましょう。
ウィジェットを使ってサイドバーのカスタマイズを解説しますが、テーマによって、デフォルトで使用できるウィジェットは違います。
今回は、WordPressのデフォルトテーマの中でも、ブログのレイアウトに近いテーマ「Twenty Sixteen」を使って説明します。
他のテーマを使っている場合でも、サイドバーのカスタマイズの流れはさほど変わらないと思いますが、個々の箇所についてはご利用のテーマをご覧ください。
まず、ウィジェットを使ってサイドバーをカスタマイズします。
ウィジェットを使ってサイドバーをカスタマイズする
WordPressの管理画面「外観」から、「ウィジェット」を選択しましょう。
「利用できるウィジェット」には、ブログに追加できるウィジェットの一覧が表示されています。
画面の右側に「サイドバー」という領域がありますが、ここには、テーマが最初から用意している「ウィジェットを登録するための領域」が表示されています。
すでに、いくつかのウィジェットが登録されていることがわかります。
「Twenty Sixteen」の場合は、「サイドバー」の領域に「利用できるウィジェット」を登録していく、という使い方でサイドバーをカスタマイズできます。
具体的に見ていきましょう。
例えばサイドバーにカレンダーを追加してみます。
「利用できるウィジェット」の中にある「カレンダー」を、「サイドバー」までドラッグアンドドロップします。
そうすると、サイドバーの中に「カレンダー」のウィジェットが追加されます。
実際に、ブラウザでブログのサイドバーにカレンダーが追加されているかを確認しましょう。
サイドバーの一番上に「カレンダー」が追加されていたら、ウィジェットの設定は成功です。
同じような手順で、「検索」のウィジェットも追加しましょう。
一番上に「検索」のウィジェットを追加しました。これもブラウザで確認しましょう。
「カレンダー」ウィジェットの上に、「検索」ウィジェットが追加されています。
今回紹介したテーマ「Twenty Sixteen」には、他にも様々なウィジェットがあります。
例えば、「カテゴリー」のウィジェットを追加すると、サイドバーにカテゴリーアーカイブへのリンクリストが表示されます。
追加したウィジェットを削除するには、削除したいウィジェットを「利用できるウィジェット」のエリアにドラッグアンドドロップします。
ウィジェットには他にも様々なものがありますが、テーマによって使えるウィジェットは異なることがあります。
ウィジェットがたくさんあればよいというわけではない
ところで、「せっかく用意されているから、できるだけたくさんのウィジェットを使ってみよう」と思うかもしれません。
すぐに様々な機能が設定ができて、便利だからです。
しかし、サイドバーにウィジェットがたくさん使われていると、Webページの表示が遅くなったり、表示上サイドバーが縦に長くなりすぎたりすることがあります。
あまり使わないようなウィジェットが設置してあっても、そのスペースを割く意味がないでしょう。
これが極端になってくると、訪問者にとって使いやすいページとは言えません。
サイドバーにウィジェットを登録する前に、本当に必要なウィジェットは何なのかを決めて導入するのが理想だと思います。
もちろん、事前に全てを決めるのは難しいので、実際に入れてみて機能を確認しながら選ぶのでよいと思います。
カスタムメニューをウィジェットとして表示させる方法
WordPressには、「カスタムメニュー」という機能があります。
これは、WordPressで管理されている固定ページや投稿などの各ページへのリンクを、ひと固まりの「メニュー」として使うことができる機能です。
WordPressではこの「カスタムメニュー」を、ウィジェットのパーツとして追加することも可能です。
まず、カスタムメニューの作り方から説明して、それをウィジェットに設定するまでの流れを紹介します。
WordPressの管理画面「外観」から「メニュー」を開き、「新規メニューを作成」をクリックします。
「メニュー名」に好きな名称（ここでは例として「サイドバーメニュー」）を設定して、「メニューを作成」ボタンをクリックします。
作成したメニューに表示したいページを、追加します。
ここでは、「プライバシーポリシー」と「サンプルページ」を入れてみます。
「メニューに追加」ボタンをクリックすると、「メニュー構造」にメニューが表示されます。
メニュー構造を確認して、OKなら「メニューを保存」ボタンをクリックしましょう。
これで、カスタムメニューの設定は完了です。
「サイドバーメニューを更新しました。」のメッセージを確認しましょう。
次に、作成したメニューをウィジェットとして表示させます。ウィジェトの設定画面を開きましょう。
メニューを表示させるウィジェットは「ナビゲーションメニュー」ウィジェトです。
「ナビゲーションメニュー」をクリックしたら、「サイドバー」をクリックして「ウィジェットを追加」ボタンをクリックしましょう。
「サイドバー」の一番下に、「ナビゲーションメニュー」ウィジェットが追加されます。
「メニューを選択」のドロップダウンから、さきほど設定した「サイドバーメニュー」を選択して「保存」ボタンをクリックしましょう。
メニューをウィジェットとして使う方法は、以上です。実際に、ブラウザでサイドバーを確認しましょう。
サイドバーの一番下に、「プライバシーポリシー」と「サンプルページ」の入ったメニューが表示されていることがわかります。
sidebar.phpを編集してサイドバーをカスタマイズする方法
テーマに用意されている「sidebar.php」を編集してサイドバーをカスタマイズする方法を、紹介します
sidebar.phpを編集する方法は、直接PHPやHTMLを記述してカスタマイズできるため、ウィジェットを使う方法より柔軟なカスタマイズが可能です。
しかし、WordPressのカスタマイズの知識などが要求されるため、思い通りのカスタマイズをするのは初級者にとってはハードルは高いかも知れません。
また、使用しているテーマによってはsidebar.phpという名称のテンプレートファイルが存在しないこともあります。
その場合、サイドバーのカスタマイズをするためのテンプレートファイルがどういう名称のファイルなのかを、予め調べておく必要があります。
今回は、sidebar.phpが存在するテーマ「Twenty Sixteen」を使用します。
例として、サイドバーに「検索フォーム」を追加するためのPHPのコードは、以下の通りです。
【PHP】
<?php get_search_form(); ?>
「最近の投稿一覧（5件）」を表示するコードは、以下の通りです。
【PHP】
<h3>最近の投稿</h3> <ul> <?php wp_get_archives( 'type=postbypost&limit=5' ); ?> </ul>
「カテゴリーアーカイブリスト」を表示するコードは、以下の通りです。
【PHP】
<h3>カテゴリー</h3> <ul> <?php wp_list_categories( 'title_li=' ); ?> </ul>
「カレンダー」を表示するコードは、以下の通りです。
【PHP】
<?php get_calendar(); ?>
上記で紹介したコードをsidebar.phpに追記することで、自由にサイドバーのカスタマイズができます。
functions.phpからサイドバーのウィジェットメニューを表示する
オリジナルテーマを使用している場合、「ウィジェット」機能が搭載されていない場合があります。
そのため、functions.phpに記述を追加してサイドバーを表示させる必要があります。
実際に記述して「ウィジェット」機能を追加してみましょう。
なお、functions.phpで記述ミスをすると、場合によってはWordPressの画面が真白になり、管理画面（ダッシュボード）にさえ戻れなくなることがありますので、慎重に行いましょう。
テーマファイルの編集は、可能であればローカル（パソコン上）でテキストエディタを使っての編集、FTPアップロードの方法をお勧めします。以下のページをご覧ください。
もし、画面が真白になったら、慌てずに対処しましょう。こちらのページをご覧ください。
functions.phpに以下のコードを追記します。
【functions.php】
//サイドバーにウィジェット追加
function widgetarea_init() {
register_sidebar(array(
'name'=>'オリジナルサイドバー',
'id' => 'side-widget',
'before_widget'=>'<div id="%1$s" class="%2$s sidebar-wrapper">',
'after_widget'=>'</div>',
'before_title' => '<h4 class="sidebar-title">',
'after_title' => '</h4>'
));
}
add_action( 'widgets_init', 'widgetarea_init' );
上記のコードの中の以下の箇所は、ウィジェットを格納するサイドバーを識別するための項目です。
'name'=>'オリジナルサイドバー', 'id' => 'side-widget',
また、以下のコードは、設置したウィジェットを囲むHTMLタグと、ウィジェットのタイトルに設定する見出しタグを設定しています。ここは、基本的にこのままで問題ありません。
'before_widget'=>'<div id="%1$s" class="%2$s sidebar-wrapper">', 'after_widget'=>'</div>', 'before_title' => '<h4 class="sidebar-title">', 'after_title' => '</h4>'
最後にsidebar.phpを編集して、オリジナルサイドバーが表示されるようにします。
【sidebar.php】
<?php dynamic_sidebar('side-widget'); ?>
「side-widget」の部分は、さきほど記述した「'id' => 'side-widget'」の「side-widget」の部分に対応しています。
複数のサイドバーを作成したい場合は、「side-widget」の箇所が重複しないような文字列に設定しましょう。
まとめ
- サイドバーのカスタマイズは、メニューやウィジェットから簡単にできる。
- sidebar.phpに記述してカスタマイズすることも可能。
- ウィジェットメニューがない場合は、functions.phpにコードを記述することでサイドバーを表示できる。
