Wordpress : 検索窓をグローバルメニューへ

こんにちは、なおころと申します。

Wordpressのブログに関する質問です。
検索窓をグローバルメニューへ設置することは可能でしょうか？

現在は検索窓のウィジェットををサイドバーに設置していますが
グローバルメニューへの移動を検討しています。

設置可否と、可能な場合どのように設定すれば良いか
教えていただけますと嬉しいです。
お手数をおかけしますがよろしくお願いいたします。

該当ブログ：http://availability89.com/
テーマ：Simplicity2

行動規範の内容に同意します

回答2件

可能です。header.phpを編集し、<header>内など表示したい箇所にget_search_form();を記述し、後はCSSで位置や見た目を調整してください。

関数リファレンス/get search form - WordPress Codex 日本語版

投稿2018/04/23 07:48

退会済みユーザー

総合スコア0

Naokoro

2018/04/23 08:26

さっそくのご返答ありがとうございます！本件の検索窓、PCはヘッダー横に、モバイル版のみグローバルメニューに設置したいと思うようになりました。上記の場合、設定するのはheader.phpのみでよいでしょうか？初歩的な質問で申し訳ありませんがお返事いただけますと嬉しいです。。【現在のheader.php】 <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <?php ////////////////////////////////// //ウェブマスターツール用のID表示 ////////////////////////////////// if ( get_webmaster_tool_id() ): ?> <meta name="google-site-verification" content="<?php echo get_webmaster_tool_id() ?>" /> <?php endif;//ウェブマスターツールID終了 ?> <meta charset="<?php bloginfo('charset'); ?>"> <?php //ビューポート //モバイルもしくはページキャシュモードの時 if ( is_mobile() || is_responsive_enable() || is_page_cache_enable() ): ?> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <?php else: ?> <meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes"> <?php endif ?> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php //AMPの案内タグを出力 if ( has_amp_page() ): ?> <link rel="amphtml" href="<?php echo get_amp_permalink(); ?>"> <?php endif ?> <?php //Wordpressのバージョンが4.1以下のとき if ( get_wordpress_version() < 4.1 ): get_template_part('header-title-tag'); endif; ?> <?php get_template_part('header-seo');//SEOの設定テンプレート?> <?php //wp_enqueue_script('jquery');//jQueryの読み込み?> <?php wp_head(); ?> <?php the_apple_touch_icon_tag();//Appleタッチアイコンの呼び出し ?> <?php if ( is_facebook_ogp_enable() ) //Facebook OGPタグ挿入がオンのとき get_template_part('header-ogp');//Facebook OGP用のタグテンプレート?> <?php if ( is_twitter_cards_enable() ) //Twitterカードタグ挿入がオンのとき get_template_part('header-twitter-card');//Twitterカード用のタグテンプレート?> <?php get_template_part('header-insert');//ユーザーが子テーマからヘッダーに何か記述したい時に利用するテンプレート?> <?php get_template_part('head-custom-field');//カスタムフィールドの挿入（カスタムフィールド名：head_custom）?> </head> <body <?php body_class(); ?> itemscope itemtype="http://schema.org/WebPage"> <div id="container">  <header itemscope itemtype="http://schema.org/WPHeader"> <div id="header" class="clearfix"> <div id="header-in"> <?php if(is_single()): ?> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@naosukenya" /> <meta name="twitter:title" content="<?php the_title(); ?>" /> <meta name="twitter:description" content="<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>" /> <meta name="twitter:image" content="<//php echo catch_that_image(); ?>" /> <meta name="twitter:image" content="<?php if(has_post_thumbnail( $post->ID )): $thumbnail_id = get_post_thumbnail_id(); $thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , 'large' ); echo $thumbnail_img[0]; else: echo ""; endif; ?>" /> <?php endif; ?> <?php //カスタムヘッダーがある場合 // $h_top_style = ''; // if (get_header_image()){ // $h_top_style = ' style="background-image:url('.get_header_image().')"'; // } ?> <div id="h-top"<?php //echo $h_top_style; ?>> <?php get_template_part('button-menu'); //モバイルメニューボタンの呼び出し?> <div class="alignleft top-title-catchphrase"> <?php get_template_part('header-logo');?> </div> <div class="alignright top-sns-follows"> <?php if ( is_top_follows_visible() ): //トップのフォローボタンを表示するか?> <?php get_template_part('sns-pages'); //SNSフォローボタンの呼び出し?> <?php endif; ?> </div> </div> </div> </div> </header> <?php if (is_navi_visible())://ナビゲーションが表示のとき get_template_part('navi');//グローバルナビのためのテンプレート endif; ?>  <div id="body"> <div id="body-in" class="cf"> <?php get_template_part('before-main'); //メインカラムの手前に挿入するテンプレート（3カラム作成カスタマイズ時などに） ?>  <main itemscope itemprop="mainContentOfPage"> <div id="main" itemscope itemtype="http://schema.org/Blog">

行動規範の内容に同意します

ベストアンサー

パソコン表示時のヘッダー横に表示するには、例えばSNSボタンの下であれば

header.phpの中の

<?php get_template_part('sns-pages'); //SNSフォローボタンの呼び出し?>

の下に

 <?php get_template_part('searchform'); //検索フォーム?>

を入れればテーマカスタマイザーでフォローボタンを表示するにしていればフォローボタンの下に検索フォームが表示されます（CSSで上マージンが25pxになっているので調整すれば上に持ち上がります）

モバイル表示のグローバルメニューというのはタイトルとヘッダーの間ですか？であれば

navi.php

の中の

 <?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>

の下あたりに

<?php if(is_mobile()): ?>
<?php get_template_part('searchform'); //検索フォーム ?> 
<?php else: ?>

<?php endif; ?>

を入れれば表示できます。とにかく検索フォームは

<?php get_template_part('searchform'); //検索フォーム ?>

で表示できますし、「モバイルなら、パソコンなら」という条件分岐を含めるなら

<?php if(is_mobile()): ?>
<?php get_template_part('searchform'); //検索フォーム ?> 
<?php else: ?>

<?php endif; ?>

を挿入することで表示できます。あとは前述したようにCSSで位置調整してください

・・・と書いてる間に誰かいい回答されたかもしれません

投稿2018/04/23 11:04

momosiri

総合スコア1509

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Wordpress : 検索窓をグローバルメニューへ

関連した質問