ウェブ、ショウジン

自作のWordPressテーマをWidget(ウィジェット)対応させる

2011-8-2
Category
WordPress

初めて作った自作テーマはまだまだWordPressにおける理解が浅いこともあってWidget(ウィジェット)を使った動的なコントロールってあたりが不備だったりしました。

処理速度のこととか考えると、必ずしもこういった機能を使うのがベストということでもないようだったので当座はこのままでいこうかと思っていたのですが(例えば、サイドバーに表示させるものならsidebar.phpにタグ等を記述)

とあるプラグイン(WordPress Popular Posts)を使ってみたいなと思って調べたら、なんとこれがウィジェットでの使用が前提のもので、ウィジェット対応にしないと利用できないということが
判明しまして。

それで自作テーマのウィジェット対応をすることに決めたのであります。

が、しかーし!

ちゃんと調べると、なんかウィジェット対応させなくてもテンプレートにWordPressのタグ書けば大丈夫だったぽいような記事も最近見かけました。まぁよいです。またちょっと理解を深めるいい機会になったので。

ということで、ウィジェット、今回はサイドバーウィジェットを使えるようにしてみます。

ウィジェット対応していないテーマだと、WordPressの管理画面の
外観 > ウィジェット
にアクセスすると以下のように「ウィジェットは使用できません」と表示されます。

sidebar_widget1

ウィジェットを使えるようにするには、例えば以下のような内容を自作テーマフォルダ内のfunctions.phpに追加します。

// サイドバーウィジェット
register_sidebar( array(
     'name' => __( 'Side Widget' ),
     'id' => 'side-widget',
     'before_widget' => '<li class="widget-container">',
     'after_widget' => '</li>',
     'before_title' => '<h3>',
     'after_title' => '</h3>',
) );

これでいきなりサイドバーウィジェットは使用できるようになりました。(まだ出力側にそのためのコードを追加していないので見た目は変わりませんが、機能としては追加されました)

さきほどの管理画面「ウィジェット」にもう一度アクセスしてみると以下のように画面が変化し、利用できるウィジェットとして色々と項目が確認できるようになってます。

sidebar_widget2

ここで試しに「タグクラウド」ウィジェットを、右側の「Side Widget」のブロックにドラッグ&ドロップして有効化してみます。

sidebar_widget3

これでサイドバーに「タグクラウド」のウィジェットが追加されたはずですが、出力するテンプレート側(sidebar.php)にそのためのコードを追加していないのでまだフロント側では何も変化がありません。

フロント側でも確認できるようにテンプレートに次のコードを追加します。

sidebar.php

<?php dynamic_sidebar('side-widget'); ?>

これでWordPressのフロント側をブラウザで開いてみると前述のコード(dynamic_sidebar(‘side-widget’))を追加した場所に「タグクラウドウィジェット」の出力内容が表示されていることが
確認できます。

sidebar_widget4

どんなコードを出力しているのか確認してみると

<li class="widget-container">
	<h3>たぐくらうど</h3>
	<div class="tagcloud">
		<a href='http://172.16.106.128/wp/?tag=android' class='tag-link-27' title='1件のトピック' style='font-size: 8pt;'>android</a>
		<a href='http://172.16.106.128/wp/?tag=apache' class='tag-link-28' title='3件のトピック' style='font-size: 12.117647058824pt;'>apache</a>
		<a href='http://172.16.106.128/wp/?tag=bash' class='tag-link-29' title='1件のトピック' style='font-size: 8pt;'>bash</a>
	</div>
</li>

こんな感じです。(多いのでaタグの内容は上位三件だけに削ってます)

テーマのマークアップによってはこれだと合わない場合もあるのでそういうときは前述のfunctions.phpに追加したウィジェット対応のためのコードを編集します。

register_sidebar( array(
    'name' => __( 'Side Widget' ),
    'id' => 'side-widget',
    'before_widget' => '<div class="side_widget_block">',
    'after_widget' => '<!-- // .side_widget_block --></div>',
    'before_title' => '<h2>',
    'after_title' => '</h2>',
) );

上記のように変更して、再度出力内容を確認してみると

<div class="side_widget_block">
	<h2>たぐくらうど</h2>
	<div class="tagcloud">
		<a href='http://172.16.106.128/wp/?tag=android' class='tag-link-27' title='1件のトピック' style='font-size: 8pt;'>android</a>
		<a href='http://172.16.106.128/wp/?tag=apache' class='tag-link-28' title='3件のトピック' style='font-size: 12.117647058824pt;'>apache</a>
		<a href='http://172.16.106.128/wp/?tag=bash' class='tag-link-29' title='1件のトピック' style='font-size: 8pt;'>bash</a>
	</div>
<!-- // .side_widget_block --></div>

こんなふうになってます。(多いのでaタグの内容は上位三件だけに削ってます)

この他にもウィジェットでサイドバーに表示するものを増やしていくとどうなるか分からないので上記のようなマークアップが妥当なのかはまだ分からないのですがとりあえずこうやって出力するマークアップの内容を変更することは可能だと分かりました。

sidebar.php

<?php dynamic_sidebar('side-widget'); ?>

この記述だと、この記述が追加された位置にウィジェットが出力されて、既存の各ブロック(最新の記事とか、テンプレートに直書きして出力させているもの)はそのままというところまでは理解できたので、次はお目当てのプラグイン(WordPress Popular Posts)をインストールして、これをウィジェット画面で操作してフロント側に表示できるようにしてみます。

ウィジェットについての詳細は公式サイトのCodexで解説されてます。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿