【WordPress】トップに表示するかどうかをチェックボックスで切り替える方法

WordPress

WordPressのブログを運営していると、「この投稿だけトップページに表示したい」「特定の投稿をトップページから除外したい」といった要望が出てくる場合があります。今回は、投稿編集画面にチェックボックスを追加し、チェックが入っているものだけをトップページに表示する方法を紹介します。

やりたいこと

  • 投稿編集画面に「トップページに表示する/しない」を選択できるチェックボックスを追加する。
  • チェックが入っている投稿だけを、トップページのメインクエリで表示させる。

こうすることで、表示したい投稿だけがトップページに並ぶようになります。

チェックボックスの実装手順

カスタムメタボックスの追加

まずは、投稿編集画面にメタボックス(チェックボックス)を追加します。下記のコードを、functions.phpなどテーマの適切な場所に追記してください。

// メタボックスを追加
add_action('add_meta_boxes', 'add_display_top_checkbox_metabox');
function add_display_top_checkbox_metabox() {
    add_meta_box(
        'display_top_metabox',
        'トップページ表示設定',
        'display_top_metabox_callback',
        'post', // ここを'page'などに変えれば固定ページにも表示可能
        'side',
        'default'
    );
}

// メタボックスのコールバック関数
function display_top_metabox_callback($post) {
    // セキュリティ用のnonce
    wp_nonce_field('display_top_metabox', 'display_top_metabox_nonce');
    
    // 既に値が入っている場合はチェックを保持する
    $value = get_post_meta($post->ID, '_display_on_top', true);
    ?>
    <label for="display_on_top">
        <input type="checkbox" name="display_on_top" id="display_on_top" value="1" <?php checked($value, '1'); ?>>
        トップページに表示する
    </label>
    <?php
}

上記を追加すると、投稿編集画面(投稿タイプがpostの場合)に「トップページに表示設定」というメタボックスが作られ、チェックボックスが表示されます。

チェックボックスの保存処理

次に、チェックボックスの状態を保存する処理を加えます。save_postフックを使って、投稿が更新されるたびにメタデータ( _display_on_top )の保存を行います。

// メタボックスの保存処理
add_action('save_post', 'save_display_top_checkbox');
function save_display_top_checkbox($post_id) {
    // nonceが存在しない場合は処理を中断
    if (!isset($_POST['display_top_metabox_nonce'])) {
        return $post_id;
    }

    // nonceを検証
    if (!wp_verify_nonce($_POST['display_top_metabox_nonce'], 'display_top_metabox')) {
        return $post_id;
    }

    // 自動保存の場合は処理を中断
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return $post_id;
    }

    // ユーザー権限のチェックや投稿タイプの確認などを入れたい場合はここで追加

    // チェックありの場合はメタデータを保存、なければ削除
    if (isset($_POST['display_on_top']) && $_POST['display_on_top'] === '1') {
        update_post_meta($post_id, '_display_on_top', '1');
    } else {
        delete_post_meta($post_id, '_display_on_top');
    }
}

上記により、チェックがONのときは _display_on_top = 1 がメタデータとして保存され、OFFのときはメタデータを削除する挙動となります。

トップページクエリのカスタマイズ

最後に、トップページで「 _display_on_top が存在する投稿だけ」を表示するようにクエリを変更します。デフォルトで最新記事一覧を表示している場合は、pre_get_postsを使ってメインクエリをフィルタリングするのがシンプルです。

add_action('pre_get_posts', 'filter_home_query_display_top');
function filter_home_query_display_top($query) {
    // メインクエリかどうか、かつホームかどうか確認
    if ($query->is_home() && $query->is_main_query()) {
        // meta_queryを追加
        $query->set('meta_query', array(
            array(
                'key'   => '_display_on_top',
                'value' => '1',
                'compare' => '='
            )
        ));
    }
}

これで、トップページを開いた際に _display_on_top メタキーが 1 の投稿だけがメインクエリで取得されるようになります。

注意点・応用

  • 固定ページをトップページにしている場合や、テーマが独自のクエリを使用している場合は、pre_get_postsが効かないケースがあります。その場合は、WP_Queryやquery_posts()などの直接呼び出し部分を探して、meta_queryを手動で追加する必要があります。
  • 表示する投稿タイプを増やしたい場合は、add_meta_box()やpre_get_postsの条件の投稿タイプを調整してください。
  • チェックの内容によって並び順を変えたい場合は、クエリに orderby を追加してあげることで、「チェック有り>チェック無し」で並び替えるといった応用も可能です。

まとめ

  1. メタボックスを追加して、投稿編集画面に「トップページに表示する」チェックボックスを設置。
  2. 保存処理を追加して、チェックの有無を投稿メタデータとして保存。
  3. トップページのクエリをカスタマイズして、チェック付きの投稿だけを取得。

本手法を導入すれば、わざわざ特定の記事だけをピックアップ表示するためのプラグインを使わなくても、テーマファイルのカスタマイズだけで柔軟にトップページの表示を制御できます。ぜひ運営中のサイトで試してみてください。