WordPressのオリジナルテーマを自作して勉強してるのですが、1からWordPressテーマを作成した場合、自分でウィジェット機能を追加しないとウィジェットエリアが使えません。
ウィジェット機能を有効化してウィジェットエリアを登録しないとサイトに表示できないんですね。
すでにテーマにウィジェット機能が有効化してるテーマでも、新しいウェジェット表示領域を追加したい場合には、WordPressにウィジェット機能の追加と表示するやり方は同じです。
記事にまとめたので誰かの参考になればと思います。
WordPressのウィジェットとは
WordPressのウィジェットについての事前知識みたいなものですが、WordPressのウィジェットとは、管理画面の外観からウィジェット設定画面に進むことができ、ウィジェット設定からコンテンツをサイトに表示できるWordPressの機能です。
ウィジェットからWordPressサイトにコンテンツ表示する設定は、ウィジェット画面で表示したいコンテンツをウィジェットエリアにドラッグ＆ドロップでページのウィジェット領域に追加できます。
ほとんどのWordPressテーマでウィジェットは使用できるようになっていますが、管理画面のサイドメニューにウィジェット項目がない場合はWordPressテーマにウィジェット機能を組み込む必要があります。
WordPressテーマにウィジェット機能を追加
WordPressテーマにウィジェット機能を追加するときは、WordPress関数とそのパラメータを使用した関数を作成してfunctions.phpに記述することでウィジェット機能を追加できます。
ウィジェット機能を追加するWordPressの関数は「register_sidebar」
そしてregister_sidebarのパラメータでウィジェット機能を追加するときのオプションを設定できます。
また作成したウィジェットの関数はfunctions.phpに記述するときにwidgets_initにアクションフックしてウィジェットを追加します。
WordPressテーマにウィジェット機能を追加する大まかな流れを先に紹介してみましたが、以下からは具体的な記述方法を説明します。
register_sidebarでウィジェットを追加
WordPressにウィジェット機能を追加するときに使用するregister_sidebar()はサイドバーを１つ登録して追加できます。
<?php register_sidebar($args) ;?>
register_sidebarのregisterは「登録」という意味があるので「テーマにウィジェットを登録するための関数」と理解しておくと覚えやすいかと思います。
register_sidebarは以下のように記述するとWordPressのウィジェット設定画面に追加されます。
function theme_widgets_init(){
register_sidebar(array(
'name'=>'ウィジェットサンプル',
'id'=>'main-sidebar',
));
}
add_action('widgets_init','theme_widgets_init');
関数名を作成してからregister_sidebarを記述して、連想配列でregister_sidebarのパラメータをキーと値のペアにして記述します。
まずはWordPressにウィジェット機能を表示させておきたいので、そのために必要なregister_sidebar()のパラメータだけに絞って配列を作ります。
‘name’=>’ normal sidebar’,
nameはWordPressのウィジェット設定画面で表示されるウィジェットエリアの名前になります。
‘id’=>’main-sidebar’,
idは追加するウィジェットエリアをWordPressが処理するときに、指定したidでウィジェットエリアを識別するために記述します。
そしてregister_sidebar()で作成した関数はadd_actionでwidgets_initにアクションフックしてからテーマのfunctions.phpに記述します。
そうするとwidgets_initアクションフックのタイミングで、register_sidebar関数を実行することができてウィジェットエリアをテーマのウィジェット設定画面に追加できます。
パラメータでウィジェット出力をカスタマイズ
WordPressにウィジェットを追加をするときregister_sidebarの配列に記述することができるパラメータは8個あります。
パラメータ「name」がウィジェットエリアの名前、「id」がウィジェットエリアを識別するためのパラメータ。先ほどはこの2つのパラメータだけを使いました。
残り6つのパラメータは、ウィジェットエリアについてのカスタマイズと、追加するウィジェットが出力するHTML構造をカスタマイズするためのパラメータです。
サイトに表示するウィジェットコンテンツのソースは表示すると以下のようなHTML構造になっています。
ウィジェットでカテゴリーを表示したのですが、このHTML構造はウィジェットのデフォルトで出力されたHTML構造です。
WordPressに追加したウィジェットにどんなコンテンツを表示するかによって、CSSでデザインするパターンは変わります。
そのようなときのためにregister_sidebarのパラメータを使用してウィジェットが出力するデフォルトのHTML構造をカスタマイズします。
nameとid
一度説明していますが復習をかねて。nameとidはWordPressにウィジェットを追加するときに必要なパラメータです。必ず使用するようにしておくのが無難かと思えます。
nameはサイドバーの名前を出力します。（デフォルトはサイドバーの文字列とIDの数字）
‘name’ => ‘ウィジェットサンプル’,
nameを指定した場合の表示場所はウィジェット設定画面に追加したウィジェットエリアのパネル内です。
idはサイドバーのIDです。ウィジェットの追加のときidパラメータを使用すると値に指定したid名でウィジェットを識別できます。
‘id’ => ‘smple-sidebar’,
デフォルトは自動的にカウントアップする数値のIDです。idをセットしない場合はバージョン 4.2 以降のデバッグモードで E_USER_NOTICE メッセージが出力されるようです。
次の2 つのパラメータは配列に記述するとウィジェット設定画面の出力をカスタマイズできるパラメータです。
description
ウィジェット管理画面に表示されるサイドバーの説明文です。デフォルトは空文字列なので何も表示されません。
‘description’ => ‘サイドバーにコンテンツを表示します’,
たとえばウィジェット追加するときにdescriptionの’値で「’サイドバーにコンテンツを表示します。’」と記述したとするとウィジェットエリアのname下に説明文が表示できます。
説明文があるだけで「このウィジェットエリアがサイトのどこに表示できるのか？」の疑問に親切になれます。
class
管理画面の「外観 」>「 ウィジェット」でサイドバーに割り当てられる CSSのクラスです。WordPressのウィジェット管理画面だけに出力されます。例えばクラス名を「setting」にした場合。
‘class’ => ‘setting’,
上の画像のように「sidebar-setting」でクラス出力されます。
次からの4つのパラメータは、ウィジェットを追加するときに配列に記述するとウィジェットが出力するタグを変更できるカスタマイズです。
before_widgetとafter_widget
before_widgetはウィジェットの直前に出力するHTMLのタグをカスタマイズできます。デフォルトは<li>です。
after_widgetはウィジェットの直後に出力する HTMLタグをカスタマイズできます。デフォルトは</li>です。
例えばウィジェットを追加して出力されるliタグをdivタグでマークアップするならbefore_widgetとafter_widgetのパラメータを以下のように記述して出力をカスタマイズします。
‘before_widget’ => ‘<div class=”widget_inner”>’,
‘after_widget’ => ‘</div>’,
before_titleとafter_title
before_titleはタイトルの直前に出力するHTMLタグをカスタマイズできます。デフォルトは<h2 class=”widgettitle”>
after_titleはタイトルの直後に出力するHTMLタグのカスタマイズです。デフォルトは</h2>
‘before_title’ => ‘<h3 class=”widget_title”>’,
‘after_title’ => ‘</h3>’,
例えばウィジェットのタイトルをh3にしてCSSをあてやすいクラス名をclass属性に記述して出力するカスタマイズなどにすることがでます。
以下のPHPコードがregister_sidebarのパラメータでウィジェット出力をカスタマイズしたすべての記述です。
function theme_widgets_init(){
register_sidebar(array(
'name' => 'ウィジェットサンプル',
'id' => 'smple-sidebar',
'description' => 'サイドバーにコンテンツを表示します',
'before_widget' => '<div class="widget_wrapper">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget_title">',
'after_title' => '</h2>',
));
}
add_action('widgets_init','theme_widgets_init');
WordPressテーマに追加したウィジェットを表示
register_sidebarでWordPressテーマにウィジェット機能を追加できると、追加したウィジェットエリアにコンテンツをドラッグ＆ドロップで設定することができるようになります。
設定することはできますが、ウィジェットをWordPressサイトに実際に表示するためには追加したウィジェットエリアをテーマのどの部分で表示させるかをテンプレートファイルにコード記述する作業が必要です。
is_active_sidebarでウィジェット表示の判定
例えば追加したウィジェットエリアを表示させたい場所が2カラムサイトのサイドバーの場合、テンプレートファイルのsidebar.phpに以下の記述をします。
<?php if ( is_active_sidebar('main-sidebar') ) : ?>
<?php dynamic_sidebar('main-sidebar'); ?>
<?php endif; ?>
is_active_sidebarでサイドバーが有効になってるかの判定をする記述をPHPのif文でします。このときis_active_sidebarの引数にはウィジェットを追加したときパラメータで指定したidを記述します。
is_active_sidebarは条件分岐タグなので上記PHPコードの場合、main-sidebarのidでウィジェットが有効かをWordPressが判定します。
使用するウィジェットの表示エリアを判定させることができるので以下のような表示条件をつけてWordPressのトップページのみにウィジェット表示することもできます。
<?php if ( is_active_sidebar( 'main-sidebar' ) && is_home() && !is_paged() ) : ?>
<?php dynamic_sidebar( 'main-sidebar' ); ?>
<?php endif; ?>
dynamic_sidebarでウィジェットを表示
if文でis_active_sidebarを書いた下にはdynamic_sidebarを記述します。
<?php if ( is_active_sidebar('main-sidebar') ) : ?>
<?php dynamic_sidebar('main-sidebar'); ?>
<?php endif; ?>
dynamic_sidebarはWordPress関数です。アクティブなウィジェットコールバック関数を順に呼び出し、dynamic_sidebarを記述した任意の位置にウィジェットコンテンツを表示できます。
dynamic_sidebarの記述のときは引数にウィジェットに追加したウィジェットエリアのidを記述します。
このとき上記のPHPコードでは、<?php dynamic_sidebar(‘main-sidebar’); ?>と記述していますが、ウィジェットを追加したときのパラメータでbefore_widgetとafter_widgetを記述してる場合には、その指定タグでマークアップされたHTML構造のソース表示になります。
パラメータを指定してない場合は<li></li>でマークアップされ表示します。
<?php if ( is_active_sidebar('main-sidebar') ) : ?>
<ul class="widget_side01_list">
<?php dynamic_sidebar('main-sidebar'); ?>
</ul>
<?php endif; ?>
before_widgetとafter_widgetを記述してない場合でdynamic_sidebarを上記のように<ul></ul>で囲んだ場合にはul要素の中に表示するウィジェットコンテンツのタグ階層が入り表示できます。
最終的には、WordPressにウィジェットの追加と表示をできるようにしたウィジェットエリアにコンテンツをドラッグ＆ドロップで設定してサイトの表示ができていれば完成です。
WordPressにウィジェットを表示できる主な場所
WordPressのウィジェットエリアは主にサイトのサイドバーに表示することが多いですが、ページ内のどの位置にでもウィジェットエリアを配置できます。
全てではないですがWordPressテーマのfunctions.phpにウィジェットを追加してから任意の場所にdynamic_sidebarで表示できるテンプレートファイルをいくつか紹介します。
サイドバー
sidebar.phpでサイドバーにウィジェットを表示できます。
フッター
footer.phpでフッターにウィジェット表示ができます。
投稿ページの記事上と記事下
single.phpの記事上と記事下の位置に組み込めばウィジェットが表示できます。
トップページのみ
index.phpやsidebar.php、footer.phpにdynamic_sidebarでウィジェット表示するPHPコードのif文の条件にis_active_sidebarだけでなくis_home() とis_paged()を論理演算子で条件判定させます。
固定ページの条件is_front_page()は使ってないパターンですが、以下のPHPコードでトップページだけにウィジェットエリアを表示できます。
<?php if ( is_active_sidebar( 'main-sidebar' ) && is_home() && !is_paged() ) : ?>
<?php dynamic_sidebar( 'ウィジェットエリアのid' ); ?>
<?php endif; ?>
