今回は、WordPressのショートコードを使って、ラクしてしまおうという話です。

この記事はちょっと上級編です。

現在進行中のプロジェクトでの事例

以下のサムネイルは、現在制作中の某リゾートのページの一部です。

このリゾートには複数のタイプのコテージがあって、このページではそれぞれの概要が掲載されており、画像などをクリックすると詳細ページへ移動します。

WordPress内部ではページとして作成されていて、以下のようなツリー構造になっています。

• 宿泊案内
  • ログハウス
  • コテージA
  • コテージB
  • コテージC
  • ….

で、宿泊案内のページを編集画面で見ると実際に入力されているコンテンツは、以下のような感じです。

実は本文の部分は簡単なテキストとショートコードが入力されているだけです。

ショートコードをインストール。

以下のソースをダウンロードしてプラグインとしてインストールしてください。

ページで抜粋を有効にする。

上述のショートコードでは、子ページの抜粋を表示しますが、WordPressのページにはデフォルトでは抜粋が表示されません。

WP Total Hacksプラグインをインストールして「ページに”抜粋”を追加する」を有効化してください。

投稿サムネイルを有効にする。

ショートコードで出力される画像はそれぞれの記事の投稿サムネイルです。

これはテーマのfunctions.phpに以下の2行を追加してください。

add_theme_support('post-thumbnails');
add_image_size('sidebar', 278, 156, true);

1行目はテーマで投稿サムネイルを使いますという意味です。

2行目はsidebarという名前で画像のサイズを追加してねという意味で、この行を追加することで幅278px、高さ156pxの画像がアップロード時に自動的に生成されるようになります。

記事内にショートコードを挿入する。

以下のような感じのショートコードを記事内に入力してください。

[list_subpages thumbnail="sidebar"]

thumbnailという引数の値は、前述したadd_image_size()で指定したサイズの名前です。

WordPressにはデフォルトで、thumbnailとかpost-thumbnailとかmediumなどがあります。

CSSをゴリゴリ書く

CSSは好みに合わせて。

冒頭で紹介したサイトでは以下のようなCSSを使用しています。

.list_subpages.sidebar .post
{
    overflow: hidden;
    float: left;
    width: 298px;
    margin: 10px;
    border: 1px solid #dedede;
    background-image: url(img/bg-white.png);
    background-repeat: repeat-x;
    background-position: left bottom;
    border-radius: 5px;
}

.list_subpages.sidebar .post_thumb a
{
    display: block;
    width: 278px;
    margin: 10px;
}

.list_subpages.sidebar .post_content
{
    padding: 10px;
}

.list_subpages.sidebar .post_content h4
{
    font-weight: bolder;
    margin-bottom: 0px !important;
}

.list_subpages.sidebar .post_content .post_excerpt
{
    font-size: 12px;
    line-height: 18px;
    margin-top: 10px;
}

まとめ

このテクニックを使用すると以下のようなメリットがあります。

• 子ページの追加や編集だけで親ページ側にも反映されるのでメンテナンスが楽ちん。
• CSSと組み合わせて複数カラムに対応できる。

現在制作中のサイトでパンくずリストを実装するにあたり、どれを使おうか迷ってたところ、海外で以下のようなエントリーがあったので、順番に試してみました。

http://www.web3mantra.com/2011/06/14/9-useful-wordpress-breadcrumb-plugins-for-smoother-navigation/

まずはじめにダメダメなプラグイン

以下のプラグインはデバッグモードで使用すると有効化の時点で警告が出たので問答無用で使用しません。（WordPress 3.1.3で検証）

選択肢はたくさんあるので、動作上実害がないとしても、わざわざ使う必要はありませんよね。^^

• BreadCrumb NavXT Widget
• BP Breadcrumbs
• Yoast Breadcrumbs

Breadcrumb NavXT

管理画面が日本語化されています。

でも、個人的にはたかがパンくずリストで管理画面？って感じがするので、こんなに充実したオプションがあるプラグインは好きではありません。

あくまでも好みの問題ですが。^^

Breadcrumbs Plus

とりあえず、FAQに記述されているとおり以下のソースを入力してみた。

<?php
    if ( function_exists( 'breadcrumbs_plus' ) ) {
        breadcrumbs_plus( array( 'singular_post_taxonomy' => 'category' ) );
    }
?>

出力結果は以下のような感じ。
”You are here”っていうのが余計なお世話のような… こんなものは必要ならテーマに直接書きます。

ソースを見ると以下のようなオプションが用意されているので、出力に関してはカスタマイズ出来るようです。

 46     /* Set up the default arguments for the breadcrumb. */
 47     $defaults = array(
 48         'prefix' => '<p>',
 49         'suffix' => '</p>',
 50         'title' => __( 'You are here: ', 'breadcrumbs-plus' ),
 51         'home' => __( 'Home', 'breadcrumbs-plus' ),
 52         'sep' => '&raquo;',
 53         'front_page' => false,
 54         'bold' => true,
 55         'show_blog' => true,
 56         'singular_post_taxonomy' => 'category',
 57         'echo' => true
 58     );

Simple Crumbs

このプラグインはショートコードとして実装されています。

テーマファイルの中に直接記述する場合は以下のような感じ。

<?php echo do_shortcode('[simple_crumbs root="Home" /]') ?>

投稿やページなどの記事の中に入力して使用する場合は、以下のような感じ。

[simple_crumbs root="Home" /]'

いいじゃん！と思ったんですけど、実際に上述のソースを入れると警告が… ^^;

うーん残念！

警告の原因となっているソースが以下のような不思議なソースでちょっと笑えました。

$baseURL .= sprintf("/$tok");

Breadcrumb Trail

うーーーん。動作上は問題なさそうですが、このプラグインも以下のように余計な世話が…

関数への引数で設定できるようですが、デフォルトでは”Browse:”は出力しないで欲しいな。

ソースを見ると以下のようなオプションが用意されています。

 59     /* Set up the default arguments for the breadcrumb. */
 60     $defaults = array(
 61         'separator' => '/',
 62         'before' => '<span class="breadcrumb-title">' . __( 'Browse:', $textdomain ) .
     '</span>',
 63         'after' => false,
 64         'front_page' => true,
 65         'show_home' => __( 'Home', $textdomain ),
 66         'echo' => true
 67     );

WordPress Breadcrumbs

有効化の時点では警告が出なかったんですが、テンプレートタグを記述した途端に警告が発生したのでボツ。

Simple Breadcrumbs For WordPress

使い方がよくわからなくてソースを見ると、the_titleのフィルターフックを利用して自動的に出力しているようですが、なぜか何も出ません…

まとめ

意外なことに私の要望にバチっとはまるプラグインがなかったのですが、個人的なおすすめは以下のプラグインかな？って感じです。

• Breadcrumbs Plus
• Breadcrumb Trail

PHPよくわかんないよって人におすすめするなら、以下のプラグインです。

• Breadcrumb NavXT

というわけで、意外に残念な結果でした。^^;

今回はSQLとかは検証していませんのでパフォーマンスについてはわかりません。

でもデバッグモードで開発してないプラグイン（デバッグモードで警告が出るプラグイン）はパフォーマンスは絶対に気にしてないから使わないほうがいいですよ。

追記

この記事をtwitterに投稿したところWordPress名人の@jim0912さんから以下のようなツイートが。

おいらの… http://wp.me/p1iNN9-cd RT @miya0001: ブログ更新した。意外と残念な結果だった。^^; "WordPressでパンくずリストを表示するためのプラグイン９個を検証" http://bit.ly/lGrXA9

2011/06/29 16:37:35 via Tween

hitoshi omagari

jim0912

ひぇー！ごめんなさい！

というわけで早速検証してみました。

http://www.warna.info/archives/757/

おー、紹介されているソースを元にプラグインを作成して、以下の記述をテーマにいれたところ、余計なお世話の出力もないし警告も出ません。

<?php bread_crumb(); ?>

私の希望にピッタリはまるプラグインがありました。

さすがだ、jimさん！やっぱりjimさんだぜ！

プラグインレポジトリにアップお願いします！

WordPressのサイドバーウィジェットを自作すると、クライアント向けにWordPressを納入する際に色々と便利なので、実際の作り方をなるべく簡単にご紹介します。

ステップ１：WP_Widgetクラスを定義する。

ウィジェットプラグインを作成するには、WP_Widgetというクラスを継承した子クラスを作成する必要があります。

クラスとか継承とか難しそうですが、テンプレートのようなものを用意するだけと思えば簡単です。

以上のソースはウィジェットプラグインを作成するためのテンプレートのようなものです。

とりあえず、このファイルを任意の名前（たとえばmywidget.phpなど）で保存してzip圧縮した後、プラグインのインストール画面からアップロードしましょう。

プラグインを有効にした後でウィジェットの画面に移動すると、以下のような感じで新しいウィジェットが追加されていると思います。

これから実際にウィジェットを自作するわけですが、とりあえず必要なカスタマイズは以下のとおりです。

• 3行目の”My Widget”を任意の名前に変更。この部分がプラグインの名前になります。
• 8行目及び11行目の”MyWidget”を変更。この部分は半角英数またはアンダーバーしか使用できません。また、両方とも同じ文字列である必要があります。
• 18行目の”はじめてのウィジェット”を変更。これが管理画面で表示されるウィジェット名です。
• 14行目の”はじめてのウィジェットです。”を変更。これはウィジェットに関する説明文です。
• 15行目はウィジェットのオプション用フォームの縦横のサイズです。array()とすればデフォルトのサイズが自動的に適用されます。

ここまでの作業で、なにもしないウィジェットが動作するようになります。

実際に、サイドバーにドラッグ＆ドロップできますのでお試しください。

ステップ２：オプションフォームを作成する。

ウィジェットでは以下のようなオプション用のフォームをつくることが可能です。

オプション用のフォームは、form()メソッド内に必要な記述をいれるだけで、多くの処理はWordPressコアが勝手にやってくれます。

今回はテキストをただ表示するだけのシンプルなウィジェットを作りますが、実はそれだけなら以下のようなソースを24〜26行目のform()メソッドと置き換えるだけでフォームの作成から保存する処理までが完了します。

public function form($par) {
    // タイトルの入力
    $title = (isset($par['title']) && $par['title']) ? $par['title'] : '';
    $id = $this->get_field_id('title');
    $name = $this->get_field_name('title');
    echo 'タイトル：<br />';
    echo '<input type="text" id="'.$id.'" name="'.$name.'" value="';
    echo trim(htmlentities($title, ENT_QUOTES, 'UTF-8'));
    echo '" />';
    echo '<br />';

    // テキストの入力
    $text = (isset($par['text']) && $par['text']) ? $par['text'] : '';
    $id = $this->get_field_id('text');
    $name = $this->get_field_name('text');
    echo 'テキスト：<br />';
    echo '<textarea style="width:100%" id="'.$id.'" name="'.$name.'">';
    echo trim(htmlentities($par['text'], ENT_QUOTES, 'UTF-8'));
    echo '</textarea>';
}

ここでのポイントは以下のとおりです。

• オプションで保存された項目は、form()メソッドの引数に配列（$par）として渡される。
• 各入力項目を区別する名前（この例ではtext）を指定して必要な項目を取得する。
• 各フォーム要素のname属性及びid属性は、get_field_name()及びget_field_id()で取得した値を指定すること。

超簡単にかいつまんで説明すると、titleとかtextを単純に別の文字列（半角英数など）に臨機応変に変えてねということです。

ステップ３：保存した内容を出力する。

保存した内容の出力は、さらに簡単です。

widget()メソッド内で以下のような処理を行うだけです。

public function widget($args, $par) {
    echo $args['before_widget'];
    echo $args['before_title'];
    echo trim(htmlentities($par['title'], ENT_QUOTES, 'UTF-8'));
    echo $args['after_title'];
    echo trim($par['text']);
    echo $args['after_widget'];
}

ここでのポイントは以下のとおりです。

• $argsが含まれる行はそのままでオッケー。むしろ変更しないほうが吉です。
• ウィジェットのタイトルを$args['before_title']と$args['after_title']の間で出力する。
• コンテンツを$args['after_widget']の直前で出力する。必要に応じてdiv要素等で囲むとCSSで扱いやすいと思います。

最後に

このページでのサンプルではいい加減なバリデーションしかしてませんが、WordPressコアには便利なバリデーションがたくさんありますので、ちゃんとやりましょう。

http://codex.wordpress.org/Data_Validation

できあがったウィジェットプラグインは以下のような感じです。

PHPが出来る人には意外と簡単じゃないかなと思うのですがどうでしょう？

WordPressのサイドバーにバナー広告みたいなのをほいほいと貼り付けるプラグインないかなーと思ってたら、便利なプラグインを見つけました。

http://wordpress.org/extend/plugins/image-widget/

せっかくなので、日本語の言語ファイルも作りましたので、以下からダウンロードしてプラグインのlangディレクトリ内に設置してください。

Image Widget 日本語ファイル

作者さんにも連絡済みなので、近日中に本家からのダウンロードファイルにも追加されると思います。

このプラグインを使用すると、画像のURLをWordPressコアのメディアアップローダーから選択して、リンクを貼るまでの手順がHTMLを書かなくても簡単に完結します。

HTMLに詳しくない人でもバナー画像をサイドバーに設置できるので便利ですよん。

午前0時を過ぎたので昨日になりますが、神戸のWordBenchに参加しました。

みなさん、お疲れさまでした。

ところで、そのなかで、トップページの下の方に今後のイベントを表示したいとか、ウィジェットでやったらいいとか、そんなやりとりがありました。

実は、その解決に役立ちそうなのをすでに持っていたので、公開しておきます。

このプラグインは、URLを指定すると、その記事の投稿サムネールやタイトル、記事などを単独で表示するプラグインです。

使い道

このプラグインは単に指定された投稿またはページを単独で表示するだけです。

しかし、投稿サムネールがあればそのimgタグも出力できますので、たとえばサイドバーウィジェット上でキャンペーンなどの告知用バナーなどが、超簡単に作成できます。

HTML部分はテンプレート化していますので、様々なシーンで利用可能な優れものです。

導入手順

テーマファイル内の functions.php に以下の記述を追加してください。

register_sidebar( array(
    'name' => 'Home Widget Area',
    'id' => 'home-widget-area',
    'description' => 'The HOME widget area',
    'before_widget' => '<div id="%1$s" class="home-widget-container %2$s">',
    'after_widget' => '</div><div class="clearfix">&nbsp;</div>',
    'before_title' => '<h2 class="widget-title">',
    'after_title' => '</h2>',
));

続いて、テーマファイル内のindex.phpのhave_posts()ループの直下あたりに、以下の記述を追加してください。

dynamic_sidebar('home-widget-area');

ここまでの処理でトップページに新しいウィジェットエリアが追加されました。

あとは、本プラグインを以下からダウンロードして、インストールして下さい。

singlepost-widget

次にウィジェットの設定画面で、このウィジェットを有効化してテンプレートをゴニョゴニョすれば完成です。

イベントが完了したら、ワンタッチで削除できますので幸せですよ。

詳しい仕様

• 投稿のIDまたはURLからその投稿に関する情報を取得します。URLが指定された場合は内部でIDに変換して、そのIDからget_post()してます。
• サムネールのサイズはそのテーマで使用可能なサイズが自動的にプルダウンに出ます。
• テンプレートはコンテンツ出力部分のテンプレートを指定できます。テンプレート内では、以下のような専用タグが使用できます。
  • %post_thumb% – 投稿サムネールのimgタグ
  • %class% – CSS用のクラス属性
  • %post_title% – 投稿のタイトル
  • %post_excerpt% – 投稿の抜粋
  • その他,
  • WordPressのget_post()関数を%で囲んだもの。

意味分かりにくいですかね？

でも、これは、解決策のひとつとしてとてもオススメであることは間違いありません。

わからないことがあれば、twitterで質問してくださいませ。