WordPressでサイドバーを自作する方法(sidebar.php)

Wordpressのウィジェットを使用するためのオリジナルのサイドバーを自作します。

目的

独自のサイドバー(sidebar.php)を作成します。
ここでは、このサイトのサイドバーとしてsidebar-webmemo.phpとしています。
サイドバーを作成することで以下が可能になります。

• WordPressのウィジェットを使用できる
• 任意の場所に決まった出力を表示できる

結果

サイドバーイメージ(サイト表示)

サンプルとしてここではサイドバーにWordpressの標準のウィジェットからタグクラウドを選択して出力しています。

サイドバーイメージ(管理画面)

管理メニューから概観->ウィジェットを押すとサイドバーの設定ができます。

サンプルコード

▼function.php

続きを読む

function webmemo_setup() {
  /* WIDGET */
  add_theme_support( 'widgets' );
}
add_action( 'after_setup_theme', 'webmemo_setup' );

/** 省略 **/

/******************************************************/
/** Register Sidebar                  **/
/******************************************************/
require ( dirname(__FILE__) . '/include/admin-webmemo-sidebar.php');

▼admin-webmemo-sidebar.php

続きを読む

<?php
  function webmemo_sidebar_init(){
    register_sidebar( array(
        'name' => 'webmemo-sidebar',
        'id'            => 'webmemo-sidebar-1',
        'description'   => 'WEB MEMO SIDE AREA',
        'class'         => 'sidebar-class',
        'before_widget' => '<div class="webmemo-side-area">',
        'after_widget' => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'  => '</h2>',
      )
    );
  }
  add_action( 'widgets_init', 'webmemo_sidebar_init' );
?>

▼sidebar-webmemo.php

続きを読む

This is webmemo sidebar

<?php if ( is_active_sidebar( 'webmemo-sidebar-1' ) ) : ?>
        <aside class="sidebar-area">
                <?php dynamic_sidebar( 'webmemo-sidebar-1' ); ?>
        </aside>
<?php endif; ?>

方法

以下を編集します。

※function.phpに全て書くと管理が煩雑になるため外部ファイルに設定を記載し、function.phpから呼び出しています。

※外部ファイルは「include」ディレクトリを作成し、その中に格納しています。

▼前提 directory図(treeイメージ)

テーマディレクトリ
   ├ function.php                     <--- (修正)設定ページを定義した外部ファイルの読み込みと、Widgetの登録
   └ sidebar-webmemo.php              <--- サイドバーを呼び出すファイル
   └ include(dir)
     └ admin-webmemo-sidebar.php      <--- (新規作成)サイドバーを定義しているファイル

WordPress内でWidgetの有効化(function.php)

WordPressでサイドバーを使用するためにはWidgetを有効にする必要があります。
管理画面にウィジェットを表示させるため、テーマにウィジェットのサポートを追加します。
ウィジェットを登録するための関数が記載されたadmin-webmemo-widget.phpを呼び出します。

▼function.php

function webmemo_setup() {
  /* WIDGET */
  add_theme_support( 'widgets' );
}
add_action( 'after_setup_theme', 'webmemo_setup' );

サイドバーの定義(function.php)

function.phpとサイドバー定義用に作成したadmin-webmemo-sidebar.phpを使用してサイドバーの定義をします。

▼function.php

/******************************************************/
/** Register Sidebar                  **/
/******************************************************/
require ( dirname(__FILE__) . '/include/admin-webmemo-sidebar.php');

register_sidebar()を使用して、サイドバーの登録を行います。
「widget_init」アクションにフックします。
引数について

▼admin-webmemo-sidebar.php

<?php
  function webmemo_sidebar_init(){
    register_sidebar( array(
      'name' => 'webmemo-sidebar',
      'id'            => 'webmemo-sidebar-1',
      'description'   => 'WEB MEMO SIDE AREA',
      'before_widget' => '<div class="webmemo-side-area">',
      'after_widget' => '</div>',
      'before_title'  => '<h2 class="widget-title">',
      'after_title'  => '</h2>',
      )
    );
  }
  add_action( 'widgets_init', 'webmemo_sidebar_init' );
?>

register_sidebar()により設定した上記引数はこのような感じになります。

<aside class="sidebar-area">
  <div class="webmemo-side-area"><h2 class="widget-title">タグ</h2>
    <div class="tagcloud">
      <a href="https://mikd.tokyo/site/007_repository/tag/ajax/" class="tag-cloud-link tag-link-15 tag-link-position-1" style="font-size: 8pt;" aria-label="AJAX (1個の項目)">AJAX</a>
    </div>
  </div>
</aside>

サイドバーファイルの作成(sidebar.php)

サイドバーを呼び出すためWordpressのテンプレートファイル(sidebar.php)を作成します。 ここでは、このサイト用にsidebar-webmemo.phpを作成します。

▼sidebar-webmemo.php

<?php if ( is_active_sidebar( 'webmemo-sidebar-1' ) ) : ?>
  <aside class="sidebar-area">
    <?php dynamic_sidebar( 'webmemo-sidebar-1' ); ?>
  </aside>
<?php endif; ?>

サイドバーの呼び出し(任意のファイル)

任意のファイルで以下のようにしてサイドバーを呼び出します。
ここで呼び出されるのはテンプレートファイルsidebar.phpか引数で渡す文字列が続くsidebar-XXXX.phpとなります。

<div class="content-right">
  <?php get_sidebar('webmemo'); ?>
</div>

ウィジェットの登録

WordPressの管理画面からウィジェットを登録します。
登録はGUIで任意のウィジェットを選び、今回作成したサイドバーに追加するだけです。

参考

• register_sidebar() - WORDPRESS CODEX
• is_active_sidebar() -WORDPRESS CODEX
• dynamic_sidebar() -WORDPRESS CODEX

その他詳細

register_sidebar()の引数

サイドバーをひとつ定義して ID を返す。'widgets_init' アクションで呼び出す

is_active_sidebar()の引数

サイドバーが有効化されているかどうかを調べます。

dynamic sidebar()の引数

この関数はアクティブなウィジェットコールバック関数を順に呼び出し、サイドバーに表示します。