WordPressで投稿本文へショートコードでカスタムフィールドの値をいろいろな形で挿入するプラグインを作ってみた | Knowledge Base

WordPressで投稿本文へショートコードでカスタムフィールドの値をいろいろな形で挿入するプラグインを作ってみた

作ってみた!と格好よく書いていますが、実はネット上で見つけたプラグインを自分なりにカスタマイズしたものです。

WordPressのカスタム〇〇という追加機能で思い浮かぶのは

  1. カスタム投稿タイプ
  2. カスタムタクソノミー
  3. カスタムフィールド

の3つ。カスタム投稿タイプとカスタムタクソノミーについては

Wordpressでは通常の投稿とは別に「投稿の集まり」を作るカスタム投稿タイプという機能があります。また、通常のカテゴリーとは別に「カテゴリーの集まり」を作るカスタムタクソノミーという機能があります。「Custom Post Type UI」は「カスタム投稿タイプ」や「カスタムタクソノミー」を簡単にいくつでも作成することができるプラグインです。

を使えばコード知識がなくても大抵のことはできますし、カスタムフィールドの作成に関しても

【Custom Field Suite】はWordpress標準のカスタムフィールド機能を拡張するプラグインです。似たもので有名なプラグインに「Advanced Custom Fields(ACF)」がありどちらを使うか迷うところですが、ACFのように独自のフィールド構造を持たないため、カスタムフィールドに入力した値を検索等に使用したい場合にはこちらの方がおすすめです。
カスタムフィールドの使い方として最もポピュラーなのが、「決まった項目を入力することで記事やページを完成させる」ことですね。「Advanced Custom Fields」プラグインはWordpressのデフォルトではちょっと使いにくいカスタムフィールドの設定を簡単にし、視覚的な設定ができる便利なプラグインです。

を使うことでカスタムフィールド自体の作成や管理は格段に楽になりますね。

さて、それではそのカスタムフィールドの値を投稿本文に挿入して表示する方法は?となると途端に難しくなりますね。

2番目の「Advanced Custom Fields(ACF)」ではこの点についてショートコードを挿入することで表示できるようになっているのはご存知の通り。でもACFは厳密にはカスタムフィールドと似たフィールド?を作る独自の機能なので、通常のカスタムフィールドに対して何かをするプラグインとは相性が悪い場合があるんです。

となると通常のカスタムフィールドを使いつつ、入力しやすい環境を作る「Custom Field Suite」が活躍することになるのですが、いかんせんこのプラグインはショートコードでの出力機能がない!!これは困った!!

そこで

【Embed Custom Field】はカスタムフィールドに入力された値をショートコードで簡単に投稿本文へ表示できるプラグイン。コードの知識も、テーマのカスタマイズももう必要ありません。

を使って出力できるようにはしたものの、実はもっとやりたいことが・・・、それはカスタムフィールドに入力したショートコードを動作させた形で投稿本文に挿入できないの?ということ。

上のプラグインを使うとショートコードはコードのまま表示されるし、テーマのfunctions.phpへ挿入する方法でいろいろ探しても情報がない(あくまでも私調べ)!!

そもそもどうしてショートコードを動作させる必要があるの?と思われるかも知れませんね。ショートコードには中にパラメーター(条件)を指定するものがあります。このパラメーターにカスタムフィールドの値をショートコードで拾って動作させようとすると・・・・動かないんですね。これはWordpressのショートコードの仕様なので仕方ないことなんです。

それならショートコードをそのままカスタムフィールドに書いて、それを表示させれば・・・の結果がショートコードのコードがそのまま表示されてしまうということなのです(経験ある方なら納得してもらえると思います)。

前置きがいつもよりも長くなってしまいましたね。私がどの位コードに関する知識があるのか?ということに関しては、このサイトを見ている方ならその貧弱さがお分かりになることと思いますが、今回は絶対にこの問題を解決したい!!ということでやっとこさ探し当てたプラグインを改造してオリジナルのプラグインにしてみた・・・というのが今回の経緯です。

それでは紹介させていただきますね。

スポンサーリンク

「Insert Custom Fields by Himaart」プラグイン誕生

うれしくて思わず私のニックネーム(ひまあーと)を付けちゃいました!!

まあそれは置いといて・・・。

前述したようにこのプラグインはとあるプラグインの改造版です。大本は

WordPressの投稿にカスタムフィールドを挿入するショートコードのプラグイン Insert Custom Fields を作ってみました。このプラグインを使えば、WordPressのショートコード

で紹介されている「Insert Custom Fields」というプラグインです。これにカスタムフィールドへ入力したショートコードを動作させた形で表示する機能を追加したのが「Insert Custom Fields by Himaart」なのです。

といってもコードを変えてるので両方有効化しても競合はありませんのでご安心ください。

「Insert Custom Fields」はカスタムフィールドに挿入したいろいろなデータをショートコードで投稿本文へ挿入できるプラグインで、カスタムフィールドに入力したphpコードを動作させて本文で表示できるようになっています。

もちろん投稿本文にPHPコードを直接書いて動作させるようなプラグインとは異なり、あくまでもショートコードを使ったときのみPHPが動くようになっているので、サイト改ざんなどの心配が少ないのが特徴だと思います。

それで、この機能を使って、ショートコードをテーマ内で動作させるためのコードである

<?php echo do_shortcode("[ショートコード]"); ?>

としてカスタムフィールドへ挿入することできちんとショートコードが動作した結果が表示されるようにしました。

が、ショートコードだけを挿入しても同じ動作をさせられないか??で機能を追加したのが「Insert Custom Fields by Himaart」です。

お断りしておきますが、私の環境では動作してまっせ!!という野良プラグインですので、その辺をご理解いただいた上で使用いただければと思います。

「Insert Custom Fields by Himaart」の使い方

この記事の下の方にプラグインのダウンロードリンクを作っておくので自由にダウンロードしてください。

プラグインを通常通りアップロードインストールして有効化してください。

設定項目はないのでこれで導入終了です。

試しに何かカスタムフィールドを作り、ショートコードをフィールドの値にしてください。

そして・・・

[scha "カスタムフィールドの「名前」の文字列" scode="1"]

を投稿本文にコピペして、カスタムフィールドの「名前」の文字列を先ほど作ったカスタムフィールドの名前に変更してください。

そして下書き保存などをしてプレビューすると・・・オオオオーーーーきちんと表示されるではありませんか!!

機能説明は以上です(簡単すぎ??)

もちろん普通に入力されたカスタムフィールドの値もショートコードで表示できます。

[scha "カスタムフィールドの「名前」の文字列"]

・・・つまりはscode=”1″というパラメーターを付けるかどうかの違いだけということです。

※ショートコードをコピペしたとき、環境によっては「”」が文字化けすることがありますので入力し直してみてくださいね

大本の「Insert Custom Fields」ではショートコードの接頭辞が「cf」なのですが、これを「scha」に換えるだけで他の機能はそのまま使えます(詳しい解説は前述した大本のサイトをご覧ください)。

ダウンロードして使ってみよう!!という強者?の方はこちらからどうぞ

プラグインをこれ以上増やしたくないという方はファイルを解凍して「insert-custom-fields-by-himaart.php」を開き、function以降の記述をそのままテーマのfunctions.phpへコピーすれば同じように動作します(保証はできませんが・・・)。

同じことを考えて悩んでいた方のお役に立てれば幸いです。

ショートコードを入れたのに反映されない?と思ったときは

このショートコードで引っ張り出す値はカスタムフィールドに入力された値なので、標準のカスタムフィールド欄で変更した場合やカスタムフィールドをUI表示するようなプラグインを使った場合など即時反映されないことがあります。

これはカスタムフィールドの値が確実に更新されていないからですので、「下書き保存」「更新」などをして編集を確定させるか、自動保存を待ってからプレビューするときちんと値が反映されます。

また、冒頭にも少し触れましたが「Advanced Custom Fields(ACF)」はカスタムフィールド値の扱い方が違うため、このプラグインではデータを引っ張り出すことができませんので、ACF用のショートコードを使用してください

役に立つ情報でしたらぜひSNSやメールでシェアしてください
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

メニューを表示できません

ページ先頭へ