WordPress には oEmbed という機能が備わっており、動画や画像などの外部コンテンツを簡単に埋め込み表示することができます。例えば記事入力の際に YouTube のある動画ページの URL を貼り付けるだけで動画が表示されたり、Twitter のツイートの URL を貼り付けるだけでツイートを掲載することができたりします。

テンプレート内で oEmbed を使用する

この便利な oEmbed を記事入力欄ではなくテンプレート内で使用することができます。次のようなコードで実装できます。

// $url に YouTube の URL 等を渡す
$embed_code = wp_oembed_get( $url );
echo $embed_code;

埋め込まれる画像や動画のサイズはグローバル変数「$content_width」の値が使用されますが、wp_oembed_get の第2引数でサイズを指定することもできます。

// $url に YouTube の URL 等を渡す
$embed_code = wp_oembed_get( $url, array( 'width' => 480 ) );
echo $embed_code;

WordPressのフォームプラグイン「MW WP Form」をバージョンアップしました（Ver 0.7.1 => 0.8）。主な更新内容は以下のとおりです。

• 画像アップロードフィールドを追加
• ファイルアップロードフィールドを追加
• ファイルタイプ バリデーション項目を追加
• ファイルサイズ バリデーション項目を追加
• 管理画面で不正な値は save しないように修正
• datepickerで年月をセレクトボックスで選択できる設定をデフォルトに
• アクションフック mwform_add_shortcode, mwform_add_qtags 追加
• バリデーション項目 文字数の範囲, 最小文字数 の挙動を修正
• フォーム制作画面でビジュアルエディタを使えるように変更

マニュアル

画像＆ファイル添付機能について

画像アップロードフィールド、ファイルアップロードフィールドは、どちらも何のファイルでもアップロードできるという点は共通ですが、画像アップロードフィールドの場合は確認画面等でアップロードしたファイルを表示する場合imgタグで表示し、ファイルアップロードフィールドの場合はリンクで表示します。アップローするファイルの種類の制限は管理画面で設定します。

アップロードされたファイルは、「問い合わせデータをデータベースに保存」する場合はメディアに追加されると同時に管理画面に保存された問い合わせデータにも添付されます。データベースに保存しない場合は、管理者へのメール送信後ファイルは削除されます。また、管理者へのメールにはアップロードされたファイルが添付されますが、自動返信メールにはファイルの添付は行われません。

アクションフック mwform_add_shortcode, mwform_add_qtagsについて

アクションフック mwform_add_shortcode, mwform_add_qtags を追加し、フォーム項目を表示するためのショートコードの追加と、管理画面でショートコードを埋め込むためのクイックタグの追加をこのフックを通して行うようにしました。このフックを使うことでオリジナルのフォーム項目を追加することが可能です。

バリデーション項目の動作変更について

バリデーション項目「文字数の範囲」「最小文字数」の挙動の修正ですが、このバリデーションを設定すると自ずと必須項目となってしまっていたので、入力がない場合はエラーにしないように修正を行いました。必須項目にするために使用されていた方は、「必須項目」も追加してください。

今回は結構大幅に修正を入れたので、もしかしたら不具合などあるかもしれません。もし不具合を見つけられた場合は、ぜひご連絡をお願いします。

ダウンロード

WordPressのフォームプラグイン「MW WP Form」をバージョンアップしました（Ver 0.8 => Ver 0.8.1 => Ver 0.9）。主な更新内容は以下のとおりです。

• Akismet設定を追加
• functions.php を用いたフォーム作成は非推奨・サポート、メンテナンス停止
• チェックボックスで区切り文字の設定機能を追加

マニュアル

ダウンロード

Akismet によるスパムフィルタリング

Akismet は WordPress に標準でインストールされているスパムフィルタリングプラグインです。無効状態でインストールされているので、スパムフィルタリング機能を有効にするには、プラグインを有効化する必要があります。

MW WP Form のフォーム作成画面を開くと、右側の設定パネルに「Akismet 設定」が追加されています。

Akismet 設定

Akismet は主にコメントフォーム用のプラグインなので、氏名・E-mail・URL・本文の4つについてスパムチェックを実行するようになっています。

MW WP Form では「author」には送信者用の項目のキー（name）を、「email」には送信者の送信者のメールアドレス用の項目のキーを、「url」には送信者のURL用のキーを入力します。該当するキーが無い場合は入力しなくても構いません。

いずれかの項目に入力がある場合、各入力項目をまとめたものを本文としてチェックします。

Akismet エラー用のショートコード

Akismet でスパムと判定された場合はバリデーションエラーとなりますが、そのままだとエラーが表示されません。エラーを表示するためには、任意の箇所に次のショートコードを記述してください。

[ mwform_akismet_error ]

MW WP Form のフォーム作成画面にある「Akismetエラー」というボタンを押しても設置できます。

functions.php を用いたフォーム作成は非推奨・サポート、メンテナンス停止

MW WP Form は、もともと functions.php でバリデーション・メール送信を実行するプラグインですが、管理画面でフォームを作成できるようになったので恐らく functions.php でフォームを作成するという需要は無いだろうなーということで functions.php を用いたフォーム作成についてはサポート・メンテナンスを停止します。今のところは functions.php でフォームを作成している場合でも動作します。

チェックボックスで区切り文字の設定機能を追加

チェックボックスで複数の項目を選択して確認画面を表示したりメールを送信した場合、区切り文字は「,（半角カンマ）」固定でしたが、ショートコードの設置時に引数を追加することで任意の区切り文字を利用できるようになりました。

// separator という引数で任意の引数を設定できます。
[ mwform_checkbox name="checkbox" children="A,B,C" separator="、" ]

ダウンロード

先週の土曜日に開かれた「問い合わせフォームを考える市民フォーラムふくおか（仮）」に参加してきました。会は紆余曲折あって招待制での開催。参加者は10名でした。WordPressの問い合わせフォームプラグインの作者3名をWordPress界の猛者で囲ってディスカッションしましょうという内容でとても充実した時間となりました。

「問い合わせフォームを考える市民フォーラムふくおか（仮）」の内容や写真はTsuyoshiさんの記事に詳しくまとめられています。

個人的に心に残ったポイント

詳しい内容は上記の記事にまとまっていますので、ここでは僕が個人的に心に残ったポイントをまとめたいと思います。

• プラグインについての質問等はブログやメールで受け付けずフォーラムに集約するほうが良い（情報の分散を防ぐ、ユーザー同士で解決する場合もある等）。
• フックは一度作ってしまったらなかなか消せない（使用しているユーザーがいるかもしれないから）
• MW WP Form のダウンロード数が増えないのは既存のフォームプラグインを使い込んでいて乗り換えるのが億劫だからではないか。
• 確認画面のニーズは欧米ではほとんどない。でもステップ分割のニーズはある。
• オープンソースCMSの場合、いろいろな人がいろいろなプラグインを開発していて、いろいろな環境で使われるからコンフリクトを気にしたりテストをするのが大変。
• 有料プラグインが使われているとコードが見えないから特に大変。最近質の低い有料テーマ・プラグインが増えてきているから何とかしないといけない。

MW WP Formについて

WordPressの問い合わせフォームプラグインの中ではダントツにダウンロード数が低いので、参加者の方々もほとんどご存じないだろうということで、MW WP Form の紹介と、なぜ開発するに至ったかの話をスライドにまとめていきました。せっかくなのでここで公開します。

WP-Dにインタビューされました。

会の前にWP-DのPurpleさんからインタビューを受けました。人気ブログにこんなに取り上げられるのは初めてなのでとても恥ずかしいですが、良かったらぜひこちらもご覧ください。

僕は今回の参加者の方々と全く接点がなかったので、どこで僕のことを知って声かけをしていただけたのか尋ねたところ、長崎でちょくちょくお会いしている某人が僕の話をしてくれたことがきっかけだったらしい。やっぱり人脈って大事だなー…と思いました。

簡単にスライドショーを実装できる jQueryプラグイン「jquery.SimpleSlideShow.js」に画像切り替え時のアニメーションを追加しました。

これまでスライドショープラグインと言いながら画像切り替え時のアニメーションがフェードしかなかったので、左からのスライドで画像が切り替わるようなアニメーションを追加しました。

デモ

マニュアル

ダウンロード

カスタム投稿タイプと同じく、WordPressでブログ以外のサイトを作る場合によく使うカスタムタクソノミー。しかし、似たような関数が多く、毎回Codexを見たり記事を探してみたりしてしまうので、個人的に多用する関数を抜粋してまとめてみました。

get_the_terms

投稿に紐づく任意のタクソノミーを取得する関数。

$terms = get_the_terms( $post->ID, 'タクソノミー名' );
$terms = get_the_terms( $post->ID, array( 'タクソノミー名1', 'タクソノミー名2' ) );

get_taxonomy

タクソノミーの情報を取得する関数。タクソノミー名を表示したいとき等に便利です。

$taxonomy = get_taxonomy( 'タクソノミー名' );
echo esc_html( $taxonomy->singular_label );

get_terms

任意のタクソノミーに設定されたタームを取得する関数。第2引数でどのようなタームを取得するか設定が可能です。カテゴリーの一覧を任意のHTML構造で出力したいときに便利です。

<?php
$terms = get_terms( 'タクソノミー名', array( オプション ) );
?>
<ul>
    <?php foreach ( $terms as $term ) : ?>
    <li><?php echo esc_html( $term->name ); ?></li>
    <?php endforeach; ?>
</ul>

get_the_term_list

任意の投稿の、任意のタクソノミーに設定されたタームへのリンクをカンマ区切りで出力する関数。引数を変更することでカンマ区切り以外にもできます。

// get_the_term_list( $post->ID, 'タクソノミー名', 'リストの最初に表示する文字列', '区切り文字', 'リストの最後に表示する文字');
echo get_the_term_list( $post->ID, 'タクソノミー名', '', '、', '');
echo get_the_term_list( $post->ID, 'タクソノミー名', '<li>', '</li><li>', '</li>');

WordPress のメール送信関数 wp_mail は第4引数でメールヘッダの内容を指定できるので、これまでは下記のような感じで From を指定していました。

$header = 'hoge <' . $from . '>' . "\n";
wp_mail( $to, $subject, $body, $header );

これで問題なく動作していたのですが、今回 From と同じように Retern-Path の設定を追加しようとしたところ、設定が反映されず。

$header = 'From:キタジマ <' . $from . '>' . &quot;\n&quot;;
$header = 'Return-Path:' . $from . &quot;\n&quot;;
wp_mail( $to, $subject, $body, $header );

Retern-Path を設定する

調べると、Retern-Path は下記のフックを使って設定できるということがわかりました。

function set_return_path( $phpmailer ) {
    $phpmailer->Sender = 'hoge@example.com';
}
add_action( 'phpmailer_init', 'set_return_path' );
wp_mail( $to, $subject, $body );

From を設定する

Retern-Path はアクションフックで設定できることがわかりましたが、From についても専用のフックが用意されているようです。

function set_mail_from( $email ) {
    return 'hoge@example.jp';
}
function set_mail_from_name( $email_from ) {
    return 'キタジマ';
}
// from のメールアドレスを設定するフィルターフック
add_filter( 'wp_mail_from', 'set_mail_from' );
// from の送信者名を設定するフィルターフック
add_filter( 'wp_mail_from_name', 'set_mail_from_name' );

WordPressのフォームプラグイン「MW WP Form」をバージョンアップしました（Ver 0.9.4 => Ver 0.9.5）。主な更新内容は以下のとおりです。

• バリデーションエラー時に遷移するURLを設定可能に
• 送信メールの Return-Path に「管理者宛メール設定の送信先」が利用されるように変更
• {投稿情報}、{ユーザー情報}の値がない場合は空値が返るように変更
• 設定済みのバリデーションルールは閉じた状態で表示されるように変更
• Mail::createBody の挙動を変更（送信された値がnullの場合はキーも値も出力しない）
• Mail::createBody で Checkbox が未チェックで送信されたときに Array と出力されてしまうバグを修正

マニュアル

ダウンロード

バリデーションエラー時に遷移するURLを設定可能に

先日、@mypacecreatorさんに「受託案件で活躍しそうなWordPressメールフォームプラグイン「MW WP Form」を使ってみた」という記事で MW WP Form を紹介していただいたのですが、その中で下記のようなご要望が載っているのが目に止まりました。

解析をやってる立場からもう一つ欲張った要望を言うなら、初期の入力画面で入力内容に不備があった場合、同じURLでエラー表示が出るのですが、ここをエラー時専用のURLに遷移できると完璧なんですよねー。

僕自身はバリデーションエラー時に別URLに飛ばしたいという考えを持ったことがなかったのでこれまで実装していなかったのですが、このような意見をもらってみて、確かに便利かもと。ということで新たに機能を追加してみました。

MW WP Form のフォーム作成画面を開くと、URL設定のところに「エラー画面URL」という項目が追加されています。ここにURLを入力し、そのページに「フォーム識別子」を張り付ければOKです。

エラー画面URL

ダウンロード

MAMP を使いローカル環境で WordPress をインストールしたところ、wp-config.php 内の文字コード設定（下記参照）を削除してしまったらしく、MySQLの照合順序が latin1 となってしまいました。

/** データベースのテーブルを作成する際のデータベースのキャラクターセット */
define('DB_CHARSET', 'utf8');

/** データベースの照合順序 (ほとんどの場合変更する必要はありません) */
define('DB_COLLATE', '');

照合順序が「latin1_swedish_ci」に…

そのままの状態で phpMyAdmin でデータベース内を見ると文字化けしていませんでしたが、サイト上では盛大に文字化け。逆に、管理画面からデータを登録し直すと phpMyAdmin で見たときに盛大に文字化けするという事態に陥ってしまいました。

文字化けしている…

こういうときは、一旦データベースのデータをダンプし、ダンプデータ内の文字コード設定を変更してから再度インポートしなおせば大丈夫です。

# latin1 で一旦ダンプする
/Applications/MAMP/Library/bin/mysqldump --user=ユーザー名 --password=パスワード --default-character-set=latin1 データベース名 > データベース名.sql

dumpファイルの中のlatin1をutf8に置換

/*!40101 SET NAMES latin1 */;
↓
/*!40101 SET NAMES utf8 */;

/*!40101 SET character_set_client = latin1 */;
↓
/*!40101 SET character_set_client = utf8 */;

) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;
↓
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

WordPress には oEmbed という機能が備わっており、動画や画像などの外部コンテンツを簡単に埋め込み表示することができます。例えば記事入力の際に YouTube のある動画ページの URL を貼り付けるだけで動画が表示されたり、Twitter のツイートの URL を貼り付けるだけでツイートを掲載することができたりします。

テンプレート内で oEmbed を使用する

この便利な oEmbed を記事入力欄ではなくテンプレート内で使用することができます。次のようなコードで実装できます。

// $url に YouTube の URL 等を渡す
$embed_code = wp_oembed_get( $url );
echo $embed_code;

埋め込まれる画像や動画のサイズはグローバル変数「$content_width」の値が使用されますが、wp_oembed_get の第2引数でサイズを指定することもできます。

// $url に YouTube の URL 等を渡す
$embed_code = wp_oembed_get( $url, array( 'width' => 480 ) );
echo $embed_code;

約2年半前にキックオフ？懇親会をしただけで活動がとまってしまっていたWordBench長崎。何とかしたいなと思いつつも、自分で動かしていく自信やきっかけが無く、ずっとそのままになってしまっていましたが、今年7月に「問い合わせフォームを考える市民フォーラムふくおか（仮）」に参加させていただいたときに、福岡の活発な活動の様子やちょっと背中を押していただいたことがきっかけとなり、WordBench長崎管理人の@utratti5さんに話を持ちかけて勉強会を開催する運びとなりました。

WordBench長崎 勉強会01「オリジナルテーマで学ぶWordPressの基本」

開催場所は長崎のコワーキングスペース「ツナグバサンカク」

今回は第1回目、ということで発表してくださる方を数人探したり、アンカンファレンスで活発に深い話を展開するというのはハードルが高いかなと思ったので、僕がメイン講師として、既存の静的なHTMLサイトをもとにWordPressのテーマを作りサイトを構築する、というハンズオン形式の勉強会という形をとりました。

準備は1ヶ月ほど前からと長めに時間をとり少しずつ行っていたものの、実際にやってみると、この順番で進めたほうが良かったなとか、この説明はわかりにくいな、というのがどんどんでてきて、皆さまにはわかりづらい内容になってしまったなーと反省…。ですが、僕にとっては改めて作業手順やWordPressでのサイト構築を考える勉強会になりました。

懇親会

勉強会のあとは長崎のIT勉強会メンバーに人気の「バーミツナガ」さんにて懇親会。

メニューが豊富で居心地も良いバーミツナガ

次回は10月にアンカンファレンス形式で開催予定です。WordBench長崎の情報は下記で随時配信しますので、興味のある方はぜひご登録お願いいたします！

9月21〜23日の3連休を利用して島根旅行に行ってきました。いつもは電車を利用するのですが、今回は初めての車旅行。長崎から島根までは休憩を挟んで片道およそ10時間。朝から観光を満喫できるように、21日の夜に出発しサービスエリアで仮眠をとり、22日の朝から観光という行程をとりました。

温泉津（ゆのつ）温泉

22日朝。最初の目的地は温泉津温泉。温泉津温泉は「石見銀山遺跡とその文化的景観」の一部として世界遺産に登録されている場所。今は静かで古風な旅館が並ぶ温泉街ですが、かつては日本最大の銀山である石見銀山の輸出港として大変賑わっていた場所だそうです。

高速を降りると大きな風車が。

温泉津温泉に立ち寄った目的は、薬師湯の温泉に入ること。薬師湯は参院で唯一、日本温泉協会の天然温泉の審査ですべての分野において最高評価を獲得した温泉。小さな室内温泉ですが、貸切湯があり、ゆっくりと楽しむことができます。お風呂は源泉がそのまま使用されており、温度は46度。僕は熱いのが苦手なのでゆっくり入っておくことができませんでした…。残念。。

温泉津温泉・薬師湯（湯元）

温泉津温泉は1300年の歴史がある町であり、情緒ある建物が軒を連ねています。散歩して街並みを楽しむのに調度良い広さなので、時間がある方はゆっくり散歩してみるのも良いと思います。

情緒ある建物が軒を連ねる。

小さなお寺？があったので参拝。

脇道もザ・温泉街

度々見かけるかわいいキャラクター「らとちゃん」。石見銀山周辺地区のマスコットキャラクターで、石見銀山の間歩（坑道）でも使われた、サザエの殻に油を入れて火を灯す明かり「螺灯（らとう）」がモチーフだそうです（あまりにも気に入ってしまったので、この後向かう石見銀山のお土産屋さんでぬいぐるみを購入してしましました）。

らとちゃん

石見銀山

温泉津温泉から車で約30分、石見銀山へ。ここは戦国時代後期から江戸時代前期にかけて最盛期を迎えた日本最大の銀山で、世界遺産に登録されています。現在は閉山していますが、静かな森と落ち着いた街並みを見るために多くの観光客で賑わっています。

世界遺産であるため車は制限されています。駐車場から町までバスで移動します。

銀山地区

石見銀山の観光エリアは「銀山地区」と「大森地区」に分かれています。銀山地区は森に囲まれた散歩道で多くの鉱山遺跡が点在しています。まずはこの銀山地区をまわることにしました。

石見銀山

中心部には住居がありますが、奥に進むに連れ森の中へ…。

お店も点在しているので歩き疲れたら休憩…

しばらく歩き、「喫茶やまぶき」という喫茶店で休憩することに。入ったときは誰もいなかったのですが、少しすると多くのお客さんで店内がいっぱいに。「小さな店ですみませんねぇ…」と何度も呟いていた初老のご主人が印象的でした。

喫茶やまぶき

アイスコーヒーを注文。さつまいものドーナツが美味！

休憩を終え、さらに奥へ歩を進めます。

小川沿いを歩きます。

一番奥まで行くと「龍源寺間歩」があります。ここは江戸時代に開発された坑道跡で、全長600mのうち273mを歩いて見学できます。

龍源寺間歩

坑道の入り口。まるでクーラーをガンガンに効かせたような冷気が…。

龍源寺間歩の内部。鍾乳洞のような道が続いています。

龍源寺間歩を抜け折り返し。銀山地区は川を挟んで左の道と右の道があるので、来た道と反対の道を通って返ります。

折り返し地点

折り返した帰りの道は遊歩道となっており、途中途中にお墓やお寺跡などがちらほら。

史跡 吉岡出雲墓

しばらく歩くと「清水谷精錬所跡」があります。これは明治時代に建造された精錬所で、巨額の資金を投じて開発されたものの鉱石の質に恵まれずに1年半で操業停止してしまった精錬所だそう。

清水谷精錬所跡。もっと奥まで施設が続くようでしたが時間の関係で入り口まで。

途中で見かけたクワガタ。

大森地区

銀山地区の入り口まで戻り、反対側の大森地区へと進みます。大森地区は江戸時代の街並みが残る地区。車の走る音もせず、とても静かで情緒ある街並みも相まって時間がゆっくりとすぎるような感じがします。

大森地区へ

自販機もレトロ風

とても落ち着いた町

キムチの写真館にて。今は亡くなってしまったそうですが、町の看板猫だったそう。

アイスクリーン

しばらく歩いたところで、カフェ・カリアーリにて休憩。イタリアの老舗ロースター「カフェ・カリアーリ」の日本唯一の代理店だそうです。この静かな町でコーヒーを味わいながら過ごす時間は至福のひととき。店長？さんも気さくな方でいろいろな話しをしてくれました。この地区に残る建物は空き家が多く、住んでいなくても税金を払わないといけないため住んでくれる人を募集しているそうです。

カフェ・カリアーリ

カフェ・カリアーリ店内

休憩を終え、さらに歩を進めます。

居住地なので郵便局もあります。街並みにあわせた外観が渋い。

理容館アラタ。大正末期の理容文化を残す重要な理容遺産と認められ、全国理容連合会「理容遺産認定」の第一号店として認定されたそう。

理容館アラタ店内

銀行も渋い。

玉造温泉

銀山地区の次は、宿泊地、玉造温泉へ。今回宿泊したのは1万坪の回遊庭園と日本最大の混浴露天風呂が魅力の長楽園。創業明治元年と歴史のある旅館です。

玉造温泉 長楽園

玉造温泉の中央を玉湯川沿いには神話をモチーフにしたオブジェが建てられています。

ヤマタノオロチ

ウムギヒメ。これらのオブジェの作者はせんとくんの作者、籔内佐斗司氏。

足湯も点在しており、道沿いに1軒、川の中にも数軒の足湯がありました。

姫神広場の足湯

宍道湖

夕食まで時間があったので、夕日の絶景スポットとして有名な宍道湖へ。玉造温泉からは車で20分ほど。有名なスポットということで多くの人で賑わっていました。この日は雲が多く、残念ながら夕日を見ることは出来ませんでしたが、目の前に広がる大きな湖は絶景です。

宍道湖

宍道湖に浮かぶ嫁ヶ島

月照寺

2日目。朝から宿泊地である玉造温泉 長楽園で豪華な朝食と大露天風呂を満喫し、松江へ向けて出発。玉造温泉からは車で20分ほど。市街地へ入る前に月照寺というお寺に寄ってみました。

月照寺は歴代松江藩主松平家の菩提寺。広く静寂な境内には小泉八雲の随筆に登場する巨大亀形の寿蔵碑や茶聖七代不昧公ゆかりの茶室大円庵があり、お茶をいただくこともできます。

松平家代々の墓が敷地内に点在。

小泉八雲の随筆に登場する巨大亀

ぐるっと松江堀川めぐり

松江は城下町であり、街が堀で囲まれています。松江では、この堀を船頭さんのガイドを聞きながら小舟でぐるっと一周することができます。川の途中途中に乗船場があり、好きな場所で乗り降りすることができます。今回は3つある乗船場の中で一番大きい松江堀川ふれあい広場から乗船することに。ここはすぐ近くに大きな市営駐車場があるので便利です。

小舟。数人で乗り合わせる。

この堀には何本か橋がかかっており、中にはとても背が低い橋もあります。そのような橋をくぐるときは船の屋根を低く降ろせるようになっており、乗客もそれに合わせて身をかがめながら進みます。

小舟で橋をくぐる。

2日目はあまり時間がなかったので、半分ほどすすんだところの乗船場、カラコロ広場で下船。そこから歩いて松江城へと向かいました。

松江城

松江城についてまず目に入ったのは鎧を来た二人の侍さん。長崎の島原城にも侍や忍者の格好をした人がいますが、せいぜい一緒に写真を撮る程度。しかし、ここ松江城のこの2人の侍さんはずぅっと侍の演技をしていました。時代劇みたいな言葉で、二人で近況などを話したり、今日は人が多いのーと話したり、まるで現代に侍が迷い込んで働いているような感じで、思わぬところで感動してしまいました。

2人の侍。なお、写真撮影には快く応じてくれる模様。

とてもたくさんの人で賑わっていましたが、今回は天守閣には登らず、城内をぐるっと一周。

松江城内にある松江神社。縁結びで知られる。

興雲閣。明治36年に迎賓館として建造された擬洋風建築。

松江城天守閣

松江護国神社

松江城の敷地を抜けてすぐのところにある松江護国神社。黒地に赤文字で「大勝利祈願」と書かれた旗に惹かれて？参拝。

はためく大勝利祈願。

広い境内

城山稲荷神社

松江護国神社をでてすぐのところある神社。ここ城山稲荷神社は「耳なし芳一」等で知られる作家、小泉八雲が足繁く通ったと言われており、境内には数多くの狐像が並んでいます。

狐像がいっぱい。

塩見縄手

松江城北側の内堀沿いに伸びる通り、塩見縄手へ。この通りは江戸時代の面影が色濃く残る通りで、武家屋敷や小泉八雲にゆかりのある施設が並んでいます。

松江城から塩見縄手へ渡る橋から見えた小舟。

小泉八雲記念館

小泉八雲に関する資料が収蔵・展示してある資料館。僕は小泉八雲は「耳なし芳一」の著者であるということぐらいしかしりませんでしたが、なんと彼は日本人ではなくギリシャ生まれのイギリス人で、仕事で来日した際に日本のとても気に入り、そのまま教師として日本に住むことになったそう。

小泉八雲記念館

小泉八雲旧居

小泉八雲とその妻セツが約6ヶ月間新婚生活を過ごした邸宅。母屋を囲む日本庭園が特徴的で、小泉八雲は今に寝転び三方の日本庭園を眺めるのが何よりも好きだったとか。

小泉八雲旧居の日本庭園

明々庵

明々庵は松平不昧ゆかりの茶室を主とする古庵。僕は茶室というものをちゃんと見たことが無かったのですが、こうしてお茶を楽しむために造られた場所があって、お茶を飲むためだけの部屋があるというのは贅沢でありながらミニマリズムの境地でなんだかすごいなーと。ここではお茶をいただくこともでき、広い茶室から素晴らしい庭園を見ながらゆっくりと楽しむことができました。

明々庵の庭を眺めながら一服。

塩見縄手から松江堀川ふれあい広場横の駐車場へはすぐなので来た道を折り返しゆっくり移動。

塩見縄手

塩見縄手から見える小舟

小泉八雲像

今回の旅ですっかり抹茶にハマった妻。

ここから休憩をはさみつつ12時間、長崎へと帰りました。完全にナビだよりだったので、高速を遠回りさせられたりして余計に時間がかってしまいました…。松江は神々の神話が多く残っている土地で、ドライブルートも良く紹介されていました。今回はそのようなところには行かなかったので、また機会があれば行きたいと思いました。歴史ある景観が好きなかたにはとてもお勧めです！

一通り実装したい機能は実装できたので、このあたりで切り良くバージョン1.0とバージョニングしました。前回のMW WP Form関連記事（MW WP Form でバリデーションエラー時のURL変遷を指定できるようになりました。）から大きな機能実装はCSVダウンロード機能くらいで、後はバグフィックスが多かったのですが、便利なフックをいくつか追加しているので今回はそのうちの一つをご紹介します。

カスタム投稿タイプに投稿した記事のタイトルを選択肢として表示したい

例えば、「商品」というカスタム投稿タイプを作り、問い合わせフォームに「問い合わせしたい商品を選択してください」というような項目を追加したいとします。通常であればカスタム投稿タイプ「商品」に商品を追加して、問い合わせフォームの選択肢にも同じ商品名を追加する、ということをしなければいけません。でも、これだと問い合わせフォームの修正を忘れてズレが出る可能性が高いですよね。MW WP Formでは、選択項目の選択肢部分にフックが用意してあるので、それを使って選択肢への追加を自動化することができます。

ここでは下記のようなセレクトボックスの場合で説明します。ラジオボタンやチェックボックスの場合も同様の方法で自動化できます。

// フォーム作成画面で記述
...
<tr>
<th>問い合わせしたい商品を選択してください</th>
<td>[mwform_select name="products"]</td>
</tr>
...

functions.phpに下記を追加します。

// フック名のxxxの部分はフォーム作成画面を参照してください。
add_filter( 'mwform_choices_mw-wp-form-xxx', 'add_products', 10, 2 );
function add_products( $children, $atts ) {
    // name属性が「products」の場合にカスタマイズ
    if ( $atts['name'] == 'products' ) {
        $products = get_posts( array(
            'post_type' => 'product', // カスタム投稿タイプ名
            'posts_per_page' => -1
        ) );
        foreach ( $products as $product ) {
            $children[$product->post_title] = $product->post_title;
        }
    }
    return $children;
}

上記の例ではカスタム投稿タイプと連携させるため「get_posts」で取得したデータを選択肢として使用していますがカスタムタクソノミーと連携させる場合は「get_terms」、ユーザーと連携させる場合は「get_users」などいろいろな情報と連携させることが可能です。

マニュアル

ダウンロード

WordPressにはoEmbed機能があり、YouTubeの動画ページのURLを貼り付けるだけで自動的にYouTube動画を埋め込むことができます。

最近はレスポンシブデザインの考え方が広まってきていて、コンテンツ部分の幅を可変させることが多いと思います。そこでYouTubeの動画をレスポンシブにしようと単純に下記のようにしたとします。

iframe {
	max-width: 100%
}

これだと、コンテンツ幅の伸縮に合わせて動画の幅も伸縮するのですが、「高さ」が伸縮せずおかしな形になってしまいます。高さも可変にしようと height:auto とすると今度は逆に高さがものすごく小さくなってしまいます。

max-width: 100%; height: auto にした場合

そういう場合は次のような方法でYouTube動画も幅・高さ可変のレスポンシブにすることができます。

functions.php

// YouTubeのiframeをdivで囲む
public function youtube_responsive( $html, $url, $attr, $post_ID ) {
	// http://www.youtube.com/watch?v=xxxxxx の形式
	if ( preg_match( '/^http:\/\/www\.youtube\.com/', $url ) ) {
		$html = '<div class="video-container">' . $html . '</div>';
	}
	return $html;
}
add_filter( 'embed_oembed_html', 'youtube_responsive', 10, 4 );

css

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
}
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

690px と 320px で可変させた場合の例

「56.25%」の部分は、HD動画（16:9）の比率に合わせて計算したものです（100 / 16 * 9 = 56.25%）。ほとんどの場合はこれで問題ないと思いますが、HDサイズ以外の動画をよく貼る人は注意が必要かもしれません。

MW WP Form で「規約同意」のチェックを付けることができますか？とご質問をいただいたので、今回はその方法をご紹介します。

フォーム作成画面

フォーム作成

まず、フォーム作成画面で「規約同意」のチェックボックスを作成します。name属性が「規約」で、選択項目が「同意する」のみのチェックボックスです。

<tr>
    <th>規約</th>
    <td>
        [mwform_checkbox name="規約" children="同意する"]
        <div class="hoge">ここに規約とか</div>
    </td>
</tr>

バリデーション設定

フォーム作成画面の下にあるバリデーション設定から「規約同意」を必須項目に設定します。

「必須項目（チェックボックス）」にチェックします。

必須項目にはチェックボックス・ラジオボタン用の「必須項目（チェックボックス）」とその他通常の入力フィールド用の「必須項目」の2種類があります。今回はチェックボックスなので「必須項目（チェックボックス）」を選択します。間違わないようにご注意ください。

画面を表示し、規約に同意にチェックせずに送信しようとするとエラーメッセージが表示されるようになります。

同意しないとエラー

ちなみに…

チェックボックス・ラジオボックスは未選択だとデータが次のページに飛ばないため2種類の必須項目を用意しなければいけない感じになっています。2種類あるとめんどくさいので今後のバージョンアップで1つに統一したいと考えています。もし良い方法をご存知の方がいらっしゃいましたらご教授ください…

11月19日にWordBench長崎02を開催しました。今回はアンカンファレンス形式でオススメのプラグインについて紹介しあおうという内容でした。だた、だれるといけないからと用意していた主催側のLTが、全然ライトニングな長さでなく、がっつりセッションな感じになってしまい、雑談の時間が短めになってしまいました…。でも、今回は参加者の方にWordPress経験者が少なかったりして雑談でたくさん話しをするのが難しい感じだったし、各セッションも内容が充実していたので逆に良かったかなーと。

クライアントワークで使えるお問い合わせフォームプラグイン MW WP Form の紹介

プラグインの紹介をしあう会ということで、自作のプラグインの宣伝をしました。WordPress経験者が少ないということで、内容的に伝わりにくかったかなと思いましたが、「今度使ってみます」とか「勉強になりました」とのお声をいただけて嬉しかったです。

もっと速くなる!WordPress高速化 Tips

@mayoibiさんのセッション。僕のブログを見て、こんなに速くなるならやってみようということではじめたWordPress高速化の手法について話してくれました。WordPressだけでなく普通のサイトでも使える手法ばかりなので、とても参考になるのではと思います。すっかり僕のブログより速くなっていたので若干悲しかったです。。

ブルートフォースアタック

先日のロリポップ事件をきっかけにWordPressのセキュリティについて調べていろいろと設定された@t__kumaさんのセッション。僕はブルートフォースアタック対策のプラグインは使ったことが無かったのですが、実際のアタックログをみせてもらい、かなり攻撃されているものだなと驚きました。良く言われていることですがやはりadminアカウントは使用しないほうが安全のようです。

アンカンファレンス

アンカンファレンスでは@uratti5さんが「Image Widget」を紹介してくれました。これは僕も使ったことがあって、企業の担当者さんがバナーの更新をする場合などはとても便利だと思います。

懇親会

懇親会は前回と同じくバー・ミツナガさんにて。ここではWordPressの話だけでなくプログラミングやOSレベルの話だとかとても興味深い話をたくさんお伺いすることができました。勉強会は同じIT系の人々が集まっても扱う範囲がいろいろと違って知らないことをいろいろと知ることができるのが良い点だなーと改めて思いました。

次回は12月7日開催予定です。まだ内容は未定ですが「WordVolcano番外編 – From the Dark Side（黒い画面特集）」に参加するのでその報告ができればと思っています。懇親会でも皆の製作環境が知りたいだとか、プラグインの作り方を知りたい、もう一度テーマ勉強会をしてほしいなどいろいろな意見をいただけたので、それを考慮して計画したいと思います。お時間のある方はぜひご参加くださいませ。

$_GETにキーが存在し、かつ数値がどうか確かめたかったので引数を参照渡しで受け取る関数を作ったところ、キーが存在しない場合に勝手にキーが作られてしまいハマってしまいました。サンプルコードは以下。

function hoge( &$get ) {
	if ( isset( $get ) && preg_match( '/^\d+$/', $get ) ) {
		return true;
	} else {
		return false;
	}
}

var_dump( $_GET );
// array (size=0)
//   empty

hoge( $_GET['key'] )

var_dump( $_GET );
// array (size=1)
//   'key' => null

キーが存在しない場合は値が null のキーが作られてしまうようです。参照渡ししなければ良いので、事前に isset でチェックしてから関数に渡せば良いです。

function hoge( $get ) {
	if (　preg_match( '/^\d+$/', $get ) ) {
		return true;
	} else {
		return false;
	}
}

if ( isset( $_GET['key'] ) && hoge( $_GET['key'] ) ) {
	// 処理
}

WordPressでコーポレートサイトを構築するときに、毎回functions.phpに書いているコードがあって、それに修正があったり、ちょっとした変更の際にオプション的に設定変更ができたら便利だなーと思っていました。そこで、それらをプラグインとして1つにまとめてみました。ついでに設定ページもつけたので簡単に設定することができます。

MW WP Hacksでできること

プロフィールページにGoogle+ IDの入力フィールドを追加

プロフィールページに追加されたGoogle+ IDの入力フィールドにID（半角数字）を入力すると、シングルページを表示した際、head内に次のタグを出力します。

<link rel="author" href="https://plus.google.com/{ID}/" />

メインフィードに表示する投稿タイプを設定

設定ページからメインフィードに表示する投稿タイプを設定できます。

抜粋の後に追加するテキスト（HTML）を追加

テンプレートタグ<php the_excerpt(); >で出力される抜粋の後に追加するテキストを設定できます（HTML利用可）。「%link%」を入力すれば出力時には<php the_permalink(); >に変換して出力されます。

ソーシャルアカウント設定

Google+ ID、Facebook AppID、Google Analytics Tracking IDの入力フィールドが追加されます。Google+ IDを入力すると、シングルページ以外の表示時に、head内に次のタグを出力します。

<link rel="publisher" href="https://plus.google.com/{ID}/" />

Facebook AppIDを入力すると、ページ下部に下記のコードが追加されます。

<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
	FB.init({
		appId	: xxxxxxxxxx, // App ID
		status	: true, // check login status
		cookie	: true, // enable cookies to allow the server to access the session
		xfbml	: true  // parse XFBML
	});
};
</script>

Google Analytics Tracking IDを入力すると、Google Analyticsのスクリプトが読み込まれます。

ソーシャルJavaScriptの読み込み

Facebook、Twitter、はてなブックマーク、Google+1 のボタン等を設置するときに読み込む必要があるJavaScriptを非同期読み込みします。読み込むJavaScriptはチェックボックスで選択できます。

カスタムサムネイル設定

サムネイルサイズを追加するときは、通常、functions.phpにコードを追加する必要がありますが、それを管理画面から行うことができます。

ウィジェットエリア設定

ウィジェットエリアを追加するときは、通常、functions.phpにコードを追加する必要がありますが、それを管理画面から行うことができます。

日本語環境における wp_title() の不具合の解消

日本語環境で wp_title() を使うと、日付アーカイブページや検索結果ページ表示時に少し表示がおかしくなってしまいます。それを正しい表示になるように修正します。

$content_width の設定

WordPressにはグローバル変数 $content_width というものがあり、functions.phpにコードを追加して、コンテンツエリアの範囲を定義するようになっています。毎回書くのは面倒なので、画像の「大サイズ」はコンテンツエリアいっぱいに設定するであろうという想定のもと、$content_width には「大サイズ」で設定してある値が自動的に設定されるようになります。

フィルターフックを用意しているので、下記のコードで変更することも可能です。

function my_content_width( $width ) {
    return 600; // 任意のサイズを指定
}
add_filter( 'mw-wp-hacks-content_width', 'my_content_width' );

ページャー

次のコードでページャーを表示することができます。

<?php mw_wp_hacks::pager(); ?>

最上位の固定ページのIDを取得

WordPressでコーポレートサイトを作る場合、固定ページを良く使うことになりますが、そのときに今のページの親のIDを取得して使用したいときがあります。固定ページ表示時に下記のコードで最上位ページのIDを取得することができます（今のページが最上位の場合は今のページのID）。

<?php echo mw_wp_hacks::get_top_parent_id(); ?>

カスタム投稿タイプかどうか判定する

下記のコードで、今のページがカスタム投稿タイプかどうか判定することができます。引数に投稿タイプ名を入力すれば、その投稿タイプかどうか判定します。

<?php
// 投稿タイプかどうか
mw_wp_hacks::is_custom_post_type();

// カスタム投稿タイプ product かどうか
mw_wp_hacks::is_custom_post_type( 'product' );
?>

ローカルナビゲーション出力

sidebar.phpなどに下記のコードを記述すれば、ローカルナビゲーションを表示することができます。

<?php mw_wp_hacks::the_localNav(); ?>

ダウンロード

MW WP Formに用意されている各フォーム項目のショートコードにおいて、value値が設定可能ものに関してはフィルターフック「mwform_value_xxx」が使用できます。

フィルターフック「mwform_value_xxx」を使うことで、URL引数で渡された値をもとに動的にvalueを設定することができるので、テキストフィールドやラジオボタンの初期値を設定する、のようなことが可能です。

フォーム項目のショートコードを記述するときにvalue値が設定されているとフックが実行されないので注意してください。

例

フォーム

...
[mwform_text name="hoge"]
...

functions.php

/**
 * @param  String  $value  valueの初期値
 * @param  String  $name  name属性値
 */
function my_mwform_value( $value, $name ) {
    // $_GET['hoge']があったら、name属性がhogeの項目の初期値に設定
    if ( $name === 'hoge' && !empty( $_GET['hoge'] ) && !is_array( $_GET['hoge'] ) ) {
        return $_GET['hoge'];
    }
    return $value;
}

// 管理画面で作成したフォームの場合、フック名の後のフォーム識別子は「mw-wp-form-xxx」
add_filter( 'mwform_value_mw-wp-form-xxx', 'my_mwform_value', 10, 2 );