WordPressのRSSフィードから記事一覧を出力するチュートリアル

はじめに WordPressのRSSフィードをShopifyで読み込もうとすると、CORSエラーが出てしまい通常はできません。（jQueryならできるかもしれませんが） 以前は諦めてアプリを使っていたのですが、Fetch APIの操作に慣れてきてから「WordPress側でRSSフィードをJSONに変換すればいけんじゃね？」と試してみたところ成功に至りました。 Dawnベースで紹介しておりますが、Javascriptもなるべく編集しやすいように設計しておりますので、どんなテーマにも実装は可能だと思います。 他のカスタマイズ方法とは異なり、WordPressでの操作が必要となります。 WordPress プラグインをインストール WordPressの管理画面を開き、「JSON Feed」プラグインをインストールしてください。

類似プラグインもありますし、自身で実装することも可能ですが、これが最も簡単でGithubでフィールドを追加するカスタマイズ方法も紹介されています。何より、通常のRSSフィードには出力されないアイキャッチ情報が出力できるのが助かります。 基本的にはインストールするだけでも可能ですが、アイキャッチがフルサイズなので、今回はそこだけ編集していきます。 プラグインを編集 管理画面より「プラグイン→プラグインファイルエディター」開き「JSON Feed」を選択後、「jsonfeed/feed-json-functions.php」の編集画面を開きます。 141行目あたりにあるアイキャッチ出力用のPHPコードの「full」を「thumbnail」に書き換えてください。 'image' => get_the_post_thumbnail_url( null, 'thumbnail' ), // If there is a set featured image サイズはデザインに合わせて「medium」や「large」にしても構いませんし、用途に合わせて新たに「'thumbnail'」を設けても良いと思います。 また、日付フォーマットを変更しても良いですが、そちらはShopify側で変換するので編集しなくても構いません。 その他、必要に応じて項目を増やしてみください。 フィードの出力確認 編集を終えたら保存して、JSONフィードのアドレス（ドメイン/feed/json）を開き確認してください。 問題なく出力されているのが確認できたら、WordPress側の作業は終わりです。 Shopify セクションファイルを作成 テーマ編集画面にて「新しいセクションを追加する」より「blog-feed.liquid」を作成し以下のコードを順番にコピペしてください。 CSS {{ 'blog-feed.css' | asset_url | stylesheet_tag }} セクションのスタイルを定義するCSSファイルを読み込みます。こちらは後ほど作成します。 Liquid + HTML {%- if section.settings.rss != blank -%} {%- if section.settings.title != blank -%} {{ section.settings.title }} {%- endif -%} {%- if section.settings.show_link -%} {%- endif -%} {%- endif -%} シンプル構造なので、サイトのデザインに合わせて編集してください。2箇所のID部分にさえ気をつけていれば自由です。 Javascript document.addEventListener('DOMContentLoaded', function () { fetch('{{ section.settings.rss }}', { cache: 'reload' }) .then(function (response) { return response.json(); }) .then(function (data) { const target = document.getElementById('feed_{{ section.id }}'); const link_tag = document.getElementById('link_{{ section.id }}'); if (link_tag) { link_tag.href = data.home_page_url; link_tag.textContent = data.title; } const items = data.items.slice(0, 4); items.forEach((item) => { const dateFormat = 'Y/m/d'; const pubDate = new Date(item.date_published); const year = pubDate.getFullYear(); const month = pubDate.getMonth() + 1; const day = pubDate.getDate(); const date = dateFormat .replace('Y', year) .replace('m', month.toString().padStart(2, '0')) .replace('d', day.toString().padStart(2, '0')); const content_html = item.content_html.replace(/( ]+)>)/gi, '').substr(0, 50) + '...'; const blog_card = ` ${item.title} ${date}

${content_html}

`; const article = document.createElement('article'); article.className = 'blog-article'; article.innerHTML = blog_card; target.appendChild(article); }); return; }); }); 基本的にはFetchを使ってWordPressのRSSフィード（JSON）にアクセスし、情報を出力するためのもので、ブログカードを編集しやすいようにテンプレートリテラルを使っています。 編集ポイントは以下の通りです。 const items = data.items.slice(0, 4); 4つのブログカードが出力される仕様なので、4の部分を出力したい記事数に合わせて編集してください。 const dateFormat = 'Y/m/d'; 日付フォーマットをお好みで編集してください。 const content_html = item.content_html.replace(/( ]+)>)/gi, '').substr(0, 50) + '...'; コンテンツから50文字が抜粋される仕様となってますので、文字数を増減する場合は50の部分を編集してください。 const blog_card = ` ${item.title} ${date}

${content_html}

`; const article = document.createElement('article'); article.className = 'blog-article'; ブログカードのHTMLをデザインに合わせて編集してください。別項目を追加したい場合や、JSONフィードの項目を増やした場合は「${item.◯◯}」で追加できます。 Schema {% schema %} { "name": "Blog feed", "class": "section", "tag": "section", "settings": [ { "type": "text", "id": "title", "label": "タイトル", "default": "ブログタイトル" }, { "type": "text", "id": "rss", "label": "RSSフィード（JSON）", "placeholder": "https://domain.com/feed/json", "info": "WordPressに[JSON Feed](https://www.jsonfeed.org/)プラグインをインストールして下さい。" }, { "type": "checkbox", "id": "show_link", "label": "ブログリンクを表示", "default": true } ], "presets": [ { "name": "Blog feed" } ] } {% endschema %} セクション設定はシンプルにしてありますので、記事数や抜粋文字数などと連動させたい場合は、設定項目を追加してください。 以上でセクションファイルを保存してください。 アセットファイルを作成 「新しいアセットを追加する」より「blog-feed.css」を作成し、以下のCSSコードをコピペしてください。 .blog-articles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 3rem; } .blog-article { display: flex; flex-direction: column; gap: .5rem; margin: 0; } .blog-article * { margin: 0; } .blog-article .article-link { display: grid; gap: .5rem; text-decoration: none; } .blog-article .article-image { aspect-ratio: 1; overflow: hidden; border: 1px solid #eee; } .blog-article .article-image img { width: 100%; height: 100%; object-fit: cover; } .blog-article .article-excerpt { font-size: .8em; line-height: 1.5; } .blog-linkbox { text-align: center; } @media (min-width: 750px) { .blog-articles { grid-template-columns: repeat(4, 1fr); gap: 3rem; } } 出力に必要な最低限なスタイルなので、サイトや用途に合わせて編集してください。 また、セクションファイルでHTMLを編集した場合は、併せて編集してください。 設定 管理画面よりカスタマイザーを開き、お好きな場所に「Blog feed」セクションを追加し、RSSフィード（JSON）を入力してください。

Blog feedセクションの出力サンプルは、「テンカについて」ページにて公開しております。 冒頭にあります通り、ドメインの異なるブログを更新してもSEO的に意味がありませんので、あくまでもShopifyブログを更新した上でご活用ください。

カートにアイテムが追加されました

WordPressのRSSフィードから記事一覧を出力するチュートリアル

WordPressから記事情報を取得して、記事一覧セクションを作成します。

2024年4月

2024年5月