2024(令和6)年9月11日WordPressのカスタマイズ【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれていますWordPressで投稿や固定ページに本文の内容とは別のデータを任意に保存できる機能であるカスタムフィールド。ブロックエディターの場合にはデフォルトで表示されていないので気づかない方もいるかも知れませんが、「ブロックオプション」の設定で表示させるようにすると、実にいろいろなデータが保存されているのが分かります。プラグインが利用するデータとして、アクセス数やSEO向けのメタタグに入れる情報、エディター上で指定する有効/無効の設定などを保存していたり、更新日を一時格納していたりするのに利用されることが多いです。これで表示されているのも氷山の一角で、以下の方法で隠しフィールドも含めて表示させると、いったいどれだけのデータが本文と別に格納されているの?と思えるほど様々なデータが付帯されていることにびっくりします。隠されてるカスタムフィールドを一覧に再表示する方法カスタムフィールドは、メタキーと値がセットになっていて、投稿などの編集画面から操作する場合には、前述したカスタムフィールド欄を表示させて、都度メタキーと値を追加していくという管理の仕方が基本となっていて、保存したデータはショートコードなどを使って本文内に表示させるというのが一般的な使用方法ではあるものの、それではメタキーをいちいち覚えていないといけないので面倒。そこで重宝するのが、カスタムフィールドの値の表示・入力・更新を行うための入力窓を用意してメタキーを覚えることなく、カスタムフィールドの一覧を常に表示することなくカスタムフィールドのキーと値を管理する方法。この入力窓のことをWordPressの用語でメタボックスと言います。本ページではこのメタボックスの作成、既存のデータの表示、保存、ショートコードを使った本文内への表示方法など、カスタムフィールドを便利に使うための基本的な作法を紹介していきます。本ページ掲載のコードを使用するときは本ページで掲載しているコードは、以下に了承した上で使用くださいコードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いませんコードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでくださいコードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがありますコードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください掲載しているのは参考コードです。以下がカスタムフィールドを操作する一連の流れです。上記の1~4の内容は、基本的には以下のコードで実装できます。コードの後で、いろいろと解説します。'',));}add_action('init','pwcn_register_meta_key');コードは4つに分かれています。コード内の「メタキー」という部分は、投稿編集画面でいう「名前」の部分になりますので、同じものを設定するようにします。pwcn_add_meta_panel()」というユーザー定義関数で以下のことを行っています。どの投稿タイプの編集画面に入力窓(メタボックス)を表示させるのか?メタボックスの内容を表示させるのは何なのか?メタボックスを表示させる位置はどこなのか?上記コードでは投稿タイプを「post」とし、「投稿」の画面に表示させるようにしています。メタボックスの位置は「normal(本文の下)」なのか「side(サイドバー)」なのかを指定し、「high(なるべく上へ)」または「low(なるべく下へ)」のいずれかを指定します。..と書いたのは、メタボックスを表示させるプログラムの順によって前後することがあるからですそして、メタボックスに表示させる内容として「pwcn_add_meta_panel_callback()」を指定しています。このユーザー定義関数の内容自体は、一旦PHPを切ることでHTMLが使えるようになるので、上記コード例ではtextareaタグを使って必要項目を設定したり、表示させたりしています(基本的にnameとid要素はメタキーで構いませんし、変えるとかえって混乱するかもしれません)。大事なのが、既に値がある場合には表示させることで、$fieldでカスタムフィールドの値を引き出して、textareaの初期値として出力させるようにしています(これを省くと編集画面を開いた際に項目が空になり、そのまま更新すると値が消えてしまいますので必ず設定するようにします)。今回は複数行テキスト(textarea)タグを使っていますが、他にもいろいろと種類があるので、以下に基本的なタグや使い方の注意点などを掲載しておきます。/>選択肢2のテキスト</li></ul>また、メタボックスへは複数の項目を表示・管理できるので、$field変数とメタキーを変えてコードを追加していけばいいでしょう。コードを完成させて保存した段階で、特に問題がなければ、投稿編集画面にメタボックスが表示されるはずです。表示されない場合は上記コードのどこかの部分で記述の誤りがありますので修正してください。簡潔に紹介するため、コードには入力の制限やセキュリティに関するものを含んでいません。できるだけ安全に値の取り扱いができるよう、文末の「補足(セキュリティや入力制限など)」を必ず一読ください。「pwcn__meta_panel_save()」というユーザー定義関数でメタボックスの内容(項目)に入力した値を保存する処理をしています。保存する処理をする際にメタボックス内の内容が上書きされます(空にすれば今まで保存されていた内容は破棄されます)。これも「メタキー」の部分へメタボックスの内容のところと同じ文字列を入れればOKで、複数ある場合は以下の行を追加して処理させます。'メタキー');}カスタムフィールドの名前(キー)を登録するWordPress(サイト)でこれは一意のカスタムフィールドの名前(キー)ですよ!と登録するための措置ですが、これを行わなくてもメタボックスからのカスタムフィールドの追加・変更はできますし、次項の保存した値の呼び出しも問題なくできますから、一見不要なように思います(私自身も今までこのコードで登録したことはありません)。API」を使って段落ブロックなどにカスタムフィールドの値を呼び出して表示する機能を使う場合などでは、この登録を行っていないカスタムフィールドの名前(キー)はサイトへ未登録=無視されてしまうので、同時に登録しておくといいでしょう。🡅カスタムフィールドに保存した値を投稿の中へ呼び出すこれについては、以下のページで詳しく解説していますのでご覧ください(ショートコードを使う方法です)。カスタムフィールドに保存した値を投稿本文内へショートコードで呼び出すコード補足(セキュリティや入力制限など)今回紹介したコードでは、できるだけ簡単に投稿編集画面へメタボックスを表示させ、値を更新するということが実装できるよう、値のチェック(制限)やセキュリティに関する記述はあえて加えていません。WordPressに限らず、また、今回のようなメタボックスでのデータ入力などに限らず、誰かが何かを入力して、データとして保存するという処理をする際には、必ず意図した値以外のものを入力して保存できる状態になっていないか、その場所から入力されたものに間違いがないかという入力時のチェックを行うようにしましょう。出力時に不正なものを出力(表示)させないということも大事ですが、まずはできるだけ確実に意図しないものを保存させない工夫をすることが個人的には大事だと思います。以下のページでは、データのサニタイズ(無害化)と、入力セキュリティの1つであるnonceについて書いていますので、是非ご覧ください。プラグインのオプション設定を追加する際に指定できるサニタイズ関数いろいろセキュリティ関連でよく出てくる「nonce」って何?どうやって使うの?のメモ本ページで掲載した内容や、紹介した参考コードなどがお役に立てたようでしたら、ページ末尾のコメント欄よりコメントを残す、SNS等で拡散するなどしていただけましたら幸いです。本ページ掲載の方法やコード等はあくまでも最終更新日時点での私の環境において動作確認等を行ったものです。動作不良やカスタマイズの詳細な方法などをコメント欄よりいただきましても原則回答は致しませんのでご了承ください。WordPressのカスタマイズに関するご要望はココナラにてお受けしております。お問い合わせ方法など詳しくはこちらをご覧ください。最後までお読みいただきありがとうございました。Tenテーマがデフォルトになる前と結構な期間お世話になっています。興味に応じて、いろいろなサイト作っては壊しを繰り返しながら、独自テーマの作成やプラグインの作成などを行っています。Utility】プラグインの紹介などをしています。コメントをキャンセルメールアドレスが公開されることはありません。次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。(PWCN)WordPressで実際に行ったカスタマイズの記録、発生したトラブルに対処した時のメモ、ブロックテーマのカスタマイズなどこのスライドメニューは以下のページの方法を使って実装しています。以下のページでタブ切り替え式のコンテンツの作り方を公開しました。Utility】プラグインをバージョン5.1へ更新しました。