カテゴリー

1カラムのオリジナルテーマにサイドバーを追加

古いバージョン(5.8より以前)では、カスタマイズ画面や操作が異なります。WordPressバージョンは、左上のWアイコンにカーソルを乗せると出てくる「WordPressについて」から確認出来ます。

公式プラグイン「classic widgets」をインストールし旧式の設定で進めることも可能ですが、
ここでは6.5.3でプラグインを使わない方法で進めていきます。

functions.phpにコードを追加

以下のコードを追記します。HTMLやcssのは任意のもので構いません。

/**
 *サイドバーにウィジェット追加
 */
function my_theme_widget_settings() {
    register_sidebar( array(
        'name' => 'サイドバー',
        'id' => 'sidebar',
        'description' => 'サイドバーに表示されます',
        'before_widget' => '<div id="%1$s" class="c-widget c-widget--sidebar %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="c-widget__ttl c-widget__ttl--sidebar"><span class="c-widget__ttlInner">',
        'after_title' => '</span></h3>',
    ) );
}
add_action('widgets_init', 'my_theme_widget_settings');

sidebar.php新規作成

テーマディレクトリの直下に、サイドバーのテンプレートファイル「sidebar.php」を新規作成します。
(/wp-content/themes/テーマフォルダ/sidebar.php)

ウィジェットを表示したい場所に、<?php dynamic_sidebar( ‘sidebar’ ); ?>で読み込みます。

<aside class="sidebar">
    <div class="sidebar__inner">
  
       <section>
      …
       </section> 

      <?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
          <?php dynamic_sidebar( 'sidebar' ); ?>
      <?php endif; ?>
    </div>
</aside>

sidebar.phpを読み込む

front-page.phpなど表示したいテンプレートのサイトバーを表示したい場所に、
<?php get_sidebar(); ?>を記述します。

<?php get_header(); ?>
  <div class="l-container">
    <div class="l-container__inner">
      <main>
     …
      </main>
      <?php get_sidebar(); ?>
    </div>
  </div>
<?php get_footer(); ?>

サイドバーウィジェットを作成

WordPressの管理画面「外観」から、「ウィジェット」が選択できるようになりましたので、それを選択します。

「使用停止中のウィジェット」の見出しを押下すると、サンプルとしていくつかのブロックが用意されています。

試しにカテゴリーをドラッグ&ドロップします。この時、「親ブロックを選択: グループ」のアイコンが選択されているのを確認し、6つの点が並ぶ「ドラッグ」アイコンを掴んで上部のサイドバーウィジェットエリアまできて離します。
(ブラウザの最下部に、ウィジェット > 使用停止中のウィジェット > グループと表示されている状態)

カテゴリーのグループが移動できました。

別の方法で、ブロックを選択し「すべてを表示」からブロック→ウィジェット→ウィジェットグループを選択し、その中でカテゴリ一覧ブロックを追加します。

タイトルが入力できる様になっているので、ここでは「カテゴリー2」と入力します。
ブラウザでどのように反映されるか確認してみます。右上の更新ボタンを押下してください。

すると、「使用停止中のウィジェット」からドラッグしてきたウィジェットグループ(カテゴリー)と、後からブロック→ウィジェット→ウィジェットグループを選択し、その中でカテゴリ一覧ブロックを追加したもの(カテゴリー2)だと構造が違っており、後者の方が、functions.phpで定義したHTML構造を反映しています。’before_widget’ のid=”%1$s”はid=”block-9″、%2$sはwidget_blockに変換されています。

ウィジェットの管理画面に戻り、ドキュメント概観で階層を確認すると、前者はグループ、後者はウィジェットグループで構成されています。

functions.phpに記述したウィジェットでHTMLとcssを構築したい場合は、「ウィジェットグループ」で呼び出す必要があることがわかりました。

あとは、functions.phpに記述したcssをテーマのcssファイルに追加しレイアウトすれば完成です。

新着情報

TOP PAGE