コンテンツページにおけるカスタムフィールド・メタボックス実装と使用方法を紹介

日付 2016/04/24

カテゴリーチュートリアル

ワードプレスサイトで各ページの差別化を行う場合、テンプレートファイルを子テーマなどに実装することが多いと思います。カラム数やデザインを変化させるのも、HTMLの知識とワードプレスのタグを使用することで編集できてしまいますから便利ですよね。

ただ、SEO関連のプラグインでも使用されるようなメタタグの出力設定など、デザイン以外でも各ページにおける差別化を行う際は、テンプレートファイルだけでは不十分なことがあります。たとえ設定項目でなくても、例えば訪問者によるページの閲覧数をカウントすることも可能ですので、アナリティクスのような細かい分析はできませんが、人気ページを選別するようなデータとしてクエリに使用することも出来てしまうんですよ。

また、メタデータは「投稿ページ」や「固定ページ」などのコンテンツページだけでなく、「カテゴリー」などのタクソノミータームにも実装可能ですので、アーカイブページのターム（当サイトの例だと「カテゴリー」の「カスタマイズ」など）をそれぞれ差別化するサムネイル設定を設定したり、テンプレートの選択肢を与えるような設定を実装することも可能になる非常に便利なデータなんです。

そんなワードプレスのページの差別化を行える「メタデータ」を扱う方法は、カスタマイズに興味がある人なら知っておいて損はありませんので、まずはコンテンツページにおける簡単な実装方法を紹介していこうと思います。

メタデータの基本的な操作方法

メタデータの保存に必要なのは、ページを特定する「ID」とワードプレス関数です。

add_post_meta
update_post_meta
delete_post_meta

上記の３つの関数が用意されていますので、これらを用いてデータの追加・保存・削除が行います。

参照：
update_post_meta() | Function | WordPress Developer Resources
get_post_meta() | Function | WordPress Developer Resources

<?php
global $post;
// メタデータの保存
update_post_meta( $post->ID, '_some_meta_value', 'data-you-want-to-save' );
?>

また、こうして保存したデータを取得する場合は「get_post_meta」を使用します。

$post_meta_data = get_post_meta( $post_id, '_some_post_meta', true );
echo $post_meta_data; // This will print 'data-you-want-to-save'.

こんな感じです。

データの型は配列でも問題ありませんので、非常に便利ですよ。

「$post」や「$post_id」などコンテンツページを取得できる条件下であれば、いつでもデータの操作は行えます。

if( is_singular() ) {
  // コンテンツページでの処理
}

使用する場面にもよると思いますが、こうしておけば「$post」を所有するコンテンツページを閲覧時のみに処理することが可能です。

「ブログページ」を設定している場合、

if( is_home() && is_front_page() ) { // デフォルトホーム

} elseif( is_front_page() ) { フロントページ

} elseif( is_home() ) { // ブログページ

  // ページのオブジェクトを取得
  $post = get_post( intval( get_option( 'page_for_posts' ) ) );

}

このようにすることで、設定したブログページのIDを取得することが出来ます。

例えば、閲覧数をカウントする場合だと、処理する関数を「wp_footer」などにフックさせることで可能です。テーマ内に実装するのであれば、直接コンテンツを呼び出す関数内でコールしても大丈夫だと思います。

add_action( 'wp_footer', 'page_view_count' );
function page_view_count() {

  if( is_singular( array( 'post', 'page', 'カウントしたい投稿タイプ' ) ) ) {
    
    // 訪問者のチェックなど（判別できるボットなどを除くなど）

    global $post;

    // 保存済みのカウントデータを取得
    $page_view_count = intval( get_post_meta( 
      $post->ID, // ページのID
      '_page_view_count', メタデータの名前
      true // 保存したデータの形のまま取得するか（「false」だと配列で取得されます）
    ) );
    
    // カウントにプラス1
    $page_view_count++;

    // プラス1した変数を保存してカウントを更新
    update_post_meta( 
      $post->ID, // ページのID
      '_page_view_count', // メタデータの名前
      $page_view_count // 保存する値
    );
    
  }

}

こんな感じです。

まぁボットとかもありますので、ある程度カウントする条件は絞った方が良いとは思いますが、人気一覧のウィジェットを表示する場合などは相対的に他のページと比較できるようにするだけで良いと思います。

メタデータの名前の頭に「_（アンダーバー）」を付けると、投稿ページの標準メタボックス「カスタムフィールド」で表示されなくなりますので、表示させたい場合は「page_view_count」という名前にしておきましょう。

メタボックスを追加

次はコンテンツの編集ページで編集しやすいようにメタボックスを追加する方法です。

コンテンツのテキストエディターの下に表示させたり、「アイキャッチ画像」などのあるサイドメタボックスも可能です。

作業は「フォームの追加」「データの保存」「保存したデータの取得」の３つの手順に分けて行います。

「保存したデータの取得」については「どう扱うか」になり、公開ページで参照するなど、目的によりますので、前者２つを抑えておけば基本は大丈夫でしょう。

フォームの追加

ワードプレスに用意されているアクションフック「add_meta_boxes」に関数「add_meta_box」をコールする関数をフックさせることで、メタボックスは簡単に追加できます。

参照： add_meta_box() | Function | WordPress Developer Resources

add_action( 'add_meta_boxes', 'your_add_meta_boxes' );
function your_add_meta_boxes() {
  
  $post_type = 'post'; // 投稿タイプ

  add_meta_box(
   'some-settings', // ID
    __( 'Some Settings', 'your_textdomain' ), // メタボックスのタイトル
    'your_settings_form', // フォームタグ出力のコーラブル
    $post_type, 投稿タイプ 
    'advanced', // 出力位置 'side'にするとサイド（アイキャッチ画像などの位置）に表示されます。
    'high', // 優先度
    array() // 渡す引数
  );

}

これで「your_settings_form」という関数をめたボックス内に呼び出すことができますので、あとは関数内でINPUTタグなど必要な設定用のHTMLを作成するだけです。

function your_settings_form( $post, $args = array() ) { 

  // 保存しているデータを取得
  $setting1 = esc_attr( get_post_meta( $post->ID, '_some_data_you_want_to_handle', true ) );
  $setting1 = $setting1 != '' ? $setting1 : 'default-value';

  // 「wp_nonce_field」やその他の必要なデータ取得
  ?>

  <label for="_some_data_you_want_handle"><?php _e( 'Setting 1', 'your_textdomain' ); ?></label>
  <input type="text" name="some_data_you_want_to_handle" value="<?php echo $setting1; ?>">

<?php }

本当はノンスの出力もした方が良いのですが、とりあえず簡単に仕組みだけの紹介をしていますので、実際に実装する際は出力してください。ワードプレスに「wp_nonce_field」という関数がありますので簡単に出力できますよ。

データの保存

次は作成したINPUTタグに入力されたデータを保存する処理についてです。

保存用の関数はアクションフック「save_post」で編集の保存時に呼び出されるようにします。

add_action( 'save_post', 'save_your_settings_data' );
function save_your_settings_data( $post_id ) {

  // 保存する条件
  // 「wp_verify_nonce」でノンスチェック
  // if( current_user_can( 'edit_post' ) ) return;
  // if( isset( $_POST[ 'your_setting_data' ] ) ) return;
  // などなど

  // 受け取ったデータをサニタイズ
  $recieved_data = sanitize_text_field( $_POST[ 'some_data_you_want_to_handle' ] );
  // データを保存
  update_post_meta( $post_id, '_some_data_you_want_to_handle', $recieved_data );

}

このフックでは投稿IDを受け取れますので、阻害要因などを回避して、最初に紹介した関数「update_post_meta」でデータを保存すればいいだけです。

他にもオートセーブを除外するなどできますが、必要最低限保存するまでの要点を押さえるとこんな感じじゃないかと思います。