【WordPressのテーマで使えなかったウィジェットを有効にする方法】ちょっとコードを追加するだけでOK

WordPress

ウィジェットって便利ですよね、管理がラクですし、応用すればいろんなことができます。それに、巷のWordPressプラグインもウィジェットとして使用できるものが多かったりします。このブログのサイドバーにあたる部分も、ウィジェットで管理しています。いろいろごてごてと、付いているでしょう。

そんなウィジェットですが、WordPressのテーマによっては、ウィジェットが使えないものがあります。

【管理画面から「ウィジェット」をクリックしたら・・・】

この画面が出た場合はウィジェットが使えない状態です。

今回はウィジェットを使えるようにする方法をご紹介します。とても便利なので、是非サイト管理の効率化に役立てましょう。

前提を決めましょう

まずは、どこにウィジェットを表示させるかですね。前提として、サイドバーが元々ないWordPressのテーマを使っていたとします。ページにサイドバーをつけて、ウィジェットを使えるようにします。

サイドバーにウィジェットを表示させるためには

サイドバーが元々ないので、ご使用のthmemeフォルダに、「sidebar.php」のファイルを作成します。ファイルの作成方法はメモ帳やテキストエディターを開いて保存する時に「php」として保存すれば、ファイルが作れます。（ファイルを作成する時は、文字コードにご注意下さい。）

ファイルを作成したら、下記のコードを書きましょう。

【sidebar.phpにコードを書く】

 <?php
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() )
 endif;
 ?>

続いて、WordPressのテーマファイル内にある「functions.php」を開いてファイルの最後に下記のコードを追加しましょう。

【functions.phpにコードを書く】

 <?php
 if ( function_exists('register_sidebar') )
 register_sidebar();
 ?>

これでできます。で、WordPressの管理画面から「ウィジェット」をクリックしましょう。

【ウィジェットをクリックしたら使えるようになっていますよ】

これで、ウィジェットが使えるようになりました。試しに、検索、カテゴリー、タグのウィジェットを追加しました。

【ウィジェットをドラッグ＆ドロップで追加したところ】

それぞれ、見出しとしてSEARCH,CATEGORY,TAGと入力しています。ここまでこれば、あと少しでできます。

表示したいページにコード「<?php get_sidebar(); ?>」を入れます

使っているテーマにはサイドバーがないので、表示させるためにコードを書きます。今回は、トップページと個別記事にサイドバーを表示させましょう。ご使用のテーマファイルに「index.php」と「single.php」というファイルがあるはずです。そのファイルそれぞれに、

<?php get_sidebar(); ?>

のコードを書きましょう。書く箇所については、使用されているテーマによって様々だと思いますので割愛しますね。

以上で完了です。

サイトにアクセスして表示を確認しましょう

ウィジェットが表示されているかどうか、サイトを見ましょう。トップページ、個別記事にサイドバーを表示するように先ほど設定いたしましたね。下の画像のように表示されていればOKです。ご使用のテーマによってデザインは違うと思いますが、こんな感じです。

【ウィジェットが表示された】

あとは、スタイルシートなどで飾ればデザインもかっこよくできますよね。ただ・・・このままですとスタイルシートを使ってデザインを整えようとしても、自由度が少ないんですよね。

なぜかというと、このウィジェット部分のソースを見てもらえばわかるんですが、ウィジェットそれぞれが</li></li>タグで囲まれているんですね。見出しも<h2></h2>タグで囲まれています。別にそのタグに対応させるようにスタイルシートでデザインすればいいんですがね。

私は自分で指定したhtmlタグでスタイルシートを使ってデザインしたい、と思いました。以下でその方法についても書きました。

もっとデザインを自由にさせたい場合は

ウィジェットに対して、好きなhtmlタグを指定、さらにid,classも指定する方法があります。

【ウィジェットごとにhtmlタグをつけたい時は、こうやってコードを書く】

functions.phpに下のコードを書きます。

 <?php
 if ( function_exists('register_sidebar') )
 register_sidebar(array(
 'before_widget' => '<div class="sidebar">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));
 ?>

register_sidebar（）のカッコ内（）に配列「array()」を書きます。配列の中には、

  • before_widget
  • after_widget
  • before_title
  • after_titile

を書いて、それぞれ値を設定しています。設定してある値はhtmlタグです。<div>とか<h3>とか。classも設定しました。ここでは、ウィジェットごとに「sidebar」というclassを指定しています。

もう少し掘り下げると、こういうことです。

  • before_widget～after_widgetの間でウィジェットを囲む div タグを指定する。
  • div タグに class=”sidebar” を指定。

（<div class=”sidebar”></div>でウィジェットを囲んでるってこと）

  • before_title～after_titleの間でウィジェットのタイトルを囲むタグを指定する

（<h3>ウィジェットのタイトル</h3>で囲んでるってこと）

図で表すと下のような感じですよね。技術本とかでこういうの見たことあるんじゃないかと思います。

タイトルとウィジェットのデータを<div>で囲んでいるイメージですね。これができたら、あとはスタイルシート（css）でデザインを変えましょう。そんなに変わってないかな・・・まあ、こうやってかっこつける準備は整っていると思えばいいと思います。

あと、htmlタグは<div><h3>とかclassとかを使いましたけど、これはご使用のテーマに沿ったもので大丈夫です。つまり、指定するものは何でもいいです。カスタマイズはご自由に、という感じですね。

【ウィジェットの書き方で前と後でデザインが違う】

もっと細かくデザインを変更することもできます

【ウィジェットごとにhtmlタグをつけたい時は、こうやってコードを書く】

functions.phpに下のコードを書きます。

 <?php
 if ( function_exists('register_sidebar') )
 register_sidebar(array(
 'before_widget' => '<div class="%1$s %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));
 ?>

4行目に注目下さい。%1$s,%2$s と書いてありますが、これはそれぞれ

  • %1$s　→　ウィジェットのID
  • %2$s　→　widget_xxx

で表示されます。

例えば、「widget_xxx」の「xxx」の部分については、

  • 検索　→　widget_search
  • カテゴリー　→　widget_categories
  • タグ　→　widget_tag_cloud

と、classに設定されます。

他のウィジェットも、個別で名前が付けられています。

まとめ

WordPressのテーマを今までいくつか触った経験は結構あるのですが、デフォルトでウィジェットが使えないテーマに遭遇したのがきっかけで、この記事を書きました。

  • ウィジェットを追加する方法
  • ウィジェットを使えるようにする方法
  • ウィジェットにhtmlタグやid,classを指定したい方

といった方に、ご参考いただければ幸いです。

また、今回は基本的なことのみを題材にしましたが、ウィジェットについてさらに理解を深めたいとお思いの方には、WordPress ウィジェット APIがオススメです。ウィジェットを複数追加する方法などが掲載されています。とても有益なサイトですね！

著者:bouya Imamura