３分でできる！ウィジェットの表示設定コーディング方法

WordPressにはウィジェットという便利な設定ができます。

ウィジェットとはデスクトップ上で特定の機能を実行するためのアプリケーションです。

例えばサイドバーに最新の投稿やバナー広告を設置したい場合、ウィジェットを使用すると直感的な操作で設定でき表示させることが可能です。

クライアントにとってもウィジェットが使えるのは大変便利です。

そこでWordpressのテーマを制作するにあたって、ウィジェット表示を設定するために必要な作業をお伝えします。

作業手順はたった３つです。

１．function.phpでウィジェット機能を有効にする
２．sidebar.phpにウィジェットの出力コードを記述する
３．管理画面から表示したいウィジェットを設定する

順番に説明します。

１．function.phpでウィジェット機能を有効にする

ウィジェットの機能自体はWordPressにデフォルトで設定されてあります。
しかし、WordPressのテーマを自作する際にはウィジェットを表示させる設定をしなければ使えません。
そこでまず、function.phpに以下のコードを記述します。

if ( function_exists('register_sidebar') ) {

	register_sidebar(array(
		'id' => 'sidebar1',
		'name' => __( 'メインサイドバー', 'sampletheme' ),
		'description' => __( 'メインのサイドバーです。', 'sampletheme' ),
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h4 class="widgettitle"><span>',
		'after_title' => '</span></h4>',
	));

ちょっと何が何だかわからないと思いますので、詳しく一つずつ解説していきます。

id：ウィジェットID。ウィジェットエリアを複数登録するときは重複しないようにする
  name：管理画面に表示される名前
  description：管理画面に表示される説明
  class：スタイルシート用のクラス名
  before_widget：ウィジェットの前の文字列。初期値は「<li id="%1$s" class="widget" %2s">」。WordPressの機能によって、%1$sは各ウィジェットに付与されるid,%2$sはウィジェットを示すクラス名が出力される
  after_widget：ウィジェットの後ろの文字列。初期値は「</li>\n(\nは改行)」
  before_title：ウィジェットのタイトルの前の文字列。初期値は「<h2 class="widgettitle">」
  after_title：ウィジェットのタイトルの後ろの文字列。初期値は「</h2>\n(\nは改行)」

 

これらをブラウザの表示コードでみると下記のようになっています。

ちなみに管理画面で表示されるname,descriptionはこんな感じです。

２．sidebar.phpにウィジェットの出力コードを記述する

次にウィジェットを表示したい箇所に出力コードを記述します。

<div class="col-md-4">
<?php if ( is_active_sidebar( 'sidebar1' ) ) : ?>
<?php dynamic_sidebar( 'sidebar1' ); ?>
<?php endif; ?>
</div>

is_active_sidebar( ‘ウィジェットID’ )

サイドバーが設置されているかどうかを関数で確認します。

dynamic_sidebar( ‘ウィジェットID’ )：
ウィジェットが設置されている場合、ウィジェットの内容を出力する関数です。

以上でウィジェットが表示できるようになりました。

３．管理画面から表示したいウィジェットを設定する

では最後にウィジェットを表示してみましょう。

管理画面のウィジェットをクリックします。

すると、ウィジェットの項目にメインサイドバーという項目が表示されています。

試しに、テキストのウィジェットをドラックアンドドロップしてもってきて、適当に文字を入力して保存します。

表示を確認するとちゃんと反映されていますね。