WordPress ウィジェットのArchivesリンクにスタイルをつける。

WordPressのWidgetの、Archiveのリンクをセレクトボックスにした場合にスタイルをあてて整えるための方法のメモです。

Archivesへのリンクは、ウィジェットの設定画面でこのようにドロップダウンにチェックを入れることでリンクをセレクトボックスに変更することができます。

ですがこのままでCSSをあてていないととてもさみしい感じです。

これをBootstrapのスタイルをあてて少しきれいに見せてみます。

HTML

かなり省略しますが、ウィジェットは以下のようなHTMLで出力されます。
この中のselectにclass名をつけてスタイルを当てたいところですが、classを設定するところが無かったです。

html

<h2 class="widget-title">Archives</h2>
<label class="screen-reader-text" for="archives-dropdown">Archives</label>
<select id="archives-dropdown" name="archive-dropdown">
	<option value="">月を選択</option>
	<option value='http://localhost/fm/2022/03/'> 2022年3月 </option>
	<option value='http://localhost/fm/2022/02/'> 2022年2月 </option>
	<option value='http://localhost/fm/2022/01/'> 2022年1月 </option>
	<!-- 中略 -->
</select>
<script type="text/javascript">
	/* JavaScript 略
	（選択後に該当ページへ飛ぶスクリプトです）
	*/
</script>

JavaScriptでname属性('archive-dropdown')を取得してそこにclass名を付けます。
JavaScriptのコードはお使いのテーマに合わせて適当なjsファイルの中へ書き加えてください。

myScript.js

const archivesSelectBox = document.getElementsByName('archive-dropdown');
console.log(archivesSelectBox[0]);
if (archivesSelectBox[0]){
	archivesSelectBox[0].classList.add('form-control');
}

これでselectにclass="form-control"が付きました。

html

<select id="archives-dropdown-2" name="archive-dropdown" class="form-control">

CSSを設定します。
Bootstrap4はすでに読み込んであります。少しスタイルを追加する感じ（だったと思う）。お好きな感じに調整してください。 ;))

styles.css

select.form-control{
	margin:0 auto;
	width: 100%;
	max-width: 320px;

	cursor: pointer;

	font-size: 1rem;

	text-indent: 0.01px;
	text-overflow: ellipsis;

	border: 1px solid #ccc;

	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;

	background-image: url(./assets/images/common/chevron-down-solid.svg);
	background-repeat: no-repeat;
	background-size: 12px 10px;
	background-position: right 10px center;
}

こんな感じで設定すると、Bootstrapぽく表示されるかと思います！

ものすんごくただのメモですがまた何か気づいたら追記します。:)