カスタムWordPressメタボックスを作成する方法

公開: 2015-06-09

カスタムWordPressメタボックスとは何ですか？

カスタムメタボックスを使用すると、WordPressコアに含まれているWordPressの「箱から出してすぐに」使用できる標準のメタボックスとは別に、投稿、ページ、カスタム投稿タイプに追加情報を追加できます。

あなたがそれを知っているかどうかにかかわらず、あなたはしばらくの間メタボックスを使用しています。ダッシュボードウィジェット、エディター、カスタムフィールド、注目の画像、カテゴリ、タグなどは、メタボックスの例です。

カスタムWordPressメタボックスを作成する方法

追加のメタボックスを作成する必要がある場合はどうなりますか？プロジェクトにもう少しカスタムしたものかもしれません。カスタムメタボックスの作成に役立つ既存のプラグインがあります。これは優れたオプションです。これがあなたがとろうとしているルートであるとあなたが決めたとしても、カスタムメタボックスの内部で起こっていることの基本的な概念を理解することは依然として重要です。

CSSスプライトを使用してロゴをレスポンシブにします

CSSスプライトを覚えていますか？これらは1つのファイルに結合されたさまざまなグラフィックのグループであり、応答性の高いロゴを作成するために使用します。これは、ブラウザのパフォーマンスを最適化するために使用される手法です...

この非常に単純なメタボックスを作成するときは、非常に高いレベルで概念を検討します。完了すると、製品タイトルを入力できるカスタムメタボックスが作成されます。

単純なものから始めていますが、このアイデアはより複雑なニーズに拡張できることを覚えておいてください。カスタムメタボックスに含めることができる多くのオプションと追加機能があります。チェックボックス、ファイルのアップロードなどはすべて、カスタムメタボックスの可能な機能です。このチュートリアルは、フィールドのスタイル設定に必要なCSSに精通していることを前提としています。スタイリングについては詳しく説明しませんが、これはメタボックスが起動して実行された後に簡単に実行できるものです。

カスタムメタボックスの開発

メタボックスのカスタムコードは、functions.phpまたはプラグインに含めることができます。この例には、プラグインの形式で必要なコードが含まれています。これを段階的にコピーして、すぐに使用できる完全なファイルを作成できます。

コーデックスはあなたのガイドです

コーデックスは、まだの場合は、あなたの親友になります。引数が異なればオプションも異なり、Codexはこれを非常に詳細に説明します。コーデックスはあなたがよく知っておくべきものであることは言及する価値があります。

最初にローカルでテストする

これが、このチュートリアルの唯一の免責事項です。 最初にローカル開発環境でこれを試してください。 私たちは皆、人生のちょっとした冒険に感謝していますが、特にライブサイトでは、死の白い画面が好きな人は誰もいません。このチュートリアルを段階的に進めていきますが、チュートリアルを進めるにつれて発生する依存関係があります。このため、途中で保存を行うとエラーが発生する可能性があります。

ステップ1：見出しを作成してプラグインに入れる

プラグインの作成は複雑に聞こえるかもしれませんが、すべてのプラグインが数百行である必要はありません。プラグインは非常に単純な場合があり、これはその良い例です。 wp-contentフォルダーに移動すると、 pluginsフォルダーが表示されます。 custom-post-meta-box.php -meta-boxという名前の新しいフォルダーを作成します。これは、作業するファイルです。

プラグインを作成するときは、カスタムコードの前に次の情報が表示されていることを確認してください。

<?php

/*

Plugin Name: Custom Meta Box

Plugin URI:  www.yourwebsite.com

Description: Creates a meta box in WordPress

Version:     1.0.0

Author:      Your Name

Author URI:  www.yourwebsite.com

License: GPL2

*/

プラグインをアクティブ化する

まだコードを入力していませんが、プラグインに移動してカスタムメタボックスを探し、[アクティブ化]を選択することで、プラグインをアクティブ化できます。まだ何も変わらないことを覚えておいてください。

00-アクティブ化プラグイン

オプションのCSS

これはオプションですが、カスタムcssを追加する予定がある場合は、これをプラグインファイルにコピーしてください。 .cssファイルがプラグインのcssフォルダーにあることを確認してください。

function cmb_add_admin_styles() {

wp_enqueue_style('cmb-admin', plugins_url( 'custom-post-meta-box/css/admin.css' ) );

}

add_action( 'admin_enqueue_scripts', 'cmb_add_admin_styles' );

01-css-file-location

ステップ2：メタボックスを追加する

add_meta_box関数は、カスタムメタボックスを作成するために使用されます。この関数は、カスタムメタボックスの登録と表示のみを担当します。

function cmb_add_meta_box() {

add_meta_box(

'custom_post_metabox',

'Our Products',

'cmb_display_meta_box',

'post',

'normal',

'high'

);

}

add_action( 'add_meta_boxes', 'cmb_add_meta_box' );

ダッシュボードを見ると、「Our Products」というタイトルが表示されていますが、テキストを入力するためのテキストフィールドがありません。

01-メタボックス-開始

ステップ3：管理者にメタボックスフィールドを追加する

情報のラベルとフィールドがあることを確認する必要があります。 htmlを使用することにより、これが可能になります。

function cmb_display_meta_box( $post ) {

wp_nonce_field( plugin_basename(__FILE__), 'cmb_nonce_field' );

$html = '<label id=&quot;product-title&quot; for=&quot;product-title&quot;>';

$html .= 'Product Title';

$html .= '</label>';

$html .= '<input type=&quot;text&quot; id=&quot;product-title&quot; name=&quot;product-title&quot; value=&quot;' . get_post_meta( $post->ID, 'product-title', true ) . '&quot; placeholder=&quot;What is the Product Title?&quot; />';

echo $html;

}

// this echoes a single stream of html

02-メタボックス

<label>で物事がどのように包まれているか見てみましょう。ユーザーがフィールドとは何か、どのタイプの情報を入力する必要があるかを理解するのに役立つ説明テキスト「製品タイトル」が表示されます。また、役立つ情報を追加するプレースホルダーテキストがあることにも注意してください。

入力はそれほど広くないかもしれません。すべてのプレースホルダーテキストを表示できるように、いくつかのカスタムcssが実行されました。ラベルの幅は100％です。

ステップ4：データの保存とナンスを使用することの重要性

手順3でテキストを入力したところ、実際には保存されていないか、ページに表示されていないことに気付いた可能性があります。このステップは本当にすべての魔法が起こる場所です。

function cmb_save_meta_box_data( $post_id ) {

if ( cmb_user_can_save( $post_id, 'cmb_nonce_field' ) ) {

if ( isset( $_POST['product-title'] ) && 0 < count( strlen( trim( $_POST['product-title'] ) ) ) ) {

$product_title = stripslashes( strip_tags( $_POST['product-title'] ) );

update_post_meta( $post_id, 'product-title', $product_title );

}

}

}

add_action( 'save_post', 'cmb_save_meta_box_data' );

function cmb_display_product( $content ) {

if ( is_single () ){

$html = 'The Product Title is: ' . get_post_meta( get_the_ID(), 'product-title', true );

$content .= $html;

}

return $content;

}

add_action('the_content', 'cmb_display_product');

function cmb_user_can_save( $post_id, $nonce ) {

$is_autosave = wp_is_post_autosave( $post_id );

$is_revision = wp_is_post_revision( $post_id );

$is_valid_nonce = ( isset( $_POST[ $nonce ] ) && wp_verify_nonce( $_POST [ $nonce ], plugin_basename( __FILE__ ) ) );

return ! ( $is_autosave || $is_revision ) && $is_valid_nonce;

}

ここで起こっていることがいくつかあります。基本的に、 cmb_save_meta_box_data関数は、すべての保存を実行するために必要なものです。ノンス価値のあるセキュリティに注力していきます。これは、保存するデータが正しいソースからのものであることを確認するためのセキュリティ対策です。また、投稿が自動保存またはリビジョンではないことを確認する必要があります。次に、ナンスが検証され、ユーザーは保存できます。

安全に保存できるようになったので、これがメタ情報がページに表示される方法です。ご覧のとおり、簡単にスタイルを設定できますが、機能し、データが保存されます。

03-保存されたメタ情報

さらに読むことと宿題

ご覧のとおり、ほんの数ステップで、カスタムメタボックスを作成できます。ほとんどの開発プロジェクトと同様に、同じことを達成する方法は複数あるため、この同じタスクに対して他のアプローチを見つけることができます。

カスタムメタボックスを非常に高いレベルで調べたので、これらの概念をさらに詳しく調べたいと思うかもしれません。カスタムメタボックスの必要性が高まっていることに気付いた場合は、さらに発見するための優れた情報源をいくつか紹介します。

ノンスに関する詳細情報
メタボックスプラグイン
add_meta_box関数のオプション