広告運用に少しでも携わると、同じLPを複数のディレクトリで扱い、
修正の手数が増えるなんて、よくありました。

少しずつ記述の使い方や在り方を変えて言ってはいたものの、
ある日思いました。

一部コンテンツを一括で管理したい…

そんなこんなで似たような依頼が発生したので
腕試し的に
WordPressの投稿コンテンツを別ドメイン、別ページに読み込ませることに成功しました
そのための備忘録として書き残させていただきます。

同じような考えを持つ人が手っ取り早く同じことができるようにと思い
不定期ながらブログとして書いております（ _ _ ）

早速ですが方法を綴ります。

外部サイトインクルード/WordPressの投稿を外部のLPに埋め込む方法
・REST API を使用する

先にて大まかな手順を伝えますが、
ここでは初めて聞くような言葉が出てきますが、あまり気にしなくてOKです。
実際、Java、phpの知識が乏しい僕でも実装までこじつけれましたので

・WordPressのREST APIを確認
・JavaScriptでデータを取得
・CORS の設定
・レスポンシブなデザインの調整

以上4点です。
詳細を述べていきます

1
WordPressのREST APIを活用

WordPressの管理画面で設定 -> パーマリンク設定を開き、「設定を保存」をクリックする。
そうすることでREST APIのエンドポイントが有効になります。
上記操作を終えたら
https://あなたのwordpressドメイン名/wp-json/wp/v2/postsのようなURLで、
記事の一覧をJSON形式で取得できます。

2
JavaScriptでデータを取得: JavaScriptのfetch関数を使用して、上記のAPIから投稿のデータを取得します。

【JavaScript】以下をhtml、直前に書いてください。

ちなみに設定としては
最大読み込み投稿数8つまで
キャッチ画像、投稿タイトル、投稿日時、投稿本文（30字まで）
としています。
レスポンシブ対応などについてはcssで制御ができるような形です。

3
CORS の設定

CORSの設定は、あるドメインから別のドメインへのリクエストを安全に行うためのものです。JavaScriptでAPIを叩く際、
異なるドメインからのリクエストはブラウザのセキュリティポリシーにより制限されるので、この設定が必要になります。

HTML部分にまず、データを表示するためのコンテナをHTML に追加します。
ドメイン中のリクエストを許可するために CORS の設定を行います。WordPress が動作しているサーバーに
以下ファイルがあるので開いて以下のコードを追加します

.htaccess。


Header set Access-Control-Allow-Origin “*”
Header set Access-Control-Allow-Methods “GET, POST, OPTIONS”
Header set Access-Control-Allow-Headers “DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type”

“*”の部分は以下のようにご自身のURLを推奨します
Access-Control-Allow-Origin: https://your-landing-page-domain.com
“*”ですと、どこからでもリクエストOK！となるのでセキュリティ上のリスクを考慮としてです。

※あるいは、WordPressのCORS設定用のプラグインを利用する方法もあります。

4
レスポンシブなデザインの調整: CSS を使用して表示を調整します。
例として以下のようなスタイルがありますが、ご自身の書き方に合わせてでもいいと思います。

【css】
#postContainer ul {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style-type: none;
}

#postContainer li {
flex: 1 0 25%;
box-sizing: border-box;
padding: 10px;
}

#postContainer li a {
display: block;
text-decoration: none;
color: inherit;
}
#postContainer li a img {
width: 100%; /* 幅を100%にする */
height: 200px; /* 画像の高さを固定 */
object-fit: cover; /* 画像のアスペクト比を保持しつつ、指定されたサイズに合わせて表示 */
display: block; /* 画像をブロック要素として扱う */
}
@media (max-width: 768px) {
#postContainer li {
flex: 1 0 50%;
}
}

@media (max-width: 480px) {
#postContainer li {
flex: 1 0 50%;
}
}

以上です。
1つずつ探り探りに行っていった結果をまとめた形ですが、
上記により、外部のLP上にWordPressの投稿を表示できるようになります。

【cssおまけ】

自動での横スクロール（カルーセルのような動作）を実現する基本的な手法を以下に示します：
（）

#postContainer { overflow-x: hidden; /* コンテナ外の内容を非表示にする */ position: relative; /* 子要素の位置を絶対位置で制御するため */ } #postContainer ul { display: flex; /* 子要素を横並びにする */ position: absolute; /* コンテナ内での位置を動的に変更できるようにする */ animation: scrollSlide 30s linear infinite; /* アニメーションの適用 */ }

アニメーションの設定:
アニメーションは、30秒かけてコンテンツを左にスクロールさせます。この時間は必要に応じて調整可能です。
css

@keyframes scrollSlide { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }

正直な話、
初めて行うときはほとんど意味がわからないんじゃないかと思います。
ただし、
順序守る、1項目ずつ試しながら確認する
と行っていけばしっかり読み込みができると思います