マジセミドライブ
ウェビナー関連のニュースやITサービス&ツールの最新情報を随時配信します。
AIツール実験室
2023.07.28
【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)まで、お知らせください。
この記事のタグ一覧
フリーワード検索
カテゴリー一覧
アクセスランキング
- 🏆ランク1位🏆
【OSS情報】クラウドネイティブ分散SQLデータベース「 CockroachDB 」 - 🏆ランク2位🏆
【無料で使える】「 OCR 」ツールまとめ - 🏆ランク3位🏆
【無料で使える】「 プロジェクト管理 」ツールまとめ - 🏆ランク4位🏆
【ツール紹介】無料オープンソース「 ビデオ監視 ツール 」まとめ3選 - 🏆ランク5位🏆
【無料で使える】「 翻訳 」ツールまとめ - 🏆ランク6位🏆
【OSS情報】ディスクイメージング(クローニング)ツール「 Clonezilla 」 - 🏆ランク7位🏆
【AIツール実験室】楽曲作成ツール「 Suno AI 」〜AI生成ミュージックフェス〜 - 🏆ランク8位🏆
【無料で使える】「 メール 」ソフトウェアまとめ - 🏆ランク9位🏆
【OSS情報アーカイブ】Metabase - 🏆ランク10位🏆
【無料で使える】「 ドキュメント管理 」ツールまとめ
おすすめの記事
ChatGPT探訪
2024.05.07
【ChatGPT探訪】「 無限議論 」〜最強スタンド考察〜🤔
マジセミSNSに投稿した 【担当者A】の「 無限議論 」〜最強スタンド考察〜💬 を記事化したものです。 ChatGPTに課金していないみなさんにも、 AI同士の議論をお楽しみいただけます👍 ※原稿テキストを放り込むだけで、 ジョジョ風イラストを作成してしまう生成AIがすごくないですか?