【初心者必見】Word Press cocoonでアフィリエイトの始め方記録3～Word Pressでメニューを設定する理由と効果から設定方法まで！

皆さん、おはようございます！

夢の街グループのサイトです！
　夢の街グループ (walleve.net)ワードプレスの知識が乏しくて、これから少しづつ構築していきます！

このサイトはアフィリエイトプログラムを含むプロモーションが含まれています！

　今回から私のサイトのWordpress構築をレポートしながら操作方法を紹介していこうと思います。

はじめに
【初心者必見】WordPress でメニューを設定する理由と効果
グローバルメニューとは？
1. グローバルメニューの設定方法
前回の追記アフィリエイト広告の貼り方！
まとめ

はじめに

　今回は無料テーマcocoon「コクーン」を使ってのWordPress でメニューを設定してみます。
　更にメニューを設定グローバルメニューを設定する理由と効果から設定方法までを書いていきます。

【初心者必見】WordPress でメニューを設定する理由と効果

1. ユーザビリティ向上

WordPress のメニューは、サイトのナビゲーションを構築するための重要な要素です。適切に設定されたメニューは、ユーザーがサイト内をスムーズに移動できるようにします。具体的なページやカテゴリへのリンクをメニューに追加することで、ユーザビリティが向上します。

ユーザビリティ（usability）とは？

ユーザビリティ（usability）は、日本語で「使いやすさ」を意味します。主にウェブサイトやアプリの操作性に対して使用される言葉で、ユーザーが簡単にストレスなく操作できることを指します。

具体的には、ユーザビリティが高い（良い）場合、ユーザーはウェブサイトやアプリを使う際にスムーズに目的を達成でき、使い勝手が良いと感じます。逆に、ユーザビリティが低い場合、ユーザーは迷ったり、間違ったり、ストレスを感じたりすることがあります。

例えば、光回線の乗り換えを考えているユーザーが、乗り換え予定の事業者のホームページを見ている状況を考えてみましょう。このとき、ユーザビリティが高いホームページでは、料金やエリアが分かりやすく表示されているため、ユーザーはストレスなく情報を得ることができます。

ユーザビリティは、ウェブサイトやアプリの成功に欠かせない要素であり、ユーザーの満足度やコンバージョン率に直結します。デザイン改善やユーザビリティテストを通じて、使いやすさを向上させることが大切です。

2. サイトの構造を明確にする

メニューはサイトの構造を反映しています。例えば、ブログ記事、商品ページ、お問い合わせフォームなど、重要なコンテンツへのリンクをメニューに配置することで、サイトの階層構造を明確に示すことができます。

3. SEO（検索エンジン最適化）への影響

適切なキーワードを含むメニュー項目を設定することで、SEO の向上に寄与します。検索エンジンはメニューを読み取り、サイトの内容を理解する際に参考にします。適切なキーワードを使用してメニューを構築することで、サイトのランキング向上につながります。

4. モバイルフレンドリーなデザイン

メニューはモバイルデバイスでも適切に表示されるように設計する必要があります。ハンバーガーメニューなどのモバイルフレンドリーなデザインを採用することで、ユーザーがスマートフォンやタブレットからも快適にサイトを閲覧できるようになります。

ハンバーガーメニューとは？

ハンバーガーメニューは、モバイルフレンドリーなウェブデザインにおいて重要な要素です。では、詳しく説明しましょう。

ハンバーガーメニューは、通常、スマートフォンやタブレットなどの小型デバイスでウェブサイトのナビゲーションを効果的にまとめるためのアイコンです。その名前は、三本の水平バーが重なった形状がハンバーガーに似ていることからきています。このアイコンをクリックまたはタップすると、メニューが表示されます。

ハンバーガーメニューの特徴としては次の点があります。

シンプルなデザイン　ハンバーガーメニューはシンプルでコンパクトなデザインです。画面スペースを節約しつつ、必要なナビゲーション項目をまとめて表示できます。
モバイルフレンドリー　小さな画面サイズでも適切に表示されるため、モバイルデバイスでの利用に適しています。
トグル機能　ハンバーガーアイコンをクリックすると、メニューがトグルされます。開閉のアニメーションを伴い、ユーザーがスムーズにナビゲーションできるようになります。

実際のウェブサイトでハンバーガーメニューを見ると、その使い勝手やデザインのバリエーションが分かりやすいですね。ハンバーガーメニューは、ユーザビリティを向上させる一方で、スマートなデザインも提供しています。

グローバルメニューとは？

「グローバルメニュー」は、サイトの上部に常時表示されるメニューのことを指します。
ぱっと見て、サイトの内容を伝える役割を果たします。
パソコンなどの大画面（768pxより大きな幅の端末）で表示されます。
他にも「グローバルナビ」や「ヘッダーメニュー」とも呼ばれます。

グローバルメニューの設定方法

Cocoonのデフォルトではグローバルメニュー（ヘッダーメニュー）は表示されていませんが、自分で作成することができます。以下の手順で設定してみましょう

カテゴリーの用意

　グローバルメニューに表示させる項目を用意します。通常は「ホーム」や「カテゴリー」を表示させます。
　カテゴリーがまだ作成されていない場合は、先にカテゴリーを作成しておきましょう。

「ホーム」と「カテゴリー」とは？

ホームとは　「ホーム」は、ウェブサイトのトップページを指します。一般のウェブサイトではホームページはブログの最初のページであり本の表紙のようなページです。
　Cocoonテーマを使用している場合、Cocoonのデフォルトではグローバルメニュー（ヘッダーメニュー）は表示されていませんが、ホームページはブログの最初のページに設定する人が多いです。理由は訪問者が最初に目にする場所だからです。
　ブログのホームページには最新の投稿や特定のカテゴリーの記事が表示されることが一般的です。

カテゴリーとは　カテゴリーは、ブログ内の記事を分類・整理するための仕組みです。特定のトピックやテーマに関連する記事を同じカテゴリーにまとめることで、読者が記事を探しやすくなります。

　カテゴリーはブログ運営において重要な要素であり、記事の整理や読者のナビゲーションをサポートします。

Cocoonでカテゴリーを作成する手順

上記で説明した通り「ホームページ」や「記事」が無いと作れませんがサイトの作成時にどのような内容のサイトにするかを決めている場合は記事を先に書くか仮のページを作って作成する方法も在りますが計画を立てて記事を書きながらカテゴリーを増やしていくのがおすすめです。
　先に記事を書いてからだと記事が書き終わるまでの時間がもったいないからです。

ダッシュボードにログイン:
- WordPressのダッシュボードにログインしてください。
カテゴリーを作成:
- 左側のメニューから「投稿」→「カテゴリー」を選択します。
- 「新規カテゴリーを追加」をクリックします。
カテゴリーの設定:
- カテゴリー名を入力します。日本語でも問題ありません。
- スラッグ（URLの最後の部分）は、英語表記で設定します。スラッグはURLに表示されるため、半角英数字を使った英語表記が一般的です。
親カテゴリーと子カテゴリーの設定:
- 親カテゴリーを作成する場合は、親カテゴリーの設定を行います。
- 子カテゴリーを作成する場合は、親カテゴリーを指定します。
カテゴリーラベルの色設定（オプション）

グローバルメニューを設定

WordPress管理画面から「外観」→「メニュー」を選択します。
「新規メニューを作成」リンクをクリックして、メニュー名を入力し、表示する項目を設定します。
「位置の管理」タブで「ヘッダーナビ」を選択して、作成したメニューを表示させます。
Cocoonのグローバルメニューは、サイトのナビゲーションをスムーズに行うために重要な要素です。ぜひ設定して、読者が見たいコンテンツに簡単にアクセスできるようにしましょう！
メニューのカスタマイズ:
- Cocoonの設定画面からグローバルメニューの背景色や文字色を設定します。
- メニュー幅を調整したり、サブメニューを設定したりすることもできます。

前回の追記アフィリエイト広告の貼り方！

アフィリエイトリンクの取得:
- まず、アフィリエイトプログラムに登録し、広告リンクを取得します。代表的なASP（アフィリエイトサービスプロバイダー）として、A8.netやもしもアフィリエイト、バリューコマースなどがあります。
- Cocoonを使っている方は、Cocoonの「アフィリエイトタグ」機能を活用することで、簡単にアフィリエイトリンクを設定できます。
バナー広告の貼り方:
- Cocoonの管理画面から「外観」→「メニュー」を選択します。
- 「ヘッダーメニュー」にアフィリエイトリンクを追加し、バナー広告のコードを貼り付けます。
- プレビューで確認して、バナーが表示されていることを確認しましょう。
テキスト広告の貼り方:
- 同様に、テキスト広告のコードを取得し、投稿画面でHTMLとして編集した段落ブロックに貼り付けます。
- プレビューでテキスト広告が正しく表示されているか確認します。
アフィリエイトボタンの作成:
- Cocoonのブロックエディタを使って、アフィリエイトリンクボタンを作成します。
- ボタンのデザインやテキストを設定し、記事内に挿入します。