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

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

ただいまの
回答率

90.49%

  • WordPress

    7231questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 407

Naokoro

score 12

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

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

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

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

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

イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/23 17: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 -->
    <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><!-- /#h-top -->
    </div><!-- /#header-in -->
    </div><!-- /#header -->
    </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 -->
    <main itemscope itemprop="mainContentOfPage">
    <div id="main" itemscope itemtype="http://schema.org/Blog">

    キャンセル

checkベストアンサー

+1

パソコン表示時のヘッダー横に表示するには、例えば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で位置調整してください

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • WordPress

    7231questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。