ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

プラグインいらず!WordPressで簡単にサイト内検索機能を実装する方法

2017年4月28日
search_img

当ブログはWordPressで作成されているのですが、最近まで検索機能をつけておらずやっぱりサイト内検索があった方が便利だ!と、ブログ開設から1年経った今さらながら思ったので、検索機能を実装することにしました。

調べてみるとプラグインを使って実装する方法が多く紹介されていたのですが、僕の場合はキーワード検索のみができればいいと思ったのでプラグインを使わなくても簡単に実装できる方法を選択しました!

下記に検索機能の実装方法を記載しますので、どなたかの参考にでもなれば幸いです。

検索機能に必要な関数

PHP
1
<?php get_search_form(); ?>

極論、このget_search_form()関数を検索フォームを表示したい箇所に記述するだけで検索機能が実装できます!笑

しかし、上記の関数のみだと下のような味気ないデフォルトの検索フォームが表示され、カスタマイズもできないので寂しい感じに、、、

search_default

これだとさすがに検索する気がなくなるので、もう一手間加えて自分好みの検索フォームに変えていきたいと思います!
そこで「searchform.php」というテンプレートを作って、使用しているthemesディレクトリ直下に入れてあげます。

searchform.phpテンプレートを作ることで、先ほどのデフォルトの検索フォームからカスタマイズができるようになります。
簡単に言うと、classをつけてcssを適用できるようにするって感じですかね。
そのsearchform.phpテンプレートの中身はこのように記述します。

PHP
1
2
3
4
5
6
7
8
9
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div>
      <label class="screen-reader-text">キーワードで探す</label>
      <div class="serchformWrap">
        <input type="text" value="" name="s" id="s" class="searchEl searchText" placeholder="search" />
        <input type="submit" id="searchsubmit" class="searchEl searchBtn" value="検索する" />
      </div>
    </div>
</form>

上記のコードのポイントとして、
  • form要素のaction属性にはWordPressのホームURL(home_url関数)を指定してあげる
  • name属性には、「s」のinput要素を入れる
が必要となります。
※home_url関数部分については、/でも問題なく動いていました。

ここで注意したいのが、name属性に「s」以外の文字を入れるとフォームが動作しなくなるのでそこは気をつけた方が良いかと思います。理由はわかっていないのですが、WordPressの仕様の問題なのですかね。

これでcssを適用することができるので、僕もとりあえず装飾をしてみました!

search_custum

このようにプラグインを使わなくても、検索機能は簡単に実装できるので、ぜひ試してみてください!

【参考サイト】
http://www.webcreatorbox.com/tech/wordpress-search/https://goo.gl/vPmD1q

関連記事

  • WordPress Related Postsの関連記事が2つ表示される!? そんな時の解決法2017年10月20日 WordPress Related Postsの関連記事が2つ表示される!? そんな時の解決法
  • mov形式をmp4へ変換、圧縮する方法2017年10月28日 mov形式をmp4へ変換、圧縮する方法
  • 【Atom】パッケージをコマンドラインで一括インストール方法2018年3月23日 【Atom】パッケージをコマンドラインで一括インストール方法
  • 【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日 【Mac】vscodeの拡張機能を一括インストールする方法
  • 【wp】ブログにソースを埋め込むプラグイン2016年1月17日 【wp】ブログにソースを埋め込むプラグイン

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.