AFFINGER(アフィンガー)

【WordPressテーマAFFINGER】検索ボックスをトップページに実装!

 

こんにちは、kei(@KeiKei0815blog)です!

 

ワードプレスのAFFINGER5を使って、ブログ運営をしているのですが、TOPページに検索ボックスがあったら便利だなと考えていました。

 

イメージとしては、以下の感じです。
KEI

 

 

本記事では、プラグインを使わずにAFFINGER5のトップページに検索ボックスを置くやり方を備忘録として残しておきます。

 

ブログやサイトのカスタマイズに参考にしてみてください。

 

 

AFFINGERで絞り込み検索を作成するステップ

 

アフィンガー5のトップページに検索ボックスを表示させる方法について紹介します。

 

step
1
テーマエディタを編集

 

まずは、ワードプレス「外観 → テーマエディタ」をクリックしましょう。

※編集前には、事前にバックアップしておくことをオススメします。

 

 

テーマエディタが開けましたら、編集するテーマを「WING-AFFINGER5」にして「投稿ページ(home.php)」をクリックします。

 

 

投稿ページ(home.php)」になりましたら、以下のコードをコピーします。

 

 command
<?php get_search_form(); ?>

 

コピーしましたら、コードを貼り付けます。今回は以下のように、『<div class="home-post post">』の下に貼り付けをします。

 

 

貼り付けができましたら、「ファイル更新」をクリックして完了です。

 

トップページで問題なく表示しているか、念のため確認してみましょう!

 

step
2
CSSの調整

 

続いて、検索ボックスの周りの色を調整する方法です。

 

アフィンガー5では、CSSを使わなくても検索ボックスの見た目を変えられる機能があります。

 

検索ボックスの見た目は、「外観  →  カスタマイズ  →  [+]オプションカラー  →  検索フォーム」で調整できます。

※サイドバーに検索ボックスを置いている場合、サイドバーの検索ボックスも一緒にデザインが変わります。

 

 

調整ができましたら、最後に「公開」ボタンをクリックして完了です。

 

検索ボックスをお好みのデザインにカスタマイズしてみてください!

 

まとめ

 

今回は、ワードプレステーマのAFFINGERのTOPページに検索ボックスを実装するやり方について、紹介してみました。

 

サイトやブログのユーザビリティをあげるやり方の1つとして、検索ボックスをトップに置いてみてください。

 

本記事が参考になりましたら幸いです。

 

ここまで読んでいただき有難うございました!

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-AFFINGER(アフィンガー)