plusN コーディングとか育児とかの個人ブログ

カスタム投稿のアーカイブで投稿を先頭に固定表示したいとき

WordPressとか
PR

カスタム投稿のアーカイブで投稿を先頭に固定表示したい！なんて時がある…かもしれない。
普段はあまりないけれど、相談されたのでやってみました。

そもそも記事を先頭に固定表示って？

WordPressでは「スティッキーポスト」と言いますが、これを使うとアーカイブ表示時、投稿を最初に表示させる事ができます。
この機能は「投稿」での機能になるためカスタム投稿で使用したい場合には、別途プラグインを使用するか、自作する必要があります。

自作は面倒！という人向け プラグイン

自作はちょっと…という方は、プラグインを利用しするのもいいかもしれません。
いくつかのプラグインを見つけたので紹介します。

上記は全てカスタム投稿等で、スティッキーポストを利用する事ができるプラグインです。
なお、上記プラグインは更新がかなり前となっています。
そのため、場合によってはエラーが発生する可能性がありますのでご注意ください。

自作でカスタム投稿の先頭に固定表示を設置してみる

プラグインは簡単ですが、何かあった時の対応で困ったりするかもしれないので自作してみることにしました。
流れとしては、

  1. カスタムフィールド（チェックボックス）を設置する
  2. チェックした/外した情報を保存できるようにする
  3. アーカイブで表示できるようにする

の3つに分ければ作ることができそうです。

1.カスタムフィールドを設置

<

function.phpに、カスタム投稿用にカスタムフィールドを設置します。
コードとしてはざっくり、以下のような感じになると思います。

// メタボックス追加
if ( !function_exists( 'add_postSticky_meta_box' ) ) {
  function add_postSticky_meta_box() {
    add_meta_box(
        'postfixed_meta_box',
        'アーカイブ先頭に固定表示',
        'postSticky_meta_box_callback',
        'custom-post', //カスタム投稿名
        //位置の設定はお好みで 
    );
  }
  add_action('add_meta_boxes', 'add_postSticky_meta_box');
}

//投稿画面上の出力設定
if ( !function_exists( 'postSticky_meta_box_callback' ) ) {
  function postSticky_meta_box_callback($post) {
   //現在の値取得し確認
    $post_id = get_the_ID();
    $value = get_post_meta( $post_id, 'postSticky' );
    wp_nonce_field( 'wp-nonce-key', '_postSticky' ); ?>
    <input type="checkbox" id="fixed" name="postSticky" value="1" 
    <?php checked( get_post_meta($post->ID, 'voice_sticky', true), 1 ); ?> >
    <label for="fixed">先頭に固定表示にする</label>
<?php
  }
}

2.保存できるようにする

続いて、function.phpに投稿が保存・更新された際に内容が保存されるコードを書きます。
これで、チェック時の情報が保存される様になります。


if ( !function_exists( 'postSticky_save_meta_box' ) ) {
    function postSticky_save_meta_box($post_id) {
        // セキュリティのため追加
        if ( ! isset( $_POST['_postSticky'] ) || ! $_POST['_postSticky'] ) return;
        if ( ! check_admin_referer( 'wp-nonce-key', '_postSticky' ) ) return;

        if (isset($_POST['postSticky']) && $_POST['postSticky'] === 1 ) {
         update_post_meta($post_id, 'postSticky',1);
        } else {
         delete_post_meta($post_id, 'postSticky',0);
       }
    }
    add_action('save_post', 'postSticky_save_meta_box');
}

3.アーカイブで表示できるようにする

続いて、function.phpに投稿が保存・更新された際に内容が保存されるコードを書きます。
ここまで来たら、後は実際に投稿をして確認してみましょう。


function add_postSticky_to_custom_post_type($query) {
    if (!is_admin() && $query->is_main_query() && is_post_type_archive('custom-post')) {
       $postSticky_array = get_posts([
            'post_type'  => 'custom-post', //カスタム投稿名
            'meta_key'   => 'postSticky',
            'meta_value' => 1,
            'orderby'    => 'date',
            'order'      => 'DESC',
            'numberposts'=> -1,
	    'fields'     => 'ids', //IDで投稿情報を取得
        ]);
        if ( !empty($postSticky_array) ) {
            // 通常のクエリから sticky を除外
            $query->set('post__not_in', postSticky_array);
            add_filter('the_posts', function($posts) use ($sticky_posts) {
                // sticky を先頭にマージ
                return array_merge($postSticky_array, $posts);
            });
        }
    }
}
add_action('pre_get_posts', 'add_postSticky_to_custom_post_type');

カスタム投稿で記事を固定表示してみて

実際にカスタム投稿で記事の固定表示機能を設置してみると、思っていたより簡単にできました。
最初は、name属性をstickyで設定していたからなのか、思うように行かず別の値に変更した所すんなり進める事ができました。
カスタム投稿で記事の固定表示が必要な場合は、ぜひ試してみてください。

PR