【 WordPress 】 オリジナルテーマにカスタムサイドバーを追加するよ 投資家のFIREへの旅路 第307回

WordPressのオリジナルテーマにカスタマイズ可能なサイドバーを追加する方法を解説します！！

プラグインとコードコピペで完了です。

【 Custom Sidebars 】

まずは、Custom Sidebars というプラグインをインストールします！
このプラグインは、Classic Widgetsというプラグインとセットで使用する必要があります。

【 Classic Widgets 】

続いて、こちらをインストールします。

【 サイドバーをカスタマイズ 】

外観 →
ウィジェット →
新しいサイドバーを作成する →
サイドバーの名前を決める

と進みます。

今回はブログ一覧ページに設置したいので、名前を
「blog -page -sidebar」にしました。

「利用できるウィジェット」の項目から、
サイドバーに入れたいウィジェットを選択します。

今回は、
「検索」
「カテゴリー」
「最近の投稿」
を、入れてみました。

【 サイドバー追加をする 】

サイドバーを設置したい、固定ページ、または、投稿ページの画面へ移動します。

今回は、ブログ一覧ページに、サイドバーを設置したいので、

固定ページ　→
新規追加　　→
タイトル　＝　blog
スラッグ　＝　blog

と、しました。

このページの右下を見ると、

「サイドバー」という項目が追加されています。

Main Sliderというところをクリックすると、先程、名前をつけたサイドバーの名前「blog-page-sidebar」が選択できます。

【 functions.php 】

[functions.php]


/**サイドバーを有効にする */

function my_theme_widgets_init()
{
  register_sidebar(array(
    'name' => 'Main Sidebar',
    'id' => 'main-sidebar',
  ));
}
add_action('widgets_init', 'my_theme_widgets_init');

つづいては、オリジナルテーマでサイドバーを有効にするために
functions.phpにこのコードを追記します。

【 サイドバーを表示させるコード 】

      <?php if (is_active_sidebar('main-sidebar')) : ?>
        <ul class="menu">
          <?php dynamic_sidebar('main-sidebar'); ?>
        </ul>
      <?php endif; ?>

サイドバーを表示させたいページのPHPのファイルにこちらを追記します。

今回は、ブログ一覧を表示する固定ページにサイドバーを設置したいので、
先程作った、
固定ページ
タイトル blog
スラッグ blog

の、PHPファイルに追記することになります。

ちなみ、スラッグが、「blog」なので、
PHPファイルは、page-blog.php という名前にする必要があります。

【 サイドバーを装飾する 】

サイズなどを、調整しやすくするために、
<div>で囲んで、classを指定しました。

[page-blog.php]


    <div class="sidebar">

      <?php if (is_active_sidebar('main-sidebar')) : ?>
        <ul class="menu">
          <?php dynamic_sidebar('main-sidebar'); ?>
        </ul>
      <?php endif; ?>

    </div>

そして、SCSS(CSS)で、サイズや、色を指定します。

[SCSS]


    .sidebar {
      background-color: $backGroundColor3Gray;
      padding: 2% 3% 2% 0%;

      ul.menu {
        list-style: none;

        h2 {
          font-size: 20px;
          background-color: yellow;
          padding: 4px 0 4px 10px;
          border-radius: 50px 50px;
        }

        li {
          padding-bottom: 10px;
          width: 100%;
        } 

        a {
          color: gray;
          text-decoration: none;
          padding: 3%;
        }
      }
    }

このスタイルだと、こうなります。

【 コード解説 】

上記のコードで、このようなサイドバーができます。

ul.menuで、サイドバーのリストのスタイルを指定できます。
「カテゴリー」「WEBデザイン」「WEBマーケティング」「WordPress」などサイドバー全体の部分です。
今回は、list-style : none ;　として、リストの先頭の「・」を消しています。

h2は、「カテゴリー」「最新の投稿」の部分です。

l iは、「WEBデザイン」「WEBマーケティング」「WordPress」などの「カテゴリー」「最近の投稿」部分以外の部分です。
今回は、padding-bottom: 10px;　を指定して、余白をつけています。

a　は、「WEBデザイン」「WEBマーケティング」「WordPress」などのリンクとなる部分です。color: gray;    でリンク文字の色を指定しています。      text-decoration: none;　で、リンク文字の下線を消しています。

こんな感じで、色々カスタマイズできます！！