WordPressの記事内に簡単なドロップダウンを置く方法を2つ紹介します。
選択欄から移動先を決める場合はselectと移動ボタン、リンク一覧を開閉したい場合はdetailsを使います。
テーマのヘッダーメニューを置き換えるコードではありません。
選択してからボタンで移動するプルダウン
選択しただけではページを移動しません。
矢印キーで候補を比較し、最後に移動ボタンを押して確定できます。
未選択のまま送信するとブラウザーが選択を求めます。
実際に移動する見本です。
選択式はHTMLとJavaScriptを組み合わせて動きます。
上のコードを設置する場合は、次の一式を記事のカスタムHTMLブロックへ貼ります。
optionのvalueをリンク先URL、タグ内の文字を表示名へ変更してください。
<form class="waza-select-nav">
<label>読みたい内容
<select name="destination" required>
<option value="">選んでください</option>
<option value="https://motoki-design.co.jp/wordpress/">WAZAトップ</option>
<option value="https://motoki-design.co.jp/wordpress/wordpress-modal-btn/">モーダルの作り方</option>
</select>
</label>
<button type="submit">選んだページへ移動</button>
</form>
<script>
(() => {
document.querySelectorAll('.waza-select-nav').forEach(form => {
if (form.dataset.ready) return;
form.dataset.ready = '1';
form.addEventListener('submit', event => {
event.preventDefault();
const select = form.querySelector('select[name="destination"]');
if (!select || !select.value) return;
try {
const url = new URL(select.value, location.href);
if (url.protocol !== 'https:' && url.protocol !== 'http:') return;
location.assign(url.href);
} catch (_) { /* URLが不正な場合は移動しない */ }
});
});
})();
</script>リンク一覧を開閉するドロップダウン
次の方法はJavaScriptなしで動きます。
summary（見出し行）をクリック、またはフォーカスしてEnter・Spaceを押すとリンク一覧が開閉します。
閉じた状態でリンクへTab移動することはありません。
<details class="waza-link-menu">
<summary>WordPressの実装例を選ぶ</summary>
<ul>
<li><a href="https://motoki-design.co.jp/wordpress/wordpress-modal-btn/">モーダルを作る</a></li>
<li><a href="https://motoki-design.co.jp/wordpress/fade-in-animation/">フェードインを作る</a></li>
</ul>
</details>
<style>
.waza-link-menu { max-width: 32rem; border: 1px solid #aaa; padding: 1rem; }
.waza-link-menu summary { cursor: pointer; }
.waza-link-menu a { display: inline-block; padding: .5em 0; }
.waza-link-menu summary:focus-visible,
.waza-link-menu a:focus-visible { outline: 3px solid #1769aa; outline-offset: 3px; }
.waza-select-nav select { max-width: 100%; }
.waza-select-nav button { padding: .6em 1em; border: 1px solid #aaa; }
</style>同じタブ・新しいタブの使い分け
上の2例は同じタブで移動します。
新しいタブへ開きたい場合は、2つ目の例のリンク一覧にあるa要素へtarget="_blank"とrel="noopener"を追加し、リンク名にも「新しいタブ」を添えてください。
1つ目のselectの変更時にwindow.openを呼び出す方法は、予期しない移動やポップアップ制限を避けるため使いません。
貼る場所・複数設置・スマホでの確認
変更前のブロックと追加CSSを保存してから、HTMLをカスタムHTMLブロックへ貼り付けます。
PHPのfunctions.phpには貼りません。
CSSを追加CSSへ移す場合はstyleタグを除いた中身だけを貼ります。
選択式のJavaScriptを別ファイルに分ける場合は、フォームのHTMLができた後に実行してください。
IDを固定していないため、同じ形式のフォームや開閉メニューを複数置けます。
上の2つの選択欄と2つのリンク一覧で、片方の選択・開閉がもう片方に影響しないことを確認できます。
選択式は各フォームの後ろにスクリプトを置くか、全フォームの後ろで一度実行します。
スマホでは選択欄の候補表示が端末の標準UIになります。
2026年10月1日にPC、10月2日に390px幅の公開見本で、複数の選択欄とリンク一覧の独立操作を確認しました。
これは実機のOS標準選択画面を確認した結果ではありません。
実機の選択画面、ソフトウェアキーボードや支援技術の操作は別途確認が必要です。
動かないときと元に戻す方法
選択式が動かない場合は、保存時にscriptが削除されていないか、JavaScriptのエラーがないかを確認します。
JavaScriptが許可されない環境では、2つ目のリンク一覧を使ってください。
任意の訪問者入力をURLへ流用せず、管理者が決めたhttpまたはhttpsの移動先をoptionへ記載します。
戻す場合は追加したカスタムHTMLブロックを削除します。
CSSやJavaScriptを別の場所へ移していた場合は追加分も削除してください。
旧版のonchangeによる自動移動や、hoverだけで開くメニューとは重ねて使いません。
公開ページで未選択時の送信、選択後も移動しないこと、移動ボタン、開閉メニューのキーボード操作とリンク先を確認してください。
公開前のエディター表示だけでは動作確認になりません。
よくある質問：WordPressでシンプルなドロップダウン（プルダウン）メニューを作るとき
この記事では、どんなドロップダウンを紹介していますか？
記事では、WordPressの記事内に簡単なドロップダウンを置く方法を2つ紹介しています。選択欄から移動先を決める場合はselectと移動ボタン、リンク一覧を開閉したい場合はdetailsを使います。テーマのヘッダーメニューを置き換えるコードではありません。
選択しただけで、ページが移動しますか？
移動しません。記事では、選択しただけではページを移動せず、矢印キーで候補を比較し、最後に移動ボタンを押して確定します。未選択のまま送信すると、ブラウザーが選択を求めます。
選択した時点で、自動的に移動する方法は使えますか？
使いません。記事では、selectの変更時にwindow.openを呼び出す方法は、予期しない移動やポップアップ制限を避けるため使いません。旧版のonchangeによる自動移動は、重ねて使いません。
リンク一覧を開閉するドロップダウンには、JavaScriptが必要ですか？
必要ありません。記事では、JavaScriptなしで動きます。summary（見出し行）をクリック、またはフォーカスしてEnter・Spaceを押すとリンク一覧が開閉します。閉じた状態でリンクへTab移動することはありません。
コードは、どこに貼りますか？
記事では、変更前のブロックと追加CSSを保存してから、HTMLをカスタムHTMLブロックへ貼り付けます。PHPのfunctions.phpには貼りません。CSSを追加CSSへ移す場合は、styleタグを除いた中身だけを貼ります。optionのvalueをリンク先URL、タグ内の文字を表示名へ変更します。
リンクを新しいタブで開くには？
記事では、上の2例は同じタブで移動します。新しいタブへ開きたい場合は、2つ目の例のリンク一覧にある要素へ属性を追加し、リンク名にも「新しいタブ」を添えます。
同じページに、複数置けますか？
置けます。記事では、IDを固定していないため、同じ形式のフォームや開閉メニューを複数置けます。選択式は各フォームの後ろにスクリプトを置くか、全フォームの後ろで一度実行します。
動かないときは、どうしますか？
記事では、選択式が動かない場合は、保存時にscriptが削除されていないか、JavaScriptのエラーがないかを確認します。JavaScriptが許可されない環境では、2つ目のリンク一覧を使います。任意の訪問者入力をURLへ流用せず、管理者が決めたhttpまたはhttpsの移動先をoptionへ記載します。なお、実機の選択画面、ソフトウェアキーボードや支援技術の操作は別途確認が必要です。
