初めてWordPressのヘッダーにボタンを追加しようとしたとき、私は目立つもの、人々が最初に目にする場所に明確な行動喚起をするものが欲しかった。
サインアップページ、フリーペーパー、予約フォームへのリンクなど、WordPressのメニューにボタンを設置することで、訪問者を目的の場所へ正確に誘導することができます。デザイン全体を変更することなく、クリック数を増やす最も簡単な方法のひとつです。
このチュートリアルでは、WordPressのヘッダーメニューにボタンを追加する方法をステップバイステップで紹介します。
簡単なまとめ：WordPressのヘッダーにボタンを追加するには、SeedProdのようなビジュアルビルダーを使用して、ナビゲーションレイアウトに直接ボタンブロックをドラッグします。ブロックテーマの場合、フルサイトエディタを使ってメニューの横にボタンを配置することもできます。
なぜWordPressのヘッダーメニューにボタンを追加するのか？
WordPressウェブサイトのナビゲーションメニューは通常、すべて似たような外観のテキストリンクです。そのため、各メニュー項目の重要度、重み、緊急度は同じです。
重要な注文フォームや登録ページにURLを追加する場合、メニューの他のリンクと同じように見えるでしょう。ユーザーが最初にクリックするほど目立ったり、急を要するようには見えないでしょう。
しかし、その重要なリンクをWordPressのボタンに変えることで、瞬時に目立つようになります。WordPressのヘッダーにボタンを設置することで、訪問者のユーザーエクスペリエンスを向上させ、WordPressウェブサイトとのエンゲージメントを高めることができます。
投稿やページにはボタンブロックがあるにもかかわらず、WordPressにはデフォルトでメニューボタンがありません。幸い、メニューにボタンを追加する方法はいくつかあり、比較的簡単に実装できます。
それを念頭に置いて、HTMLやCSSコードを書かずにWordPressのヘッダーメニューにボタンを追加する2つの方法を見てみましょう。
SeedProdでWordPressのヘッダーメニューにボタンを追加する方法
まず、SeedProdという強力なWordPressプラグインを使ってヘッダーメニューにボタンを追加する方法を紹介します。このプラグインは最もカスタマイズの幅が広く、ドラッグ＆ドロップでWordPrressのヘッダーメニューを視覚的に構築することができます。
SeedProdは、WordPressのためのトップランディングページとウェブサイトビルダーの一つです。開発者を雇ったり、サイトにショートコードを追加することなく、柔軟でSEOフレンドリーなWordPressテーマ、ランディングページ、完全なウェブサイトを作成することができます。
SeedProdのドラッグ＆ドロップ式ページビルダーを使えば、カスタムヘッダー、カスタムフッター、カスタムサイドバーを作成し、必要な場所にボタンをドロップすることができます。
さらに、WordPressウィジェット、カウントダウンタイマー、オプトインフォーム、ギャラリー、ビフォーアフタースライダーなど、使用できるWordPressブロックは無数にあります。
SeedProdを使用してWordPressのヘッダーにボタンを追加するには、以下の手順に従ってください。
ステップ1.SeedProdのインストールとアクティベート
まず最初に、SeedProdプラグインを入手し、コンピュータにダウンロードする必要があります。このチュートリアルでは、Theme Builder機能が含まれているSeedProd Proを使用します。
あなたのアカウントダッシュボードに、プラグイン.zipファイルを保存するための大きなダウンロードボタンが表示されます。この段階でライセンスキーをコピーしておくのも良いアイデアです。
プラグインをダウンロードしたら、WordPressのダッシュボードにアクセスしてプラグインファイルをアップロードしてください。ヘルプが必要な場合は、WordPressプラグインのインストールと有効化に関するこちらのガイドに従ってください。
それが完了したら、SeedProd " 設定ページに移動し、ライセンスキーを貼り付けます。
そこから、Verify Keyボタンをクリックして、Pro機能のロックを解除してください。
ステップ2.テンプレートを選ぶ
ライセンス・キーがアクティブになったので、SeedProdでどのレイアウトを作るかを決めることができます。以下の2種類のアプローチがあります：
- WordPressテーマ：現在のウェブサイトのデザインをカスタムヘッダーテンプレートに置き換えるためのカスタムWordPressテーマを作成します。(コード不要）。
- ランディングページ：単一ページを作成し、既存のテーマを維持したまま、そのページのみにカスタムヘッダーを追加します。
このガイドでは、ウェブサイト全体のナビゲーション・メニューを置き換えるオプション1を説明します。しかし、オプション2をご希望の場合は、このガイドに従ってWordPressでランディングページを作成し、ステップ4からこのチュートリアルに戻ることができます。
WordPressテーマオプションを選択するので、SeedProd " Theme Builderに行き、Themes ボタンをクリックする必要があります。
これで、ワンクリックでインポートできる既成のウェブサイト・キットのライブラリーが表示されます。
WooCommerce、人気順、新しいものから古いもの、またはその逆でテンプレートを絞り込むことができます。気に入ったテーマが見つかったら、ティックアイコンをクリックして起動してください。
テーマのインポートが完了すると、自動的にこのようなページが表示されます：
WordPressテーマを構成するテンプレートのリストが含まれており、SeedProdのビジュアルドラッグアンドドロップビルダーでそれぞれを編集することができます。
ステップ3.ヘッダーをカスタマイズする
ヘッダーにボタンを追加したいので、ヘッダーテンプレートを編集しましょう。リストで見つけるまで下にスクロールし、デザインの編集リンクをクリックします。
ヘッダーテンプレートを開くと、このように2カラムのレイアウトが表示されます：
ご覧のように、左側には様々なWordPressブロックがあり、右側にはデザインのプレビューがあります。デザインのどこかをクリックしてコンテンツを変更したり、左のパネルからブロックをドラッグしてページに機能を追加することができます。
現在のヘッダーレイアウトを見ると、画像ブロックのカラムとWordPressメニューブロックのカラムがあります。
ヘッダーにボタンを追加するには、3列目を追加する必要がある。
まず、ヘッダーセクションの上に紫色の輪郭が出るまでカーソルを置き、セクションの複製アイコンをクリックします。
そうすることで、ヘッダーのコピーが最初のヘッダーの下に追加される。
次に、最初のセクションの列の上に青い輪郭が出るまでカーソルを置き、ゴミ箱アイコンをクリックして削除する。
新しいカラムレイアウトを選択するオプションのある空のセクションができました。それでは、3カラムレイアウトをクリックしてください。
複製したセクションの 移動アイコンにカーソルを合わせると、画像とナビメニューアイテムのブロックが新しいセクションに移動します。
これで空の列ができ、そこにButtonブロックを追加することができます。
次のステップに進む前に、ゴミ箱アイコンをクリックして古いヘッダーセクションを削除してください。
これでWordPressのヘッダーメニューにボタンを作成する準備ができました。
ステップ4.ヘッダーにボタンを追加する
SeedProdでヘッダーにボタンを追加するのは簡単です。左サイドバーのButtonブロックを見つけ、ヘッダーエリアの空欄にドラッグするだけです。
ボタンを配置したら、それをクリックしてボタンのリンクテキスト、ボタンのサブテキスト、リンク、モバイルとデスクトップでの配置、ボタンのサイズをカスタマイズすることができます。
Font Awesomeアイコンのライブラリから選んで、ボタンテキストの前後にカスタムアイコンを追加することもできます。
さらに多くのカスタマイズオプションが必要な場合は、詳細 設定タブをクリックしてください。ここでは、テキストの色とタイポグラフィの編集、背景色の変更、ボックスシャドウの追加、ボーダーの半径、スペーシング、カスタムCSSクラスの追加、さらに特定のデバイスでボタンを非表示にすることもできます。
さらに、アニメーションオプションは、あなたのボタンをより目立たせる素晴らしい方法です。
メニューボタンの外観に満足したら、保存ボタンをクリックしてください。
これで、WordPressテーマの残りの部分のカスタマイズを続けることができます。例えば、ブログページ、シングルページテンプレート、サイドバーを編集したり、WordPressフッターを変更することができます。
ステップ5.変更を公開する
ウェブサイトの残りの部分をカスタマイズした後、最後のステップはそれらの変更をライブにすることです。そのためには、まずSeedProd " Theme Builderのページに戻ってください。
次に、右上にあるEnable SeedProd Themeトグルを見つけ、Yesの位置にする。
素晴らしい！WordPressテーマをプレビューして、ヘッダーボタンの動作を確認できるようになりました。
プラグインを使わずにWordPressのヘッダーメニューにボタンを追加する
ページビルダーの完全な柔軟性とカスタマイズオプションを必要としない人もいれば、ウェブサイトにWordPressプラグインを追加するのを制限したい人もいる。どちらにも当てはまる場合は、次の方法が適している。
ここでは、WordPressのデフォルトのフルサイトエディタを使って、プラグインなしでヘッダーメニューにボタンを追加する方法を紹介します。
まず、WordPressのダッシュボードから「外観 " エディター 」を開きます。ブロックを使ってウェブサイトを構築するWordPressフルサイトエディターが開きます。
次に、サイドバーを開き、テンプレートパーツの見出しをクリックし、右側のヘッダーオプションを 選択します。
そうすると、WordPressヘッダーのビジュアルレイアウトが表示されます。エディターの中で、Navigation見出しをクリックします。
ナビゲーション・レイアウトの設定は右サイドバーに表示されますが、まずは（+）プラスアイコンをクリックしてメニュー項目の追加を開始します。
WordPressのメニューに追加するには、任意のページをクリックして検索することができます。
メニューリンクを配置した状態で、（+）プラスアイコンをもう一度クリックして、新しいWordPressブロックを追加します。今度はButtonブロックを探し、ヘッダーに追加します。
次に、ボタンテキストを入力し、リンクアイコンをクリックして、訪問者にクリックしてもらいたいリンクを追加します。ここでは、無料レポートへのリンクを追加します。
右側のブロック画面のオプションで、以下の設定を変更してヘッダーメニューボタンをカスタマイズできます：
- 塗りつぶしまたはアウトラインボタンのスタイル
- 幅の割合
- テキストと背景色
- 組版サイズ
- パディング
- ボーダー半径
- 追加のCSSとクラス名
- そしてもっと。
ボタンのカスタマイズが完了したら、右上にあるメニューの保存ボタンをクリックします。
これで、Headerテンプレートパーツを使用するどのページにも、メニューボタンとナビゲーションリンクが表示されるようになります。
サイトエディターの機能が含まれていないテーマを使っている場合は、古いメニューカスタマイザーを使ってメニューにボタンを追加するガイドを参考にしてください。
個人的には、SeedProdのドラッグ＆ドロップ・ビルダーが最もシンプルな方法だと思う。
よくある質問
コードなしでWordPressメニューにボタンを追加できますか？
はい！フルサイトエディタ（FSE）またはSeedProdのようなビジュアルビルダーを使用して、ヘッダーに直接ボタンブロックを追加することができます。
WordPress ナビゲーションでリンクをハイライトするにはどうすればよいですか？
最良の方法は、SeedProd または WordPress ボタンブロックを使用して、リンクをスタイル付きボタンにすることです。これは注目を集め、サイトのユーザー体験を向上させます。
WordPressのヘッダーメニューにボタンを追加する方法について、このチュートリアルがお役に立てば幸いです。WordPressのウェブサイトをカスタマイズするための以下のチュートリアルもお勧めです：
お読みいただきありがとうございました！ご質問やご意見がありましたら、お気軽にコメントをお寄せください。
また、YouTube、X（旧Twitter）、Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。
