【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のため「サイドバー」と表記されることもありますが、サイドバー以外の箇所でも出力可能です。
ウィジェットエリアにウィジェットを追加
次にWordPressの管理画面から、上記で作成したウィジェットエリアに任意のウィジェットを追加します。
管理画面からウィジェットを追加する方法については以下のリンク先を参考にしてみてください。
ウィジェットを表示
最後に、前述の手順で追加・設定をしたウィジェットを出力します。
以下、ソースコードの例となりウィジェットを表示させたい箇所に記述します。
<?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でウィジェットの表示する位置・出力をカスタマイズする例となります。