食ブロガーは、読者にとって最も大きな違いを生む機能についてよく私たちに尋ねます。
長年多くのフードブログを観察してきた結果、レシピへのジャンプボタンを追加することが、最も効果的な改善策の1つであることがわかりました。
これは、訪問者が探しているものをすばやく見つけるのに役立つ、大きな効果をもたらす小さな変更です。さらに、どのWordPressサイトでも簡単に設定できます。
いくつかの異なるソリューションをテストした結果、一貫してうまく機能する信頼性の高い方法が2つ見つかりました。どちらの方法も初心者向けで、数分でレシピへのジャンプボタンが機能するようになります。
💡主なポイント：レシピへのジャンプボタンを追加する
WordPressにレシピへのジャンプボタンを追加する最も簡単な2つの方法を以下に示します。
1. プラグイン方式（推奨）： Tasty Recipesを使用するのが最も簡単なソリューションです。これは、スムーズなスクロールで「レシピへのジャンプ」ボタンを自動的に追加し、SEOのためにレシピスキーマを処理します。本格的なフードブロガーに最適です。
2. コード方式（無料）： WPCodeを使用すると、特定のレシピプラグインを購入せずにカスタムボタンを作成できます。これは完全に無料ですが、すべての投稿で手動設定が必要であり、スムーズなスクロールや自動スキーマ生成などの機能がありません。
食品ブログ記事に「レシピへジャンプ」ボタンを追加する理由
「レシピへのジャンプ」ボタンは、ブログ記事の先頭に配置されるナビゲーションリンクです。技術的には、ブラウザを導入コンテンツをスキップして、レシピカードまで即座にスクロールするHTMLアンカーとして機能します。
読者は、材料を見つけるために長いストーリーや広告をスクロールすることに不満を感じることがよくあります。長文コンテンツは収益化に役立ちますが、多くの訪問者は調理中や買い物の際に指示にすぐにアクセスする必要があります。
このボタンを追加することで、両方のタイプの読者に対応できます。熱心なファン向けに個人的なストーリーテリングを維持しながら、すぐに回答を必要とするユーザーのために高速ショートカットを提供できます。
これにより、サイト全体のユーザーエクスペリエンス（UX）が向上します。ユーザーが必要なものを簡単に見つけられるようになると、検索結果に戻る可能性が低くなります。
これを踏まえ、フードブログにレシピへジャンプボタンを追加する簡単な2つの方法を紹介します。WordPressのレシピメーカープラグインを使用する方法と、カスタムコードを使用する方法です。以下のクイックリンクを使用して、お好みの方法にスキップできます。
方法1：WP Tasty Recipesを使用して「レシピへジャンプ」ボタンを追加する（推奨）
WordPressに「レシピへジャンプ」ボタンを追加する最も簡単な方法は、WP Tasty Recipesを使用することです。
この レシピカードおよびメーカープラグインは、当社で徹底的にテストされており、フードブロガーに人気の多くの機能を発見しました。
「レシピへジャンプ」ボタン以外にも、Tasty Recipesを使用すると、レシピを印刷可能にし、読者の好みの単位に簡単に変換できます。
さらに、栄養成分データ、調理時間、提供量、ユーザー評価などを、すべてきれいに整理された方法で明確に表示できます。
プラグインの機能やブログにどのように役立つかについてさらに詳しく知りたい場合は、当社の包括的なWP Tastyレビューをご覧ください。
このレシピプラグインの欠点は、無料バージョンがないことですが、オンラインでお金を稼ぎたい熱心なフードブロガーにとっては素晴らしい投資です。
さて、このプラグインを使用するには、まず有料プランを購入する必要があります。WP Tasty All Access BundleまたはスタンドアロンのTasty Recipesプラグインのいずれかを選択できます。
購入後、プラグインをダウンロードしてWordPressウェブサイトにインストールできます。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。
その後、WordPress管理画面からWP Tasty » ダッシュボードに移動し、「ライセンスを入力」をクリックします。
次に、WP Tastyが購入後にメールで送信したはずのプラグインのライセンスキーを挿入します。
次に、プラグインのドロップダウンメニューで「すべてのプラグイン」または「Tasty Recipes」のいずれかを選択します。「ライセンスを保存」をクリックします。
これが完了したら、WordPressダッシュボードから WP Tasty » Tasty Recipes ページに移動し、「設定」タブに切り替えます。
デフォルトでは、「レシピへのジャンプ」ボタンと「レシピの印刷」ボタンのオプションはチェックされているため、そのままにしておくことができます。
ボタンに関して変更できることの1つに、クイックリンクスタイルがあります。
WP Tastyは、ボタンの代わりに通常のテキストリンクとして「レシピにジャンプ」オプションを表示することもできます。希望する場合は、「リンク」を選択できます。
ただし、もちろん、好みに応じて単にボタンオプションを選択することもできます。
ボタンオプションもより目を引くため、読者が簡単に見つけられます。
ここには、材料リストやレシピの拡大縮小のためのチェックボックスを有効にするなど、さらに多くの設定があります。あなたのブログに最適なオプションを必ずチェックしてください。
完了したら、ページを下にスクロールして「変更を保存」をクリックします。
これで、WP Tastyのレシピカードを使用するたびに、上部に「レシピへジャンプ」ボタンと「レシピを印刷」ボタンが表示されるようになります。
レシピカードを使用するには、新しいレシピ投稿を作成するか、Gutenbergブロックエディターを使用して既存のレシピを編集します。その後、WordPressにレシピカードブロックを追加する方法に関するこのステップバイステップガイドに従って、詳細を確認してください。
ジャンプリンクを追加するためにTasty Recipesを使用する利点の1つは、スムーズなスクロール効果です。これにより、読者はページ上の不自然なジャンプなしで、直接レシピの指示に移動できます。
この効果を実現するためにカスタムコードを使用するのは複雑です。通常、JavaScriptを使用するか、テーマファイルを編集する必要があります。そのため、ほとんどのユーザーにはプラグイン方式をお勧めします。
とはいえ、無料で「レシピへのジャンプ」ボタンを追加したい場合は、次の方法を試すことができます。
プロのヒント：レシピ投稿をSEOで最適化し、より多くのトラフィックを獲得したいですか？All in One SEOプラグインを使用して、SEOフレンドリーなレシピスキーマを追加し、Google検索でブログ投稿をより目立たせましょう。
方法2：カスタムコードを使用して「レシピにジャンプ」ボタンを追加する（無料）
レシピへのジャンプボタンを手動で追加することは、完全な初心者には daunting に聞こえるかもしれませんが、心配しないでください。各ステップを丁寧に説明していきます。
WordPressにカスタムコードを追加するのが初めての場合は、WPCodeのようなコードスニペットプラグインの使用をお勧めします。
このプラグインは広範囲にテストされており、テーマファイルを編集せずにコードスニペットを挿入するための安全で簡単な方法を提供します。これにより、ウェブサイトのレイアウトや機能が誤って壊れるリスクを最小限に抑えることができます。
WPCode のその他の機能について知りたいですか？ わかりやすいレビューで、その機能の詳細と、WordPress ユーザーにとって優れたツールである理由を説明しています。
WPCodeを使用するには、WordPress管理ダッシュボードでプラグインをインストールしてください。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをお読みください。
注意: WPCode には無料版もあります。予算が限られている場合は、無料版が最適です。ただし、コードを公開前にテストするなどの高度な機能を使用したい場合は、有料版へのアップグレードをお勧めします。
次に、コードスニペット » + スニペットを追加に移動します。ここで、「カスタムコードを追加（新しいスニペット）」を選択し、「スニペットを使用」をクリックします。
WPCode に個別に 2 つのコードスニペットを追加する必要があります。それぞれ見ていきましょう。
「レシピへジャンプ」ボタンを自動的に挿入するコードを追加する
最初のコードスニペットは、レシピセクションを含むすべてのブログ投稿に自動的に「レシピへのジャンプ」ボタンを追加します。このために、スニペットに「Add Jump to Recipe Button Automatically」という名前を付けることができます。
次に、コードタイプのドロップダウンメニューで「PHPスニペット」を選択します。
コードプレビューボックスで、次のコード行を挿入してください。
/**
* Check if the post content contains a heading with the #recipe anchor
*/
function has_recipe_anchor($content) {
$pattern = '/<h[1-6].*?id\s*=\s*["\']?recipe["\']?[^>]*>/i';
return preg_match($pattern, $content) === 1;
}
/**
* Add "Jump to Recipe" button to posts
*/
function add_jump_to_recipe_button($content) {
if (has_recipe_anchor($content)) {
$jump_button = '<div class="jump-to-recipe-container"><a href="#recipe" class="jump-to-recipe-button">Jump to Recipe</a></div>';
$content = $jump_button . $content;
}
return $content;
}
add_filter('the_content', 'add_jump_to_recipe_button');
このコードがどのように機能するかを見ていきましょう。
コードの最初の部分は、ブログ投稿のコンテンツをチェックします。具体的には、アンカーIDが「recipe」に設定されている見出しタグ（H1からH6）を探します。
add_jump_to_recipe_buttonという名前の2番目の部分が、投稿に実際のボタンを追加する役割を担います。
コードが「recipe」アンカーIDを見つけた場合、ジャンプボタンのHTMLコードを作成します。次に、このコードをブログ投稿のコンテンツの直前に挿入します。
この方法により、コードは自動的にレシピの見出しをチェックし、必要に応じてボタンを追加できます。
そうは言っても、ブログ記事のレシピセクションに#recipeアンカーを追加する必要があります。心配しないでください、後でその方法を説明します。
次に、「挿入」セクションまでスクロールし、「自動挿入」メソッドが選択されていることを確認します。「場所」については、「フロントエンドのみ」を選択すると、コードはWordPressウェブサイトのフロントエンド部分でのみ実行されます。
次に、右上隅のボタンを切り替えてコードを「アクティブ」にし、「スニペットを保存」をクリックします。
「レシピへジャンプ」ボタンをスタイル設定するコードスニペットを追加する
WordPressサイトにカスタムCSSコードを追加して、コールトゥアクションボタンをスタイル設定します。WPCodeで新しいカスタムコードスニペットを作成し、「レシピジャンプボタンのスタイル」のような簡単な名前を付ける手順を繰り返してください。
コードの種類としては、「CSSスニペット」を選択します。
さて、ボタンを緑色にし、その中のテキストを白色にするCSSコードを作成しました。次のようになります。
.jump-to-recipe-button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
}
.jump-to-recipe-button:hover {
background-color: #45a049;
}
異なる色を使用したい場合は、上記のコードの16進数コードを置き換えるだけで済みます。
コードを挿入したら、挿入セクションまでスクロールし、挿入方法として「自動挿入」を選択します。次に、場所として「サイト全体ヘッダー」を選択します。
次にすることは、コードスニペットを有効にして「スニペットを保存」をクリックするだけです。
レシピブログ記事に#recipeアンカーを追加する
2つのコードスニペットを有効にしても、WordPress ブログ投稿のレシピセクションに #recipe アンカーを追加しない限り、ジャンプボタンは表示されません。そこで、今からそれを実行します。
まず、新しいレシピのブログ記事を作成するか、ブロックエディターで既存の記事を開きます。
次に、例では見出しタグ（H2）を使用して、ブログ記事のレシピセクションを示しています。読者が記事を読むときに簡単に見つけられるように、同様の方法をお勧めします。検索エンジンも、ブログコンテンツが整理された構造になっていることを評価します。
レシピセクションの見出しブロックをクリックします。次に、ブロック設定サイドバーで「詳細設定」メニューを開きます。次に、HTMLアンカーフィールドに「recipe」と入力します。すべて小文字を使用するようにしてください。
これは、ジャンプボタンのアンカーリンクとして機能します。
それが完了したら、「公開」または「更新」をクリックします。
モバイルまたはデスクトップでウェブサイトをプレビューすると、投稿タイトルの後にブログコンテンツの一番上に「レシピへジャンプ」ボタンが表示されるはずです。
食ブログのユーザーエクスペリエンスを向上させるためのボーナスのヒント
「レシピへのジャンプ」ボタン以外にも、フードブログをより使いやすくするためのデザイン要素があります。ここでは、影響力の大きい改善点をいくつかご紹介します:
| デザイン要素 | ユーザーエクスペリエンスのメリット |
|---|---|
| ハイライトされたテキスト | 調理時間、代替材料、または安全上の警告などの重要な情報に注意を引きます。 |
| 注釈 | メインの指示の流れを中断することなく、特定のステップを詳しく説明できます。 |
| モバイル対応デザイン | レシピが、スマートフォンやタブレットを使ってキッチンで調理しているユーザーのために正しくフォーマットされていることを保証します。 |
| パンくずリストナビゲーション | ユーザーがサイトの構造を理解し、関連するレシピカテゴリを見つけるために簡単にブラウズできるようにします。 |
WordPressボタンに関するよくある質問
WordPressにボタンを追加することについて、読者からよく寄せられる質問をいくつかご紹介します:
WordPressでボタンにリンクを追加するにはどうすればよいですか？
リンクを追加するには、WordPressエディター内で「ボタン」ブロックを選択します。ボタンの上に表示されるツールバーのリンクアイコンをクリックし、移動先のURLをフィールドに貼り付けます。
WordPressで「トップへ移動」ボタンを追加するにはどうすればよいですか？
最も簡単な方法は、WPFront Scroll Topのようなプラグインをインストールすることです。有効化すると、ユーザーが下にスクロールしたときに表示されるボタンが自動的に追加され、ページの上部へ素早く戻ることができます。
開始するには、WordPressでjQueryを使用してスムーズなスクロールアップ効果を追加する方法に関するチュートリアルをご覧ください。
WordPressブログにフォローボタンを追加するにはどうすればよいですか？
ブロックエディターの組み込みの「ソーシャルアイコン」ブロックを使用して、フォローボタンを追加できます。「ソーシャルアイコン」を検索し、ブロックを追加して、「プラス」アイコンをクリックして、リンクしたいソーシャルメディアプラットフォームを選択するだけです。
WordPressで著者のFacebookフォローボタンを追加する方法については、こちらのガイドをご覧ください。
WordPressにポップアップを設置するにはどうすればよいですか？
ポップアップの追加には、OptinMonsterの使用をお勧めします。ドラッグ＆ドロップビルダーを使用してカスタムポップアップをデザインでき、ユーザーがサイトを離れようとしている時など、表示タイミングを正確に制御できます。
このチュートリアルで、WordPressに「レシピへジャンプ」ボタンを追加する方法を学べたことを願っています。また、効果的なWordPressウェブサイトの主要なデザイン要素に関するガイドや、WordPressでオンラインフード注文を設定する方法も参照してください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Kzain
これは素晴らしい記事です。レシピブログを改善する方法を学んでおり、これは素晴らしい助けになります。すべてのレシピブログでWP Tastyを間違いなく使用します。この素晴らしいガイドをありがとう。