賢威の人気記事ランキングの順位を固定する方法

※当サイトにはプロモーションが含まれています。

にゃのらいとにゃのらいと

賢威の人気記事ランキングの順位がおかしいにゃ

ワードプレス(WordPress)のプラグインである「WP Super Cache」を導入してから、賢威の人気記事ランキングの順位が正常に表示されなくなりました。

例えば、読まれていない記事がトップ5に並ぶなど、そういった現象が見られました。

原因は、「WP Super Cache」のキャッシュ機能でした。

ただ、キャッシュ系のプラグインを導入すれば、きっとこうなるだろうなと予想はしていました。

その為、これを契機に「人気記事のランキングを手動で決める(固定する)」ようにしました。

この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

ワードプレス環境

テーマ:賢威8
WordPressバージョン:6.2.x
PHPバージョン:8.2.x
サーバー:さくらインターネット

※セキュリティの観点から、マイナーバージョンの一部をxとさせて頂きます

人気記事ランキングの順位を固定する方法

賢威の人気記事ランキングの順位を固定するには、ウィジェットのカスタムHTMLに、HTMLコードを直接記載することで実現はできます。

にゃのらいとにゃのらいと

そんなの面倒くさいにゃ!

確かに、頻繁に修正を入れるとなると面倒くさいですね。

できれば、グーグルアナリティクス(Google Analytics)などのデータも確認して、1~2週間に1回は更新(修正)したいので、少しでも“楽”ができるようにカスタマイズ方法を考えてみました。

①ショートコードを利用できるようにする

もしかしたら、お使いの賢威では、ウィジェットでショートコードの利用は無効になっているかもしれません。

その際は、do_shortcode関数を利用して、ショートコードを有効にします。

以下のコードを、function.phpに記述して設定を更新します。

/* ウィジェット内でショートコードを有効にする */
add_filter('widget_text', 'do_shortcode');

詳しくは、下記の記事でも記載しています。

②custom_rankingについての解説(1)

以下のコードを、function.phpに記述します。

function custom_ranking_shortcode() {
$output = '<div id="" class="keni-section_wrap widget widget_keni_pv widget_recent_entries_img02 widget_recent_entries_ranking"><section class="keni-section"><h3 class="sub-section_title">人気記事ランキング(週間)</h3><ol class="list_widget_recent_entries_img">';

// ランキングに表示したい投稿のIDを配列で指定
$post_ids = array(1, 2, 17, 39, 43); // ここに実際の投稿IDを入力

$args = array(
'post__in' => $post_ids,
'orderby' => 'post__in',
'posts_per_page' => 5, //配列数(記事数)を記入
);

$query = new WP_Query($args);

if($query->have_posts()) {
while($query->have_posts()) {
$query->the_post();
$image_url = get_the_post_thumbnail_url(null, 'medium');
$image_alt = get_the_title();
$post_title = get_the_title();
$post_link = get_permalink();

$output .= '<li>
<figure class="widget_recent_entries_thumb">
<a href="'.$post_link.'"><img src="'.$image_url.'" alt="'.$image_alt.'" width="600" height="400"></a>
</figure>
<p class="widget_recent_entries_img_entry_title"><a href="'.$post_link.'">'.$post_title.'</a></p>
</li>';
}
wp_reset_postdata();
}

$output .= '</ol></section></div>';

return $output;
}
add_shortcode('custom_ranking', 'custom_ranking_shortcode');

まず、注意点として、$outputの部分に、HTMLのコードを記述しています。

$output = '<div id="" class="keni-section_wrap widget widget_keni_pv widget_recent_entries_img02 widget_recent_entries_ranking"><section class="keni-section"><h3 class="sub-section_title">人気記事ランキング(週間)</h3><ol class="list_widget_recent_entries_img">';

このコードは、賢威の「背景画像+テロップ」を元にして記述していますが、必ずあなたのサイトとソースが一致するとは限りません。

その為、実際のソースコードと照らし合わせてカスタマイズする必要が出てくるかもしれません。

賢威人気記事ランキングウィジェット

③custom_rankingについての解説(2)

ランキングに表示したい記事は、投稿IDで指定します。

投稿IDは、投稿一覧ページから確認する事ができます。

投稿IDの確認

例えば、投稿IDが「2、10、20、40、1244」の記事を表示させたければ、下記のように記述します。

$post_ids = array(2, 10, 20, 40, 1244);

また、5位までを表示させる場合は、

'posts_per_page' => 5,

となり、10記事表示させたければ、

'posts_per_page' => 10,

と記載します。

これで、人気記事ランキングを変更したければ、function.phpに記載している投稿IDを変更すればOKです。

※function.phpの設定を失敗すると、最悪、サイトが表示されなくなります。
その為、コードを追加する際は、必ずバックアップを取ってから追加するようにしてください。

④ウィジェットへの記述

ウィジェットに、下記のショートコードを記述して保存します。

[custom_ranking]

ウィジェットにショートコードを記載する

これで、ランキングが表示されているはずです。

もし、キャッシュ系のプラグインを利用している場合は、プラグインの設定からキャッシュを削除してから確認してください。

※スーパーリロードでは更新されません

function.phpの場所は?

function.phpは、だいたいどのテーマも、

外観 > テーマエディター

にあります。

テーマエディター

テーマエディターに移動したら、編集するテーマが、現在、使用しているテーマかを確認しましょう。

問題なければ、「function.php」を選択します。

function.php

選択したら、一番下に以下のコードを追加します。

function custom_ranking_shortcode() {
$output = '<div id="" class="keni-section_wrap widget widget_keni_pv widget_recent_entries_img02 widget_recent_entries_ranking"><section class="keni-section"><h3 class="sub-section_title">人気記事ランキング(週間)</h3><ol class="list_widget_recent_entries_img">';

// ランキングに表示したい投稿のIDを配列で指定
$post_ids = array(1, 2, 17, 39, 43); // ここに実際の投稿IDを入力

$args = array(
'post__in' => $post_ids,
'orderby' => 'post__in',
'posts_per_page' => 5, //配列数(記事数)を記入
);

$query = new WP_Query($args);

if($query->have_posts()) {
while($query->have_posts()) {
$query->the_post();
$image_url = get_the_post_thumbnail_url(null, 'medium');
$image_alt = get_the_title();
$post_title = get_the_title();
$post_link = get_permalink();

$output .= '<li>
<figure class="widget_recent_entries_thumb">
<a href="'.$post_link.'"><img src="'.$image_url.'" alt="'.$image_alt.'" width="600" height="400"></a>
</figure>
<p class="widget_recent_entries_img_entry_title"><a href="'.$post_link.'">'.$post_title.'</a></p>
</li>';
}
wp_reset_postdata();
}

$output .= '</ol></section></div>';

return $output;
}
add_shortcode('custom_ranking', 'custom_ranking_shortcode');

最後に、「ファイルを更新」ボタンで、保存(更新)します。

function.phpの更新

※全角スペースなどが入ると、正しく動作しない可能性があるので、コピーしたコードは、一度メモ帳などに貼り付けて確認してみましょう。

楽天市場の検索結果

1冊ですべて身につくWordPress入門講座 [ Mana ]
1冊ですべて身につくWordPress入門講座 [ Mana ] 2,200円(税込)【送料込】

楽天ブックス

Mana SBクリエイティブイチサツデスベテミニツクワードプレスニュウモンコウザ マナ 発行年月:2022年03月24日 予約締切日:2022年01月26日 ページ数:344p サイズ:単行本 ISBN:9784815609405 Mana(MANA) 日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作

HTMLサイトをWordPressにする本 [ 久保田 涼子 ]
HTMLサイトをWordPressにする本 [ 久保田 涼子 ] 2,640円(税込)【送料込】

楽天ブックス

久保田 涼子 西原 礼奈 ソシムエイチティーエムエルサイトヲワードプレスニスルホン クボタ リョウコ ニシハラ アヤナ 発行年月:2023年08月29日 予約締切日:2023年06月06日 ページ数:360p サイズ:単行本 ISBN:9784802614214 久保田涼子(クボタリョウコ) 「ワクワクするモノ・時間・場所を生み出す」をテ

今すぐ使えるかんたん WordPress やさしい入門[6.x対応版] [ 桑名
今すぐ使えるかんたん WordPress やさしい入門[6.x対応版] [ 桑名 1,760円(税込)【送料込】

楽天ブックス

桑名 由美 はつみ 技術評論社イマスグツカエルカンタンワードプレスヤサシイニュウモンロクテンエックスタイオウバン クワナ ユミ ハツミ 発行年月:2023年09月28日 予約締切日:2023年06月02日 ページ数:256p サイズ:単行本 ISBN:9784297136253 桑名由美(クワナユミ) 2023年8月、合同会社ワイズベスト

たった1日で基本が身に付く! WordPress 超入門 [改訂2版] [ 佐々
たった1日で基本が身に付く! WordPress 超入門 [改訂2版] [ 佐々 1,980円(税込)【送料込】

楽天ブックス

佐々木 恵 リブロワークス 技術評論社タッタイチニチデキホンガミニツクワードプレスチョウニュウモンカイテイニハン ササキ メグミ リブロワークス 発行年月:2022年04月14日 予約締切日:2022年01月05日 ページ数:192p サイズ:単行本 ISBN:9784297126957 佐々木恵(ササキメグミ) 2002年より独学でWe

ビジネスサイトを作って学ぶ WordPressの教科書 Ver.6.x対応版 [
ビジネスサイトを作って学ぶ WordPressの教科書 Ver.6.x対応版 [ 3,278円(税込)【送料込】

楽天ブックス

小川 欣一 穂苅 智哉 ソシムビジネスサイトヲツクッテマナブ ワードプレスノキョウカショ バージョンロクテンエックスタイオウバン オガワ ヨシカズ ホカリ トモヤ 発行年月:2023年05月01日 予約締切日:2023年01月12日 ページ数:436p サイズ:単行本 ISBN:9784802614030 1 開発環境を構築しよう/2 テ

楽天ウェブサービスセンター