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

公開日:2018年5月19日 バックエンド(管理) 使い方など
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. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

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

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

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

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

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

「Insert Custom Fields by Himaart」の使い方

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

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

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

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

そして・・・

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

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

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

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

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

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

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

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

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

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

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

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

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

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

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

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

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

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

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

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

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
【中古】 本格ビジネスサイトを作りながら学ぶWordPressの教科書 2(スマートフォン対応サイト編 / プライム・ストラテジー株 / [大型..

【中古】 本格ビジネスサイトを作りながら学ぶWordPressの教科書 2(スマートフォン対応サイト編 / プライム・ストラテジー株 / [大型..

761 円 (税込)
著者:プライム・ストラテジー株式会社出版社:SBクリエイティブサイズ:大型本ISBN-10:4797370963ISBN-13:9784797370966■こちらの商品もオススメです ● 20歳の自分に受けさせたい文章講義 / 古賀 史健 / 講談社 [新書] ■通常24時間以内に出荷可能です。■メール便は、1冊..
できるWordPress WordPress Ver.5.x対応 本格ホーム [ 星野邦敏 ]

できるWordPress WordPress Ver.5.x対応 本格ホーム [ 星野邦敏 ]

1,628 円 (税込) 送料込
WordPress Ver.5.x対応 本格ホーム 星野邦敏 相澤奏恵 インプレスデキル ワード プレス ホシノ,クニトシ アイザワ,カナエ 発行年月:2019年06月 予約締切日:2019年05月15日 ページ数:272p サイズ:単行本 ISBN:9784295006275 星野邦敏(ホシノクニトシ) WordPressの..
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


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

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

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


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報