【WordPress】テーマのmetaタグ周りについて考えてみる：ディスクリプション編

各投稿や固定ページにおいて、個別にディスクリプション設定したい場合、All in One SEO Packをはじめとするプラグインを使用すると実装できます。ですが、、「そこまで多機能を求めていない…」「テーマ内で軽く実装したいなぁ…」なんて思うことも少なくはないと思います（極力プラグインは抑えたいし…）。

というわけで、今回の記事では個別にディスクリプションを設定する方法を自力実装する流れを、コードを交えながら紹介していきたいと思います！

ディスクリプションを返す関数を定義する

まず前提として、以下のようなディスクリプションを返すようにしてみたいと思います。

• 投稿・固定ページにおいて、カスタムフィールドにより個別のディスクリプション設定可能（アーカイブ等は一旦「設定」のディスクリプション適用）
• 個別設定されていない場合、本文を引用し設定される
• あくまでディスクリプションは120文字で抜粋される

はい、という感じです。実際に運用すると本文からの抜粋がメインとなる可能性大ですが、より自由度を高めるためカスタムフィールドでも設定できるようにしています。

実際のコードは以下のようになります。

function get_custom_metatag( $meta = NULL ){
  global $post;
  $results = NULL;
  // description
  if( $meta == 'description' ){
    // 投稿・固定ページの場合
    if( is_single() || is_page() ){
      // 個別設定がされている場合
      if( get_post_meta( $post->ID, 'custom_description', true ) ){
        // 設定されたディスクリプションを変数に格納
        $results = get_post_meta( $post->ID, 'custom_description', true );
      }
      // 個別設定がされていない場合
      else {
        // 改行・ショートコードを取り除いた本文を変数に格納
        $results = strip_tags( str_replace( array( "\r\n","\n","\r" ), '', strip_shortcodes( $post->post_content ) ) );
      }
    }
    // 投稿・固定ページ以外の場合
    else{
      // 「設定」より設定されたディスクリプションを変数に格納
      $results = get_bloginfo( 'description' );
    }
    // ディスクリプションの文字数を変数に格納
    $count_description = mb_strlen( $results );
    // 文字数が120文字より多かった場合
    if( $count_description > 120 ){
      // 120文字で抜粋され、…を文末に追記
      $results = mb_substr( $results, 0, 120 ).'…';
    }
  }
  // ディスクリプションを返す
  return $results;
}

さて、この関数ですがfunction get_custom_metatag( $meta = NULL )ということで、引数を設けています。
これは、この関数を用いて今後他のメタタグも返すよう拡張していく想定であるためです。

今回はディスクリプションですので、出力させたい場合は
<?php echo get_custom_metatag( 'description' ); ?>という記述となりますね。

このコードにより、投稿・固定ページにおいて、個別のディスクリプション（設定がされていない場合、本文抜粋）を返すことが可能です。

コンテンツ一覧へ戻る

カスタムフィールド入力欄の設定

先程のコードにも記述があったように、個別のディスクリプションにおいてはカスタムフィールドを使用します。コードで言うと
get_post_meta( $post->ID, 'custom_description', true )
こちらになりますね。

さて、この入力欄ですが、編集画面にデフォルトである「カスタムフィールド」を使ってもまぁ良いのですが、今回はテーマ側で入力欄を設けるようにしてみたいと思います。

完成イメージは以下のようになります。

大まかな流れとしましては、ブロックの追加 → ブロックの内容定義 → 入力された値の保存という3つのステップで関数を定義していく形となります。

ブロックの追加

add_meta_boxesというアクションにフックさせます。

function add_box_custom(){
  // 投稿に設定
  add_meta_box( 'custom_description', 'ディスクリプション設定', 'box_form_custom_description', 'post', 'normal', 'high' );
  // 固定ページに設定
  add_meta_box( 'custom_description', 'ディスクリプション設定', 'box_form_custom_description', 'page', 'normal', 'high' );
}
add_action( 'add_meta_boxes', 'add_box_custom' );

このコードによりcustom_descriptionというカスタムフィールドが投稿・固定ページそれぞれに追加されます。
この追加されたブロックの中身ですが、第3引数にあるbox_form_custom_descriptionという関数に準じます。

ブロックの内容定義

ブロックの追加説明にあったように、次はbox_form_custom_descriptionという関数を定義します。

function box_form_custom_description(){
  global $post;
  // nonceフィールドを設置
  wp_nonce_field( wp_create_nonce( __FILE__ ), 'nonce' );
?>
<!-- .box-form -->
<div class="box-form">
  <p>個別でディスクリプションを設定する場合は、入力してください。</p>
  <input type="text" name="custom_description" id="custom_description"  value="<?php echo get_post_meta( $post->ID, 'custom_description', true ); ?>" style="width: 80%;">
</div>
<!-- /.box-form -->
<?php
}

説明文とテキストフィールドが記述されたHTMLタグを定義しているという形になります。
また、テキストフィールドのname属性はcustom_descriptionと合わせてます。

入力された値の保存

残るはカスタムフィールドの保存処理ですね。保存する関数を定義し、
save_postというアクションにフックさせます。

function box_save( $post_id ){
  global $post;
  // nonceの値を変数に格納
  $nonce = isset( $_POST['nonce'] ) ? $_POST['nonce'] : null;
  // nonceを確認し、値が書き換えられていた場合
  if( !wp_verify_nonce( $nonce, wp_create_nonce( __FILE__ ) ) ){
    // 何もしない（CSRF対策）
    return $post_id;
  }
  // 自動保存が走った場合（記事の自動保存処理として呼び出された場合の対策）
  if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ){
    // 何もしない
    return $post_id;
  }
  // ユーザーが編集権限を持っていない場合
  if( !current_user_can( 'edit_post', $post->ID ) ){
    // 何もしない
    return $post_id;
  }
  // 投稿タイプがpostかpageだった場合
  if( $_POST['post_type'] == 'post' || $_POST['post_type'] == 'page' ){
    // 入力された情報を保存＆更新するように指定（追加可能）
    update_post_meta( $post->ID, 'custom_description', $_POST['custom_description'] );
  }
}
add_action( 'save_post', 'box_save' );

上記コードにより、投稿・固定ページにおいて保存がされたタイミングでカスタムフィールドを保存するという処理が行われます。
update_post_meta( $post->ID, 'custom_description', $_POST['custom_description'] )このコードは、例えば他にもカスタムフィールドを設けていた場合、その分記述が増えるという形ですね。

コンテンツ一覧へ戻る

ディスクリプションをメタタグに設定

はい、後はmetaのHTMLに出力させるのみですね。大抵はheader.phpに記述という形になるかと思うのですが、以下のようなコードとなります。

<meta name="description" content="<?php echo get_custom_metatag( 'description' ); ?>">

コンテンツ一覧へ戻る

というわけで、独自でカスタムフィールドを設けディスクリプションを設定できるようにする記事でした。
WordPressを構築するにあたって、いかにプラグインを抑えるかというのが鍵だったりもするので、このようにテーマ上でカスタムフィールドの設定ができると、仕様や条件によってはAdvanced Custom Fields等のプラグインを使わずに済むかもしれませんね。