【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】

Cocoon固定ページ一覧表示Cocoon

プロフィールやお問い合わせページを作ったけど、どうやってブログに表示したらいいかわからない

固定ページは投稿ページとはちがい、新記事一覧には表示されません。

だから固定ページを表示させるためにはメニューを作って固定ページへのリンクを貼ってあげないといけないんですね。

本記事では、作成した固定ページを一覧で表示させる方法をご紹介していきます。あなたが表示させたい場所や、やり方の難しさであなたに合った方法を見つけてください。

ヘッダーとフッターには必ず表示させましょう!

やり方については、ひとつずつ丁寧ていねいに解説していきますのでしっかり見ながら一緒にやっていきましょう。

固定ページを表示できる場所(ブログ上部)
固定ページを表示できる場所(ブログ下部)

固定ページの作り方

まずは固定ページを表示させる前に、固定ページの作り方を確認していきましょう。WordPressの管理画面から固定ページ新規追加です。

▼固定ページ→新規追加▼

そしたら、ふつうの投稿記事を作るのと同様にブロックエディターが表示されますので、固定ページを作っていきましょう。

▼ブロックエディターで作る▼

詳細の記事の書き方はこちらの参考記事【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】

に書いてありますので、わからないときはご覧になってください。

また「お問い合わせフォーム」については個別に設置方法を書いていますので参考記事【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する

をみていただけると間違いなく設置できると思います。

固定ページを一覧表示させる方法

固定ページが作れたところで、いよいよ表示させる方法を書いていきます。次の4項目を紹介していきますね。

  1. ヘッダーメニューとフッターメニューに表示させる
  2. おすすめカードで表示させる
  3. ボックスメニューで表示させる
  4. ウィジェットで表示させる

それぞれ詳しく見てみましょう。

ヘッダーメニューとフッターメニューに表示させる

ヘッダーは下の画像の①フッターは⑦です。

つまり、一番上と一番下にメニューを作って固定ページを表示させましょうねってことです。手順はほとんど一緒なので、同時に解説していきます。

ここは絶対やりたい項目です!

具体的なやりかた

画像を見ながら一緒にやっていきましょう。WordPressの管理画面から、外観メニューと進んでください。

▼外観→メニュー▼

そしたら、新しいメニューを作成しましょうをクリック

▼新しいメニューを作成しましょう▼

メニュー名にヘッダーなら「ヘッダーメニュー」フッターなら「フッターメニュー」とつけてメニューを作成を押す。

▼メニュー名を記入してメニューを保存▼
▼「メニュー項目を追加」から固定ページを選択▼
▼表示させたい固定ページを選択▼
▼メニューに追加を選択▼
カテゴリーなど固定ページ以外をメニューに表示させたい場合はそれも追加する

追加したメニューの順番を整えます。順番を変えたいメニューをドラッグして移動したいところにドロップしましょう。

グッとつかんで、ペッとはなしましょう

▼サイトマップを移動しているところ▼

位置関係は次の画像のようにメニュー設定の「上」が実際の表示画面の「左」になります。

▼メニューの位置関係▼
こんな位置関係にすると
実際の表示はドロップダウンになる
配置が決まったらメニュー設定で
ヘッダーメニューにチェックしてメニューを保存
ヘッダーに固定ページが表示されました!
メニュー設定をフッターメニューにすると
▼固定ページはフッターに表示される▼

メニュー設定でヘッダーにもフッターにも設定すれば一つのメニューでヘッダーとフッターの両方に固定ページが設定できます。

以上でヘッダー&フッターの固定ページ表示方法は終わりです!

最初はヘッダーとフッターだけに表示しておけばいいでしょう。のちのちカスタマイズしたくなったときにこれ以降のやり方を参照してみてください。

おすすめカードで表示させる

おすすめカードはこの画像の②の位置のやつですね。

固定ページ以外にも

  • 投稿ページ
  • カテゴリー
  • タグ
  • カスタムリンク
  • カスタム投稿

といったページを画像とタイトル付で表示ができます。

詳しくはCocoon公式ヘッダー下に任意の画像リンクを追加できる「おすすめカード」機能の使い方を参照ください。

ボックスメニューで表示させる

ボックスメニューはこんなやつですね。

僕はサイドバーと記事下に設置しています

これもおすすめページと同様にアイコンや画像を使って固定ページほかいろいろなページを表示することができます。

回遊率アップにとても役立ちますよ。

詳細はこちらの参考記事【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくないをご覧ください

ウィジェットで表示させる

本記事を書くのにいろいろいじってみましたところ、いくつかウィジェットで固定ページを表示する方法があったので紹介します。

上から「ナビカード」
「おすすめカード」
「ナビゲーションメニュー」
ウィジェット使用中

固定ページ編集画面でアイキャッチ画像を設定すれば、ページごとのアイキャッチ画像が出力されます。

僕はアイキャッチを設定していないので、全部同じ画像が出てます

やり方としてはざっくり2ステップです

  1. 表示用のメニューを作成する
  2. ウィジェット画面でウィジェットを配置

メニューの作り方は先ほどの項目「ヘッダーメニューとフッターメニューに表示させる」で詳しく書きましたので、割愛します。

メニュー作成後、ウィジェットはワードプレスの管理画面から外観ウィジェットで設置ができます。

  • ナビカード
  • おすすめカード
  • ナビゲーションメニュー

これらのウィジェットを表示したいところに追加すると、さっきの画像のような感じで固定ページが表示できます。

▼赤枠内からナビカードなどを探して▼
青枠内にドラッグ&ドロップ
インデックスリストボトムに試しに設置してみました

配置したらそれぞれのウィジェットの▼部分を押して、タイトルや表示したいメニューを選択しましょう。

これでブログに固定ページが表示されています。

固定ページの日付を非表示にする

さっきの項目で固定ページの一覧表示は完了しました。これからは発展事項として、固定ページの日付表示を消す方法を記載していきます。

投稿ページには日付はあった方がいいと思いますが、固定ページではジャマに思う人もいると思います。

CSSをちょいといじりますが、3行程度ですのでたいしたことはありません。

ではまずは、下のコードをコピーしてください。

.page .date-tags {
display: none;
}

コピーしたら、ワードプレスの管理画面から外観テーマエディターと進んでください。

そしたら

  1. Cocoon Childを選択
  2. スタイルシート(style.css)を選択
  3. あいているところ(下のほう)に貼り付け
  4. ファイルを更新ボタンを押す

これでカスタマイズ完了です。

▼固定ページの日付が消えました▼

固定ページを一覧表示させてブログをレベルアップさせよう

本記事では【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッター/サイドバーほか】

ということで固定ページはどうやってブログに表示させたらいいの?についてお答えしてきました。

お問い合わせやプロフィール、プライバシーポリシーはブログの必須項目です。

きちんと備えて、あなたのサイトを作り上げていってください。

たいへんお疲れさまでした

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント

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