ウエタニ初心者向け!WordPressで検索機能を自作してみよう!ツイート2シェアはてブ16Pocket79WordPressはメディアサイトや企業の公式サイトなどでよく使われるCMSです。WordPressの特徴として有志によるテーマの開発が盛んなことが挙げられます。そのテーマを利用することによってhtmlなどの知識がなくてもWebサイトを作ることが出来ます。テーマによって使える機能は違いますが検索フォームはほどんとのテーマに実装されています。稀に検索フォームが実装されていないWordpressテーマも存在します。そんな時は検索フォーム機能を諦めるのではなく、自分で作ってみてはどうでしょうか?シンプルなフォームならプラグインを導入する必要もなくコードの量も少ないのでWordpressで検索フォームを自作するのは思ったよりも簡単です。検索機能はsearchform.phpsearch.phpこの2つのファイルから検索機能が作られています。検索窓の横にある検索ボタンについての情報がsearch.phpには検索した結果を表示する情報が書かれています。ここでは検索窓の横にボタンがあり検索すると検索結果が出る、非常にシンプルな検索フォームを作ってみましょう。2.実際に作ってみる2.1検索窓を作る(searchform.php)初めに検索フォームから作ってきましょう。制作このsearchform.php内に検索窓を制作します。formとinputの非常にシンプルなコードです。actionはブログトップのurlを指定してください。inputにてnameをsにしていますが、Wordpressの検索窓を作るときは必ずnameをsにする必要があります。検索窓の設定はこれだけですが、これだけだとまだ検索窓自体はされません。?>というコードを表示させたい場所に記述する必要があります。トップページのindex.phpにこのコードを入れてみました。コードを入れると下記の画像ような「検索窓」が表示されるはずです。検索ボタンはなく検索窓のみ表示されました。検索ボタンはついていませんが、これだけでも検索することが可能です。シンプルすぎて寂しいので、次はこれに検索を実行するボタンを作ってみましょう。先ほどのコードにさらに一行加えます。下に新たなコードが加わっています。このコードで、Wordpressのテーマフォルダ内にあるimagesからsearch.pngを呼び出しています。今度はこれの結果を見てみるとこのように、先ほどの検索窓の横にボタンが表示されました。ボタンの位置と検索窓の位置が微妙にずれています。今度はこれを、ボタンのCSSを指定して修正します。">まとめて見れる用にinputタグ内にstyleを使って指定していますが、実際にサイトをつくるときはCSSファイルの方に記述するようにしましょう。vertical-alignをmiddleに設定して画像を検索窓の中央に持って行き、検索窓とボタンの高さを同じにします。すると表示が整いました。これで検索フォームの制作は完了です。これだけでは検索機能は使えません。検索結果を表示するファイルがないからです。今度は検索結果を表示するphpを書いていきましょう。?>search.phpにこのような上記のようなコードを記述します。こちらも非常にシンプルなコードですね。h1内で検索したキーワードを表示するコードを書いています。h1自体は、記述していなくても動きますので、検索ワードを表示する必要がない人は記述しなくても大丈夫です。できたら実際に検索して検索結果をみてみましょう。ここでは「Hello」と検索してみました。ブラウザで検索結果を確認してみるとこのような検索結果が表示されます。このような検索機能だと、シンプルなコードで実装することが可能です。プラグインで検索機能を強化!非常にシンプルな検索フォームですが、もう少し機能が追加された検索フォームが欲しい方もいると思います。Searchをご紹介します。?>を記述しましょう。記述した場所を見てみるとこれだけでカテゴリの絞り込み機能がある検索フォームが作られました。Searchの設定画面です。Typeで絞り込むデータの選択、Widgetでテキストがチェックボックスか選択できます。まとめ検索機能をつけることは、非常に簡単なので検索機能が欲しい人は作ってみることをおすすめします。検索機能を自分で作る際、html/cssが少しでもわかる方なら今回制作したファイルをいじることで、検索結果表示などを自分好みにアレンジすることも可能になります。配布されているテーマを使うこともいいのですが、細かいカスタマイズをしようと思うと結局自分でコードを改変する必要がありますので、簡単なものは出来るだけ自分で作るようにする習慣をつけておきましょう。簡単なものを普段から自分で作っておくと、何か新しい機能をつけるときも自分で作ることができるようになりますよ!おすすめ記事WordPressのおすすめテーマはコレ!SEOもレスポンブも完璧【有料&無料】おすすめ記事WordPressならこれが安心!おすすめのレンタルサーバーと選ぶ際のポイントおすすめ記事【無料あり】本気でオススメしたいプログラミングスクール3つ【実際に受講した】この記事が気に入ったらいいねしよう!最新記事をお届けします。ツイート2シェアはてブ16Pocket79この記事をかいた人ウエタニフリーランスのWebエンジニアです。