Google検索結果をWordPressに表示する

ここではGoogle検索の結果をWordPressに表示するショートコードを作成していきたいと思います。
そのために、GoogleのAPIであるCustom Search APIを使っていきます。

Custom Search APIの有効化
Custom Search Engineの登録
ショートコードの作成
ショートコードの使い方
検索結果
ショートコードの引数
コードの解説
検索結果
1. 6. ショートコード登録
検索結果

Custom Search APIの有効化

APIを使うためには、Custom Search APIを有効にして、APIキーを取得する必要があります。

Google Cloud ConsoleでCustom Search APIを検索します。

Custom Search APIを有効にします。

APIキーがない場合は、認証情報からAPIキーを作成します。

表示されたAPIキーはメモしておきます。

Custom Search Engineの登録

続いて、
Custom Search Engine
にアクセスします。

エンジン名などを入力し、作成します。

以下のような貼り付けコードが表示されます。

<script async src="https://cse.google.com/cse.js?cx=xxxxxx">
</script>
<div class="gcse-search"></div>

ここで表示されるcxの文字列をメモしておきます

ショートコードの作成

以下のコードをfunctions.phpに追記します。

function get_google_search_results($keyword, $site = '', $limit = 5, $date_restrict = '', $exact_terms = '', $exclude_terms = '', $title_filter = '') {
    $api_key = GOOGLE_API_KEY;  // wp-config.phpに保存したAPIキー
    $cx = GOOGLE_CX;            // wp-config.phpに保存したカスタム検索エンジンID

    // Google Search APIのURL作成
    $query_params = [
        'q' => $keyword,
        'key' => $api_key,
        'cx' => $cx,
        'num' => $limit,
    ];

    if ($site) {
        $query_params['siteSearch'] = $site;
        $query_params['siteSearchFilter'] = 'i';  // デフォルトで「サイトに一致する結果のみ」
    }
    if ($date_restrict) {
        $query_params['sort'] = 'date:r:' . $date_restrict;
    }
    if ($exact_terms) {
        $query_params['exactTerms'] = $exact_terms;
    }
    if ($exclude_terms) {
        $query_params['excludeTerms'] = $exclude_terms;
    }

    // クエリをURLエンコードしてURLを構築
    $api_url = 'https://www.googleapis.com/customsearch/v1?' . http_build_query($query_params);

    // Google Search APIから結果を取得
    $response = wp_remote_get($api_url);
    $results = [];
    if (!is_wp_error($response)) {
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);
        if (isset($data['items'])) {
            $results = $data['items'];
        }
    }

    // タイトルフィルターが指定されている場合、結果をフィルタリング
    if ($title_filter) {
        $results = array_filter($results, function($item) use ($title_filter) {
            return stripos($item['title'], $title_filter) !== false;  // タイトルにキーワードが含まれているかチェック（大文字・小文字を区別しない）
        });
    }

    // サムネイル画像の取得（cse_image -> cse_thumbnail -> og:image）
    foreach ($results as &$item) {
        $thumbnail = '';

        // cse_imageがあれば優先的に使用
        if (isset($item['pagemap']['cse_image'][0]['src'])) {
            $thumbnail = $item['pagemap']['cse_image'][0]['src'];
        }
        // cse_imageがなければ、cse_thumbnailを使用
        elseif (isset($item['pagemap']['cse_thumbnail'][0]['src'])) {
            $thumbnail = $item['pagemap']['cse_thumbnail'][0]['src'];
        }
        // それでもなければ、og:imageを使用
        elseif (isset($item['pagemap']['metatags'][0]['og:image'])) {
            $thumbnail = $item['pagemap']['metatags'][0]['og:image'];
        }

        // 結果にサムネイル画像を追加
        $item['thumbnail'] = $thumbnail;



    }


    return $results;
}


function google_search_shortcode($atts) {
    $atts = shortcode_atts([
        'keyword' => '',
        'site' => '',
        'limit' => 5,
        'date_restrict' => '',
        'exact_terms' => '',
        'exclude_terms' => '',
        'title_filter' => ''
    ], $atts);

    $results = get_google_search_results($atts['keyword'], $atts['site'], $atts['limit'], $atts['date_restrict'], $atts['exact_terms'], $atts['exclude_terms'], $atts['title_filter']);


    // HTML生成
    ob_start();
    ?>
    <div class="google-search-results">
        <h2>検索結果</h2>
        <?php if ($results): ?>
            <ul class="google-search-list">
                <?php foreach ($results as $item): ?>
                    <a href="<?php echo esc_url($item['link']); ?>" target="_blank" class="google-search-item">
                        <li>


                            <!-- タイトル -->
                            <p class="google-search-title"><?php echo esc_html($item['title']); ?></p>

                            <!-- サムネイルとスニペット -->
                            <div class="google-search-thumbnail-snippet">
                                <!-- サムネイル画像 -->
                                <?php if (!empty($item['thumbnail'])): ?>
                                    <img class="google-search-thumbnail" src="<?php echo esc_url($item['thumbnail']); ?>" alt="Thumbnail">
                                <?php endif; ?>

                                <!-- スニペット -->
                                <p class="google-search-snippet"><?php echo esc_html($item['snippet']); ?></p>
                            </div>
                        </li>
                    </a>
                <?php endforeach; ?>
            </ul>

        <?php else: ?>
            <p>検索結果が見つかりませんでした。</p>
        <?php endif; ?>
    </div>
    <?php
    return ob_get_clean();


}

add_shortcode('google_search', 'google_search_shortcode');

wp-config.phpにAPIキーやカスタムエンジンの情報を追記します。
以下を追加してください。

define('GOOGLE_API_KEY',"APIキー");
define('GOOGLE_CX', 'CXコード');

表示スタイルを整えるために、style.cssに以下を追記してください。

/*Google Search*/
/* 親リストのスタイル */
.google-search-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 各検索結果アイテムのスタイル */
.google-search-item {
    display: block; /* 全体をリンクとしてクリック可能に */
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none; /* リンクのデフォルト装飾を削除 */
    color: inherit;
    transition: background-color 0.3s;
    background-color: #fff;
}

.google-search-item:hover {
    background-color: #f0f8ff;
}

.google-search-date {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.google-search-title {
    font-size: 18px;
    font-weight: bold;
    color: #0073aa;
    margin-bottom: 10px;
}

/* サムネイルとスニペットのコンテナ */
.google-search-thumbnail-snippet {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    flex-wrap: wrap; /* 必要に応じて折り返し */
}

.google-search-snippet {
    font-size: 14px;
    color: #555;
    flex-grow: 1;
}

/* サムネイル画像のスタイル */
.google-search-thumbnail {
    width: 200px; /* 横幅を2倍に */
    height: 120px; /* 縦幅を1.2倍に */
    object-fit: cover; /* サムネイルのアスペクト比を保持しつつ枠内に収める */
    border: 1px solid #ddd;
    border-radius: 5px;
    flex-shrink: 0;
}

/* レスポンシブデザイン: 画面幅が768px以下の場合 */
@media (max-width: 768px) {
    .google-search-item {
        display: flex;           /* 必ずflexboxを適用 */
        flex-direction: column;  /* 子要素を縦に並べる */
        align-items: flex-start; /* 左揃えに変更 */
        text-align: left;        /* テキストも左揃え */
    }

    .google-search-thumbnail-snippet {
        display: flex;
        flex-direction: column;  /* サムネイルとスニペットを縦に並べる */
        gap: 10px;               /* 縦方向の間隔を調整 */
    }

    .google-search-thumbnail {
        width: 60%;             /* サムネイルを幅いっぱいにする */
        height: auto;            /* 高さを自動調整 */
        margin-bottom: 10px;     /* サムネイルとスニペットの間に余白を追加 */
    }

    .google-search-snippet {
        text-align: left;        /* スニペットも左揃え */
    }
}

ショートコードの使い方

それでは、このショートコードを実際に使ってみます。

新規投稿を作成し、以下のようなショートコードを追加します。

    
        検索結果
                    
                                    
                        
                           

                            
                            【初心者向け】WordPressの使い方！インストールからブログの ...

                            
                            
                                
                                                                    
                                
                                
                                Dec 6, 2023 ... WordPressの管理画面で検索して適用する方法 · 「外観」をクリックする. 左側のメニューより外観をクリックしてください。 · 「新規追加」をクリックする.
                            
                        
                    
                                    
                        
                           

                            
                            【初心者向け】WordPressの使い方マニュアル！もう難しいなんて ...

                            
                            
                                
                                                                    
                                
                                
                                Oct 25, 2023 ... 使い方1．管理画面でプラグインをインストールする · WordPressプラグインの管理画面. 管理画面の左サイドメニュー「プラグイン」→「新規追加」へ進みます ...
                            
                        
                    
                                    
                        
                           

                            
                            WordPressの使い方 Webサイトを作る基本的な流れ

                            
                            
                                
                                
                                
                                テーマとは？ WordPressのテーマとは、Webサイト全体のテンプレートのことです。 テーマを変更すれば簡単にWebサイトのデザインや構成を変えることができます。 WordPress ...
                            
                        
                    
                                    
                        
                           

                            
                            【初心者向け】WordPressの使い方マニュアル！投稿から設定方法 ...

                            
                            
                                
                                                                    
                                
                                
                                Sep 6, 2024 ... SSL設定を行う · コントロールパネルの右メニューから「ドメイン」をクリックする コアサーバーのドメイン設定画面 · SSL設定を行うドメイン名をクリック ...
                            
                        
                    
                                    
                        
                           

                            
                            【総まとめ版】初心者向けWordPressの使い方マニュアル - 株式会社 ...

                            
                            
                                
                                                                    
                                
                                
                                Aug 17, 2024 ... More videos on YouTube · 外観＞ウィジェットでサイドバーやフッターを設定する · 外観＞カスタマイズから色やロゴなどの設定を行う · 設定＞表示設定で固定 ...

これを表示すると次のように、タイトル、サムネイル、スニペット情報が表示されます。

ショートコードの引数

ショートコードの引数は以下を用意しています。

‘keyword’ : 検索キーワード
‘site’ : 検索対象とするサイトURL
‘limit’: 検索件数（デフォルト5、max10）
‘date_restrict’ : 過去n日に対象を絞る（詳細後述）
‘exact_terms’ : 除外キーワード
‘exclude_terms’ : 検索に含めるキーワード
‘title_filter’: この用語をタイトルに含むもののみ表示

date_restrictは、

過去10日：d10
過去1ヶ月：m1
過去2年：y2

のようにして検索対象期間を絞り込みます。

コードの解説

このコードは、WordPressでGoogleのカスタム検索APIを使用して検索結果を取得し、ショートコードを使って検索結果をHTMLで表示するものです。コードをいくつかの塊に分けて解説します。

1. get_google_search_results 関数の基本構造

function get_google_search_results($keyword, $site = '', $limit = 5, $date_restrict = '', $exact_terms = '', $exclude_terms = '', $title_filter = '') {
    $api_key = GOOGLE_API_KEY;  // wp-config.phpに保存したAPIキー
    $cx = GOOGLE_CX;            // wp-config.phpに保存したカスタム検索エンジンID

引数:
$keyword: 検索するキーワード。
$site: 特定のサイト内を検索するためのドメイン。
$limit: 結果の数（最大10）。
$date_restrict: 日付制限（例: 20230101:20231231）。
$exact_terms: 結果に含むべき完全一致の用語。
$exclude_terms: 結果から除外する用語。
$title_filter: タイトルに含まれるキーワードで結果をフィルタリング。

2. Google API URLの構築

    $query_params = [
        'q' => $keyword,
        'key' => $api_key,
        'cx' => $cx,
        'num' => $limit,
    ];

    if ($site) {
        $query_params['siteSearch'] = $site;
        $query_params['siteSearchFilter'] = 'i';
    }
    if ($date_restrict) {
        $query_params['sort'] = 'date:r:' . $date_restrict;
    }
    if ($exact_terms) {
        $query_params['exactTerms'] = $exact_terms;
    }
    if ($exclude_terms) {
        $query_params['excludeTerms'] = $exclude_terms;
    }

    $api_url = 'https://www.googleapis.com/customsearch/v1?' . http_build_query($query_params);

必要なパラメータを$query_paramsにまとめ、http_build_queryでURLにエンコードしてAPIリクエスト用のURLを作成します。
– 条件処理:
– $site: 特定のサイトに絞る。
– $date_restrict: 検索結果の期間指定。
– $exact_terms, $exclude_terms: キーワードのフィルタリングを設定。

3. APIリクエストと結果の取得

    $response = wp_remote_get($api_url);
    $results = [];
    if (!is_wp_error($response)) {
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);
        if (isset($data['items'])) {
            $results = $data['items'];
        }
    }

wp_remote_get: WordPressのHTTP APIを使用してGoogle APIにリクエストを送信。
エラーがない場合に、レスポンスのボディをデコードして検索結果を取得。
$results:
APIから取得した検索結果がitemsに格納されており、それを抽出します。

4. タイトルフィルタとサムネイル処理

    if ($title_filter) {
        $results = array_filter($results, function($item) use ($title_filter) {
            return stripos($item['title'], $title_filter) !== false;
        });
    }

    foreach ($results as &$item) {
        $thumbnail = '';
        if (isset($item['pagemap']['cse_image'][0]['src'])) {
            $thumbnail = $item['pagemap']['cse_image'][0]['src'];
        } elseif (isset($item['pagemap']['cse_thumbnail'][0]['src'])) {
            $thumbnail = $item['pagemap']['cse_thumbnail'][0]['src'];
        } elseif (isset($item['pagemap']['metatags'][0]['og:image'])) {
            $thumbnail = $item['pagemap']['metatags'][0]['og:image'];
        }
        $item['thumbnail'] = $thumbnail;
    }

タイトルフィルタ:
$title_filterでタイトルに特定のキーワードを含む結果のみを抽出。
サムネイル取得:
pagemapから画像情報を取得。cse_image, cse_thumbnail, og:imageの優先順位でサムネイルを追加。

5. ショートコード用HTML生成

function google_search_shortcode($atts) {
    $atts = shortcode_atts([...], $atts);
    $results = get_google_search_results(...);

    ob_start();
    ?>
    <div class="google-search-results">
        <h2>検索結果</h2>
        <?php if ($results): ?>
            <ul class="google-search-list">
                <?php foreach ($results as $item): ?>
                    <a href="<?php echo esc_url($item['link']); ?>" target="_blank" class="google-search-item">
                        <li>
                            <p class="google-search-title"><?php echo esc_html($item['title']); ?></p>
                            <div class="google-search-thumbnail-snippet">
                                <?php if (!empty($item['thumbnail'])): ?>
                                    <img class="google-search-thumbnail" src="<?php echo esc_url($item['thumbnail']); ?>" alt="Thumbnail">
                                <?php endif; ?>
                                <p class="google-search-snippet"><?php echo esc_html($item['snippet']); ?></p>
                            </div>
                        </li>
                    </a>
                <?php endforeach; ?>
            </ul>
        <?php else: ?>
            <p>検索結果が見つかりませんでした。</p>
        <?php endif; ?>
    </div>
    <?php
    return ob_get_clean();
}

$resultsの内容を元にHTMLを生成。
タイトル、スニペット、サムネイルを表示。
ショートコード:
検索結果検索結果が見つかりませんでした。で呼び出され、結果を埋め込む。

6. ショートコード登録

add_shortcode('google_search', 'google_search_shortcode');

add_shortcodeでWordPressにショートコード


        検索結果
                    検索結果が見つかりませんでした。

を登録。これにより、任意の投稿やページで検索機能を利用できます。

キャッシュ機能を使って、APIの呼び出し回数を減らす方法は以下で紹介しています。

404 NOT FOUND | lifetechia

テクノロジーを活用して人生をより豊かに