賢威テーマ」は、SEO業界で圧倒的な実績を持つWebプランニングチーム「ウェブライダー」が、そのノウハウを余すことなく詰め込んだ、SEOテンプレートパックです。

今回は、word pressテーマである「賢威テーマ」のサイト内検索窓をヘッダーに設置する方法をご紹介します。

サイトの検索窓にキーワードを入力するとスムーズに目的のページを探すことができます。検索窓は目立つ箇所に設置した方がユーザーに優しいサイトといえるでしょう。サイドバーの上に設置するか、それともメインコンテンツの上か、またはヘッダーに設置するか、悩んじゃいますね。ま~デザインやバランス次第ですが…。一番目立つ位置はヘッダーなのではないでしょうか。

「賢威テーマ」のサイト内検索窓はウィジェットエリアで設置するためカスタマイズしなければヘッダーに表示することができません。ヘッダーに設置するにはPHPで表示させCSSで位置を調整します。PHPとCSSと聞くと難しそうに思えますが、とても簡単に設置できます。

カスタマイズ前

カスタマイズ後

header.phpに検索窓のコードを設置

header.phpの116行目辺りに下記コードがあります。

<!?php } ?>

こちらのコードの直ぐ下に下記コードを追加します。

<?php get_template_part( 'searchform' ); ?>

記入後のheader.php

            <div class="site-header-in">
                <div class="site-header-conts">
					<?php if ( is_singular( LP_DIR ) ) {
						echo '<h1 class="site-title">';
						echo get_h1_keni();
						echo "</h1>\n";
						echo ( get_post_meta( $pid, 'catch_text', true ) ) ? "<p class=\"lp-catch\">" . esc_html( get_post_meta( $pid, 'catch_text', true ) ) . "</p>\n" : ""; ?>
					<?php } elseif ( is_front_page() ) { ?>
                        <h1 class="site-title"><a
                                    href="<?php echo esc_url( home_url() ); ?>"><?php echo ( the_keni( 'site_logo' ) != "" ) ? "<img src=\"" . the_keni( 'site_logo' ) . "\" alt=\"" . esc_html( get_bloginfo( 'name' ) ) . "\" />" : esc_html( get_bloginfo( 'name' ) ); ?></a>
                        </h1>
					<?php } else { ?>
                        <p class="site-title"><a
                                    href="<?php echo esc_url( home_url() ); ?>"><?php echo ( the_keni( 'site_logo' ) != "" ) ? "<img src=\"" . the_keni( 'site_logo' ) . "\" alt=\"" . esc_html( get_bloginfo( 'name' ) ) . "\" />" : esc_html( get_bloginfo( 'name' ) ); ?></a>
                        </p>
					<?php } ?>
					
			<?php get_template_part( 'searchform' ); ?>
		
					
                </div>
            </div>

サイトのヘッダーに検索窓が表示されます。

次に親テーマのbase.cssや子テーマのCSSファイルに、下記コードを追加しましょう。

.site-header-conts #searchform {
padding: 20px 15px 0;
max-width: 300px;
}
@media only screen and (min-width: 737px) {
.site-header-conts #searchform {
padding: 0;
text-align: right;
max-width: none;
}
}

CSSを追加することで検索窓が右によりました。

Google Chromeを使っているとCSSを更新しても変更されない場合がございます。そんな時は、別のブラウザで更新を確認するかクロームの履歴を削除して確認してください。如何でしょうか?ヘッダーの右側に設置できましたか?「賢威テーマ」の検索窓をヘッダーの右側に設置する方法をご紹介しました。

最後まで読んで頂きありがとうございます。

賢威テーマ」は、SEO業界で圧倒的な実績を持つWebプランニングチーム「ウェブライダー」が、ノウハウを余すことなく詰め込んだSEOテンプレートパックです。当サイトは賢威テーマで構築しております。




WEB運営・制作ディレクター

この記事のライター:BUTTER

Googleストリートビュー撮影、WEBサイト制作(WordPress)、デジタルマーケティング、モールテックス小物のハンドメイドをしております。中小企業の社長様から個人事業主の方までお仕事のご依頼を頂き、WEBサイト制作(ポータルサイト・メディアサイト・ECサイト)、楽天サイト制作、楽天サイト運営、店内ストリートビュー撮影、Google広告、Yahoo広告、SNS広告運用を担当させて頂きました。趣味:モールテックスDIY、ローカルガイド撮影、音楽観賞。

リンクツリー ツイッター インスタグラム

 

PR