会社のコーポレートサイトの他にも技術的な情報をまとめた記事を投稿するブログサイトを持っています。
今回、ブログサイトで新しく記事を投稿したら、自動的にコーポレートサイトのお知らせとして掲載されるようにしたいと思い、その実現方法を調べていました。
ChatGPTに確認したところ、以下の３つのやり方があるとのことです。
| 方法 | 難易度 | 即時反映 | カスタマイズ性 |
|---|
| RSSフィード | ★☆☆（簡単） | ×（遅延あり） | △（プラグイン次第） |
| REST API | ★★☆（中級） | ○（適宜取得） | ○（デザイン自由） |
| Webhooks & API連携 | ★★★（上級） | ◎（リアルタイム） | ◎（完全制御） |
コーポレートサイトには十分な数のプラグインが入っているので、できるだけプラグインを使いたくはありませんでした。
ということで、あまり難しくなく対応ができるREST APIでの実装を行い、無事に目的を達成することができましたので、同じように他のサイトの投稿を自動的にお知らせとして追加したいという方の参考に記事を作成いたします。
2つのWordPressサイトを連携させたい
あらためてやりたかったことは、以下の２つのサイトがあるので、ブログサイトの更新をコーポレートサイトのお知らせに自動反映させる。です。
- コーポレートサイト（会社情報やサービス紹介など）
- ブログサイト（技術情報、ノウハウ記事など）
手作業で両方のサイトに同じ情報を投稿するのは非効率ですし、更新忘れも起こりやすくなります。
REST APIを使った連携方法
WordPressには標準でREST APIが搭載されています。
これを使えば、ブログサイトの投稿データをコーポレートサイトから取得し、表示させることができるということでChatGPTに確認しつつ作業を進めました。
何度かの修正をしてもらいつつ、最終的に出来上がったコードが以下です。
// ブログの投稿を取得（キャッシュ機能付き）
function get_latest_blog_posts() {
$cache_key = 'latest_blog_posts'; // キャッシュのキー
$cache_expiration = 6 * HOUR_IN_SECONDS; // 6時間（21600秒）
// キャッシュがある場合はそれを返す
$cached_data = get_transient($cache_key);
if ($cached_data !== false) {
return $cached_data;
}
// キャッシュがない場合はAPIからデータを取得
$response = wp_remote_get('https://blog.astha.jp/wp-json/wp/v2/posts?per_page=5');
if (is_wp_error($response)) {
return '最新情報を取得できませんでした。';
}
$posts = json_decode(wp_remote_retrieve_body($response), true);
// CSSを適用
$output = '<style>
.blog-list { list-style: none; padding: 0; }
.blog-item { display: flex; align-items: flex-start; margin-bottom: 8px; }
.blog-date { flex-shrink: 0; width: 100px; font-weight: bold; color: #333; }
.blog-title { flex-grow: 1; }
</style>';
$output .= '<ul class="blog-list">';
foreach ($posts as $post) {
// 日付のフォーマット ■YYYY.MM.DD
$date = '■' . date('Y.m.d', strtotime($post['date']));
// HTMLリストの作成
$output .= '<li class="blog-item">';
$output .= '<span class="blog-date">' . esc_html($date) . '</span>';
$output .= '<span class="blog-title"><a href="' . esc_url($post['link']) . '">' . esc_html($post['title']['rendered']) . '</a></span>';
$output .= '</li>';
}
$output .= '</ul>';
// 取得したデータをキャッシュに保存（6時間）
set_transient($cache_key, $output, $cache_expiration);
return $output;
}
// ショートコードを登録
add_shortcode('latest_blog_posts', 'get_latest_blog_posts');このコードをコーポレートサイトのfunctions.phpに追加します。
※コードの解説はもう少し下の方で行います。
表示イメージ
このコードを実装すると、以下のようなリスト形式でブログ投稿が表示されます。
- ■2025.03.17 【初心者必見！】GPTsの完全ガイド：初心者のための基本から作成・活用まで
- ■2025.03.07 【初心者必見！】ChatGPTの始め方＆基本の使い方を初心者向けに解説！他のAIとの比較も！
コード解説
このコードでできること
- ブログサイト（https://blog.astha.jp）から最新の5件の記事を取得
- 取得した記事を、リスト（箇条書き）で表示
- 記事の日付を「■YYYY.MM.DD」の形式で表示
- スタイルを適用して、日付とタイトルを横並びに整える
- ショートコード [latest_blog_posts] を使って、好きな場所にリストを表示
コードの解説
1.関数を定義
function get_latest_blog_posts() {functionは 「関数を作る」 という意味です。get_latest_blog_posts()は関数の名前です。この関数を呼び出すと、最新記事リストが作成されます。
2.キャッシュキーと有効期限を設定
$cache_key = 'latest_blog_posts'; // キャッシュのキー
$cache_expiration = 6 * HOUR_IN_SECONDS; // 6時間（21600秒）- $cache_key = ‘latest_blog_posts’;
- キャッシュの「名前」を設定。
- これをキーにしてデータを保存・取得する。
- $cache_expiration = 6 * HOUR_IN_SECONDS;
- HOUR_IN_SECONDS → 1時間（= 3600秒）
- 6 * HOUR_IN_SECONDS → 6時間（= 21600秒）
- キャッシュの有効期限を「6時間」に設定。
メリット
✅ キャッシュキーを指定することで、他のキャッシュと混ざらない
✅ 6時間ごとにデータが更新され、適切な間隔で最新情報が反映される
3.キャッシュがある場合、それを返す
$cached_data = get_transient($cache_key);
if ($cached_data !== false) {
return $cached_data;
}- get_transient($cache_key)
- $cache_key に保存されているキャッシュを取得。
- キャッシュが存在しない場合 は false が返る。
- if ($cached_data !== false) { return $cached_data; }
- キャッシュがあれば、それを返して APIを呼び出さない
- つまり、6時間以内なら キャッシュデータをそのまま使う
メリット
✅ APIを無駄に呼ばず、サーバー負荷を軽減
✅ ページの表示速度が速くなる（キャッシュデータをすぐに表示できる）
4.ブログサイト（外部サイト）から記事データを取得
$response = wp_remote_get('https://sample.jp/wp-json/wp/v2/posts?per_page=5');- wp_remote_get() → WordPressの関数 で、指定したURLからデータを取得します。
- https://sample.jp/wp-json/wp/v2/posts?per_page=5 → WordPressのREST APIのURL
- wp-json/wp/v2/posts → 記事一覧を取得するAPIのアドレス
- ?per_page=5 → 最新の5件 だけ取得する設定
- つまり、この1行で「ブログサイトの最新5件の記事データ」を取ってきています！
5.データ取得に失敗した場合の処理
if (is_wp_error($response)) {
return '最新情報を取得できませんでした。';
}- is_wp_error($response) → エラーが発生していないかチェック
- もしエラーなら ‘最新情報を取得できませんでした。’ と表示して処理を終了する。
6.JSONデータをPHPの配列に変換
$posts = json_decode(wp_remote_retrieve_body($response), true);- wp_remote_retrieve_body($response)
- wp_remote_get() で取得したデータの「中身」を取り出す関数。
- json_decode(…, true)
- JSON（JavaScriptのデータ形式）をPHPの配列に変換 する関数。
- これで $posts の中に「ブログサイトの最新5件の投稿データ」が入る！
7.CSSを適用
$output = '<style>
.blog-list { list-style: none; padding: 0; }
.blog-item { display: flex; align-items: flex-start; margin-bottom: 8px; }
.blog-date { flex-shrink: 0; width: 100px; font-weight: bold; color: #333; }
.blog-title { flex-grow: 1; }
</style>';- style タグの中にCSSを記述し、リストの見た目を整えています。
- .blog-list → リストのスタイルを指定（リストの点を消す）
- .blog-item → 日付とタイトルを横並びにする
- .blog-date → 日付部分の幅を100pxに固定（揃えるため）
- .blog-title → タイトルが長くなっても適切に表示されるように調整
8.HTMLリストの作成
$output .= '<ul class="blog-list">';'<ul>'→ HTMLのリスト（箇条書き）を作成class="blog-list"→ 先ほどのCSSを適用するための設定
9.記事データを1つずつ取り出して表示
foreach ($posts as $post) {- $posts には「最新5件の投稿データ」が入っています。
- foreach ($posts as $post) → 1つずつ取り出して、リストの中に表示
10.日付を取得してフォーマット
$date = '■' . date('Y.m.d', strtotime($post['date']));- $post[‘date’] → 投稿の日付（例：2025-03-18T12:00:00）
- strtotime($post[‘date’]) → 文字のデータを「日付データ」に変換
- date(‘Y.m.d’, …) → YYYY.MM.DD の形式に変換
- ‘■’ . … → 日付の前に 「■」を追加 して見やすくする
11.HTMLリストに記事タイトルを追加
$output .= '<li class="blog-item">';
$output .= '<span class="blog-date">' . esc_html($date) . '</span>';
$output .= '<span class="blog-title"><a href="' . esc_url($post['link']) . '">' . esc_html($post['title']['rendered']) . '</a></span>';
$output .= '</li>';・<li class="blog-item"> → リストの1つの項目
・<span class="blog-date"> → 日付を表示
・<span class="blog-title"> → 記事タイトルを表示
・<a href="..."> → 記事のリンクをつける
・esc_html() / esc_url() → セキュリティ対策（安全なHTML＆URLに変換）
12.リストを閉じて完成
$output .= '</ul>';</ul> → リストを閉じる
13.取得したデータをキャッシュに保存
set_transient($cache_key, $output, $cache_expiration);- set_transient($cache_key, $output, $cache_expiration);
- $output（最新記事のリストHTML）を 6時間キャッシュ
- 6時間経過後にキャッシュが削除される
メリット
✅ 6時間ごとに最新記事を自動取得
✅ 必要なタイミングでだけAPIを実行するので負荷を最小限にできる
14.関数の結果を返す
return $output;ここまで作成したHTMLリストを関数の結果として返す
15.ショートコードを登録
add_shortcode('latest_blog_posts', 'get_latest_blog_posts');- WordPressの 「ショートコード機能」 を使い、
[latest_blog_posts]というコードで記事リストを表示できるようにする！
使い方
- 上記のコードをコーポレートサイトの
functions.phpに追加します - コーポレートサイトの任意のページや投稿、またはウィジェットに
[latest_blog_posts]というショートコードを挿入します - 自動的にブログサイトの最新記事が表示されます
カスタマイズのポイント
取得する記事数の変更
per_page=5の部分を変更することで、取得する記事数を調整できます。
※取得元になるサイトのURLも忘れずに変更してください。
phpコピー$response = wp_remote_get('https://sample.jp/wp-json/wp/v2/posts?per_page=10');
表示スタイルの変更
CSS部分を編集することで、表示デザインを自由にカスタマイズできます。
cssコピー.blog-list { list-style: none; padding: 0; }
.blog-item { display: flex; align-items: flex-start; margin-bottom: 12px; }
.blog-date { flex-shrink: 0; width: 100px; font-weight: bold; color: #0066cc; }
.blog-title { flex-grow: 1; }
特定のカテゴリーのみ表示
特定のカテゴリーに属する記事だけを表示したい場合は、APIリクエストURLにカテゴリーIDを追加します。
phpコピー$response = wp_remote_get('https://sample.jp/wp-json/wp/v2/posts?categories=5&per_page=5');
「何日前」表記にする
記事が投稿されてからの経過日数を表示するので「3日前」のような表記になります。
$days_ago = human_time_diff(strtotime($post['date']), current_time('timestamp')) . '前';
$output .= ' <span style="font-size: 0.8em; color: #666;">(' . esc_html($days_ago) . ')</span>';注意点
- APIの制限: WordPressのREST APIにはレート制限がある場合があります。
アクセス数が多いサイトでは、本コードのようにキャッシュの導入を検討してください。 - セキュリティ: 非公開記事や下書きは取得できません。
- パフォーマンス: 毎回APIリクエストが発生するため、表示速度に影響する可能性があります。キャッシュプラグインの使用をおすすめします。
まとめ
WordPressのREST APIを使えば、簡単にブログサイトの最新記事をコーポレートサイトに自動表示できます。
これにより、二重管理の手間を省き、常に最新情報を両サイトで共有できるようになりました。
もちろん、より高度な連携方法もありますが、今回紹介したコードは説明を見ながらなら、私でも意味が理解でき、比較的シンプルで問題なく機能しました。
みなさんも、WordPressサイト同士の連携を考えている場合は、こちらの方法を試してみてください！
サイト制作に関するご相談・お見積りなどお気軽にご相談ください。
新規サイト制作では、提案・制作から公開後の保守・運用・更新までトータルで、あなたのお力になります。
既存のサイトでも、簡易な修正や機能追加、更新のお手伝いやレッスンなど、幅広く対応させていただきます。
まずは、お気軽に今お持ちのお悩みをお聞かせください。
コメント