WordPress で検索結果のページテンプレートの作成は？

WordPressでは、サイト内検索を行う検索結果ページの作成ができることをご存じでしょうか。検索機能はユーザビリティの向上やサイト管理の効率化に大きく貢献する機能です。したがって、検索結果ページをカスタイマイズすることにも大きな意義があるといえるでしょう。検索結果ページを作成するには複数の方法があり、やり方次第ではWordPressやプログラミングに詳しくなくても簡単に作成することが可能です。この記事では、実際にどのような方法で作成できるのか解説します。

検索結果のページとは何か？

ブログやホームページなどのWebサイトには、通常サイト内検索機能がついています。そのサイト内で調べたい語句を検索ウィンドウに入力し検索ボタンを押すことで、その語句に関連するコンテンツが一覧で表示される便利な機能です。この検索結果が一覧で表示されるページのことを検索結果ページと呼びます。もちろん、WordPressにもサイト内を検索する機能が標準装備されており、たとえばウィジェット編集機能を使うことでWEBサイトに簡単に実装することができます。手順としては、まず管理画面（ダッシュボード）の「外観」から「ウィジェット」の設定画面を開きます。すると、画面左の「利用できるウィジェット」の中に「検索」という項目があります。これをドラッグ&ドロップで右側にあるサイドバーのスペースに設置するだけで作業は完了です。設置できる場所はサイドバーだけでなく、フッタースペースウィジェットを設置すれば画面下部に検索機能が付加されます。デフォルトですでに設定されるテーマも多く、その場合は設定の手間すら必要ありません。

検索機能の最大の利点は、記事やコンテンツの数が膨大になったWEBサイトやブログでも、確認したい情報や読みたい記事を簡単に探すことができることにあります。特に、長期にわたって運営して過去の記事が膨大な数となり、探すことが難しくなったオウンドメディアでは、ユーザビリティを高める必須の機能となるでしょう。情報量が多くなりがちな企業サイトでも、目当ての情報が記載されたページをすぐに探し当てられるため非常に重要です。また、検索機能のメリットを受けられるのはユーザーだけではありません。サイト運営者がWEBサイトの整理や更新を行う際、迅速に対象となる記事を確認することができるようになるため、業務の効率性が格段に向上します。サイトを構築したばかりの頃はコンテンツ量が少なく必要性を感じないかもしれません。しかし、いずれは必要となる機能ですので、どの位置に検索ウィンドウを配置するか、検索結果はどのように表示するかなど見通しを立てながらWEBサイトをデザインした方が良いでしょう。

検索結果のページは自分で作成できる？

WordPressにおける検索結果のページレイアウトやデザインは、基本的にテーマに依存したものとなります。したがって、使用しているテーマによってデザインや配置、選択できる検索条件などはある程度制限されることは避けられません。ただ、検索結果を最重要視してテーマを選ぶ人は少ないため、既存の検索機能では不満が出るということは十分に考えられるでしょう。もし検索機能を改善したい場合は、テーマの機能を自身でカスタマイズしたり、あるいは自身で検索結果のページを作成することになります。

検索結果ページの作成方法は2通り

検索結果ページの作成方法は2通りあります。1つはsearch.phpを編集する方法、もう1つはプラグインを使って作成する方法です。

・search.phpを編集する方法
search.phpに直接コードを書き込んで編集することでテンプレートを作成する方法です。自分でコーディングすることが必要となるため、HTMLやPHPなどのコンピューター言語について詳しくないと編集はできません。もし間違った編集をしてしまうと、サイトに致命的なエラーが発生する可能性もあります。したがって、こちらの方法を取る際には、必ずバックアップを取るようにしてください。後述するプラグインを使う方法でもバックアップは重要な対策ですが、phpファイルの編集はサイトの構造に直接手を出す手段となりますので非常にリスクが高くなります。もし、深刻で修正が難しいエラーが生じても、バックアップデータがあれば素早く元の状態に戻すことができます。

・プラグインを使って作成する方法
プラグインはWordPressの拡張機能のことです。さまざまな機能を持ったプラグインが公開されており、WEBページを簡単に編集することができるようになるものもあります。したがって、プラグインを導入する方法であればコードに触れることなく検索結果ページをカスタマイズすることが可能です。プラグインの導入は、場合によってはサーバーに負荷がかかりサイトの表示速度に影響が出る可能性があります。しかしコーディングの必要がないため、初心者やコーディングが苦手な人にとっては非常に便利で有効な手段となるでしょう。

search.phpでテンプレートを作成する

WordPressの検索結果ページをコーディングで作成するには、「search.php」というファイルを作り、そこにコードを書き込んでタイトル部分を編集していくことなります。「検索結果一覧」にはindex.phpが使われることもありますが、search.phpで表示されるのが一般的です。もし、記事を一覧表示せるPHPファイルを用意してあればそのファイルを流用することもできます。ただし、検索ワードに合った記事がループ（該当する記事があるだけ表示するWordPressの仕様）の中にあるかどうかチェックさせるために、さらにコーディングを行う必要があります。また、検索結果が0件だった際に画面がただの空白ページにならないよう設定する作業も忘れないようにしましょう。検索結果が0件でなければ投稿を表示させ、0件の場合には「検索に該当するページがありません」などといったメッセージを表示させる判定機能が必要になるのです。

プラグインElementor でテンプレートを作成する

コーディングの知識やスキルが不足している場合は、プラグインを使って検索結果のテンプレートを作成することになります。その際におすすめしたいのが「Elementor Page Builder」というプラグインです。このプラグインを導入することで、パッケージなどで購入すれば数万円程度の費用がかかるホームページビルダー機能を無料で使えるようになります。投稿ページ、固定ページなどの種類に関係なくWEBページが編集可能で、ほとんどの操作がドラッグ&ドロップでできるため、感覚的にWEBサイトを編集・カスタマイズしたい人には特におすすめです。カラム幅や余白などの細かい設定もパラメータ形式で操作可能ですので、一通り操作方法に慣れれば検索機能のデザインや検索結果のページも限りなく理想に近い形で作成できるでしょう。使用しているテーマを問わないのも大きなメリットです。また、Elementorにはさまざまなアドオン（拡張機能）もラインアップされていますので、必要に応じてさらに機能を充実させることができます。

Elementorを導入するには、まず管理画面（ダッシュボード）の「プラグイン」にカーソルを合わせ、出てきた副項目から「新規追加」を選択します。切り替わった「プラグインの追加」画面にある「プラグインの検索」の入力欄に「Elementor Page Builder」と入力するとElementorの項目が出現しますので、欄内にある「今すぐインストール」ボタンを押してください。インストールが終わると「有効化」ボタンに切り替わりますので、これをクリックすれば導入は完了です。

Elementorを利用する際は、普段ページを編集する時と同じように「投稿」または「固定ページ」の「新規追加」をクリックします。すると、編集ページのタイトル欄の下に「Elementorで編集」というボタンが出現していますので、これをクリックすれば専用のページ編集画面に切り替わり、編集ができるようになります。Elementorを使用せずに作成した既存記事も同じ手順でリライトできますので、より自由にページをカスタマイズしたい際には積極的に活用していきましょう。

Elementorと使いたいアドオン1:Envato Elements

Elementorにはたくさんのアドオンが用意されていますが、まず紹介したいのが「Envato Elements」です。このアドオンを導入することで、700以上ものテンプレートが使えるようになります。Elementorは自由かつ直観的にページを編集できるのが魅力ですが、やはり一からデザインを考えていくのは手間で骨の折れる作業です。むしろ自由度が高い分、どれをどのように配置するか一層悩んでしまうこともありえます。一方、「Envato Elements」を導入すれば、あらかじめ用意されたテンプレートをそのまま流用することが可能です。テンプレートの文字や画像を入れ替えるだけでページができますので、サイト作成の効率を飛躍的に上げることができるでしょう。テンプレートの種類は実に多彩なため、ECサイト、ランディングページ、ホームページなど、サイトやページの種類を問うこともありません。「700以上もテンプレートがあると自社に最適なデザインを見つけるのに苦労するのではないか」と懸念する人もいるかと思いますが、その点もしっかり配慮されています。「Corporate&Business」や「Food&Drink」など、コンセプト別に細かくテンプレートがカテゴリーに分けられているため、自身の求めているデザインを効率的に見つけることができるのです。

「Envato Elements」を導入する手順は、Elemntorを導入した際とまったく同じです。管理画面（ダッシュボード）の「プラグイン」から検索してインストールと有効化を行ってください。有効化を行うと、管理画面に新しく「Elements」という項目が表示されますので、これを選択します。登録画面に切り替わりますので、こちらで任意のメールアドレスを入力しチェックボックスにチェックを入れて下部の「Continue」ボタンを押せば登録は完了です。テンプレート一覧が表示されますのでお好みのデザインを選んでください。万が一ピッタリのテンプレートが見つからない場合は、時間をおいて再度探してみると良いでしょう。日々新たなテンプレートが更新されていますので、いずれお気に入りのデザインを見つけられることでしょう。

テンプレートをサイトに実装する方法も解説します。好きなテンプレートを選択すると、右側に「Import Template」と「Create New Page」の2つの実装方法が表示されますのでどちらかを選んでください。「Import Template」はElementorにテンプレートをインポートする方法で、「Create New Page」は、テンプレートを実装した固定ページを新たに作成する方法です。新規のページを作成する際は、「Create New Page」を選ぶと良いでしょう。好きなページ名を入力して「Create New Page」のボタンを押してください。既存の記事をリライトする際は「Import Template」を選んで、編集時に適用させれば実装できます。

Elementorと使いたいアドオン2:Premium Addons For elementor

「Premium Addons For elementor」もおすすめのアドオンです。デフォルトにプラスして豊富なウィジェットを使用できるようになるため、より理想に近いページを作成することができるようになります。レスポンシブ対応になっており、スマホ版でもきれいに表示される点も大きなメリットです。有料版では50以上の機能が使えるようになりますが、無料版でも20以上もの機能が使えるため、無料版をサンプル代わりに使ってみてから、必要な場合は有料版に乗り換えると良いでしょう。インストールの仕方もElementorと同じですので、問題なく導入することができるでしょう。有効化すれば自動的にウィジェットが追加され、新たなウィジェットは、Elementorの編集画面でウィジェットを選択する欄の直下で選択することができます。新たなバナーやボタン、タイトルなどの機能を使用して、さらに自由度の高いページカスタマイズを楽しんでください。

Elementorと使いたいアドオン3:ELEMENT PACK

「ELEMENT PACK」もさまざまな機能を追加できるアドオンです。追加機能が75以上とかなり充実しており、FAQ、オーディオプレイヤー、QRコード、ソーシャルメディア、コメント、チャートなどあらゆるカスタマイズが可能となります。ホームページのテンプレートも使えるので、容易にプロさながらといったデザインのページを作ることができるでしょう。一度入れておけば非常に重宝するアドオンです。

これまで紹介したアドオンと異なる点は、WordPressの管理画面からインストールできないことです。このアドオンは完全に有料のため、配布サイトで購入する形となります。価格は、1年更新制で年額99ドル、もしくは買い切り型で249ドルです。公式サイトには解説動画や数十のデモページが公開されているため、これらをじっくりチェックして利用する価値があると感じたら購入すれば良いでしょう。

まとめ

WordPressは、検索結果を含むさまざまなデザインや機能をカスタマイズすることで、より成果を出しやすいWEBサイトを構築することが可能です。特に、プラグインを使用すればプログラミングに詳しくなくても、プロ並みのサイトが作れてしまうのは大きな強みといえるでしょう。