2014年12月9日火曜日

他のプラグイン内に埋め込んだContact Form 7ショートコードを、Contact Form 7テンプレートに使うには #wpacja2014

 初めまして! WordPress Advent Calendar 2014 の9日目担当の木谷(@kimipooh)です。

さて、まず最初に本記事の英訳版を作成したことをお知らせします。

この記事自体は、結構前に仕上げていて8日になって、明日公開だよなぁ、、、これって結構面白いから英訳してみようかなぁ、、とかいうノリでやってしまったのでした。それほど高い英語能力はないのですが、正しく意味が通じたらいいかなと。

WordPress Advent Calendarは昨年初参加し、今年はネタがないよなぁと思っていたら、一つ思いついて実践してうまくいったので、それをネタに今年も参加してみました! 昨年公開したものは、「カレンダープラグイン「The Event Calendar」での日付降順処理 #wpacja2013」です。これは新サイトを立ち上げ時など、いまでも重宝してますし、こういったイベントで整理して発表することって後々まで役に立つんだなぁとしみじみと思い返しました。WordPressコミュニティとしては、WordBench京都大阪をフラフラ〜としてます。

前置きがいつも長くなってしまうのですが、そろそろ本題に入りたいと思います。
とてもわかりにくいタイトルですよね、、、。どう表現したらよいのかわからないので、そうなってしまいました。そもそもこんな需要あるのか!?という問題は、とりあえず脇においておきましょう。こういうことも出来るよっていう感じです。


目的

具体例を出して目的を明確にします。
  1. TablePressプラグインのテーブル情報に、Contact Form 7のフォームショートコードを入れる([text *email]等)
  2. Contact Form 7のフォームに、TablePressプラグインのショートコードを入れる。
  3. Contact Form 7のショートコードを固定ページに入れて、問い合わせページを表示
つまりTablePressのテーブルレイアウトを使って、Contact Form 7の機能を使いたいってことなのです。

基本的には、下記の問い合わせフォームをTablePressのテーブルを使って綺麗に整形した出したい!!ということなのです。以下が完成形(一般的なContact Form 7とTablePressと連携させたレイアウトの2つを並べてみました)です。

Contact Form 7の標準レイアウト


TablePressと組み合わせたレイアウト


まぁこの単純な例ではあまり見栄えは変わりませんが、TablePressのレイアウトが使えるなら、ちょっと凝ったテーブル形式が使えるのでアプリケーション申請フォームなんかにいいんですよね。

以下、設定を逐次視覚的に説明していきます。

利用方法

Step 1. TablePressで下記のようにContact Form 7のフォームショートコードをいれる




これをそのまま固定ページ等で、

のような感じでTablePressのショートコードをいれて表示させると


のようにそのまま出ますね。まぁここまでは当たり前。

Step 2. Contact Form 7のフォームに、TablePressプラグインのショートコードを入れる。


というわけで、次はContact Form 7側に移ります。
問い合わせフォームを作成し、


を入力します。
[table id=1/]はテーブル(TablePress側の指定)でIDは変わりますのでご注意。

この状態だと
が表示されます。まぁ当たり前ですね。

ここで、下記でContact Form 7開発者の三好氏が指摘されている(他にもいくつかのブログで紹介されている)
を使うと、確かに[table id=1/] のショートコードは展開されて表示されるんですけど、その中のContact Form 7のショートコードまでは展開されません。

これが問題なのです。
これまでは、Contact Form 7のshortcode.phpを直接いじってました(*1)が、それだとプラグイン更新のたびに再度追加しなければならず困っていました。で、ようやく方法を見つけたのでした。

Step 3. Contact Form 7を拡張する(フックを利用)


下記をテーマの「functions.php」に追加します。


つまり、

add_filter('wpcf7_contact_form_properties', 'wpcf7_add_other_shortcodes');

function wpcf7_add_other_shortcodes( $properties ) {
$properties['form']= do_shortcode($properties['form']);

return $properties;
}

を追加するってことですね。
との違いは、wpcf7_form_elements のかわりに、wpcf7_contact_form_properties を使うってところです。

これで、下記のようにちゃんとショートコードとして展開された内部のContact Form 7のショートコードも展開されたのでした。


TablePressと組み合わせたレイアウト

他のプラグインでも使えますし、いろいろと応用できる可能性はあります。

明日10日目の担当は、blogger323さんです。

2014年12月9日 木谷(@kimipooh)



*1 contact-form-7/includes/shortcodes.php に
$content = do_shortcode($content); を下記の様に追加

0 件のコメント:

コメントを投稿

Google+ Badge