ドロップダウンメニューに動的にselectedを付けたい

Question

前提・実現したいこと

月別アーカイブページへ移動した後に、セレクトボックスの値をページごとに動的に変更したいです。
例）:「example.com/news/date/2021/5/」ページであれば、「2021.5」が初期値で選択されている状態にしたい。

wordpressのカスタム投稿にてセレクトボックスでページ移動する、月別アーカイブを作成しました。

カスタム投稿スラッグ:news
タクソノミー :news_category

▼archive-news.php/date.php↓

<?php
$cat_slug = 'news'; //アーカイブしたいカテゴリーのスラッグ
$taxonomy_slug = 'news_category'; // アーカイブで取得したいタクソノミーを指定
$home_url = get_bloginfo('url');
$prev_year = null; // 値「null」をセット
$args = array(
    'post_type' => $cat_slug,
    'posts_per_page' => -1, //カテゴリーの記事を全部出力
);
$the_query = new WP_Query($args); //上記アーカイブクエリを実行
?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
    <?php $archive_list[get_the_time('Y/n', $post->ID)][] = $post->post_title; //年月ごとに記事情報を格納
    ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>


<?php if ($archive_list) : ?>
    <select id="date_link">
        <option>月を選択</option>
        <?php foreach ($archive_list as $year_month => $archive) :
            $year_month_arr = explode('/', $year_month);
        ?>
            <option value="<?php echo esc_url(home_url('news/date/' . $year_month)) ?>">
                <!-- 特定のカテゴリーのアーカイブのURLを value に格納 -->
                <?php echo $year_month_arr[0] . '.' . $year_month_arr[1] . '' ?>
                <!-- [<?php echo count($archive) ?>] -->
            </option>
        <?php endforeach; ?>
    </select>
<?php endif; ?>

<script type="text/javascript">
    (function() {
        var dropdown = document.getElementById("date_link"); //selectタグに付与したIDでターゲットのselectタグを取得
        function onSelectChange() {
            if (dropdown.options[dropdown.selectedIndex].value !== '') { //optionにvalueが格納されていれば
                document.location.href = this.options[this.selectedIndex].value; //valueの値を location.hrefの値に格納
            }
        }
        dropdown.onchange = onSelectChange;
    })();
</script>

出力結果↓

<select id="date_link">
    <option>月を選択</option>
    <option value="/news/date/2021/6">
        
        2021.6
        
    </option>
    <option value="/news/date/2021/5">
        
        2021.5
        
    </option>
    <option value="/news/date/2021/4">
        
        2021.4
        
    </option>
    <option value="/news/date/2021/2">
        
        2021.2
        
    </option>
    <option value="/news/date/2020/12">
        
        2020.12
        
    </option>
</select>

月別アーカイブページへ移動した後に、セレクトボックスの値をページごとに動的に変更したいです。
（現状は「<option>月を選択</option>」が選択された状態で表示されています。）

例）:example.com/news/date/2021/5/ページであれば、「2021.5」が選択されている状態にしたい。

選択された状態にするにはselectedをoptionに付与する様にすれば良いかと思うのですが、
動的にページごとに付与する方法がわからずこちらで質問をさせていただきました。

どうぞ、宜しくお願い致します。

$_SERVERのREQUEST_URIについて
追記↓

<?php if ($archive_list) : ?>


    <?php $url = $_SERVER['REQUEST_URI']; ?>
    <?php if (strstr($url, $year_month)) : ?>

        <select id="date_link">
            <option>月を選択</option>
            <?php foreach ($archive_list as $year_month => $archive) :
                $year_month_arr = explode('/', $year_month);
            ?>
                <option value="<?php echo esc_url(home_url('news/date/' . $year_month)) ?>">
                    <!-- 特定のカテゴリーのアーカイブのURLを value に格納 -->
                    <?php echo $year_month_arr[0] . '.' . $year_month_arr[1] . '' ?>
                    <!-- [<?php echo count($archive) ?>] -->
                </option>
            <?php endforeach; ?>
        </select>

    <?php endif; ?>


<?php endif; ?>

上記URLに月日がついている場合は取得できそうなのですが、
「URLに入っている、月日のoptionにselectedを付与する」という書き方がわかりませんでした。。。

Comments

[yambejp]

サーバー側でやりたいのですか？ローカル側ですか？
そのロジックだと別の値に変えてサブミットしても戻ってしまう気がしますが
どういう仕様を検討していますか？

[kii.32]

申し訳ないです。サーバー側ローカル側というのが理解できていないのですが、

「example.com/news/」から「example.com/news/date/2021/5/」へ移動した場合に、
セレクトボックスの値が「月を選択」になっているとユーザー側からすると、ページが移動したのか分かりにくい、かつ移動した先のページが何月のアーカイブなのか分かりにくいので、セレクトボックス内の表示を「2021.5」に変更できればと考えております。

[yambejp]

PHPでやりたいのかjavascriptでやりたいのか・・・ということです

[kii.32]

PHPで実現したいですが、複雑になってしまうのであればjavascriptでも良いと考えております。

[m.ts10806]

JavaScriptのほうが複雑でイベントや表示のことなど考慮しなければなりません。
それに「WordPressである」というところから、どっちでやっても複雑になる可能性はあります。
その場限りでできたように見えてもCMSの仕様から外れるようであれば容赦なく動かない可能性も。

Answer 1

jsで適当に

<script>
window.addEventListener('pageshow', ()=>{
  document.querySelectorAll('#date_link option').forEach(x=>{
    var flg=location.pathname==x.value;
    x.selected=flg;
  });
});
</script>
<select id="date_link">
<option>月を選択</option>
<option value="/news/date/2021/6/">2021.6</option>
<option value="/news/date/2021/5/">2021.5</option>
<option value="/news/date/2021/4/">2021.4</option>
<option value="/news/date/2021/3/">2021.3</option>
</select>

Comments

[kii.32]

回答ありがとうございます！
試してみましたが、どのページ（/news/　や　/news/date/2021/4　,　/news/date/2021/3　など）に飛んでも、URLのみ/news/date/2021/5に変更される様になりました。。。

[yambejp]

失礼、pushStateはテスト用でした。
書き換えておきます

urlのパスと、selectの値が完全一致だったときだけselectedにしました
そうでないときに反応させたいなら仕様を決め込む必要があります

[kii.32]

ありがとうございます。
完全一致していないのか、上手く動きませんでした。

＞urlのパスと、selectの値が完全一致だったときだけselected
こちらは「optionタグのvalueの値」と「移動先URLの値」が完全一致ということでしょうか？
であれば、完全一致はしております。

[kii.32]

過去の質問を辿ったのですが、こちら（https://teratail.com/questions/238435）でyambejpさんが回答されているコードで無事動きました！

こちらも完全一致で動く様になっているんでしょうか。

<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('#date_link option').forEach(x=>{
var a=Object.assign(document.createElement('a'),{href:x.value});
if(location.href==a.href){
x.selected=true;
};
});
});
</script>

Answer 2

$_SERVERのREQUEST_URIが使えると思うのですが如何でしょうか。
まず上記で何が取得できるか確認してみてください。

※WordPressで同等の機能があればそちらを採用してください。要は現在のURLですから。

Comments

[kii.32]

ありがとうございます！
URLから値を取得するということですね。一度調べてみます。

[m.ts10806]

結局その後こちらの回答はどう活きたのでしょうか。
コードもらったからそれで全部おしまい　とされたように思いますが

[kii.32]

連絡をお送りする前に回答を閉めてしまいすみませんでした。
先ほど追記させていただいたのですが、「URLに入っている、月日のoptionにselectedを付与する」という書き方がわからずその後に進めませんでした。

[m.ts10806]

$_SERVERのREQUEST_URI
を取ってみれば見えますよ。

[kii.32]

$_SERVERのREQUEST_URIを取って、見ることはできたのですが、

特定のoption(下記部分)にselectedを付与する書き方がわからないです

<?php foreach ($archive_list as $year_month => $archive) :
$year_month_arr = explode('/', $year_month);
?>
<option value="<?php echo esc_url(home_url('news/date/' . $year_month)) ?>">
<!-- 特定のカテゴリーのアーカイブのURLを value に格納 -->
<?php echo $year_month_arr[0] . '.' . $year_month_arr[1] . '' ?>
<!-- [<?php echo count($archive) ?>] -->
</option>
<?php endforeach; ?>

[m.ts10806]

/news/date/' . $year_month
とイコールならselected出力