マジセミドライブ

ウェビナー関連のニュースや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回目)→表示がハチャメチャになりました

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

緊急事態であります。

ここに出るはず

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

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

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

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

プロンプト

■指示
不具合原因を解明してください。
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関連セミナーを開催しています。

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

マジセミのイメージロゴ

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

プラットフォーム 説明 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)まで、お知らせください。

おすすめの記事

【ChatGPT探訪】「 無限議論 」〜最強スタンド考察〜🤔

ChatGPT探訪

2024.05.07

【ChatGPT探訪】「 無限議論 」〜最強スタンド考察〜🤔

マジセミSNSに投稿した 【担当者A】の「 無限議論 」〜最強スタンド考察〜💬 を記事化したものです。 ChatGPTに課金していないみなさんにも、 AI同士の議論をお楽しみいただけます👍 ※原稿テキストを放り込むだけで、 ジョジョ風イラストを作成してしまう生成AIがすごくないですか?

【トレンド解説】超入門「 スマートファクトリー 」🏭

トレンド解説

2024.04.15

【トレンド解説】超入門「 スマートファクトリー 」🏭

「 スマートファクトリー 」への理解を深めるための解説として、初心者向けにわかりやすくまとめた記事です。「新しい工場の概念」「デジタルツインの活用」「IoT技術による最適化」など、現代の製造業に必要な知識を効果的に学べます。 スマートファクトリー の導入によるメリットを具体的に解説しています。

【トレンド解説】米国における「 生成AI活用 」最新動向📈

トレンド解説

2024.05.07

【トレンド解説】米国における「 生成AI活用 」最新動向📈

「米国における 生成AI活用 最新動向」について解説しています。生成AIは日本企業にも多くの可能性をもたらし、「デスクワークの効率化」や「業務の自動化推進」に貢献しています。生成AIを理解し、活用することが、グローバルな競争力を高める鍵となります。