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

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

SWELLで料理ブログを作りたい
料理レシピのデモサイトを見てみたい
どんなプラグインを使ったらいいの?

そんな疑問に答えます。

WordPress人気テーマ「SWELL」を使って料理のレシピを紹介するデモサイトを作りました。

サイト作成に使ったプラグイン、カスタマイズのテクニックを紹介します。

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

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
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 Rocketプラグインを使ってみた感想と検証結果、ネットの口コミをまとめた記事です↓


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

料理レシピ向けカスタマイズ

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

有料会員サイト機能

有料会員サイト機能

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

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

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

  • サブスクで自動的に毎月課金
  • 有料会員のコンテンツを提供できる

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

かんた

SWELLを使った有料会員サイトの作り方は次の記事で解説しています。

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

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

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

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

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

かんた

このカスタマイズの方法は次の記事で解説しています↓

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

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

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

かんた

このカスタマイズは次の記事で解説しています。

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

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

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

かんた

VK Filter Search Proプラグインの使い方・レビュー等は次の記事をご覧ください。

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

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

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

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

かんた

このカスタマイズの方法は次の記事で解説しています↓

まとめ

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

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

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

かんた

ぜひSWELLでの料理レシピブログ制作にチャレンジしてみてください!

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

よかったらシェアしてね!
  • URLをコピーしました!
目次