【WordPress・ウィジェット】表示する位置・出力をカスタマイズする方法

今回は、WordPressでウィジェットの表示する位置・出力をカスタマイズする方法となります。

【WordPress】ウィジェットを表示する位置と出力をカスタマイズする例

ウィジェット機能を有効にしウィジェットエリアを登録

まずは、ウィジェット機能を有効にしてウィジェットエリアを登録するために、以下のソースコードをfunctions.phpに記述します。

function my_widgets_init() {
	$args  = [
		// ウィジェットエリアの表示名を指定
		'name' => 'ウィジェット01',
		// ウィジェットエリアのIDを指定
		'id' => 'widget-01',
		// 管理画面で表示されるウィジェットエリアの説明を指定。
        'description' => 'ウィジェット01のエリアとなります。',
		// ウィジェットの直前に表示するHTML
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		// ウィジェットの直後に表示するHTML
		'after_widget'  => '</div>',
		// ウィジェット内のタイトルの直前に表示するHTML
		'before_title'  => '<h2 class="widget-title">',
		// ウィジェット内のタイトルの直後に表示するHTML
		'after_title'   => '</h2>',
    ];
	register_sidebar( $args  );
}
add_action( 'widgets_init', 'my_widgets_init' );

register_sidebar()は、ウィジェットエリアを登録しウィジェットを有効にする関数となり、widgets_initフックのコールバック関数内で利用します。

register_sidebar()では出力をパラメータでカスタマイズできますが、指定できるパラメータは上記以外にもあるので、詳しくは文末の参考サイト内を参考にしてみてください。

また、ウィジェットエリアは登録する関数名がregister_sidebarのため「サイドバー」と表記されることもありますが、サイドバー以外の箇所でも出力可能です。

ウィジェットエリアにウィジェットを設定

以下は、上記で登録したウィジェットエリアに、任意のウィジェットを追加し設定する手順となります。

  1. 上記ソースコードにより、管理画面の外観メニュー内に「ウィジェット」の項目が追加されるので、その項目からウィジェットページへ移動します。
    管理画面の外観メニュー内の画像
    管理画面の外観メニュー内に追加された「ウィジェット」の項目
  2. ウィジェットページへ移動すると、右カラムにregister_sidebar()で登録した「ウィジェットエリア」が追加されているので、左カラムにある「利用できるウィジェット」の中から、任意のウィジェットを「ウィジェットエリア」へドラッグアンドドロップします。
    「ウィジェット」ページの画像
    「ウィジェット」ページ。左カラムにある「利用できるウィジェット」の中から、任意のウィジェットを、右カラムにある「ウィジェットエリア」へドラッグアンドドロップします
  3. ウィジェットエリアに追加したウィジェットを設定し保存します。
    ウィジェットエリアにウィジェットを追加した画像
    ウィジェットエリアにアーカイブのウィジェットを追加した例。ウィジェットを設定後に「保存」ボタンをクリックします

ウィジェットを表示

最後に、前述の手順で「ウィジェット01」のエリアに、追加・設定をしたウィジェットを出力します。

以下、ソースコードの例となりウィジェットを表示させたい箇所に記述します。

<?php
// ウィジェットエリアにウィジェットがセットされている場合。
if ( is_active_sidebar( 'widget-01' ) ) { 
	echo '<div id="widget-01">';
    // ウィジェットを表示。
	dynamic_sidebar( 'widget-01' );
	echo '</div>';
} 
?>

上記コードでは、is_active_sidebar()でウィジェットエリアにウィジェットがセットされているかを判断し、dynamic_sidebar()でウィジェットを表示しています。

また、is_active_sidebar()とdynamic_sidebar()の引数には、register_sidebar()で登録したウィジェットエリアのIDを指定します。

以上がWordPressでウィジェットの表示する位置・出力をカスタマイズする例となります。

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。