WordPressでオリジナル検索機能を実装する方法

初心者さん

WordPressで自作の検索機能をつけたい。

このような疑問をお持ちの方に向けて書いています。

今回は、このような疑問に答えていきます。

僕が運営しているこのWordPressのブログ内にオリジナルの検索機能を作ったので、どのように実装したのかご紹介します。

プラグインもあるようですが、僕の場合はオリジナルで実装したので参考にしてみてください。

▼この記事で理解できる点は以下のような感じになります。

WordPressをカスタマイズして検索機能を作りたいと考えている方は最後までご覧になってみてください。

WordPressにオリジナル検索機能を実装する上で注意した点

WordPressにオリジナル検索機能を実装する上で注意した点がいくつかあります。いくつか目標というかゴールを決めました。

以下のような目標を持って検索機能を実装しはじめました。

シンプルなデザインとレイアウトにすること

検索フォームにはフラットデザインを採用しました。検索結果の方で画像を使っているため、そちらに注目してもらうためとかでしょうか。

操作性の良いフォームにすること

チェックボックスはボタンのような感じにすることで、チェックしやすくなっていると思います。ポチポチしやすいようにしました。

キーワード検索には、サジェスト機能を追加してプログラミングスクール名を途中まで入力すると、候補が表示されるようにしています。

スマートフォンでも使える

スマートフォンのレイアウトも最低限整えました。最初ガタガタになっていたので、これはと思いしかたなく修正した感じです(´・ω・｀)ｼｮﾎﾞｰﾝ

WordPressで検索機能を実装する難易度は？

▼今回作った検索機能は以下のページで見られるので、使ってみてください。

上のようなWordPressで検索機能を実装する場合に、どのくらいのスキルがあれば可能なのか簡単に紹介していきます。

WordPressカスタマイズに必要な技術

僕がどのくらいのレベルか簡単に紹介しておきます。

WordPressに関しては、それほど詳しくないので実装も独自で調べてなんとなくこんな感じでできそうという状況で作りはじめました。

公開するまで、1週間程度かかりました。（普段はフルタイムで業務委託しているので、業後3時間 ×　1週間くらいでしょうか）

今回の機能でいうと、以下のみで実装可能です。少しだけJavaScriptも使っていますが、なくても気にならない程度です。

WordPressのテンプレートの理解とは

WordPressの場合、「投稿」の機能と「固定ページ」の機能があります。そこで記事を書くとテンプレート（WordPressのテーマ機能）で優先順位があり、高いものから使われていくということになります。

一般的なテーマではpage.phpが固定ページのテンプレートとして使われることが多いと思いますが、page.phpに手を入れてしまうと、すべての固定ページに影響がでるため、それより優先度の高いpage-{slug}.phpを利用します。

▼例えば固定ページの場合、以下の優先順位でテーマが呼ばれます。

優先度の高いテンプレートを作る理由は...

優先度の高いテンプレートを作ると、その固定ページではpage.phpではなくpage-{slug}.phpが適用されるようになります。

そうすることで、レイアウトを変更することができます。ブログのレイアウトと検索のレイアウトを変更したかったので優先度の高いテンプレートを作りました。

ブログのテンプレートは2カラム。検索の方は1カラム

※投稿のレイアウトを例にしましたが、プロフィールなどの固定ページも同じレイアウトになっています。

検索の方は、右のプロフィールを表示しているカラムを削除し1カラムにして、広く使っています。

PHPの基本

PHPのレベルとしては、検索フォームから受け取った値を処理してテーブルの検索ができるレベルが必要です。

今回の検索機能では、テーブルを2つ追加しただけなので、SQLも複雑にはならないのでSELECTの基本がわかっていれば実装可能です。

WordPressにオリジナルの検索機能を実装する手順

順番に実装した手順を紹介していきます。

テーブルの追加と読み込みの設定をする

WordPerssを構築した時に、自動でデータベースが作成され、WordPressで使われるテーブルが追加されていると思います。

契約しているサーバーなどで接続方法などは割愛しますが、phpmyadminなどのツールで接続してテーブルを追加します。
※バックアップなど忘れずに。

▼wp-content/db.phpに追加したテーブルの情報を追加して、アクセスできるように設定します。例えば、carsというテーブルを追加しています。(phpmyadminでは、wp_carsみたいになる。)

public $tables = array(
    'posts',
    'comments',
    'links',
    'options',
    'postmeta',
    'terms',
    'term_taxonomy',
    'term_relationships',
    'termmeta',
    'commentmeta',
    // ここにテーブル名を追加
    // 例
    'cars'
);

追加してテーブルを取得できているか確認

page.phpあたりに書いてみる。事前にphpmyadminでデータ登録し、以下のようにSELECTしてみて取得できていたらOKです。
※SQLインジェクションなど対策はしてください。

// テーブルを取得するためのオブジェクト
global $wpdb;
// SELECT
$car_list = $wpdb->get_results("SELECT * FROM $wpdb->cars")

検索フォームを作成

例えば、以下のようにテーマ配下に適当なphpファイルを作ってフォームを作成します。

// {ご自分のテーマ}/cars.php
<form action="<?php echo home_url( '/{固定ページ名}' ); ?>" method="get">
  <input type="text" name="keyword">
</form>

固定ページ用のテンプレートを作成

固定ページ名が/carsだとすると、page-cars.phpという名前のpage用テンプレートを作成。

上記で作成したcars.phpをインポートします。

// page-cars.php

<?php get_template_part( 'cars' ); ?>

検索結果の処理を作成

固定ページcarsが公開されているのであれば、検索フォームが表示されているはず。（固定ページには何も書いていなくても、テンプレートの方に書いてあるため）

上でフォームの送信先を{固定ページ名}にしていましたが、以下のような感じにして、actionを設定すると自分自身に送信することになります。

<?php echo home_url( '/cars' ); ?>

検索フォームを受け取るには、function.phpに処理を書きます。

// function.php

function get_cars() {
  global $wpdb;

  // このあたりでいろいろ処理する
  // バリデーションとか対策
  // キーワードを受け取ってテーブルを検索するSQL作る
  // 検索結果を整形する処理を書くとか

  // 全件SELECTしてみる
  $car_list = $wpdb->get_results("SELECT * FROM $wpdb->cars")

  // 取得データを返す
  return $car_list;
}

あとは、テンプレートから呼んで上げるだけです。関数呼んでechoするとテーブルで取得した内容が表示されるはず。

あとは、いろいろと表示内容を整えてあげるだけです。

// page-cars.php

<?php get_template_part( 'cars' ); ?>
// ここに追加
// 検索結果を表示
<?php echo get_cars(); ?>

WordPressでオリジナル検索機能を実装する方法まとめ

今回は、WordPressにオリジナルの検索機能を実装してみました。

記事の検索する関数などは、WordPress側で準備されているので簡単に実装できると思いますが、独自（オリジナル）の検索機能を作るには一手間必要です。

今回実装でCSSには触れていませんが、ここに少し時間使いました。一番時間がかかったのは、データの登録です。（登録に4日くらい）プログラミングスクールのサイトを見てポチポチしていました（泣）

しばらくPHPは業務で書いていないので、調べながら書いてみましたがRailsやPythonの方に慣れたせいかPHPやだなー思いました（笑）

もっとこうした方がいいよとか、おすすめのプラグインなどがあったら教えてくれると助かります。また実装した検索の使い勝手なども教えてくれるとうれしいです。