検索

Posted: 2019/12/23 Updated: 2020/6/9

内部ブロック名:core/search

ブロックの選択方法

入力欄の横にある[+]マークをクリックして、「ウィジェット」から「検索」をクリックします。

デフォルト

サーチフォームの上にある「検索」の文字は変更できます。

<form class="wp-block-search" role="search" method="get" action="/">
	<label for="wp-block-search__input-1" class="wp-block-search__label">
		検索
	</label>
	<input type="search" id="wp-block-search__input-1" class="wp-block-search__input" name="s" value="" placeholder="" required />
	<button type="submit" class="wp-block-search__button">
		検索
	</button>
</form>

配置

ツールチップから配置を変更できます。

左揃え

<form class="wp-block-search alignleft" role="search" method="get" action="/">
	<label for="wp-block-search__input-2" class="wp-block-search__label">
		検索
	</label>
	<input type="search" id="wp-block-search__input-2" class="wp-block-search__input" name="s" value="" placeholder="" required />
	<button type="submit" class="wp-block-search__button">
		検索
	</button>
</form>

中央揃え

<form class="wp-block-search aligncenter" role="search" method="get" action="/">
	<label for="wp-block-search__input-3" class="wp-block-search__label">
		検索
	</label>
	<input type="search" id="wp-block-search__input-3" class="wp-block-search__input" name="s" value="" placeholder="" required />
	<button type="submit" class="wp-block-search__button">
		検索
	</button>
</form>

右揃え

<form class="wp-block-search alignright" role="search" method="get" action="/">
	<label for="wp-block-search__input-4" class="wp-block-search__label">
		検索
	</label>
	<input type="search" id="wp-block-search__input-4" class="wp-block-search__input" name="s" value="" placeholder="" required />
	<button type="submit" class="wp-block-search__button">
		検索
	</button>
</form>

その他

検索のテキストを変更します。

ツールチップ内では、配置の他に太字や打ち消し線なども設定することができます。

<form class="wp-block-search" role="search" method="get" action="/">
	<label for="wp-block-search__input-5" class="wp-block-search__label">
		<strong>
			サーチ
		</strong>
	</label>
	<input type="search" id="wp-block-search__input-5" class="wp-block-search__input" name="s" value="" placeholder="" required />
	<button type="submit" class="wp-block-search__button">
		検索
	</button>
</form>