WordPressでGoogleのCustom Search APIを使ってみる

1. プロジェクトを作成してCustom Search APIを設定する

  1. (ない場合)Google アカウントの作成でアカウントを作成する
  2. (ない場合)Google Cloud Platformでプロジェクトを作成する
  3. 画面上部でプロジェクトを選択する
  4. APIとサービスを有効化リンクで[APIライブラリ]画面を表示する
  5. 「Custom Search API」を検索して選択、[有効化]ボタンで有効にする
  6. [ナビゲーションメニュー] > [APIとサービス] > [認証情報] > 画面上部の[認証情報作成] > [APIキー]でAPIキーを作成する
    • f:id:ponsuke_tarou:20200626104859p:plain
  7. APIキーをメモっておく
  8. ポップアップの[キーを制限]リンクから[API キーの制限と名前変更]画面を表示して制限情報を設定して[保存]ボタンで保存する
    • [API の制限] > [キーを制限] : 「Custom Search API」を選択
    • f:id:ponsuke_tarou:20200626105727p:plain

2. 検索エンジンを作成する

  1. Programmable Search Engine by Googleを表示して[Get started]ボタンで[Programmable Search]画面を表示する
  2. [新しい検索エンジン]で画面を表示して検索エンジンを作成する
  3. [コントロールパネル]ボタンで画面を表示する
    • f:id:ponsuke_tarou:20200626110820p:plain
  4. 必要に合わせて検索エンジンを設定する
  5. [基本]タブ > [検索エンジン ID]から検索エンジンIDをメモっておく
    • f:id:ponsuke_tarou:20200629120126p:plain

3. WordPressで検索処理を作る

PHPで検索処理を作る
  1. WordPressにショートコードを使ってPHPを埋め込む方法 - Qiitaを参考にショートコードをfunctions.phpに作る
  2. 検索結果を表示する処理をoutput-google-block-quote.phpに作る
  3. 検索をする処理をoutput-google-block-quote.phpに作る
functions.php : ショートコードを設定する
<?php
// ...省略...
/** Custom Search APIでGoogle検索した結果を引用符形式で表示する. */
function google_block_quote() {
    ob_start();
    get_template_part('output-google-block-quote');
    return ob_get_clean();
}
add_shortcode('search_google', 'google_block_quote');
output-google-block-quote.php : 検索結果を表示する
<?php
require_once('search-google.php');
$items = search_google();
?>

<h1>今日のGoogle検索</h1>
<?php if (count($items) === 0) : ?>
<p>検索したけど結果なし</p>
<?php else : ?>

<?php foreach ($items as $key => $item) : ?>
<blockquote class="wp-block-quote">
<a href="<?php echo $item['link']; ?>"><?php echo $item['title']; ?></a>
<p><?php echo $item['snippet']; ?></p>
</blockquote>
<br>
<?php endforeach; ?>

<?php endif; ?>
output-google-block-quote.php : 検索をする
<?php
/**
 * GoogleのCustom Search APIでの検索結果を取得する.
 * @return array 検索結果.
 */
function search_google(): array
{
    $reqest_url = create_reqest_url();
    $retJson = file_get_contents($reqest_url, true);
    $ret = json_decode($retJson, true);
    return $ret['items'];
}

/**
 * Custom Search APIへのリクエスト内容含めたURLを作成する.
 * @return string リクエスト内容含めたURL.
 */
function create_reqest_url(): string
{
    $paramAry = array(
        // 検索する文字列
        'q' => 'ponsuke tarou',
        // メモっておいたAPIキー
        'key' => {APIキー},
        // メモっておいた検索エンジンID
        'cx' => {検索エンジンID},
        // 検索結果をjson形式で取得する
        'alt' => 'json',
        // 取得開始順位(1~10位までの検索結果を取得する)
        'start' => 1
    );
    $param = http_build_query($paramAry);
    return 'https://www.googleapis.com/customsearch/v1?'. $param;
}
?>

4. ブログの投稿にショートコードを埋め込む

  1. WordPressの管理画面 > [Posts] > [Add New]ボタンで投稿画面を表示する
  2. タイトルを入力する
  3. 本文に「[search_google]」と書く
    • f:id:ponsuke_tarou:20200629183357p:plain
  4. [Publish]ボタンで公開する

5. 結果を表示する

f:id:ponsuke_tarou:20200629183528p:plain
検索結果が表示される

もうちょっと使ってみた

qiita.com