WordPress の検索ウィジェットで「role属性」をなくす方法


role属性は、HTML5から新たに追加された属性で、Webページを構成する各要素に対し、役割を持たせる働きをします。日本語に訳すと「役割」なんですが。ロールプレイ(役割演技)とか良く言いますよね。この属性は、現行バージョンのHTML/XHTMLでも一応使用することができるようです。ただし、XHTML1.1のモジュールとして考えられていため、現状のHTML/XHTMLで作られたWordPressでは、文法上ではエラーになってしまうようです。
このサイトも、WordPressの検索ウェジェットを追加すると、ウィジット部分に role属性が入り、W3Cの Markup Validation Serviceではエラーとなります。この属性が入っているからといって、ページの表示ができなかったり、崩れたりすることはないようですが、気になるのでとりあえずrole属性が入らないように、検索ウィジットのカスタマイズをしようと思います。

attribute-role-error


検索ウィジットのカスタマイズをする

検索ウィジットを設置した時のデフォルト表示を行なっている部分は、以下の部分になります。変数formに吐き出されるソースが詰められている部分が見て取れます。
/path/to/wordpress/wp-content/themes/themesname/searchform.php
function get_search_form($echo = true) {
do_action( 'get_search_form' );

$search_form_template = locate_template('searchform.php');
if ( '' != $search_form_template ) {
	require($search_form_template);
	return;
}

$form = '<form id="searchform" role="search" action="' . esc_url( home_url( '/' ) ) . '" method="get">
<div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
<input id="s" type="text" name="s" value="' . get_search_query() . '" />
<input id="searchsubmit" type="submit" value="'. esc_attr__('Search') .'" /></div>
</form>
';

テーマディレクトリにファイルを作成する

オリジナルのソースを直接いじっても良いのですが、WordPressのバージョンアップで元に戻ってしまうと面倒だし、WordPressnoオリジナルをなるべく弄りたくないので、テーマディレクトリに searchform.php を作成します。このファイルがある場合には、デフォルトのものではなくテーマで指定したファイルが読み込まれます。
/path/to/wordpress/wp-content/themes/themesname/searchform.php
<form id="searchform" action="&quot;<?php" method="get">" >
<div><label class="screen-reader-text" for="s"><!--?php echo __('Search for:'); ?--></label>
 <input id="s" type="text" name="s" value="<?php echo get_search_query() ?>" />
 <input id="searchsubmit" type="submit" value="<?php echo esc_attr__('Search') ?>" /></div>
</form>

検索ウィジットのカスタマイズをしたい場合等も考え方は同じで、このやり方で出来ると思います。(カスタマイズ作業を行う前には必ずバックアップをとり、自己責任で行ってくださいね。)


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ブログ著者情報

KAZ@Apocrypha
KAZ@Apocrypha
備忘録的な話題だけでなく、内容に拘らず情報発信をして行きたいと思っています。よろしくお願いします。
このエントリーをはてなブックマークに追加

カテゴリー