プロフィールやお問い合わせページを作ったけど、どうやってブログに表示したらいいかわからない
固定ページは投稿ページとはちがい、新記事一覧には表示されません。
だから固定ページを表示させるためにはメニューを作って固定ページへのリンクを貼ってあげないといけないんですね。
本記事では、作成した固定ページを一覧で表示させる方法をご紹介していきます。あなたが表示させたい場所や、やり方の難しさであなたに合った方法を見つけてください。
ヘッダーとフッターには必ず表示させましょう！
やり方については、ひとつずつ丁寧に解説していきますのでしっかり見ながら一緒にやっていきましょう。
固定ページの作り方
まずは固定ページを表示させる前に、固定ページの作り方を確認していきましょう。WordPressの管理画面から固定ページ→新規追加です。
そしたら、ふつうの投稿記事を作るのと同様にブロックエディターが表示されますので、固定ページを作っていきましょう。
詳細の記事の書き方はこちらの参考記事【Cocoon】記事の書き方！投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
に書いてありますので、わからないときはご覧になってください。
また「お問い合わせフォーム」については個別に設置方法を書いていますので参考記事【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
をみていただけると間違いなく設置できると思います。
固定ページを一覧表示させる方法
固定ページが作れたところで、いよいよ表示させる方法を書いていきます。次の４項目を紹介していきますね。
- ヘッダーメニューとフッターメニューに表示させる
- おすすめカードで表示させる
- ボックスメニューで表示させる
- ウィジェットで表示させる
それぞれ詳しく見てみましょう。
ヘッダーメニューとフッターメニューに表示させる
ヘッダーは下の画像の①フッターは⑦です。
つまり、一番上と一番下にメニューを作って固定ページを表示させましょうねってことです。手順はほとんど一緒なので、同時に解説していきます。
ここは絶対やりたい項目です！
具体的なやりかた
画像を見ながら一緒にやっていきましょう。WordPressの管理画面から、外観→メニューと進んでください。
そしたら、新しいメニューを作成しましょうをクリック
メニュー名にヘッダーなら「ヘッダーメニュー」フッターなら「フッターメニュー」とつけてメニューを作成を押す。
▼メニューに追加を選択▼
追加したメニューの順番を整えます。順番を変えたいメニューをドラッグして移動したいところにドロップしましょう。
グッとつかんで、ペッと離しましょう
位置関係は次の画像のようにメニュー設定の「上」が実際の表示画面の「左」になります。
実際の表示はドロップダウンになる
ヘッダーメニューにチェックしてメニューを保存
メニュー設定でヘッダーにもフッターにも設定すれば一つのメニューでヘッダーとフッターの両方に固定ページが設定できます。
以上でヘッダー＆フッターの固定ページ表示方法は終わりです！
最初はヘッダーとフッターだけに表示しておけばいいでしょう。のちのちカスタマイズしたくなったときにこれ以降のやり方を参照してみてください。
おすすめカードで表示させる
おすすめカードはこの画像の②の位置のやつですね。
固定ページ以外にも
- 投稿ページ
- カテゴリー
- タグ
- カスタムリンク
- カスタム投稿
といったページを画像とタイトル付で表示ができます。
詳しくはCocoon公式ヘッダー下に任意の画像リンクを追加できる「おすすめカード」機能の使い方を参照ください。
ボックスメニューで表示させる
ボックスメニューはこんなやつですね。
僕はサイドバーと記事下に設置しています
これもおすすめページと同様にアイコンや画像を使って固定ページほかいろいろなページを表示することができます。
回遊率アップにとても役立ちますよ。
詳細はこちらの参考記事【Cocoon】ボックスメニューでサイドバーのカテゴリー表示をカスタマイズしようを確認ください。
ウィジェットで表示させる
本記事を書くのにいろいろいじってみましたところ、いくつかウィジェットで固定ページを表示する方法があったので紹介します。
「おすすめカード」
「ナビゲーションメニュー」
ウィジェット使用中
固定ページ編集画面でアイキャッチ画像を設定すれば、ページごとのアイキャッチ画像が出力されます。
僕はアイキャッチを設定していないので、全部同じ画像が出てます
やり方としてはざっくり２ステップです
- 表示用のメニューを作成する
- ウィジェット画面でウィジェットを配置
メニューの作り方は先ほどの項目「ヘッダーメニューとフッターメニューに表示させる」で詳しく書きましたので、割愛します。
メニュー作成後、ウィジェットはワードプレスの管理画面から外観→ウィジェットで設置ができます。
- ナビカード
- おすすめカード
- ナビゲーションメニュー
これらのウィジェットを表示したいところに追加すると、さっきの画像のような感じで固定ページが表示できます。
青枠内にドラッグ＆ドロップ
配置したらそれぞれのウィジェットの▼部分を押して、タイトルや表示したいメニューを選択しましょう。
これでブログに固定ページが表示されています。
固定ページの日付を非表示にする
さっきの項目で固定ページの一覧表示は完了しました。これからは発展事項として、固定ページの日付表示を消す方法を記載していきます。
投稿ページには日付はあった方がいいと思いますが、固定ページではジャマに思う人もいると思います。
CSSをちょいといじりますが、3行程度ですのでたいしたことはありません。
ではまずは、下のコードをコピーしてください。
.page .date-tags {
display: none;
}コピーしたら、ワードプレスの管理画面から外観→テーマエディターと進んでください。
そしたら
- Cocoon Childを選択
- スタイルシート（style.css)を選択
- あいているところ（下のほう）に貼り付け
- ファイルを更新ボタンを押す
これでカスタマイズ完了です。
固定ページを一覧表示させてブログをレベルアップさせよう
本記事では【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッター/サイドバーほか】
ということで固定ページはどうやってブログに表示させたらいいの？についてお答えしてきました。
お問い合わせやプロフィール、プライバシーポリシーはブログの必須項目です。
きちんと備えて、あなたのサイトを作り上げていってください。
たいへんお疲れさまでした
Cocoonの「困った」を解決する記事
Cocoonの使い方
当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。
コメント