WordPressのサイドバーにウィジェットを追加する方法

WEB-LABO

ウィジェットも一長一短ではありますが、プラグインの中にはウィジェットの中に追加しないといけないものもあります。しかし、そのウィジェットもテーマの作り方によっては使えない場合があり困ることも・・・

PR

ウィジェットを使うにはfunctions.phpが必要

特にWordPress歴が浅く一からテーマを作った場合、ウィジェットが使えない場合があります。そこで今回はサイドバーにウィジェットを追加する方法を書いてみます。

見出しにも書きましたが、ウィジェットを使うには「functions.php」が必要です。テーマフォルダに「functions.php」がない場合は新規作成してください。この時、ファイル名に注意です！ ネット上には「function.php」と書いてある場合があり騙されます。正式には、「functions.php」ですので間違わないようにしましょう。

 

１．functions.phpにコードを追加します

既に「functions.php」が存在する方は、<?php ～ ?>の間で、既に存在するコードを壊さないように、次の記述をコピペします。

// サイドバーのウィジェット
register_sidebar( array(
     'name' => __( 'Side Widget' ),
     'id' => 'side-widget',
     'before_widget' => '<div class="widget-container">',
     'after_widget' => '</div>',
     'before_title' => '<h1>',
     'after_title' => '</h1>',
) );

 

「functions.php」を新規作成した場合は、<?php ～ ?> を含めてコピペします。

<?php
　
// サイドバーのウィジェット
register_sidebar( array(
     'name' => __( 'Side Widget' ),
     'id' => 'side-widget',
     'before_widget' => '<div class="widget-container">',
     'after_widget' => '</div>',
     'before_title' => '<h1>',
     'after_title' => '</h1>',
) );
　
?>

・「name」で指定している「Side Widget」が管理画面に表示する名前です。
・「id」で指定している「side-widget」がsidebar.phpでウィジェットを呼び出すときに使用する名称です。
・「before_widget」は、ウィジェット囲むコンテナの開始タグを記述します。
・「after_widget」は、英ジェットを囲むコンテナの終了タグを記述します。
・「before_title」は、タイトルの開始タグ
・「after_title」は、タイトルの終了タグ
※必要に応じて修正してください。

下の画像は、WordPress管理画面のウィジェットの画面です。ちなみに、この画面はfunctions.phpにコードを追加した後で「外観」の中の「ウィジェット」をクリックすると表示することができます。
ウィジェット

この様に、ウィジェットは複数追加することができます。複数追加するには、下のコードのようにfunctions.phpに複数名前を変えて追加する必要があります。

// サイドバーのウィジェット
register_sidebar( array(
     'name' => __( 'Side Widget1' ),
     'id' => 'side-widget1',
     'before_widget' => '<div class="widget-container1">',
     'after_widget' => '</div>',
     'before_title' => '<h1>',
     'after_title' => '</h1>',
) );

register_sidebar( array(
     'name' => __( 'Side Widget2' ),
     'id' => 'side-widget2',
     'before_widget' => '<div class="widget-container2">',
     'after_widget' => '</div>',
     'before_title' => '<h1>',
     'after_title' => '</h1>',
) );

 

２．sidebar.phpからウィジェットを呼び出すには？

if文を使って、指定したウィジェットが存在しない場合は、あらかじめ決めておいたコードを出力するということもできますが、今回はシンプルにします。

まずは、functions.phpに１つだけ追加した場合

// サイドバーのウィジェット
register_sidebar( array(
     'name' => __( 'Side Widget' ),
     'id' => 'side-widget',
     'before_widget' => '<div class="widget-container">',
     'after_widget' => '</div>',
     'before_title' => '<h1>',
     'after_title' => '</h1>',
) );

sidebar.phpには次のようにidで指定した名前で呼び出します。
<?php dynamic_sidebar(‘side-widget’); ?>;

 

functions.phpにウィジェットを２つ追加した場合は

// サイドバーのウィジェット
register_sidebar( array(
     'name' => __( 'Side Widget1' ),
     'id' => 'side-widget1',
     'before_widget' => '<div class="widget-container1">',
     'after_widget' => '</div>',
     'before_title' => '<h1>',
     'after_title' => '</h1>',
) );

register_sidebar( array(
     'name' => __( 'Side Widget2' ),
     'id' => 'side-widget2',
     'before_widget' => '<div class="widget-container2">',
     'after_widget' => '</div>',
     'before_title' => '<h1>',
     'after_title' => '</h1>',
) );
<?php dynamic_sidebar('side-widget1'); ?>;
　
<?php dynamic_sidebar('side-widget2'); ?>

ウィジェットの前後には、コードを追加することも可能なので、カスタマイズしたカテゴリーリストやタグクラウドといったものを表示することも可能です。

 

関連記事