マジセミドライブ

ウェビナー関連のニュースやITサービス＆ツールの最新情報を随時配信します。

AIツール実験室

2023.07.28

【AIツール実験室】「 人気記事ランキング 表示機能」を自作します

【AIツール実験室】「 人気記事ランキング 表示機能」を自作します

コンテンツ

はじめに

ごあいさつ

日本全国の「人気記事ランキング機能作成愛好家」のみなさま、
おつかれさまです。

■カレーの話
好きな食べ物は「カレー」となりますし、
辛さ的には、そこそこ辛め(ココイチ基準での5辛相当)がよいかなという感じですし、
どちらかといえば、さらっとしたタイプのほうではなく、
カレーをすくったお玉をひっくり返しても落ちてこないくらいの、
重量感および重厚感があるエネルギー凝縮率が高めのカレーがよいかなという感じの、
マジセミ担当者Aでございます。

前回までのあらすじ

→【ちょちょいと自動化DX】WordPress関数を作って記事リストを出力

→【ちょちょいと自動化DX】AI対抗「HTML テーブル装飾CSS 」デザインセンス選手権

→【ちょちょいと自動化DX】ポータルページに 記事リスト を追加します

今回の作戦

今回は、
「人気記事総合ランキング表示機能」を追加してみます。

「WordPressプラグインで、右サイドバーによく見かけるやつ」を、
ChatGPT4先生のがんばりにより、
作ってみようと思います。

ご注意点

※本記事は、担当者Aの主観により作成されていますので、なにとぞ、そういうことでよろしくお願いします。

①確認：WordPressは記事PV数を保持していますか？→保持してませんでした

習ったばかりのChatGPTプラグイン「Prompt Perfect」を活用していきます。

しかし、直接的な質問では、あまり意味がないようでした。

プロンプト

perfect

WordPress内に記事PV数は保持されていますか？
回答を日本語で出力してください。

実行結果

「WordPress自体は記事のページビュー数を直接保持していません。」
ということでした。

プラグインを入れて、PV数を保持しておく必要があるようです。

②確認：「WordPress Popular Posts」からPV数を取得できますか？→できます

人気投稿をサイト上に表示するプラグイン「WordPress Popular Posts」がインストールされていました。

これを使えないでしょうかね？

プロンプト

perfect

■前提
WordPressには「WordPress Popular Posts」がインストールされていて、稼働しています。

■質問
PHPコードを使って、このプラグインからPV数を取得できますか？

■言語設定
・プロンプト実行＝英語
・回答＝日本語

実行結果

・PV数を取得できる
・期間指定も可能
とのことです。

いけそうですね。

③依頼：PHP関数を作ってもらいます

ChatGPT4先生、お願いします。

プロンプト

■指示
WordPressのPHP関数を作成してください。

■機能概要
人気記事ランキングを出力します。

■リファレンス参照
最新のPHPリファレンスを参照してください。

■関数定義
・関数名=「staffA_get_articleRanking」
・ショートコード名=「staffA_get_articleRanking」

■前提情報
WordPressには,
「WordPress Popular Posts」(Ver 6.2.1)がインストールされていて、
稼働しています。

■関数仕様
①対象記事データを取得します。
・記事カテゴリID(cat)=339　：【ChatGPTプラグイン探訪】
・記事カテゴリID(cat)=344　：【ちょちょいと自動化DX】

②各記事の「PV数」を「WordPress Popular Posts」から取得します。
・PV集計期間範囲=過去1週間

③テーブル形式で出力します。
・ランキング　：PV数が多い順で1から1ずつ増分
・記事区分　：記事タイトルの”【ChatGPTプラグイン探訪】”or”【ちょちょいと自動化DX】”
・記事タイトル
・ページ　：該当記事へのURLリンク　「ページリンク」と表記
※ソート順=「PV数」降順
※出力数=5件

■不明点
コード作成において、不明点があれば、質問してください。

実行結果

作ってもらいました。

作ってもらったPHPコードVer1

“

function staffA_get_articleRanking() {
    // カテゴリIDを指定
    $categories = array(339, 344);

    // クエリパラメータを設定
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1,
        'category__in' => $categories,
    );

    // クエリを実行
    $query = new WP_Query($args);

    // ランキングデータを格納する配列を初期化
    $ranking_data = array();

    // 各記事に対してループ
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();

            // WordPress Popular PostsからPV数を取得
            $wpp_data = wpp_get_views(get_the_ID(), 'weekly');

            // ランキングデータに追加
            $ranking_data[] = array(
                'title' => get_the_title(),
                'category' => get_the_category()[0]->name,
                'link' => get_the_permalink(),
                'views' => $wpp_data,
            );
        }
    }

    // PV数でデータをソート
    usort($ranking_data, function($a, $b) {
        return $b['views'] - $a['views'];
    });

    // 最初の5つの記事だけを取得
    $ranking_data = array_slice($ranking_data, 0, 5);

    // テーブルを出力
    echo '<table>';
    echo '<tr><th>ランキング</th><th>記事区分</th><th>記事タイトル</th><th>ページリンク</th></tr>';
    foreach ($ranking_data as $index => $data) {
        echo '<tr>';
        echo '<td>' . ($index + 1) . '</td>';
        echo '<td>' . $data['category'] . '</td>';
        echo '<td>' . $data['title'] . '</td>';
        echo '<td><a href=""' . $data['link'] . '"">ページリンク</a></td>';
        echo '</tr>';
    }
    echo '</table>';
}

// ショートコードを登録
add_shortcode('staffA_get_articleRanking', 'staffA_get_articleRanking');

”

④表示確認(1回目)→表示がハチャメチャになりました

それっぽいリストが出てきたのはよいのですが、
表示がおかしくなってしまいました。

緊急事態であります。

ここに出るはず

なぜかこんなところに出力されてしまう①

なぜかこんなところに出力されてしまう②

２つも出てきてしまう事態に。

⑤原因調査＋修正をおねがいします

プロンプト

■指示
不具合原因を解明してください。
WordPressのPHPコードを修正してください。

■PHPコード
※※※作ってもらったPHPコードVer1※※※

■WordPress投稿ページHTML

<h1 class="h1Custom">※こちらは作成中ページです。※</h1>
<p>作成過程記事はこちらです。</p>
<a href="https://majisemi.com/topics/automation-dx/4215/" target="_blank" rel="noopener">→【ちょちょいと自動化DX】 WordPress関数を作って記事リストを出力</a>
<a href="https://majisemi.com/topics/automation-dx/4300/" target="_blank" rel="noopener">→【ちょちょいと自動化DX】AI対抗「HTML テーブル装飾CSS 」デザインセンス選手権</a>
<a href="https://majisemi.com/topics/automation-dx/4372/" target="_blank" rel="noopener">→【ちょちょいと自動化DX】ポータルページに 記事リスト を追加します</a>

<h1 class="h1Custom">総合記事ランキングTOP5(β Ver)</h1>
※※※「staffA_get_articleRanking」を実行するショートコード※※※

<h1 class="h1Custom">【ChatGPTプラグイン探訪】記事リスト(β Ver)</h1>
※※※「staffA_get_article_chatGptPlugin」を実行するショートコード※※※

<h1 class="h1Custom">【ちょちょいと自動化DX】記事リスト(β Ver)</h1>
※※※「staffA_get_article_automation-dx」を実行するショートコード※※※

■問題点①
「総合記事ランキングTOP5(β Ver)」の下に、テーブルが出力されるはずが、表示されない。

■問題点②
テーブルがヘッダ部に出力されてしまっている。

■問題点③
テーブルが「アイキャッチ画像」と「目次」の間に出力されてしまっている。

■対象ページURL
https://majisemi.com/topics/uncategorized/4181/
こちらのページを読み込んで、検証してください。

実行結果

原因＝WordPressのショートコードが出力を直接echoで行っているため
とのことでした。

サクッと修正してくれちゃうわけです。

作ってもらったPHPコードVer2

“

function staffA_get_articleRanking() {
    // カテゴリIDを指定
    $categories = array(339, 344);

    // クエリパラメータを設定
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1,
        'category__in' => $categories,
    );

    // クエリを実行
    $query = new WP_Query($args);

    // ランキングデータを格納する配列を初期化
    $ranking_data = array();

    // 各記事に対してループ
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();

            // WordPress Popular PostsからPV数を取得
            $wpp_data = wpp_get_views(get_the_ID(), 'weekly');

            // ランキングデータに追加
            $ranking_data[] = array(
                'title' => get_the_title(),
                'category' => get_the_category()[0]->name,
                'link' => get_the_permalink(),
                'views' => $wpp_data,
            );
        }
    }

    // PV数でデータをソート
    usort($ranking_data, function($a, $b) {
        return $b['views'] - $a['views'];
    });

    // 最初の5つの記事だけを取得
    $ranking_data = array_slice($ranking_data, 0, 5);

    // テーブルを出力
    $output = '<table>';
    $output .= '<tr><th>ランキング</th><th>記事区分</th><th>記事タイトル</th><th>ページリンク</th></tr>';
    foreach ($ranking_data as $index => $data) {
        $output .= '<tr>';
        $output .= '<td>' . ($index + 1) . '</td>';
        $output .= '<td>' . $data['category'] . '</td>';
        $output .= '<td>' . $data['title'] . '</td>';
        $output .= '<td><a href=""' . $data['link'] . '"">ページリンク</a></td>';
        $output .= '</tr>';
    }
    $output .= '</table>';

    return $output;
}

// ショートコードを登録
add_shortcode('staffA_get_articleRanking', 'staffA_get_articleRanking');

”

⑥表示確認(2回目)→【祝】表示がまともになりました

表示がまともになった様子

⑦ランキング表示は正しいですか？→正しいようです

アナリティクスデータを見てみたところ、
ランキングは合っているようでした。

グッドですね。

⑧最終調整してもらいます

プロンプト

■指示
WordPressのPHPコードを修正してください。

■修正点①　ランキング
表示テキストを修正してください。
「ランキング」→「ランク」

■修正点②　記事区分
テキストに改行を挿入してください。
・「ChatGPTプラグイン探訪」→「ChatGPT
プラグイン探訪」
・「ちょちょいと自動化DX」→「ちょちょいと
自動化DX」

■修正点③　記事タイトル
以下の文字列を削除してください。
・【ChatGPTプラグイン探訪】
・【ちょちょいと自動化DX】

■修正点④　ページリンク
テキストを修正してください。
テーブルタイトル　と　データ行　の両方。
「ページリンク」→「ページ」

■修正点⑤　ページ
行データの「ページ」をクリックしたら、別タブで開いてください。

■不明点
不明点があれば、質問してください。

■PHPコード
※※※作ってもらったPHPコードVer2※※※

実行結果

作ってもらったPHPコードVer3

“

function staffA_get_articleRanking() {
    // カテゴリIDを指定
    $categories = array(339, 344);

    // クエリパラメータを設定
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1,
        'category__in' => $categories,
    );

    // クエリを実行
    $query = new WP_Query($args);

    // ランキングデータを格納する配列を初期化
    $ranking_data = array();

    // 各記事に対してループ
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();

            // WordPress Popular PostsからPV数を取得
            $wpp_data = wpp_get_views(get_the_ID(), 'weekly');

            // ランキングデータに追加
            $ranking_data[] = array(
                'title' => str_replace(array('【ChatGPTプラグイン探訪】', '【ちょちょいと自動化DX】'), '', get_the_title()),
                'category' => str_replace(array('ChatGPTプラグイン探訪', 'ちょちょいと自動化DX'), array('ChatGPT<br>プラグイン探訪', 'ちょちょいと<br>自動化DX'), get_the_category()[0]->name),
                'link' => get_the_permalink(),
                'views' => $wpp_data,
            );
        }
    }

    // PV数でデータをソート
    usort($ranking_data, function($a, $b) {
        return $b['views'] - $a['views'];
    });

    // 最初の5つの記事だけを取得
    $ranking_data = array_slice($ranking_data, 0, 5);

    // テーブルを出力
    $output = '<table>';
    $output .= '<tr><th>ランク</th><th>記事区分</th><th>記事タイトル</th><th>ページ</th></tr>';
    foreach ($ranking_data as $index => $data) {
        $output .= '<tr>';
        $output .= '<td>' . ($index + 1) . '</td>';
        $output .= '<td>' . $data['category'] . '</td>';
        $output .= '<td>' . $data['title'] . '</td>';
        $output .= '<td><a href=""' . $data['link'] . '"" target=""_blank"">ページ</a></td>';
        $output .= '</tr>';
    }
    $output .= '</table>';

    return $output;
}

// ショートコードを登録
add_shortcode('staffA_get_articleRanking', 'staffA_get_articleRanking');

”

⑨表示確認(3回目)

完成しました。

これで、「過去1週間でのPV上位5記事」が自動で出てきてくれるはずです。

自動で出てきている様子はこちらからご確認ください

→記事リストポータル

⑩今回のまとめ

WordPress本体でPV数を保持していなかった

「記事PV数をカウントして保持しておいてくれるWordPressプラグイン」が
必要であることが分かりました。

「そうだったのですね〜」という感じでした。

表示がハチャメチャになった事件

表示がハチャメチャになった時にはビビりましたが、
無事に完成できました。

ChatGPT4先生にお願いすると、
すぐに「原因究明＋コード修正」してくれるところが、
ありがたいところですね。

人気記事ランキング出力機能を自分で作れる

プラグインの機能を利用してもよいかと思いますが、
「いろいろ自由にカスタマイズできるメリット」は、あるかと思います。

細かくカスタマイズしたい要望がある場合は、
「自作パターンもアリ」だと思いました。

※次回予告

「前回までのあらすじ」のところが、
テキストが並んでいるだけなので、
「パネル状にかっこよく表示されるようにできないですかね？」
について、やってみようと思います。

物寂しさがある「前回までのあらすじ」ブロックの様子

【お知らせ】記事リストポータルページ

こちらの記事リストポータルページでは、
【ChatGPTプラグイン探訪】および【ちょちょいと自動化DX】の記事一覧を参照できます。

→記事リストポータルページ

【お知らせ】「マジセミ」のご紹介

「マジセミ」では、日々、多くのIT関連セミナーを開催しています。

多くのセミナーの中から「ご自身のスキルやビジネスを強化できるセミナー」を見つけて、ぜひ１度、参加してみてください。

マジセミのイメージロゴ

マジセミ関連プラットフォーム

プラットフォーム 説明 URL
マジセミ マジセミで実施されるさまざまなセミナーの開催情報を確認できます。
「IT関連セミナー」「製造業関連セミナー」など、ご自身のビジネスを強化できるセミナーを検索できます。		 →majisemi.com
マジセミサービス 「セミナーを開催したい方」向けの情報を確認できます。
トライアルからの利用が可能です。		 →majisemi.com　→service
マジセミドライブ 「IT関連コンテンツ」などを紹介しています。 →majisemi.com
→topics
マジセミFacebook 毎日「マジセミ関連情報」や「IT関連ニュース」などを紹介しています。
★フォローお願いします。		 →facebook.com
→OSSNews
マジセミTwitter マジセミFacebookと同様に、
毎日「マジセミ関連情報」や「IT関連ニュース」などを紹介しています。
★フォローお願いします。		 →twitter.com
→Majisemi_it

※「ご意見」「ご感想」「誤字がありましたよ」「こんな使い方もあるみたいですよ」などありましたら、
マジセミSNS(Facebook or Twitter)まで、お知らせください。

この記事のタグ一覧

フリーワード検索

カテゴリー一覧

アクセスランキング

おすすめの記事

【デジタル寺田の３分用語解説】「 VMWare 問題 」とは？🖥️

デジタル寺田の３分用語解説

2024.11.18

【デジタル寺田の３分用語解説】「 VMWare 問題 」とは？🖥️

「 VMWare 」の仮想化技術は、「ITインフラの効率化」に大きく貢献する技術ですが、Broadcomによる買収後のライセンス変更が大きな問題として注目されています。柔軟で慎重な契約見直しが今後の鍵となります。

【デジタル寺田の３分用語解説】「 2029年問題 」とは？📅

デジタル寺田の３分用語解説

2024.11.18

【デジタル寺田の３分用語解説】「 2029年問題 」とは？📅

「 2029年問題 」とは、高校でのデジタル教育改革により、新入社員と既存社員間でデジタルスキル格差が拡大する懸念を指します。企業は早急に対応が求められています。この格差は、企業競争力や業務効率にも、影響を及ぼす可能性があります。

【デジタル寺田の３分用語解説】「 経済産業省：コンテンツ制作のための 生成AI 利活用ガイドブック 」とは？📘

デジタル寺田の３分用語解説

2024.11.18

【デジタル寺田の３分用語解説】「 経済産業省：コンテンツ制作のための 生成AI 利活用ガイドブック 」とは？📘

経済産業省による「 生成AI 利活用ガイドブック 」は、企業やクリエイター向けに、安心して「生成AI」を利用するための、「指針」「実例」「注意点」を明示しています。「業務効率化」や「新しいアイデア創出」の支援を目的としています。

人気のタグから探す