WordPressWordPressのサイトでサイト内検索を作る方法とカスタマイズ方法ノムラ2018/7/252019/8/6こんにちは!エンジニアのノムラです。Webサイトを作る上で、サイト内検索の機能は必須といってもいいほど重要な機能ですよね。カスタマイズ【応用】カスタムフィールドを検索対象にする検索機能を実装することで、情報が探しやすいサイトを目指しましょう。まとめWordPressの検索機能WordPressで検索機能を実装する前に、検索機能の仕組みについて解説したいと思います。検索機能の仕様WordPressの検索機能は、search.phpsearchform.phpという2つのテンプレートから作られています。search.phpには検索結果を表示するときのコード、searchform.phpには検索フォームと検索ボタンを作るコードが記述されています。検索機能は、複数キーワードで検索することもできますが、半角スペースで区切る場合にしか対応していません。投稿」のキーワードで検索した場合、テスト投稿の記事が検索結果に表示されます。投稿」の2つのキーワードで検索すると検索結果に何も表示されなくなりました。検索対象は?WordPressのデフォルトの状態の検索機能は、投稿記事と固定ページのタイトルと本文から検索をします。カスタマイズすることで、カテゴリやタグなど、検索範囲を広げることもできます。試しに「テストカテゴリ」というカテゴリ名をデフォルトの状態で検索すると、検索結果は表示されませんでした。検索機能を作ってみようWordPressの検索機能の仕様についてわかったところで、実際に検索機能を作ってみましょう。前述した通り、検索機能を作るのに必要なファイルは以下の2つです。検索結果を表示するsearch.php検索フォームを作るsearchform.phpまずは検索フォームから作ってみましょう。検索フォームを作る/wp-content/themes/テーマ名の中に、searchform.phpを作成します。今回はtwentyseventeenというテーマを使って検索フォームをカスタマイズしていきます。twentyseventeenは、あらかじめsearch.phpとsearchform.phpが用意されているため、そのファイルを編集していきます。作成したファイルに検索フォームを作成するコードを記述します。id="s-btn">検索</div></button></form>検索フォームやボタンのデザインをCSSで整えます。31px;}これを記述することで検索フォームが作成されます。コードを記述するだけでは画面に出力されないので、以下のコードで作成したフォームを表示させましょう。?>表示させたいページのファイルに記述します。今回は、index.phpに記述し、トップページに表示させました。CSSの編集方法がよくわからないという人は、以下の記事を参考にしてみてください。CSSの編集方法だけでなく、どのファイルを編集するべきか、などについても解説されています。検索結果を作る次に、検索結果を表示するページを作成します。search.phpに以下のコードを記述します。<p>検索キーワードに該当する記事がありませんでした。検索条件にマッチする記事の有無を調べ、マッチする記事があった場合、その一覧を表示させています。ページネーションの実装方法やプラグインについては、以下の記事を参考にしてみてください。プラグインで簡単に実装する方法から、自作する方法までわかりやすく解説されています。2018年11月9日プラグインで検索機能をカスタマイズWordPressのデフォルトの検索範囲は、記事タイトルと本文だと解説しましたが、カテゴリやタグなどからも検索したい場合もありますよね。Everythingです。https://ja.wordpress.org/plugins/search-everything/このプラグインを使えば、あらゆる項目から投稿を検索することができます。実際に使ってみましょう。Everythingという項目が表示されます。Configurationでは、検索範囲に含めるフィールドを選択することができます。「すべてのカテゴリー名と説明を検索」の項目にチェックを入れると、カテゴリ名でも検索することができます。Changesで設定を保存し、実際に確かめてみましょう。先ほどは検索結果が表示されなかった「テストカテゴリ」のカテゴリ名で検索すると、ちゃんと記事が表示されました。Configuration」では、検索範囲から除外する記事やカテゴリを設定することもできます。全ての設定が終わったらテスト検索フォームで実際に検索してみることもできるので、確認しながら設定をしていくことができます。検索結果に表示したくない記事や、大きく検索範囲を変更する場合も安心ですね。自由にWordPressをカスタマイズしてみませんか?WordPressはプラグインを使うことでさまざまな機能を追加することが出来ますよね。プログラミングに関する知識がなくても、ある程度のカスタマイズは可能です。あなたが、もっと自由にWordPressをカスタマイズしたい!自分だけのおしゃれなデザインを作りたい!このようなイメージをお持ちであるならば、PHPやJavaScriptといったプログラミング言語を習得することをおすすめします。これらのプログラミング言語を習得することでWordPressの可能性は更に広がるんです。JavaScriptを使えば、ボタンなどに動きを加えたり、PHPを使えばオリジナルのお問い合わせわフォームなどを作成することができます。このようにプログラミング言語を覚えることで、プラグインの範囲内でしかカスタマイズできなかった部分を、自由にカスタマイズできるようになりますよ。やって学習すればいいんだろう......。なかにはこのような方もいらっしゃいますよね。そんなあなたは弊社のプログラミング学習プラン診断アプリをご利用ください。簡単な質問からあなたに必要なスキルと簡易的な学習プランを知ることができますよ。最短距離でクオリティの高いWebサイトを作りたい方は、プログラミングスクールを受講するのもひとつの手段です。弊社侍エンジニア塾では、プログラミング未経験者でも最短距離で目的を達成するために、現役エンジニア講師があなたの目的に合わせ、オーダーメイドでカリキュラムを作成し、より実践的なスキルを最速で習得することができます。無料体験レッスンで弊社を実際に体感してみてください。専属コンサルタントがあなたの悩みや不安などさまざまな質問にお答えいたします。こちらのボタンからご予約いただけます。お気軽にご利用ください。(オンラインでも受講いただけます。)無料体験レッスンを予約するまとめここまで、検索フォームと検索結果ページの作成方法から、プラグインを使って検索機能をカスタマイズする方法まで解説してきました。サイト内の検索は、ユーザーが記事を探しやすくなり、サイト内の様々なコンテンツを見つけてもらうための大切な機能です。使いやすい検索フォームを作成し、素敵なサイトを作成してくださいね。TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人ノムラWEBエンジニアをやっています。プログラミング初心者にもわかりやすく解説ができるよう頑張ります。