こんにちは
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' );
@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 を使用してみてください。
@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] としています。
@ishitaka さま
ご丁寧にありがとうございます。仔細、承知いたしました。
fetch() 以後の流れがまだきちんと理解できているとは言い難いのですが、ここから先は自身で調べて学んでみようと思います。
この度はご相談に乗っていただきありがとうございました。
精進いたします。
