WordPress サイドバーとウィジェット

  Code Tips minimum Theme

作成中の「Code Tips minimum Theme」でサイドバーを登録してウィジェットを表示するようにします。

【functions.php】にサイドバーを登録するとダッシュボードの「外観」の項目に「ウィジェット」が追加され、そこからウィジェットの追加・削除ができるようになります。

また、サイドバーは複数登録することができます。

WordPress ウィジェットはサイドバーにコンテンツや機能を追加します。WordPress にはデフォルトで「カテゴリー」「タグクラウド」「検索」などのウィジェットがあります。ウィジェットを追加するプラグインもあります。

WordPress Codex : WordPress ウィジェット

 

サイドバーの登録

まず【functions.php】に register_sidebar( $args ) を書いてサイドバーを登録(有効化)します。

function my_widgets_init() {
  $my_widgets_param = array(
    'name' => 'Sidebar',
    'id' => 'sidebar-1'
  )
  register_sidebar( $my_widgets_param );
}
add_action( 'widgets_init', 'my_widgets_init' );

 

register_sidebar()

サイドバーをひとつ定義して ID を返します。

WordPress Codex : 関数リファレンス/register sidebar

register_sidebar( $args )
$args = array(
  'name' => __( 'Sidebar name', 'theme_text_domain' ),
  'id' => 'unique-sidebar-id',
  'description' => '',
  'class' => '',
  'before_widget' => '<li id="%1$s" class="widget %2$s">',
  'after_widget' => '</li>',
  'before_title' => '<h2 class="widgettitle">',
  'after_title' => '</h2>'
);

 

パラメータ
引数 説明
$args
文字列/配列
オプション
name と id の値からサイドバーを作成
初期値:なし
パラメータ 説明
name サイドバーの名前(デフォルトは Sidebar を翻訳した文字列と ID の数字)
id サイドバーの ID – すべて小文字の半角英数字で空白を除く(デフォルトは自動的にカウントアップする数値の ID)。id 引数をセットしなければ、バージョン 4.2 以降はデバッグモードなら E_USER_NOTICE メッセージが出力される。
description サイドバーの説明テキスト。ウィジェット管理画面に表示される。(バージョン2.9以降)
初期値: ''  空文字列
class 管理画面の 外観 > ウィジェットでサイドバーに割り当てられる CSS クラス。
このクラスは WordPress のウィジェット管理画面のソースコードのみに出力されます。
Web サイトのフロントエンドには出力されません。
参考: 指定したクラス値の前に "sidebar" が付きます。例えば "tal" を指定すると "sidebar-tal" が出力されます。初期値:''  空文字列
before_widget ウィジェットの直前に出力する HTML テキスト
初期値:<li id="%1$s" class="widget %2$s"> 参考: sprintf で変数を置換。
after_widget ウィジェットの直後に出力する HTML テキスト
初期値:</li>\n
before_title タイトルの直前に出力する HTML テキスト
初期値:<h2 class="widgettitle">
after_title タイトルの直後に出力する HTML テキスト
初期値:</h2>\n

オプションの $args パラメータは連想配列になっていて、有効なウィジェットのコールバック関数へ第1パラメータとして渡されます。(配列ではなく文字列が与えられると、parse_str() によって連想配列を生成してから渡されます。)
この引数は、ウィジェットとタイトルを囲むテーマ固有の HTML タグを与えるために使います。

WordPress Codex : 関数リファレンス/register sidebar

 

【sidebar.php】の作成

【functions.php】に register_sidebar( $args ) を書いてサイドバーを定義したら、【sidebar.php】ファイルを作成します。

新規にphpファイルを作り、ファイル名を【sidebar.php】として保存します。

dynamic_sidebar( $number ) を書いて保存します。
引数の $number にはダイナミックサイドバーのID番号または名前を指定します。
先ほど【functions.php】の register_sidebar() のパラメータを ’name’ => ‘sidebar-1 としたので dynamic_sidebar( ‘sidebar-1’ ) と指定します。

【sidebar.php】

<?php if(is_active_sidebar('sidebar-1')) : ?>
<ul>
<?php dynamic_sidebar('sidebar-1'); ?>
</ul>
<?php endif; ?>

 

is_active_sidebar()

まず、if(is_active_sidebar('sidebar-1')) で sidebar-1 が有効化されているか判定します。

この条件分岐タグは、あるサイドバーが有効化されているかどうかを調べます。boolean 関数で、true または false が返されます。
ウィジェットが含まれたサイドバーは true を、ウィジェットが含まれないサイドバーは false を返します。

WordPress Codex : 関数リファレンス/is active sidebar

is_active_sidebar( $index)

 

パラメータ
引数 説明
$index
mixed
必須
サイドバー名、ID
初期値:なし
戻り値
真偽値 サイドバーが有効化されている場合は true 、そうでない場合は false

 

dynamic_sidebar()

sidebar-1 が有効化されていれば、dynamic_sidebar('sidebar-1') を実行してウィジェットをサイドバーに表示します。

この関数はアクティブなウィジェットコールバック関数を順に呼び出し、サイドバーに表示します。複数のサイドバーがある場合、表示するサイドバーの番号または名前を知らせる必要があります。この関数が正しく実行されると true を返し、失敗すると false を返します。
静的なサイドバーを表示するかどうかを決定するのに、返り値を使用すべきです。こうすることで、ウィジェットプラグインがアクティブでない場合にも、テーマがきちんと表示されるようにできます。
サイドバーを番号で登録している場合、番号で呼び出します。名前で登録している場合は、名前で呼び出します。

WordPress Codex : 関数リファレンス/dynamic sidebar

dynamic_sidebar( $number )

 

パラメータ
引数 説明
$number
整数/文字列
オプション
サイドバーの名前または ID
初期値: 1

 

戻り値
真偽値 サイドバーの中にウィジェットが登録されているときは true を返し、ウィジェットが登録されていないか、サイドバーが見つからないときは false を返します

 

【sidebar.php】ファイルの呼び出し

最後に、テンプレートファイル【home.php】、【index.php】、【single.php】に get_sidebar() を加えて【sidebar.php】を呼び出します。

各ファイルの get_footer() の前に get_sidebar() を書きます。

・・・略・・・
<?php endif; ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

get_sidebar()

現在のテーマディレクトリの sidebar.php テンプレートファイルを読み込みます。
名前 $name を指定すると、対応するサイドバー sidebar-{name}.php を読み込みます。sidebar-{name}.php が存在しない場合は、かわりに sidebar.php を読み込みます。
sidebar.php ファイルがテーマに含まれていない場合は、デフォルトテーマの wp-includes/theme-compat/sidebar.php からサイドバーを読み込みます。

WordPress Codex : 関数リファレンス/get sidebar

 

get_sidebar( $name )

 

パラメータ
引数 説明
$name
文字列
オプション
sidebar-name.php を読み込む
初期値: なし

 

Code Tips minimum Theme

【functions.php】

<?php
// css
function register_style() {
  wp_register_style('style', get_stylesheet_uri(), array(), false, 'all');
}
function add_stylesheet() {
  register_style();
  wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts', 'add_stylesheet');

// sidebar
function my_widgets_init() {
  $my_widgets_param = array(
    'name' => 'Sidebar',
    'id' => 'sidebar-1'
  );
  register_sidebar( $my_widgets_param );
}
add_action( 'widgets_init', 'my_widgets_init' );
?>

 

【sidebar.php】

<?php if(is_active_sidebar('sidebar-1')) : ?>
<ul>
<?php dynamic_sidebar('sidebar-1'); ?>
</ul>
<?php endif; ?>

 

【index.php】

<?php get_header(); ?>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <?php the_title( '<h2><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
  <?php echo get_the_date(); ?>

  <?php endwhile; ?>
  <?php
    $pagination_param = array(
      'mid_size' => 2,
      'prev_text' => '&lt;',
      'next_text' => '&gt;',
      'screen_reader_text' => 'Page Navigation'
    );
    the_posts_pagination($pagination_param);
  ?>
  <?php endif; ?>
 
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
  <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <?php endif; ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

【home.php】

<?php get_header(); ?>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <?php the_title( '<h2><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
  <?php the_content('続きを読む…'); ?>
  <?php echo get_the_date(); ?>

  <?php endwhile; ?>
  <?php
    $pagination_param = array(
      'mid_size' => 2,
      'prev_text' => '&lt;',
      'next_text' => '&gt;',
      'screen_reader_text' => 'Page Navigation'
    );
    the_posts_pagination($pagination_param);
  ?>
  <?php endif; ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

【single.php】

<?php get_header(); ?>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
  <?php the_title( '<h2>', '</h2>' ); ?>
  <?php echo get_the_date(); ?>
  <?php the_content(); ?>
  <?php previous_post_link('%link','&lt; PREVIOUS'); ?> | <?php next_post_link('%link','NEXT &gt;'); ?>

  <?php endwhile; ?>
  <?php endif; ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>