WordPressに「レシピにジャンプ」ボタンを追加する方法（簡単な2つの方法）

食ブロガーは、読者にとって最も大きな違いを生む機能についてよく私たちに尋ねます。

長年多くのフードブログを観察してきた結果、レシピへのジャンプボタンを追加することが、最も効果的な改善策の1つであることがわかりました。

これは、訪問者が探しているものをすばやく見つけるのに役立つ、大きな効果をもたらす小さな変更です。さらに、どのWordPressサイトでも簡単に設定できます。

いくつかの異なるソリューションをテストした結果、一貫してうまく機能する信頼性の高い方法が2つ見つかりました。どちらの方法も初心者向けで、数分でレシピへのジャンプボタンが機能するようになります。

食品ブログ記事に「レシピへジャンプ」ボタンを追加する理由

フードブログでよく見られる不満の1つは、読者が実際のレシピに到達する前に長いストーリーや広告をスクロールしなければならないことです。

これらのストーリーはSEOや収益化に役立ち、多くの熱心な読者が個人的なタッチを楽しんでいますが、すべてを読む時間がない人もいます。

考えてみてください。食料品店で材料を確認している人や、キッチンで調理を始めようとしている人がいるかもしれません。彼らはレシピの手順にすぐにアクセスしたいだけなのです。

そこで役立つのが「レシピへジャンプ」ボタンです。これにより、急いでいる訪問者はレシピに素早くジャンプでき、ブログのストーリーテリングスタイルや収益化戦略を維持することもできます。

このようにして、コンテンツを楽しむ読者と、レシピをすぐに必要とする読者の両方を満足させることができます。

このボタンを追加することで、サイトのユーザーエクスペリエンスが向上し、訪問者のエンゲージメントをより長く維持できる可能性があります。これにより、ページビューが増加し、直帰率が低下します。

これを踏まえ、フードブログにレシピへジャンプボタンを追加する簡単な2つの方法を紹介します。WordPressのレシピメーカープラグインを使用する方法と、カスタムコードを使用する方法です。以下のクイックリンクを使用して、お好みの方法にスキップできます。

方法1：WP Tastyを使用して「レシピへジャンプ」ボタンを追加する（推奨）
方法2：カスタムコードを使用して「レシピにジャンプ」ボタンを追加する（無料）
フードブログのユーザーエクスペリエンスを向上させるためのボーナスヒント

方法1：WP Tastyを使用して「レシピへジャンプ」ボタンを追加する（推奨）

WordPressにレシピへジャンプボタンを追加する最も簡単な方法は、WP Tastyを使用することです。

このレシピカードおよびメーカープラグインは、当社で徹底的にテストされており、フードブロガーに人気の多くの機能を発見しました。

Jump to Recipeボタン以外にも、WP Tastyを使用すると、レシピを印刷可能にし、読者の好みの測定単位に簡単に変換できます。

さらに、栄養成分データ、調理時間、提供量、ユーザー評価などを、すべてきれいに整理された方法で明確に表示できます。

WP Tasty の機能とブログにどのように役立つかについてさらに詳しく知りたい場合は、当社の包括的なプラグインレビューをぜひご覧ください。

WP Tastyは、あなたにとって最適なフード、レシピ、ブログプラグインのスイートでしょうか？

このレシピプラグインの欠点は、無料バージョンがないことですが、オンラインでお金を稼ぎたい熱心なフードブロガーにとっては素晴らしい投資です。

WP Tasty を使用するには、まず有料プランを購入する必要があります。WP Tasty All Access Bundle を選択するか、スタンドアロンの WP Tasty Tasty Recipes プラグインを選択できます。

購入後、プラグインをダウンロードしてWordPressウェブサイトにインストールできます。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。

その後、WordPress管理画面からWP Tasty » ダッシュボードに移動し、「ライセンスを入力」をクリックします。

次に、WP Tastyが購入後にメールで送信したはずのプラグインのライセンスキーを挿入します。

次に、プラグインのドロップダウンメニューで「すべてのプラグイン」または「Tasty Recipes」のいずれかを選択します。「ライセンスを保存」をクリックします。

これが完了したら、WordPressダッシュボードから WP Tasty » Tasty Recipes ページに移動し、「設定」タブに切り替えます。

デフォルトでは、「レシピへのジャンプ」ボタンと「レシピの印刷」ボタンのオプションはチェックされているため、そのままにしておくことができます。

ボタンに関して変更できることの1つに、クイックリンクスタイルがあります。

WP Tastyは、ボタンの代わりに通常のテキストリンクとして「レシピにジャンプ」オプションを表示することもできます。希望する場合は、「リンク」を選択できます。

ただし、もちろん、好みに応じて単にボタンオプションを選択することもできます。

ボタンオプションもより目を引くため、読者が簡単に見つけられます。

ここには、材料リストやレシピの拡大縮小のためのチェックボックスを有効にするなど、さらに多くの設定があります。あなたのブログに最適なオプションを必ずチェックしてください。

完了したら、ページを下にスクロールして「変更を保存」をクリックします。

これで、WP Tastyのレシピカードを使用するたびに、上部に「レシピへジャンプ」ボタンと「レシピを印刷」ボタンが表示されるようになります。

レシピカードを使用するには、新しいレシピ投稿を作成するか、Gutenbergブロックエディターを使用して既存のレシピを編集します。その後、WordPressにレシピカードブロックを追加する方法に関するこのステップバイステップガイドに従って、詳細を確認してください。

WP Tastyを使用してジャンプリンクを追加する利点の1つは、スムーズなスクロール効果です。これにより、読者はページ上で不自然なジャンプなしに直接レシピの手順に移動できます。この効果を実現するためにカスタムコードを使用することは、特に初心者にとっては少し複雑です。

とはいえ、無料で「レシピへのジャンプ」ボタンを追加したい場合は、次の方法を試すことができます。

プロのヒント：レシピ投稿をSEOで最適化し、より多くのトラフィックを獲得したいですか？All in One SEOプラグインを使用して、SEOフレンドリーなレシピスキーマを追加し、Google検索でブログ投稿をより目立たせましょう。

方法2：カスタムコードを使用して「レシピにジャンプ」ボタンを追加する（無料）

レシピへのジャンプボタンを手動で追加することは、完全な初心者には daunting に聞こえるかもしれませんが、心配しないでください。各ステップを丁寧に説明していきます。

WordPressにカスタムコードを追加するのが初めての場合は、WPCodeのようなコードスニペットプラグインの使用をお勧めします。

このプラグインは広範囲にテストされており、テーマファイルを編集せずにコードスニペットを挿入するための安全で簡単な方法を提供します。これにより、ウェブサイトのレイアウトや機能が誤って壊れるリスクを最小限に抑えることができます。

WPCode のその他の機能について知りたいですか？わかりやすいレビューで、その機能の詳細と、WordPress ユーザーにとって優れたツールである理由を説明しています。

WPCodeを使用するには、WordPress管理ダッシュボードでプラグインをインストールしてください。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをお読みください。

注意: WPCode には無料版もあります。予算が限られている場合は、無料版が最適です。ただし、コードを公開前にテストするなどの高度な機能を使用したい場合は、有料版へのアップグレードをお勧めします。

次に、コードスニペット » + スニペットを追加に移動します。ここで、「カスタムコードを追加（新しいスニペット）」を選択し、「スニペットを使用」をクリックします。

WPCode に個別に 2 つのコードスニペットを追加する必要があります。それぞれ見ていきましょう。

すべてのレシピ投稿にレシピへのジャンプボタンを自動的に挿入するコードを追加する

最初のコードスニペットは、レシピセクションを含むすべてのブログ投稿に自動的に「レシピへのジャンプ」ボタンを追加します。このスニペットには、「レシピへのジャンプボタンを自動的に追加」という名前を付けることができます。

次に、コードタイプのドロップダウンメニューで「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');

このコードがどのように機能するかを見ていきましょう。

コードの最初の部分であるhas_recipe_anchorという名前の関数は、ブログ投稿内にアンカーが「recipe」に設定されている見出しタグ（H1からH6）があるかどうかを確認します。preg_match関数は、この特定のパターンをテキスト内で検索します。

add_jump_to_recipe_buttonという名前の2番目の部分が、投稿に実際のボタンを追加する役割を担います。

前のステップのhas_recipe_anchor関数がレシピアンカー付きの見出しを見つけた場合、ジャンプボタンのHTMLコードを作成します。次に、このコードをブログ記事のコンテンツの直前に挿入します。

最後のコード行、add_filter('the_content', 'add_jump_to_recipe_button');は、基本的にWordPressがブログ投稿のコンテンツを取得するたびにadd_jump_to_recipe_button関数を実行するように指示します。

この方法により、コードは自動的にレシピの見出しをチェックし、必要に応じてボタンを追加できます。

そうは言っても、ブログ記事のレシピセクションに#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;
}

異なる色を使用したい場合は、background-color（ボタンの色用）、color（テキスト用）、および .jump-to-recipe-button:hover の下の background-color（カーソルがボタンにホバーしたときのボタンの色用）の 16進数コードを置き換えるだけです。

コードを挿入したら、[挿入]セクションまでスクロールし、[挿入方法]として「自動挿入」を選択します。次に、[場所]として「サイト全体フッター」を選択します。

次にすることは、コードスニペットを有効にして「スニペットを保存」をクリックするだけです。