初級者~中級者向け

【基本】サイドバーのカスタマイズ、どうやってやるの?

文中の説明画像をクリックすると拡大します。

LINEで送る
Pocket

この記事は約6分で読めます。

サイドバーのカスタマイズ方法

WordPressでサイドバーをカスタマイズする方法は、以下のいずれかになります。

  1. メニューやウィジェットをカスタマイズ
  2. sidebar.phpにコードを記述してカスタマイズ

テーマにウィジェットが登録されていない場合は、functions.phpやsidebar.phpに記述してサイドバーウィジェットを表示させる必要があります。

サイドバーをカスタマイズする狙いとしては、サイドバーにナビゲーション(メニュー)やサイト内検索、最近の投稿一覧、カレンダーなどを入れて、サイトの訪問者が求めているページを探しやすくしたり、サイトを使いやすくするため、と言えるでしょう。

サイトによっては、サイドバーを表示していないシンプルなレイアウトのものもありますが、表示させるべきものがあるならサイドバーに盛り込むことで、訪問者にとって使いやすいサイトになるでしょう。

どのような設計にしたいかを念頭に入れ、サイドバーをカスタマイズしていきましょう。

「小さな部品」という意味のウィジェットとはどういうものかは、こちらのページを参考にしてください。

【基本】WordPressのウィジェットって何?

メニューやウィジェットをカスタマイズ

初級者でも簡単にできる管理画面(ダッシュボード)からのサイドバーのカスタマイズについて説明します。

メニューを作成しサイドバーに追加する

1.WordPressの管理画面(ダッシュボード)から「外観」→「メニュー」を選択
2.メニューを作成し保存

3.作成したメニューに表示したいページを追加

4.「外観」→「カスタマイズ」を選択
5.カスタマイズ画面のページに変わるので、「ウィジェット」を選択

6.「ウィジェットを追加」→「ナビゲーションメニュー」を選択

7.先ほど作成したメニューを選択し、タイトルをつける
8.デモが表示されるので、確認してから「完了」を選択
9.「公開」を選択して内容を保存する

これで作成したメニューをサイドバーに追加することができます。

ウィジェットから追加する

ウィジェットからは、細かい機能を追加することが可能です。また、先ほど作成したメニューを編集・削除することもできます。

sidebar.phpからカスタマイズ

ここまでは、ウィジェットを活用して簡単に作成する方法でしたが、もっと自由にカスタマイズする方法があります。それは、直接sidebar.phpにコードを記述する方法です。

HTML・CSSの知識があれば、直接コードをいじることで自由にサイドバーを編集することができます。実際のカスタマイズ例を紹介します。

sidebar.phpを開きます。
<aside></aside>タグの中に以下のコードを記述します。

検索フォームを追加

<?php get_search_form(); ?>

最近の投稿を追加(5件まで表示の例)

<h3>最近の投稿</h3>
<ul>
<?php wp_get_archives( 'type=postbypost&limit=5' ); ?>
</ul>

カテゴリーを追加

<h3>カテゴリー</h3>
<ul>
<?php wp_list_categories( 'title_li=' ); ?>
</ul>

カレンダーを表示

<?php get_calendar(); ?>

このように見出しタグ(ここでは<h3>)を活用するなどして、自由にカスタマイズすることができます。

functions.phpからサイドバーのウィジェットメニューを表示する

オリジナルテーマを使用している場合、「ウィジェット」機能が搭載されていない場合があります。そのため、functions.phpに記述を追加してサイドバーを表示させる必要があります。

実際に記述して「ウィジェット」機能を追加してみましょう。

functions.phpで記述ミスをすると、場合によってはWordPressの画面が真白になり、編集どころか管理画面(ダッシュボード)にさえ戻れなくなることがありますので、慎重に行いましょう。

もし画面が真白になったら、慌てずに対処しましょう。こちらのページを見ておいてください。

【恐怖】WordPressで画面が真白になった!どうすればいい?

まず、「外観」→「テーマの編集」から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' => ‘sidebar.phpに記述する名前’,」
となります。
今回の場合、ウィジェットの管理画面に表示される名前は「サイドバー」、sidebar.phpに後から記述する名前は「side-widget」です。

また、以下の部分は、実際のページに表示される部分をここでは<h4></h4>で括っていますが、<h2></h2>や<p></p>など、他のタグに変更しても大丈夫です。

'before_title' => '<h4 class="sidebar-title">',
'after_title' => '</h4>’

続いて、sidebar.phpを開き、コードを記述してサイドバーに登録したウィジェットを表示させます。

<?php dynamic_sidebar( 'side-widget' ); ?>

<?php dynamic_sidebar( 'side-widget' ); ?>

このコードを記述する場所は、<aside></aside>タグの中に記述しましょう。これでウィジェットメニューからサイドバーを作成・表示することができます。

 

まとめ

  • サイドバーのカスタマイズは、メニューやウィジェットから簡単にできる。
  • sidebar.phpに記述してカスタマイズすることも可能。
  • ウィジェットメニューがない場合は、functions.phpにコードを記述することでサイドバーを表示できる。
LINEで送る
Pocket