CMB2 でカスタム メタ ボックスを作成する方法
公開: 2023-02-25数年前、投稿をクエリして、投稿が書かれた場所を Google マップに表示する方法を探していました。 調べているうちに、CMB2 と Google マップを使用して店舗ロケータを作成する方法についてのブログ記事を偶然見つけました。 それ以来、CMB2 は私のお気に入りのプラグインの 1 つになり、私のプロジェクトの大部分で使用されています。
まずCMB2とは?
CMB は Custom Meta Boxes の頭字語であり、プラグイン ページの説明によると、「CMB2 は WordPress のメタ ボックス、カスタム フィールド、およびフォーム ライブラリであり、圧倒されます。」 これは、WebDevStudios の Justin Sternberg によって開発され、プラグイン リポジトリに 2 年余り存在していました。 しかし、昨年 2 月、WordPress プラグイン リポジトリの善良な人々は、CMB2 をプラグインとして承認してはならないのに、ふざけて承認したことを認識しました。
ほら、プラグインは通常、箱から出してすぐに何かをすることができます。 それらにはいくつかの固有の機能があります。 CMB2 は実際にはフレームワークです。 Sternberg がかつて説明したように、「これは、フォームやフィールドをテーマやプラグインに簡単に組み込むための開発者のフレームワークです。」 実際、CMB2 をインストールしても何も起こりません。 管理ページは表示されず、管理ユーザー インターフェイスもありません。 CMB2 を使用するには、コードを記述してfunctions.php
ファイルに追加できる必要があります。 そのため、私はこれを「非プラグイン」プラグインと呼んでいます。
幸いなことに、プラグイン承認チームはプラグインをリポジトリに残すことに同意したため、引き続きダウンロードしてそこから更新できます. ジャスティンのサイトで歴史のすべてを読むことができます.
CMB2 のセットアップ方法
開始するには、プラグイン ディレクトリからexample-functions.php
ファイルを見つけて、テーマにコピーする必要があります。 テーマのルート フォルダーに直接コピーできますが、プロジェクトを適切に整理するために、 /lib/
や/includes/
のフォルダーにコピーすることをお勧めします。 CMB2 の使用方法が既にわかっている場合は、ファイルの名前をより適切なものに変更することをお勧めします。 たとえば、それを使用して証言ページのカスタム フィールドを作成する場合は、 testimonial-functions.php
という名前を付けることができます。
次に、 functions.php
ファイルにrequire_once
ステートメントを追加して、WordPress が新しいファイルを見つけられるようにする必要があります。 次のようになります。
require_once( dirname(__FILE__) . '/lib/testimonial-functions.php');
testimonial-functions.php
ファイル (または名前を付けたファイル) を開きます。 Justin は、考えられるほぼすべてのタイプのフィールドの例を作成しただけでなく、ホームページ、カテゴリ、投稿 ID などでフィールドを表示する関数も作成したことに気付くでしょう。
注: この記事は、CMB2 の紹介を目的としています。 これは、そのすべての側面を使用する方法に関する完全なチュートリアルではありません。また、これはフレームワークであり、プログラマーを支援するために開発されたものであるため、PHP と WordPress の内部動作の基本的な理解が必要です。 管理ユーザー インターフェイスを備えたカスタム メタ ボックス プラグインをお探しの場合は、高度なカスタム フィールド プラグインを確認してください。
それでは、証言などの単純なもの用のカスタム メタ ボックスの作成に戻りましょう。 まず、必要なフィールドの数とタイプを決定します。 簡単にするために、3 つのフィールドが必要だとしましょう。 1 つは実際の証言用、もう 1 つは証言者の名前用、もう 1 つは人物の画像用です。
testimonial-functions.php
ファイルで、新しい関数を登録および追加するためのセクションを見つける必要があります。 そのコードは次のようになります。
add_action( 'cmb2_admin_init', 'yourprefix_register_demo_metabox' );
次に、関数の名前をテーマとプロジェクトに関連する名前に変更することをお勧めします。
add_action( 'cmb2_admin_init', 'register_testimonial_metabox' ); /** * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook. */ function register_testimonial_metabox() {
また、プレフィックスの名前を変更することをお勧めします。
// Start with an underscore to hide fields from custom fields list $prefix = '_yourprefix_'; //note, you can use anything you'd like here, but you need to remember what you use, because you will be using it again later.
いくつかの異なるフィールド タイプから選択できます。 私は使用するつもりです:
'type' => 'textarea_small' // for the author field 'type' => 'wysiwyg' // for the testimonial in case we want to include html 'type' => 'file' // for the image of the project or author $cmb_demo->add_field( array( 'name' => __( 'Testimonial Author', 'cmb2' ), 'desc' => __( 'Who is the testimonial from', 'cmb2' ), 'id' => $prefix . 'author', //Note, I renamed this to be more appropriate 'type' => 'textarea_small', ) ); $cmb_demo->add_field( array( 'name' => __( 'Testimonial', 'cmb2' ), 'desc' => __( 'add the testimonial here', 'cmb2' ), 'id' => $prefix . 'testimonial', //Note, I renamed this to be more appropriate 'type' => 'wysiwyg', 'options' => array( 'textarea_rows' => 5, ), ) ); $cmb_demo->add_field( array( 'name' => __( 'Author Image', 'cmb2' ), 'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ), 'id' => $prefix . 'image', //Note, I renamed this to be more appropriate 'type' => 'file', ) );
これら 3 つの新しいフィールドを新しい関数に追加する必要があるため、次のようになります。
add_action( 'cmb2_admin_init', 'register_testimonial_metabox' ); /** * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook. */ function register_testimonial_metabox() { // Start with an underscore to hide fields from custom fields list $prefix = '_yourprefix_'; //note, you can use anything you'd like here /** * Start field groups here */ $cmb_demo->add_field( array( 'name' => __( 'Testimonial Author', 'cmb2' ), 'desc' => __( 'Who is the testimonial from', 'cmb2' ), 'id' => $prefix . 'author', //Note, I renamed this to be more appropriate 'type' => 'textarea_small', ) ); $cmb_demo->add_field( array( 'name' => __( 'Testimonial', 'cmb2' ), 'desc' => __( 'add the testimonial here', 'cmb2' ), 'id' => $prefix . 'testimonial', //Note, I renamed this to be more appropriate 'type' => 'wysiwyg', 'options' => array( 'textarea_rows' => 5, ), ) ); $cmb_demo->add_field( array( 'name' => __( 'Author Image', 'cmb2' ), 'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ), 'id' => $prefix . 'image', //Note, I renamed this to be more appropriate 'type' => 'file', ) ); }
以上です! 最終的なコードは次のようになります。
<?php /** * Include and set up custom metaboxes and fields. (Make sure you copy this file outside the CMB2 directory) * * Be sure to replace all instances of 'yourprefix_' with your project's prefix. * http://nacin.com/2010/05/11/in-wordpress-prefix-everything/ * * @category YourThemeOrPlugin * @package Demo_CMB2 * @license http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later) * @link https://github.com/WebDevStudios/CMB2 */ /** * Get the bootstrap! If using the plugin from wordpress.org, REMOVE THIS! */ if ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) { require_once dirname( __FILE__ ) . '/CMB2/init.php'; } elseif ( file_exists( dirname( __FILE__ ) . '/CMB2/init.php' ) ) { require_once dirname( __FILE__ ) . '/CMB2/init.php'; } add_action( 'cmb2_admin_init', 'register_testimonial_metabox' ); /** * Hook in and add a testimonial metabox. Can only happen on the 'cmb2_admin_init' or 'cmb2_init' hook. */ function register_testimonial_metabox() { // Start with an underscore to hide fields from custom fields list $prefix = '_yourprefix_'; //note, you can use anything you'd like here /** * Start field groups here */ // This first field group tells WordPress where to put the fields. In the example below, it is set to show up only on Post_ID=10 $cmb_demo = new_cmb2_box( array( 'id' => $prefix . 'metabox', 'title' => __( 'Homepage Custom Fields', 'cmb2' ), 'object_types' => array( 'page', ), // Post type 'show_on' => array( 'id' => array( 10, ) ), // Specific post IDs to display this metabox ) ); $cmb_demo->add_field( array( 'name' => __( 'Testimonial Author', 'cmb2' ), 'desc' => __( 'Who is the testimonial from', 'cmb2' ), 'id' => $prefix . 'author', //Note, I renamed this to be more appropriate 'type' => 'textarea_small', ) ); $cmb_demo->add_field( array( 'name' => __( 'Testimonial', 'cmb2' ), 'desc' => __( 'add the testimonial here', 'cmb2' ), 'id' => $prefix . 'testimonial', //Note, I renamed this to be more appropriate 'type' => 'wysiwyg', 'options' => array( 'textarea_rows' => 5, ), ) ); $cmb_demo->add_field( array( 'name' => __( 'Author Image', 'cmb2' ), 'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ), 'id' => $prefix . 'image', //Note, I renamed this to be more appropriate 'type' => 'file', ) ); }
完了すると、次のようなページが表示されます。
CMB2 の使用は、オプションが無限にあるため、Web サイトに必要なものを正確に提供する優れた方法です。 たとえば、CMB2 を使用して、ロゴ、ソーシャル メディア サイトへの URL、またはビデオのメタ ボックスを含むテーマ オプション ページを作成できます。 クライアント向けの Web サイトを構築する場合、クライアントがテーマのスタイルに合わせてコンテンツをフォーマットする必要がないように、CMB2 は管理者をカスタマイズするのに最適です。 データが入力されると、HTML と CSS に既に配置されているすべてのスタイルでコンテンツを表示できます。
CMB2 を使用して基本的なフィールドを追加する方法を習得したら、繰り返し可能なフィールド グループを追加してみてください。 これらを使用すると、好きなだけコンテンツ タイプを追加でき、for-each ループを使用して、スライドショーまたはカルーセルの作成を開始できます。
CMB2 により、WordPress サイトを次のレベルに引き上げることができました。あなたにも同じことができることを願っています.