食ブロガーは、読者にとって最も大きな違いを生む機能についてよく私たちに尋ねます。
長年多くのフードブログを観察してきた結果、レシピへのジャンプボタンを追加することが、最も効果的な改善策の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 ウェブサイトのフロントエンド部分でのみ実行されます。
次に、右上隅のボタンを切り替えてコードを「アクティブ」にし、「スニペットを保存」をクリックします。
「レシピへジャンプ」ボタンをスタイル設定するコードスニペットを追加する
次に、カスタム 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 にスクロールアップ効果を追加する方法に関するチュートリアルを参照してください。
WordPressブログにフォローボタンを追加するにはどうすればよいですか？
ブロックエディターの組み込みの「ソーシャルアイコン」ブロックを使用して、フォローボタンを追加できます。「ソーシャルアイコン」を検索し、ブロックを追加して、「プラス」アイコンをクリックして、リンクしたいソーシャルメディアプラットフォームを選択するだけです。
詳細については、WordPress で著者の Facebook フォロー ボタンを追加する方法に関するガイドをご覧ください。
WordPressにポップアップを設置するにはどうすればよいですか？
ポップアップを追加するには、OptinMonster の使用をお勧めします。ドラッグ アンド ドロップ ビルダーを使用してカスタム ポップアップをデザインでき、ユーザーがサイトを離れようとしているときなど、ポップアップが表示されるタイミングを正確に制御できます。
このチュートリアルが、WordPress でレシピにジャンプ ボタンを追加する方法を学ぶのに役立ったことを願っています。また、効果的な WordPress ウェブサイトの主要なデザイン要素とWordPress でオンラインフード注文を設定する方法に関するガイドも参照してください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
Kzain
これは素晴らしい記事です。レシピブログを改善する方法を学んでおり、これは素晴らしい助けになります。すべてのレシピブログでWP Tastyを間違いなく使用します。この素晴らしいガイドをありがとう。