WordPressテーマCocoonでサイト風デザイン

WordPressテーマCocoonでサイト風デザイン IT

メニュー(ヘッダー&フッター)追加とスキンを変えてサイト風デザインにします。

内容は初心者向けですが、初期状態から劇的に見た目が変えられます。

WordPressテーマCocoonを利用していることを前提にシンプルに書いていきたいと思います。

メニュー設定前に

何をメニューの項目に設定するのかを決めておくとスピーディにメニュー作成ができます。例えば、プロフィールページ、プライバシーポリシーページ、問い合わせページ、サイトマップページがあるのであれば、何も決めていなくもて、以下のことを読みながら、手を動かしながら、メニューの設定がしやすいと思います。

カテゴリーの設定はしていて、記事を書いているのであれば、各カテゴリー一覧へリンクするとして読み進めると良いです。

では、設定を始めてみましょう。

メニューの設定

複数のやり方がありますが、次のやり方で進めたいと思います。

カスタマイズ編集画面を表示

ヘッダーもフッターも手順はとても似ています。

まずは、ヘッダーのグローバルメニューを作成したいと思います。

ヘッダー(グローバル)メニューの編集

  1. 左メニュー「外観」から「メニュー」を押下。
  2. 新しいメニューを作るときは「新しいメニューを作成しましょう。」を押下。
  3. 既に操作するメニューがある場合は、プルダウンで選んで、選択ボタンを押下することで、編集するメニューを選べる。
  4. 今、新規作成している、もしくは編集操作をしているメニュー。今回は「グローバルメニュー1」として新規作成、もしくは編集している。
  5. メニュー構造に表示されている項目は、メニューの項目で、ドラックすることでグリグリ上下に動かせる。
  6. すべて表示タグで、固定ページが表示される。
  7. 固定ページのチェックボックスにチェックを入れ「メニューに追加」を押下すると「5」のメニュー構造にメニュー項目が追加される。
  8. 各カテゴリー一覧へのリンクがメニュー項目で表示可能で、固定ページのようにチェックボックスにチェックを入れ「メニューに追加」を押下すると「5」のメニュー構造にメニュー項目が追加される。
  9. 「メニューを保存」を押下することで、保存される。

フッターメニューの編集

前述した通り、ヘッダーメニュー同様です。

「グローバルメニュー1」の記述のところを「フッターメニュー1」にして手順通りに進めてください。

メニューの位置を管理

10.「位置を管理」を押下する。すると以下の画面になります。

例は、ヘッダーメニューに「グローバルメニュー1」を指定。フッターメニューに「フッターメニュー1」を指定しています。

「変更を保存」ボタンを押下することで保存されます。

スキンの変更

左メニュー「Cocoon設定」を押下します。利用できるスキン一覧が表示されます。

一覧からラジオボタンで選んで下方の「変更をまとめて保存」ボタンを押下します。

自分のサイトを見てみましょう。サイト風にメニューがヘッダーにもフッターにもあるサイトになりましたでしょうか?

環境

  • WordPress 6.7.1
  • テーマCocoon
  • エックスサーバー
  • Macbook

まとめ

「メニュー設定前に」メニューをどうするかを決めていれば、あっという間に、見た目が変わります。初心者であっても1時間とかそういうレベルで変えらます。

是非、読みながら、手を動かして実施してみてください。

つまづくのは、メニューを設定するところではなく、メニューに設定するページがないとかになるでしょうか。プロフィールページ、プライバシーポリシーページ、問い合わせページ、サイトマップページもサクッと作れるように手順を今後書いてみます。

タイトルとURLをコピーしました