質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2568閲覧

URLとvalueの部分一致によってセレクトボックスの初期値を変えたい

kii.32

総合スコア67

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/06/19 04:19

編集2021/06/19 08:08

前提・実現したいこと

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>'; } ?>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/06/19 04:25

タイトルをもうちょっと質問内容に寄せた方が良さそうです。起きてる問題とか。
kii.32

2021/06/19 04:36

タイトルを変更させていただきました。 ご指摘いただいております、前回の質問の際はページ送りは実装しておらず、今回新たに追加したことによって発生した部分に対して質問をさせていただきました!わかりづらく、すみません。。
m.ts10806

2021/06/19 04:37

なるほど。 ちなみにPHP側での実装は考えていませんか? 前回の質問見る限りJavaScriptでの対応を優先されてるようですが。
m.ts10806

2021/06/19 04:37

URLから「2021/5」が取れればいけるように見えました。
kii.32

2021/06/19 04:43

php側での実装でも問題ないです。
guest

回答1

0

ベストアンサー

やりたいこととは若干違うかもしれませんが、PHP側でやったほうがいいように思います。

$_SERVERのREQUEST_URI

'REQUEST_URI'
ページにアクセスするために指定された URI。例えば、 '/index.html'

今の指定だとURLからhttp://exampleを除いた以降が取れるはずです。

http://example/news/
→ /news/

http://example/news/date/2021/5/?news_category=media
→ /news/date/2021/5/?news_category=media

/ で explode()すると

それぞれ配列の値として当てられます。

php

1<?php 2var_dump(explode("/","/news/")); 3var_dump(explode("/","/news/date/2021/5/?news_category=media")); 4

URLを見る限り、年と月の順番は決まってるみたいなので、
月が替わっても同じ順番になるものと思われます。

そこでその配列の番号を指定して年月を取得し同じならselectedをつけるとかで対応できると思います(isset()とかで確認して存在しなければ「全て」ですね)


WordPress環境手元にないので未検証ですが、このような形で。

php

1 2<?php 3$urilist = explode("/",$_SERVER['REQUEST_URI']); 4$selected_check = false; 5 6//3番目が年、4番目が月。 7//どちらもない場合は /news/ だけと判定できるのでそもそもselectedの判定をしない 8if(isset($urilist[3]) && isset($urilist[4])){ 9 $selected_check = true; 10} 11 12// $archive_list をループ 13foreach ($archive_list as $year_month => $archive) : 14 $selected = ''; //初期化(合致しないときにはselectedを出さない) 15 if($selected_check && $year_month === ($urilist[3].'/'.$urilist[4])){ 16 //$year_monthがURLにあるものと合致していればselected 17 $selected = ' selected'; 18 } 19 $year_month_arr = explode('/', $year_month); //これは元のコードです。 20?> 21 22 23<option value="<?php echo esc_url(home_url('/news/date/' . $year_month . '/' . '?' . $taxonomy_slug . '=' . $term)) ?>"<?=$selected ?>> 24 25

投稿2021/06/19 04:46

編集2021/06/19 08:39
m.ts10806

総合スコア80875

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kii.32

2021/06/19 04:59

ありがとうございます! var_dumpしたところ、下記のようになりました。 array(3) { [0]=> string(0) "" [1]=> string(4) "news" [2]=> string(0) "" } array(6) { [0]=> string(0) "" [1]=> string(4) "news" [2]=> string(4) "date" [3]=> string(4) "2021" [4]=> string(1) "5" [5]=> string(20) "?news_category=media" } > そこでその配列の番号を指定して年月を取得し同じならselectedをつける すみません、イマイチここの方法が分からなくて、少し詳しく教えていただけますと幸いです。
m.ts10806

2021/06/19 05:08

実装イメージを回答に追記しました。 注記している通り、WordPress環境がないことから未検証なので、あくまで「イメージ」として自身のコードにマージするときは調整してください。
kii.32

2021/06/19 05:52

ありがとうございます! 1ページ目も2ページ目も$urilist[3]と$urilist[4]は同じ値を示していたので、近づいたように思います! > <option value="<?php echo esc_url(home_url('/news/date/' . $year_month . '/' . '?' . $taxonomy_slug . '=' . $term)) ?>"<?php=$selected ?>> ここの部分なのですが、これは全てにselectedが付くという意味合いでしょうか?
m.ts10806

2021/06/19 05:53

いいえ。 事前に$year_monthと比較しています。 合致してなければ何も出ません。 $selected = ''; if($selected_check && $year_month === ($urilist[3].'/'.$urilist[4])){ $selected = ' selected'; }
kii.32

2021/06/19 06:00 編集

比較しているのですね。 <?php=$selected ?> これに対して、エラーが出てまして Parse error: syntax error, unexpected '=', expecting elseif (T_ELSEIF) or else (T_ELSE) or endif (T_ENDIF) in /app/public/wp-content/themes/aaa/date.php on line 634
kii.32

2021/06/19 07:33

ありがとうございます!ご教授いただきましたコードで無事動きました! 日付とは別に ターム名でも同じようにしようと変形してみたのですが、 下記コードですと生成されるoption全てにselectedがついてしまいまして、 なぜ動かないのかわかりますでしょうか? ($urilist[2] が タームスラッグ名部分です) <?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 ($selected_check && $term === ($urilist[2])) { $selected = ' selected'; } if ($terms && !is_wp_error($terms)) { // タームがあれば表示 echo '<select id="cat_link" name="cat_link" onChange="location.href=value;">'; // option の value 値を URL とする echo '<option value="' . esc_url(home_url('/news/')) . '">' . '全て' . '</option>'; foreach ($terms as $value) { // 配列の繰り返し echo '<option value="' . get_term_link($value->slug, $taxonomy_slug) . '"' . $selected . '>' . esc_html($value->name) . '</option>'; // タームのURLとタイトルを表示 } echo '</select>'; } ?>
m.ts10806

2021/06/19 07:34

進んだようで何よりです。 PHP側でも結構できることはあるので、 最初にPHP側でできそうかどうかを検証するとできる幅が広がると思います。
kii.32

2021/06/19 07:44

php側でするのは盲点でした。ありがとうございます。 上記、追加でさせていただいた質問は別スレッド立てた方がよろしいでしょうか。
m.ts10806

2021/06/19 07:51

失礼、解決したっぽい雰囲気があったので読み飛ばしていました。 foreachの中でselectedの付与判定をしないと固定値になります。
kii.32

2021/06/19 08:07 編集

下記のように中に入れてみたのですが、全てにselectedがついておりまして。。 selectedの付与判定の書き方が間違ってますでしょうか? <?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;">'; // 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>'; } ?>
m.ts10806

2021/06/19 08:37

例示した2021と5は2番目ではなく3番目と4番目では。 $term に何が保管されているか $urilist[2] に何が保管されているか を確認してみてください。
kii.32

2021/06/19 08:44

わかりずらくすみません。 日付とは別件でURLのタームスラッグ名がと同じ場合に該当のoptionにselectedを付与するというのがやりたいです。 $urilist[2] にはタームスラッグ名が保管されています。 http://example/news/media/ の「media」の部分です。 ↓出力のselect <select id="cat_link" name="cat_link" onchange="location.href=value;"> <option value="http://example/news/">全て</option> <option value="http://example/news/info/">お知らせ</option> <option value="http://example/news/media/">メディア</option> <option value="http://example/news/recruit/">採用情報</option> </select>
m.ts10806

2021/06/19 08:48

コードの意図が伝わらないかなと思ったのでそれぞれのコメントを付けました。
m.ts10806

2021/06/19 08:49

あぁなるほど。別件でしたか。
m.ts10806

2021/06/19 08:55

考え方は同じです。 私が回答で提示したコードの流れやそれぞれの意図が理解できればおおよそロジック的には同じになると思います。 info,media,recruit といった文字列がどこに保管されているかを確認すれば良いです。
kii.32

2021/06/19 10:21

すみません。ありがとうございました!同じコードを利用して無事解決いたしました。 感謝いたします。
m.ts10806

2021/06/19 10:27

汎用性は高いと思うので、色々使ってみると良いです。 ただ、WordPressとなると元々のPHPの常識が通じなかったり、 実は便利な機能が提供されていたりするので、PHP側での対応を考えるときは「WordPressで使えそうな機能がないか」を探すのが先かもしれません。
kii.32

2021/06/19 11:13

アドバイスまでいただきありがとうございます。 他でも色々と使ってみるようにいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問