WordPress に埋め込む
WordPress に Collections で作成したコンテンツを埋め込むためのガイドです。これにより、プラグインを使わなくても部分的にコンテンツを多言語化することができます。
Collections で記事を作成し公開する
今回は、英語版と日本語版のある記事を作成します。
プレビューで作成した記事が取得できることを確認
公開したら API プレビューで記事が取得できることを確認しておきましょう。
このようなレスポンスが返ってくればOK。公開ステータスは正しく更新されています。
{
"posts": [
{
"id": "94a79a37-0d3f-42a9-9edc-3246e925db64",
"contents": [
{
"id": "61b260d3-4b62-4ad5-b874-ab2d10cbabbe",
"slug": "090045d259",
"title": "Website renewed!! 🎉",
"subtitle": null,
"body": "You can visit if you like!\n\nhttps://collections.dev",
"bodyHtml": "<p>You can visit if you like!</p><p><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"link\" href=\"https://collections.dev/ja\">https://collections.dev</a></p>",
...
},
{
"id": "5245b61c-01a4-49b4-857e-72b99c20902e",
"slug": "f10d3c61c2",
"title": "サイトをリニューアルしました🎉",
"subtitle": null,
"body": "よかったら訪ねてみてください！\n\nhttps://collections.dev",
"bodyHtml": "<p>よかったら訪ねてみてください！</p><p><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"link\" href=\"https://collections.dev/ja\">https://collections.dev</a></p>",
...
}
]
}
]
}
WordPress の Theme File Editor を開く
続いて、WordPress に記事を取得するコードを追加します。ナビゲーションメニューから Tools > Theme File Editor を開き
Theme Functions (functions.php) を選択します。
記事を取得するコードを追加する
functions.php に記事を取得する関数とショートコードを追加します。URL と API キーはご自身の環境に合わせて変更してください。
functions.php
function getMultilingualData($atts = array()) {
$url = 'https://your-subdomain.collections.dev/api/v1/posts/94a79a37...';
$key = 'bd7ef64b...';
$args = array(
'headers' => array(
'Authorization' => 'Bearer ' . $key,
),
);
$response = wp_remote_get($url, $args);
if (is_wp_error($response)) {
return 'Failed to acquire data.';
}
$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true);
$content1 = $data["post"]["contents"][0]["bodyHtml"];
$content2 = $data["post"]["contents"][1]["bodyHtml"];
$result = "<ul>";
$result .= "<li><p>$content1</p></li>";
$result .= "<li><p>$content2</p></li>";
$result .= "</ul>";
return $result;
}
add_shortcode('multilingualData', 'getMultilingualData');記事に埋め込む
最後に、記事本文の埋め込みたい箇所に、ショートコードを追加します。
[multilingualData]プレビューして確認する
記事をプレビューし Collections で作成した記事が埋め込まれていたら成功です！
