WordPress メニューに検索フォームを追加する

WordPress メニューナビゲーションに検索フィールドを追加する方法です。 次の関数をテーマの関数ファイルに追加するようにします。

function add_search_to_wp_menu ( $items, $args ) {
if( 'primary' === $args -> theme_location ) {
$items .= '<li class="menu-item menu-item-search">';
$items .= '<form method="get" class="menu-search-form" action="' . get_bloginfo('home') . '/"><p><input class="text_input" type="text" value="검색어를 입력하세요" name="s" id="s" onfocus="if (this.value == \'검색어를 입력하세요\') {this.value = \'\';}" onblur="if (this.value == \'\') {this.value = \'검색어를 입력하세요\';}" /><input type="submit" class="my-wp-search" id="searchsubmit" value="search" /></p></form>';
$items .= '</li>';
}
return $items;
}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);
// Source: http://diythemes.com/

メニューの場所は「primary」の場合であり、それ以外の場合は適切に変更し、次のCSSファイルをスタイルシートファイルに追加します。

.custom .menu-item.menu-item-search { float:right; width:260px; }
.custom .menu-search-form { float:right; padding-top:3px; width:250px; }
.custom form.menu-search-form { width:auto; }
.custom form.menu-search-form #s { background:#fff; border:1px solid #000; font-size:11px; margin:0 2px 0 0; padding:2px; width:180px; float:left; }
.custom .menu-search-form input#searchsubmit.my-wp-search { background:#000; color:#fff; cursor:pointer; float:right; padding:2px; text-transform:uppercase; }

実際にcustomクラスは適切に変更します。 実際に適用してくれればテーマに沿ってうまくいかない場合もあります。 その場合CSSでレイアウトを調整してくれるようです。

上記の方法以外にも、ソースファイル（header.php）に直接検索ボックスに関連PHPのソースを追加して、CSSでレイアウトを取ってくれる場合も考えてみることができます。 WordPressにGoogleの翻訳をタルジャを参照してください。 または検索フォームをショートコードにして挿入する方法も可能です（WordPress 検索フォームをショートコードで挿入する を参照）。

ショートコードを使用する場合は、後で変更する場合は、関数ですぐできるので、それなりの利点があるようです。 ただ検索フォームのコードを追加することもできます。 基本的なコードは次のとおりです。

<?php get_search_form(); ?>

これは少し応用して、次のようなコードを追加することもできます。

<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
<fieldset>
<label for="s" class="screen-reader-text">Search for:</label>
<input type="search" id="s" name="s" placeholder="Enter keywords" required />
<input type="image" id="searchsubmit" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/searchicon.png" />
</fieldset>
</form>
// Source: http://handcoded.ca/