【Cocoon】フッターメニューの作り方|お問い合わせやサイトマップについて

【Cocoon】フッターメニューの作り方|お問い合わせやサイトマップについて Cocoonカスタマイズ
記事内に広告を含みます
PR
Advertisements

ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード(コピペ可)をまとめています。

Cocoonでのフッターメニューの作り方をまとめました。

お問い合わせやサイトマップ、免責事項など固定ページの作り方についても紹介しています。

PR
Advertisements

フッターメニューとは?

ブログのフッターメニューは、ウェブサイトの最下部(フッター)に配置されるメニューのことです。

フッターには、追加情報や補足的なリンクが含まれることが多いです。

  • 重要なページへのリンク(ホーム、お問い合わせなど)
  • 法的情報(プライバシーポリシーや免責事項など)
  • 会社やサイトの情報(プロフィールやこのページについてなど)
  • SNSへのリンク(Xやインスタへの誘導)
  • サイトマップ(サイト内の記事がすべて一覧になったページ)

今回は、この中でも特に重要な情報の固定ページを作成し、フッターメニューを作成する方法をまとめました。

フッターメニューに必要な固定ページを作成する

フッターメニューに必要な固定ページを作成します。

特に欠かせないのは以下の3つです。

  • プライバシー・ポリシー
  • 免責事項
  • お問い合わせページ

「サイトマップ」は特に欠かせないというわけではないので、お好みで作成すればOKです。

プライバシー・ポリシーと免責事項を作成する

プライバシー・ポリシーと免責事項を作成します。

【固定ページ】→【固定ページ一覧】で最初からあるプライバシーポリシーページを編集します。

免責事項は【新規固定ページを追加】で作成してください。

すでにある文章を全てドラッグで選択して消します。

ページを作成します。

タイトルは日本語でも英語でもどっちでもOKです。

下の参考サイト様の内容をコピペ&修正して完成です。

お問い合わせページを作成する

お問い合わせページを作成する方法は「【WordPress】お問い合わせフォームをcontact form 7で作る方法」の記事でまとめています。

お問い合わせフォームを設置したら、不正アクセス対策が必要

お問い合わせフォームを設置したら、不正アクセス対策が必要です。無料のGoogle reCAPTCHAを使えば、不正アクセスを防げます。

Google reCAPTCHA導入については「【WordPress】Google reCAPTCHA導入とロゴマーク非表示の方法」の記事でまとめています。

サイトマップを作成する

WordPressのサイトマップは2種類あります。

  • HTMLサイトマップ(ユーザー向けに作成されたHTML形式のサイトマップ)
  • XMLサイトマップ(検索エンジン向けに作成されるたXML形式のサイトマップ)

この記事では、ユーザー向けHTML形式サイトマップをCocoonで作る方法を紹介します。

【固定ページ】を作成し、タイトルに「サイトマップ」と入力します。

以下のショートコードを入力して公開します。

[sitemap]

完成したサイトマップはこちら!

サイトマップの詳しい使い方は「Cocoon公式サイト:簡単なサイトマップページを生成できるsitemapショートコードの使い方」をご覧ください。

カテゴリーページや月アーカイブの追加も可能です。

すごーい!

一瞬でできちゃった!

CocoonでHTMLサイトマップを作るのはとっても簡単だよ!

ほかのテーマでは作成のためにプラグインが必要だったりするんだ!

HTMLサイトマップ作成のプラグインには、以下のようなものがあります。

  • WP Sitemap Page
  • PS Auto Sitemap

ショートコードは直接入力しても「ショートコード」ブロックに入力してもどちらでもOKです!

フッターメニューを作成・設置する

フッターメニューを作成・設置します。

【外観】→【メニュー】を選択します。

【新しいメニューを作成しましょう】をクリックし、メニュー名に「フッターメニュー」と入力します。

作成した固定ページにチェックを入れて【メニューに追加】をクリックします。

画像では忘れちゃったんだけど「メニュー設定」で「ヘッダーメニュー」のチェックを絶対入れてね!

これは重要!

右に追加した項目が表示されます(ドラッグで順番の入れ替えが可能です)

【メニューを保存】をクリックして完成です。

完成はこんな感じです。

位置を真ん中に持ってくることもできます。

また、モバイルで見たときに項目の数が奇数だとちょっと違和感があるので、以下の対策をとるのがおすすめです。

  • モバイルで見たときにフッターメニューを一列にするCSSを追加する
  • 項目の数を偶数にする