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

公開日: 更新日: Wordpress バックエンド(管理)
Knowledge Base Wordpress パソコン カスタマイズ 設定




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

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

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

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

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

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

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

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

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

そこで

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<?php echo do_shortcode(“[ショートコード]”); ?>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

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

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

「Insert Custom Fields by Himaart」の使い方

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

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

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

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

そして・・・

[scha “カスタムフィールドの「名前」の文字列” scode=”1″]
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

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

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

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

[scha “カスタムフィールドの「名前」の文字列”]
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

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

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

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

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

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

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

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

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

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

1,944 円 (税込) 送料込
<p>WordPressによるWebサイト作成の基本を一から学べる書籍です。1日8時間の勤務時間内に読むことができる程度に解説内容を絞り込み,初心者・新人が最初の1冊目として読むのにふさわしい内容となっています。本書ではローカル環境にWordPressをインストールしてWebサイト..
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

3,456 円 (税込) 送料込
<p>プラグインの開発から運用までを網羅</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>CMSのデファクト・スタン..
楽天ウェブサービスセンター CS Shop

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】