前提・実現したいこと
wordpressにて月別のアーカイブページ を作成しました。
http://example/news/date/2021/5 なら2021年5月のアーカイブ が出力されます。
このページにセレクトボックスを付け、2021年5月のアーカイブであれば「2021.5」が初期値で設定されるようにしたいです。
発生している問題・エラーメッセージ
下記コードによって、月別のアーカイブページではその月のセレクトボックスの値が表示されるようになりました。
記載のjavascriptで URLとoptionのvalueと値が全く同じなら、そのoptionを選択するようにできています。
しかし、ページ送りをした場合に
(http://example/news/date/2021/5 → http://example/news/date/2021/5/page/2/)
「/page/2/」の部分がvalueとは一致しないので、セレクトボックスの初期値がリセットされてしまいます。
おそらく、完全一致ではなく部分一致のようにできれば良いかと思うのですが、
調べても中々解決できずこちらに投稿させていただきました。
該当のソースコード
【セレクトボックスの出力】
<?php if ($archive_list) : ?> <select onchange="location.href=value;" id="date_link"> <option value="<?php echo esc_url(home_url('/news/')) ?>">全て</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 . '/' . '?' . $taxonomy_slug . '=' . $term)) ?>"> <!-- 特定のカテゴリーのアーカイブのURLを value に格納 --> <?php echo $year_month_arr[0] . '.' . $year_month_arr[1] . '' ?> <!-- [<?php echo count($archive) ?>] --> </option> <?php endforeach; ?> </select> <?php endif; ?>
↓セレクトボックス出力結果
<select onchange="location.href=value;" id="date_link"> <option value="http://example/news/">全て</option> <option value="http://example/news/date/2021/5/?news_category=media"> <!-- 特定のカテゴリーのアーカイブのURLを value に格納 --> 2021.5 <!-- [3] --> </option> <option value="http://example/news/date/2021/4/?news_category=media"> <!-- 特定のカテゴリーのアーカイブのURLを value に格納 --> 2021.4 <!-- [1] --> </option> <option value="http://example/news/date/2020/12/?news_category=media"> <!-- 特定のカテゴリーのアーカイブのURLを value に格納 --> 2020.12 <!-- [1] --> </option> </select>
【javascript】
<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>
【ターム別追記】
<?php // ターム一覧をプルダウンメニューで表示 $taxonomy_slug = 'news_category'; // タクソノミーのスラッグを指定 $terms = get_terms($taxonomy_slug); // タームの取得 $urilist = explode("/", $_SERVER['REQUEST_URI']); $selected_check = false; $selected = ''; if (isset($urilist[2])) { $selected_check = true; } if ($terms && !is_wp_error($terms)) { // タームがあれば表示 echo '<select id="cat_link" name="cat_link" onChange="location.href=value;" class="select-reset">'; // option の value 値を URL とする echo '<option value="' . esc_url(home_url('/news/')) . '">' . '全て' . '</option>'; foreach ($terms as $value) { // 配列の繰り返し if ($selected_check && $term === ($urilist[2])) { $selected = ' selected'; echo '<option value="' . get_term_link($value->slug, $taxonomy_slug) . '"' . $selected . '>' . esc_html($value->name) . '</option>'; // タームのURLとタイトルを表示 } else { echo '<option value="' . get_term_link($value->slug, $taxonomy_slug) . '">' . esc_html($value->name) . '</option>'; // タームのURLとタイトルを表示 } } echo '</select>'; } ?>
回答1件
あなたの回答
tips
プレビュー