ウィジェットエリアを新規に作成する

ウィジェット領域を新規に作成する

wordpressブログをカスタマイズする場合に、真っ先に挑戦するものの一つとしてウィジェットを使ってみること。ウィジェットを使って新規リストを表示してみたり、Twitterのタイムラインを埋め込んでみたり、コンテンツをある程度自由に配置することができます。

ウィジェットエリアを
作成する方法

独自のウィジェットエリア

ウィジェットは上記にようなwordpressをカスタマイズする目的に使用します。wordpressは、テーマを選ぶことによって既にいくつかのウィジェット領域が用意されていますが、自分で新規に追加して独自のウィジェット領域をつくる事もそんなに難しくはありません。

• ヘッダー領域に広告専用のウィジェット領域を作ってみたくはありませんか
• 記事中につかってみて良かった商品の紹介欄をつくりませんか
• フッター部に関連記事のリストを追加してみたくはありませんか？

ウィジェットを使う理由は他にもあります。

通常記事中にはHTMLコーディングすることはできませんが、ウィジェット内ならHTMLコーディングできます。もっと柔軟に使う場合は、ショートコードを使うことも可能です。

それでは、以降ウィジェット領域の作り方は使い方、および配置などを順番に紹介します。

ウィジェットを追加するためには、PHPプラグラミングの知識やHTML／CSSの知識が必要になります。

ウィジェットエリアの追加

ウィジェットエリアを追加するには、function.phpにregister_sidebar関数を追加します。register_sidebar関数の使い方は、

<?php register_sidebar( 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>' ); ?>
 )
); ?>

register_sidebarに渡すパラメータを説明します。

• name– サイドバーの名前。例題でつかっている__()は多言語対応するためのおまじないで、自分でコーディングする場合は、日本語の文字列を直接埋め込んでもかまいません。ここで指定された文字列は、wordpress管理画面のウィジェットの名称として使われます。
• id– サイドバーの ID – すべて小文字の半角英数字で空白を除く（デフォルトは自動的にカウントアップする数値の ID）。id 引数をセットしなければ、バージョン2 以降はデバッグモードなら E_USER_NOTICE メッセージが出力される。このIDはプログラムでウィジェットを配置する場合に呼ぶdynamic_sidebar()関数の引数となりますので忘れない様にしてください。
• description– サイドバーの説明テキスト。ウィジェット管理画面に表示される。（バージョン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）。

外観に表示されるウィジェットの順番に気をつけろ

ウィジェットは、wordpress管理画面の外観に表示されますが、この順番はこのregister_sidebar()関数での登録順番となります。もし順番を変えたい場合は、この登録順番の入れ替えが必要です。

子テーマでウィジェットを再定義する場合のコーディング

テーマがバージョンアップしたときにそれまでの修正が無効となってしまいますが、子テーマという手法を使って修正をすると無駄になりません。子テーマについては以下の記事を参考にどうぞ。

参考:

ウィジェットエリアを新規に作成する

wordpressブログをカスタマイズする場合に、真っ先に挑戦するものの一つとしてウィジェットを使ってみること

子テーマを使っている場合は、親テーマのregister_sidebar()部分を削除ます。下記のコーディング例は、親テーマでparent_register_sidebarsをという名前でアクション関数が定義されている場合の例です。子テーマ側では、’after_setup_theme’というアクションで、removeします。

function widgets_parant_remove() {
	remove_action( 'widgets_init', 'parent_register_sidebars' );
}
add_action('after_setup_theme','widgets_parant_remove');

ウィジェットの配置

ウィジェットは、該当の部分のphpプログラムを修正することになります。ヘッダーに共通して埋め込む場合は、header.phpを。ヘッダー部の場合は、footer.phpを。記事中の場合は、single.phpを。サイドバーに追加する場合は.sidebar.phpを。固定ページの場合は、page.phpを。という具合ですね。

ウィジェットを追加する場合は、以下のとおりのコーディング(パターンはすべて同じです)を該当部分に追加してください。

上記コーディング中のsidebar-idは、ウィジェット追加時の指定したidパラメータです。

以上、ウィジェットを新規に追加する方法と配置でした。

• カスタマイズ

• ウェジェット
• 新規
• ウィジェットエリア