投稿・固定ページからアイキャッチ、日付を非表示にする方法

はじめに

フロントページを固定ページで作成する場合、Cocoonの設定によって表示されるアイキャッチや投稿日・更新日などが不要になることがあります。

エディターのページ設定では「タイトル」や「目次」を個別に非表示にできますが、アイキャッチや投稿日・更新日には設定項目がありません。
そのため、これらを非表示にするには、以下のCSSを追記する必要があります。

/* 固定ページを用いたフロントページのみ */
.front-top-page .article-header {
  display: none;
}

/* 全ての固定ページ */
.page .article-header {
  display: none;
}

そこで、既存のページ設定に「目次」に加え、「投稿日」と「更新日」を非表示にできるオプションを追加します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

/**
 * メタボックスの入力フォームを出力
 *
 * @param WP_Post $post 投稿オブジェクト
 * @return void
 */
if (!function_exists('render_singular_page_settings')):
function render_singular_page_settings($post) {
  // 元の設定を出力
  if (function_exists('page_custom_box_view')) {
    page_custom_box_view($post);
  }

  // 設定値を取得
  $date  = get_post_meta($post->ID, 'my_date', true);
  $thumb = get_post_meta($post->ID, 'my_thumb', true);

  wp_nonce_field('singular_page_settings_action', 'singular_page_settings_nonce');
  ?>
  <p>
    <label>
      <input type="checkbox" name="my_date" value="1" <?php checked($date, '1'); ?>>
      投稿日・更新日を表示しない
    </label>
  </p>

  <p>
    <label>
      <input type="checkbox" name="my_thumb" value="1" <?php checked($thumb, '1'); ?>>
      アイキャッチを表示しない
    </label>
  </p>
  <?php
}
endif;


/**
 * 投稿日・更新日の表示設定を変更
 *
 * @param mixed $current_mod 元の表示設定値
 * @return mixed '0' 非表示または元の設定値
 */
if (!function_exists('get_date_visible')):
function get_date_visible($current_mod) {
  if (is_singular()) {
    $date = get_post_meta(get_the_ID(), 'my_date', true);

    if ($date === '1') {
      return 0;
    }
  }

  return $current_mod;
}
endif;


// メタボックスを追加
add_action('add_meta_boxes', function () {
  // 元のメタボックスを削除
  remove_meta_box('singular_page_settings', 'page', 'side');
  remove_meta_box('singular_page_settings', 'post', 'side');

  // メタボックスを差し替え
  add_meta_box(
    'singular_page_settings',
    'ページ設定',
    'render_singular_page_settings',
    ['post', 'page'],
    'side'
  );
}, 20);


// 投稿データを保存
add_action('save_post', function ($post_id) {
  // nonceチェック
  if (!isset($_POST['singular_page_settings_nonce']) || !wp_verify_nonce($_POST['singular_page_settings_nonce'], 'singular_page_settings_action')) {
    return;
  }

  // 自動保存は処理対象外
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
    return;
  }

  // リビジョンは処理対象外
  if (wp_is_post_revision($post_id)) {
    return;
  }

  // 編集権限がない場合は処理対象外
  if (!current_user_can('edit_post', $post_id)) {
    return;
  }

  // 投稿日・更新日の表示設定を保存
  if (isset($_POST['my_date'])) {
    update_post_meta($post_id, 'my_date', '1');
  } else {
    delete_post_meta($post_id, 'my_date');
  }

  // アイキャッチの表示設定を保存
  if (isset($_POST['my_thumb'])) {
    update_post_meta($post_id, 'my_thumb', '1');
  } else {
    delete_post_meta($post_id, 'my_thumb');
  }
});


// Cocoon設定（画像）のアイキャッチ表示を変更
add_filter('theme_mod_eyecatch_visible', function ($current_mod) {
  if (is_singular()) {
    $thumb = get_post_meta(get_the_ID(), 'my_thumb', true);

    if ($thumb === '1') {
      return 0;
    }
  }

  return $current_mod;
});


// Cocoon設定（投稿）の投稿日表示を変更
add_filter('theme_mod_post_date_visible', 'get_date_visible');


// Cocoon設定（投稿）の更新日表示を変更
add_filter('theme_mod_post_update_visible', 'get_date_visible');

さいごに

今回紹介した方法を使えば、投稿や固定ページごとにアイキャッチ画像や投稿日・更新日の表示を簡単に制御できます。
Cocoonの既存の「ページ設定」に統合されるため、直感的に操作可能で、個別ページごとに表示/非表示を柔軟に切り替えられます。