【デモサイトあり】SWELLで作ったお料理レシピブログのサンプルデザインと作り方を紹介します。

そんな疑問に答えます。

WordPress人気テーマ「SWELL」を使って料理のレシピを紹介するデモサイトを作りました。サイト作成に使ったプラグイン、カスタマイズのテクニックを紹介します。

お菓子や料理レシピブログを作りたい人はぜひ最後までご覧ください。

公式 SWELLをダウンロード

【デモサイト】SWELLで作った料理レシピブログ

デモサイト

デモサイトはプラグインインストールし、独自カスタマイズをしています。

料理レシピブログ向けのプラグイン

SWELLで料理レシピを作るさいに便利なプラグインを紹介します。

Advanced Custom Fields

項目	評価
おすすめ度	3.0 / 5.0
初心者向け度	2.0 / 5.0

Advanced Custom Fieldsはカスタムフィールドを使ったコンテンツ運営者向けのプラグインです。ブロックエディター下部に入力オプションを追加することで、一定のフォーマットでコンテンツを作成できます。

テンプレート側で出力用の調整が必要なので、初心者向けはありません。

Custom Post Type UI

項目	評価
おすすめ度	4.5 / 5.0
初心者向け度	3.0 / 5.0

Custom Post Type UIはカスタム投稿やタクソノミーを追加するプラグインです。

簡単に説明すると、カテゴリーやタグなどと同じような「分類」を作成する機能があります。

Duplicate Page and Post

項目	評価
おすすめ度	4.5 / 5.0
初心者向け度	4.5 / 5.0

Duplicate Page and Postは、すでに作成した投稿や固定ページを複製することができるプラグインです。

「料理レシピを一定のフォーマットで量産したい！」そんな場合に使えます。

Intuitive Custom Post Order

項目	評価
おすすめ度	5.0 / 5.0
初心者向け度	4.5 / 5.0

料理レシピは「食材」「料理のジャンル」などを分類することで、ブログ訪問者が目的のページ辿りやすくなります。

WordPressだとカテゴリー、タグ、タームなどを使い料理を分類することができます。Intuitive Custom Post Orderプラグインを有効化すると、サイドバーなどに表示するカテゴリーの順番を自由に編集することができるようになります。

WP Rocket

項目	評価
おすすめ度	4.5 / 5.0
初心者向け度	4.0 / 5.0

WP Rocketはサイト高速化用の定番プラグインです。ページ読み込みスピードはSEOのアルゴリズム。

検索結果の順位はブログ収益に大きく影響するので、できる限り高速化したいところ。WordPressには無料の高速化プラグインが多々ありますが、このWP Rocketは有料。

有料だけあって正直「チートクラス」です。

ページの読み込みスピードはツールで数値化できます。僕もWP Rocketプラグインを使い高速化の検証をしたことがありますが、無料のプラグインと有料のWP Rocketプラグインの差は非常に大きいなと感じました。

ちなみに、有名ブロガーのヒトデさんが運営するヒトデブログでもWP Rocketプラグインを導入しています。少しでも検索順位を上げてブログ収益を稼ぎたい人は導入すべきプラグインと言えます。

料理レシピブログをオシャレに見せるカスタマイズテクニック

デモサイトに実装している独自カスタマイズの一部を紹介します。料理レシピをワンランクアップさせる実用的なテクニックです。

有料会員サイト機能

デモサイトは「有料会員サイト機能」を実装しました。

会員機能は無料のWP-Membersプラグイン。決済部分はWP-Members PayPal Subscriptionsプラグインを使っています。

有料会員サイトのざっくりした仕様

有料会員システムは毎月サブスク料金を稼ぐ仕組みです。アフィリエイトやGoogleアドセンスなどの広告以外で収益を発生させたい人におすすめです。

グロナビをメインビジュアルの下に配置

SWELLは標準機能でメインビジュアル上に重なるようにロゴ画像とグロナビを透過表示させるオプションがあります（SWELLの公式サイトは透過オプションを使っています）。

デモサイトではヘッダーのロゴ部分だけを透過させ、グロナビはメインビジュアルの下に配置する独自カスタマイズを実装しています。

メインビジュアルと被らないので、検索フォーム部分に目が行きやすい工夫しました。

アーカイブページにカスタムフィールドを出力

カテゴリーなどの一覧ページに、カスタムフィールドを出力するカスタマイズを実装しました。この部分はフックでアレンジできるので、SWELLのテーマファイルを編集する必要はありません。

複数条件でレシピを調べる検索フォーム

料理レシピを検索する「絞り込み検索機能」をVK Filter Search Proプラグインで設置しました。料理のジャンルや、食材、その他の条件で登録されているレシピを検索することができます。

検索結果を並び変えるボタン

レシピを検索したさいの検索結果ページのカスタマイズです。料理にかかる時間や、予算、掲載した情報の鮮度で検索結果を並びかえるボタンを設置しました。

ECサイトなんかだとよく見る定番の機能です。サイトの情報が多い時に、訪問者が自分の探している情報にたどり着きやすい仕組みと言えます。

まとめ

WordPressテーマ「SWELL」を使った料理レシピブログを紹介しました。

仕事がら、数多くのWordPress有料テーマをカスタマイズした経験があります。
アフィンガー、JIN、SANGO、STORK19、THE THORを持っていますが、SWELLはブロックエディターが使いやすく、サイト型デザインのオシャレなブログを作りやすいテーマです。

料理のレシピを紹介するブログなどには最適です！

公式 WordPressテーマ「SWELL」をダウンロード