ショートコードでおすすめ記事を表示する方法

ウィジェットにショートコードを貼って投稿記事のおすすめ記事をサイドバーに表示できます。

投稿一覧の「おすすめ記事」のチェックボックスにチェックをして「おすすめ記事を保存」ボタンを押す、もしくは投稿編集画面の「おすすめ記事にする」チェックボックスにチェックをして「更新」ボタンを押すとショートコードを貼った場所におすすめ記事が表示されます。チェックを外すときも同様です。プラグイン不要で実装可能です。

functions.php にコードを追加

// 投稿編集画面に「おすすめ記事」メタボックスを追加
function add_recommend_metabox() {
    add_meta_box(
        'recommend_post',           // ID
        'おすすめ記事',             // タイトル
        'render_recommend_metabox', // コールバック
        'post',                     // 投稿タイプ
        'side',                     // 表示位置
        'high'                      // 優先度
    );
}
add_action('add_meta_boxes', 'add_recommend_metabox');

function render_recommend_metabox($post) {
    $value = get_post_meta($post->ID, '_is_recommend', true);
    echo '<label><input type="checkbox" name="is_recommend" value="1" ' . checked(1, $value, false) . '> おすすめ記事にする</label>';
    wp_nonce_field('save_recommend_meta', 'recommend_meta_nonce');
}

// 投稿保存時に値を保存
function save_recommend_meta($post_id) {
    if (!isset($_POST['recommend_meta_nonce']) || !wp_verify_nonce($_POST['recommend_meta_nonce'], 'save_recommend_meta')) {
        return;
    }

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (!current_user_can('edit_post', $post_id)) return;

    if (isset($_POST['is_recommend'])) {
        update_post_meta($post_id, '_is_recommend', 1);
    } else {
        delete_post_meta($post_id, '_is_recommend');
    }
}
add_action('save_post', 'save_recommend_meta');

// ショートコードでおすすめ記事を表示
function recommend_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
        'orderby' => 'date'
    ), $atts, 'recommend_posts');

    $args = array(
        'posts_per_page' => intval($atts['count']),
        'meta_key' => '_is_recommend',
        'meta_value' => 1,
        'orderby' => sanitize_text_field($atts['orderby']),
        'post_status' => 'publish'
    );

    $query = new WP_Query($args);
    if (!$query->have_posts()) return '<p>おすすめ記事はありません。</p>';

    $output = '<ul class="recommend-posts">';
    while ($query->have_posts()) {
        $query->the_post();
        $thumb = has_post_thumbnail() ? get_the_post_thumbnail(get_the_ID(), 'thumbnail') : '';
        $output .= '<li>' . $thumb . '<a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    $output .= '</ul>';

    wp_reset_postdata();
    return $output;
}
add_shortcode('recommend_posts', 'recommend_posts_shortcode');

// 投稿一覧に「おすすめ記事」カラムを追加
function add_recommend_column($columns) {
    $columns['recommend_post'] = 'おすすめ記事';
    return $columns;
}
add_filter('manage_post_posts_columns', 'add_recommend_column');

// カラムにチェックボックスを表示
function render_recommend_column($column, $post_id) {
    if ($column === 'recommend_post') {
        $value = get_post_meta($post_id, '_is_recommend', true);
        echo '<input type="checkbox" class="recommend-checkbox" data-postid="'. $post_id .'" ' . checked(1, $value, false) . ' />';
    }
}
add_action('manage_post_posts_custom_column', 'render_recommend_column', 10, 2);

// 保存ボタンを追加
function add_recommend_save_button() {
    $screen = get_current_screen();
    if ($screen->post_type === 'post') {
        echo '<div style="float:right; margin-left:10px;"><button id="save-recommend-changes" class="button button-primary">おすすめ記事を保存</button></div>';
    }
}
add_action('restrict_manage_posts', 'add_recommend_save_button');

// JS を追加
function enqueue_recommend_admin_script($hook) {
    if ($hook !== 'edit.php') return;
    wp_enqueue_script('recommend-admin-js', get_stylesheet_directory_uri() . '/js/recommend-admin.js', array('jquery'), false, true);
    wp_localize_script('recommend-admin-js', 'recommend_ajax', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('recommend_nonce')
    ));
}
add_action('admin_enqueue_scripts', 'enqueue_recommend_admin_script');

// Ajaxでまとめて保存
function ajax_save_recommend() {
    check_ajax_referer('recommend_nonce', 'nonce');

    if (!current_user_can('edit_posts')) wp_send_json_error('権限がありません');

    if (!isset($_POST['posts']) || !is_array($_POST['posts'])) wp_send_json_error('不正なデータです');

    foreach ($_POST['posts'] as $post_id => $is_recommend) {
        if ($is_recommend) {
            update_post_meta($post_id, '_is_recommend', 1);
        } else {
            delete_post_meta($post_id, '_is_recommend');
        }
    }

    wp_send_json_success('保存しました');
}
add_action('wp_ajax_save_recommend', 'ajax_save_recommend');

javascript にコードを追加

admin.js

ファイル名：like-button.js
保存先：wp-content/themes/child-theme/js/admin.js

jQuery(document).ready(function($){
    $('.recommend-checkbox').on('change', function(){
        var post_id = $(this).data('post_id');
        var is_checked = $(this).is(':checked') ? 1 : 0;

        $.post(ajaxurl, {
            action: 'toggle_recommend_post',
            post_id: post_id,
            is_recommend: is_checked,
            _wpnonce: recommend_ajax.nonce
        }, function(response){
            // 成功時のメッセージなど
            console.log(response);
        });
    });
});
  

子テーマのディレクトリ構造

recommend-admin.js

ファイル名：recommend-admin.js
保存先：wp-content/themes/child-theme/js/recommend-admin.js

jQuery(document).ready(function($){
    $('#save-recommend-changes').on('click', function(e){
        e.preventDefault();

        var posts = {};
        $('.recommend-checkbox').each(function(){
            var postId = $(this).data('postid');
            posts[postId] = $(this).is(':checked') ? 1 : 0;
        });

        $.post(recommend_ajax.ajax_url, {
            action: 'save_recommend',
            nonce: recommend_ajax.nonce,
            posts: posts
        }, function(response){
            if(response.success){
                alert('おすすめ記事を保存しました');
            } else {
                alert('エラー: ' + response.data);
            }
        });
    });
});
  

子テーマのディレクトリ構造

汎用CSS

/* おすすめ記事リスト */
.recommend-posts {
    list-style: none;
    margin: 0 0 0 -20px;
    padding: 0;
}

.recommend-posts li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.recommend-posts li img {
    margin-right: 8px;
    width: 60px;   /* サムネイルの横幅 */
    height: 60px;  /* サムネイルの高さ */
    object-fit: cover;
    border-radius: 4px;
}
    

Lightning用

/* Lightning用 おすすめ記事リスト */
.recommend-posts {
    list-style: none;
    margin: 0 0 0 -20px;
    padding: 0;
}

.recommend-posts li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.recommend-posts li img {
    margin-right: 8px;
    width: 60px;   /* サムネイルの横幅 */
    height: 60px;  /* サムネイルの高さ */
    object-fit: cover;
    border-radius: 4px;
}
    

Cocoon用CSS（function.phpに直接貼る）

Cocoonは、function.phpに直接CSSを貼らないと反映されませんので、上記のfunction.phpコードの後に次のCSSを追加で貼ってください。（function.phpに直接貼る）

// Cocoonテーマ用おすすめ記事のCSSを管理画面・フロント両方で出力
function my_recommend_posts_css() {
    ?>
    <style>
    /* サイドバー用おすすめ記事 */
    #sidebar .recommend-posts {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #sidebar .recommend-posts li {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    #sidebar .recommend-posts li img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        margin-right: 10px;
    }

    #sidebar .recommend-posts li a {
        color: #1a73e8;
        text-decoration: none;
    }

    #sidebar .recommend-posts li:hover {
        box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    }
    </style>
    <?php
}
add_action('wp_head', 'my_recommend_posts_css');

ショートコードの使い方

ウィジェットのサイドバーに以下を記述します。
ショートコード[recommend_posts count="3" orderby="date"]
count="3"は3行の意味。ここを5にしたら5行になります。

2ヶ所のチェックボックスでオン、オフできます。

1. 投稿一覧の「おすすめ記事」のチェックボックスにチェックをして「おすすめ記事を保存」ボタンを押す、もしくは投稿編集画面の「おすすめ記事にする」チェックボックスにチェックをして「更新」ボタンを押すとショートコードを貼った場所におすすめ記事が表示されます
2. チェックを外すと表示されません

（例）Lightningのウィジェットのサイドバー（共通上部）

（例）投稿画面のおすすめ記事のチェックボックス

（例）投稿一覧のおすすめ記事のチェックボックスとおすすめ記事を保存ボタン

（例）Lightningのおすすめ記事リスト

（例）Cocoonのおすすめ記事リスト

まとめ

この方法ならプラグイン不要で、管理画面からチェックを入れるだけでおすすめ記事を表示できます。標準投稿で簡単に管理可能です。