WordPressメタボックス–クイックガイド

公開: 2021-01-20

WordPressメタボックスはドラッグ可能なボックスで、編集画面に表示され、分類用語などの追加データを処理するために使用されます。この記事では、WordPressメタボックスを見て、独自のカスタムボックスを作成する方法、行った変更を保存する方法、およびWebサイトのフロントエンドにコンテンツを表示する方法を確認します。

始めましょう！

カスタムフィールド、メタボックス、メタデータ

これらの3つの用語の違いについては多くの混乱があります。それらが何であるか、そしてそれらがどのように機能するかをよりよく理解するために、3つすべてを見てみましょう。

メタデータ

投稿のメタデータは、データベースのpostmetaテーブルに保存されている投稿に関する追加情報です。

すべてのキー/値のペアは「投稿フィールド」と見なされます。このテーブルが持つことができるメタエントリの数に制限はありません。

カスタムフィールド

技術的にカスタムフィールドである機能画像のようにWordPressによって事前定義されたフィールドがあります。その他は、プラグインまたはカスタムコードで追加し、管理者ユーザーが定義できます。カスタムフィールドの詳細については、記事「WordPressカスタムフィールドの概要」をご覧ください。

メタボックス

WordPressの投稿を開いて編集すると、ページがさまざまなセクションに分割されていることがわかります（その多くは右側のサイドバーにあります）。

これらのセクションはすべて、技術的には「メタボックス」です。したがって、メインの投稿エディタ、カテゴリの選択、投稿の公開、タグの追加、注目の画像の追加のためのコンテナはすべて、投稿のメタデータと相互作用するHTML要素を含むメタボックスです。 Webサイトによるメタデータの処理方法に応じて、これらのボックスは画面上のさまざまな場所に表示されます。

さらなる例として、注目の画像メタボックスを見てみましょう。これは通常、投稿の管理画面の右側のサイドバーにあります。そこで、画像を簡単に変更できます。これを行うと、実際にはその投稿のメタデータの_thumbnail_idが更新されます。

'source'（カスタムフィールドに関するチュートリアルで追加した）のようなカスタムフィールドメタボックスは、通常、メインの投稿エディターの下にあります。

カスタム投稿タイプのメタボックスの作成

これで、メタボックスが正確に何であるかが明確になりました。次に進んで、Webサイト用に独自のカスタムメタボックスを作成できます。このチュートリアルは、カスタム投稿タイプに関するチュートリアルの続きです。ステップバイステップでフォローしたい場合は、その記事をチェックして、「レシピ」と呼ばれるカスタム投稿タイプを作成してから、いくつかの「レシピ」を設定する必要があります。 '注目の画像を選択して投稿をテストします。

このチュートリアルでは、チェックボックスをオンにしてレシピがビーガンかどうかを定義するために使用される新しいメタボックスを追加することにより、カスタム投稿タイプを拡張します。

ステップ1-メタボックスを登録する

カスタム投稿タイプにメタボックスを追加するには、WordPressが提供するadd_meta_box関数を使用します。使用する引数を持つ関数の構造は次のとおりです。

 add_meta_box( $id, $title, $callback, $screen, $context )

一意のIDにはis_veganを使用し、メタボックスのタイトルには文字列Is Veganを使用します。

ボックスの内容を表示するコールバック関数はdisplay_vegan_meta_boxになります。 $screen属性は、メタボックスが表示される管理画面を参照します。この場合、これはレシピの投稿編集領域であるため、前述のようにrecipesである一意の投稿タイプ名になります。 $contextパラメーターは、管理画面によって異なります。

ここで使用する投稿編集画面のコンテキストには、使用可能なコンテキスト値として、通常、サイド、および詳細が含まれます。サイド値を使用して、投稿編集ページのサイドバーにメタボックスを表示します。

したがって、要約すると、 my-custom-post-type.php追加する必要があるコードの上で定義されたパラメーターを使用すると、次のようになります。

 function my_metabox() { add_meta_box( 'is_vegan', 'Is Vegan', 'display_vegan_meta_box', 'recipes', 'side' ); } add_action( 'admin_init', 'my_metabox' );

ご覧のとおり、ユーザーが管理領域にアクセスしたときに他のフックの前にトリガーされるadmin_initフックを使用しました。

これで、レシピ投稿の編集ページにアクセスすると、サイドバーにボックスが表示されます。もちろん、コンテンツは現在空です。

次のステップは、ボックスに目的のコンテンツを入力することです。

ステップ2–メタボックスの基本コンテンツを表示する

このボックスの内容はシンプルに保ちます。必要なのは説明とチェックボックスだけです。前述のように、コンテンツはdisplay_vegan_meta_box関数で返されます。

続行して、 my_metabox関数の下に以下のコードを追加してください。

 function display_vegan_meta_box( $recipe ) { ?> <span class="title">Vegan recipe?</span> <span class="content"> <label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" /> </label> </span> <?php }

この関数で行ったことは、今のところチェックされていないHTMLチェックボックスを出力することです。保存機能を導入した後、コードのこのセクションに戻ってさらに変更を加え、編集後のページが読み込まれたときに、チェックボックスが保存されたチェックボックスの状態を取得するようにします。

ステップ3–メタボックスの値をデータベースに保存する

メタボックスの入力フィールド値を保存するには、WordPressが提供するsave_postアクションフックを次のように使用します。

 function update_vegan_box( $post_id ) { if( !current_user_can( 'edit_post' ) ) return; if ( 'recipes' == get_post_type() ) { if ( isset( $_POST['vegan_checkbox'] ) && $_POST['vegan_checkbox'] != '' ) { update_post_meta( $post_id, 'is_vegan', $_POST['vegan_checkbox'] ); }else { update_post_meta( $post_id, 'is_vegan', "no" ); } } } add_action( 'save_post', 'update_vegan_box' );

$post_id引数を指定したupdate_vegan_bo関数内に、いくつかの条件を含めました。まず、ユーザーが投稿を編集する権限を持っているかどうかを確認し、 recipesの投稿タイプを編集していることも確認します。

したがって、投稿がrecipesタイプに属している場合は、チェックボックスの値を調べます。デフォルトでは、チェックボックスがオンになっている場合、格納されるデータベース値は「yes」であり、そうでない場合、値はNULLであることに注意してください。これを少し調整して、ビーガンメタボックスをオフにして投稿を保存するときに「no」の値が保存されるようにしました。

ここでは、update_post_meta WordPress関数update_post_meta( $post_id, $meta_key, $meta_value, $prev_value = '' )を使用しました

その引数で、投稿ID、メタキー、メタ値を定義しました。ただし、この関数はもう1つの引数、 $prev_valueを受け入れることができます。
更新する前に前の値を確認したい場合は、それが等しい場合にのみ、続行して更新します。

ステップ4–メタボックスコンテンツコードを改良する

次に、メタボックスのコンテンツを出力する前の関数に戻り、データベースから関連データを取得するコードをさらに数行追加します。

 function display_vegan_meta_box( $recipe ) { $is_value = esc_html( get_post_meta( $recipe->ID, 'is_vegan', true ) ); $checked; if ( $is_value == "yes" ) { $checked = "checked"; } else if ( $is_value == "no" ) { $checked = ""; } else { $checked="";} ?> <span class="title">Vegan recipe?</span> <span class="content"><label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" <?php echo $checked; ?> /> </label></span> <?php }

したがって、最初にis_veganメタ値を取得し、必要に応じて、 checkedされた値が$checked変数に渡され、HTML出力にエコーされます。

以上です。これで、カスタム投稿のレシピがビーガンであるかどうかを定義するために使用できる作業メタボックスができました。

結論

メタボックスは、投稿の制御と柔軟性のレベルを向上させ、さまざまな方法で活用できます。それらの特に優れている点は、投稿の残りのコンテンツから分離されていると同時に、同じ管理画面に表示されているため、WordPress管理者の他の場所にある場合よりもはるかに簡単に管理できることです。

ほとんどのWordPressコーディングと同様に、メタボックスの使用に慣れるまでに時間がかかる場合があります。うまくいけば、上記の情報で始めるのに十分です。ハッピーコーディング！