サポート » 使い方全般 » 特定カテゴリー内の記事へのランダムリンク

  • 解決済 kaine8639

    (@kaine8639)


    はじめて質問させていただきます。当方Java Scriptを少々使える程度の新米エンジニアです。

    現在このサイトを運用しているなかで、特定カテゴリー内の記事にランダムでリンクするプログラムを実装したいと考えています。下部にある都道府県はそれぞれカテゴリ名として登録しており、各記事はそのカテゴリに所属するかたちで運用しています。
    (例:東京の場合、スラッグは13を指定)

    今回、テキストリンクを貼っている都道府県名をクリックすると、そのカテゴリに所属する記事をひとつランダムで表示するプログラムをつくりたいと考えています。都合、47都道府県すべてのプログラムが必要となります。

    現在はこちらのサイトの、

    /**
     * 投稿をランダムに1件取得
     */
    $rand_posts = get_posts(
      array(
        'posts_per_page' => 1, //取得件数
        'orderby'        => 'rand', //ランダムに取得する
      )
    );
    /**
     * 表示
     */
    if ( $rand_posts ) : ?>
      <div class="rand-recommend">
        <?php
        foreach ( $rand_posts as $rand_post ) :
          $post_id = $rand_post->ID;
          /**
            * 記事のURL
            */
          $url = get_the_permalink( $post_id )
          ?>
          <div class="rand-post">
            <a href="<?php echo $url; ?>">
              <span>もう一つ、こんな記事もいかがですか?</span>
              <span class="small">ココをクリックしてもう1記事見てみる</span>
            </a>
          </div>
        <?php endforeach; ?>
      </div>
    <?php
    endif;

    というコードを参考に実装できないか検討しているのですが、これだと都道府県数ぶんのPHPコードが必要になり、とても重いプログラムになってしまう気がしています。

    今後も記事はどんどん増えていくため、ランダムで飛ばす先のURLをプログラム内に絶対パスとして指定するのも問題があります。

    なにか良い対処法があれば、ぜひアドバイスいただけますと幸いです。
    どうぞよろしくお願いいたします。

    • このトピックはkaine8639が1年、 6ヶ月前に変更しました。

    ヘルプの必要なページ: [リンクを見るにはログイン]

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • こんにちは

    REST API を使用する方法はどうでしょうか?

    例:

    HTML

    <a href="javascript:onLinkClick(13)">東京</a>
    <a href="javascript:onLinkClick(14)">神奈川</a>

    JavaScript

    function onLinkClick(cat) {
      var restUrl = document.querySelectorAll('link[rel="https://api.w.org/"]')[0].getAttribute('href');
      fetch(restUrl + 'wp/v2/posts?orderby=rand&per_page=1&categories=' + cat)
        .then((response) => response.json())
        .then((data) => {
          if (0 < data.length) {
            document.location.href = data[0].link;
          }
        });
    }

    これだけだと orderby で rand が使用できないので、テーマの functions.php に下記を追加して使用できるようにします。

    function add_orderby_rand_rest_post_collection_params( $query_params ) {
    	$query_params['orderby']['enum'][] = 'rand';
    	return $query_params;
    }
    add_filter( 'rest_post_collection_params', 'add_orderby_rand_rest_post_collection_params' );
    スレッド開始 kaine8639

    (@kaine8639)

    @ishitaka さま

    さっそくのご返信、ありがとうございました。
    いただきましたアドバイスをもとに現環境でテストしてみたのですが、JavaScriptがきちんと機能していないのか、動作を確認できませんでした。私の理解不足のようで申し訳ありません。

    私が適用した手順なのですが、まず固定ページ内に以下のJavaScriptを埋め込みました。Elementorを使用しているのですが、HTMLコードのブロックに入れ込んでいます。

    <div>
        <script>
    function onLinkClick(cat) {
      var restUrl = document.querySelectorAll('link[rel="https://api.w.org/"]')[0].getAttribute('href');
      fetch(restUrl + 'wp/v2/posts?orderby=rand&per_page=1&categories=' + cat)
        .then((response) => response.json())
        .then((data) => {
          if (0 < data.length) {
            document.location.href = data[0].link;
          }
        });
    }
    </script>
    </div>

    続いて、都道府県のテキスト「東京」「神奈川」を

    <a href="javascript:onLinkClick(13)">東京</a>
    <a href="javascript:onLinkClick(14)">神奈川</a>

    として記入しました。

    さらに、テーマのfunctions.php内に以下のコードを追記しました。

    <?php
    function add_orderby_rand_rest_post_collection_params( $query_params ) {
    	$query_params['orderby']['enum'][] = 'rand';
    	return $query_params;
    }
    add_filter( 'rest_post_collection_params', 'add_orderby_rand_rest_post_collection_params' );
    ?>

    REST APIについてまったく無知でしたので、こちらこちらのサイトで概要を把握してから考えているのですが、どうにも良い解決策が思い浮かびません。

    何度も申し訳ありませんが、アクションの問題点があるようであれば助言いただきたく思います。
    何卒よろしくお願い申し上げます。

    <a href="javascript:onLinkClick(13)">東京</a>
    <a href="javascript:onLinkClick(14)">神奈川</a>

    すみません、この13、14はカテゴリー ID でした。

    <a href="javascript:onLinkClick(64)">東京</a>
    <a href="javascript:onLinkClick(3)">神奈川</a>

    実際のカテゴリー ID を使用してみてください。

    スレッド開始 kaine8639

    (@kaine8639)

    @ishitaka さま

    実際のカテゴリIDをあらためて設定してみたところ、無事ランダムリンクが機能することを確認いたしました。長らく悩んでいたことが氷解し、本当に助かりました。ありがとうございます!

    ただいまこちらこちらのサイトを参考にしながら、教えていただいたコードのそれぞれの意味合いについて確認しているのですが、どういった処理が行われているのか、正直なところ把握しきれておりません。不躾なお願いで本当に恐縮なのですが、もし可能であれば、行われている処理についてアドバイスをいただけると大変うれしく思います。

    現状私が理解しているのは、
    function onLinkClick()
    の中に、リンクをクリックしたときに起動するJavaScriptの処理が書かれており、

    var restUrl = document.querySelectorAll('link[rel="https://api.w.org/"]')[0].getAttribute('href');
      fetch(restUrl + 'wp/v2/posts?orderby=rand&per_page=1&categories=' + cat)
        .then((response) => response.json())
        .then((data) =>

    fetch()内に取得したいURLを指定し、Responseの内容をthen()内で処理している、というところまでです(間違っていたら恐縮ですが…)。

    fetch() で WordPress REST API の Posts エンドポイント (wp/v2/posts) より、投稿データを取得しています。

    取得した投稿データは JSON 形式 (下記) の文字列なので、json() で JavaScript オブジェクトに変換しています。

    下記は投稿データの例(抜粋)です。

    [{
    	"id":123,
    	"date":"2020-11-11T01:43:06",
    	"slug":"hello-world",
    	"type":"post",
    	"link":"http:\/\/example.com\/hello-world\/",
    	"title":{"rendered":"Hello world!"},
    	"content":{"rendered":"<p>Hello world!<\/p>",
    }]

    ※ 見やすいように、改行とインデントを入れています。

    投稿データは配列で返されるので data[0] としています。

    スレッド開始 kaine8639

    (@kaine8639)

    @ishitaka さま

    ご丁寧にありがとうございます。仔細、承知いたしました。
    fetch() 以後の流れがまだきちんと理解できているとは言い難いのですが、ここから先は自身で調べて学んでみようと思います。

    この度はご相談に乗っていただきありがとうございました。
    精進いたします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「特定カテゴリー内の記事へのランダムリンク」には新たに返信することはできません。