トップページの作成方法と非表示カスタマイズ【Cocoon】

Cocoonでトップページ作るぞ！と思って作成方法を調べてみたものの、初心者の私には分からない事だらけで・・

そんな私の実体験をベースにして事前に知っておきたかったポイントをシンプルに纏めてみました。※ Cocoon / WordPress

Cocoonのカスタマイズ記事一覧【初心者おすすめ〜こだわりの一品まで】

Cocoonカスタマイズ方法の記事を一覧に纏めました。見出し・目次・トップページ・カルーセル・トップページ・リスト・見出し付きボックス・商品リンクなど。初心者の方で何から始めるか迷っている場合におすすめです。

unity-right.com

固定ページとは

固定ページはカテゴリーやタグに属さないページで、要するに投稿一覧やカテゴリーページに表示されないという特性があります。その他は投稿ページと特に変わりはありません。(たぶん)

投稿ページをトップページにする事も可能ですので、固定ページとは何か？についてあまり深く考え過ぎない方が良いです。

固定ページ作成方法

固定ページの内容（中身）の作り方は投稿ページと同じです。

固定ページを新規作成

中身は後で作りこむとして、適当な文章や画像でも入れといて保存します。まずは雰囲気を掴みましょう。

タイトル・パーマリンクを決める

私の場合はタイトル・パーマリンク共に「home」にしました。一般的で覚えやすいと思うので、決められない場合はそうしてみてください。

※既に「home」を別のページで使っている場合は他の名前で

なお、タイトルはこの後カスタマイズして非表示にしています。

「ホームページ」に設定する

「固定ページ」にチェックを入れ「ホームページ」で先程作ったhomeを選択して保存。

ヘッダー・サイドバーはどうなる？

ホームページ設定後にトップページを見てみると、先程作った固定ページ(home)の内容がいつもの投稿ページの様に表示されます。

サイト全体が変わってしまうのかと不安がありましたが、ヘッダー・フッター・サイドバーなどは設定前と変わらず表示されます。

トップページの中身の作り方

当サイトのトップページも参考にしてください。

完成イメージを描く

自分に出来るかどうかは一旦置いといて完成イメージを決めます。

好きなサイトやオシャレな雑誌のレイアウト等を参考にしながら「サイト全体」「ワンポイント」「雰囲気」「フォント」「カラーバランス」などを決めていきます。紙に描いてみるのも良いですね。

簡単なデザインからスタート！

まずは自分に出来そうな部分から作ってみましょう。トップページに関してはカラムの使用がオススメです。カラムは何かと便利ですので↓作り方の記事を参考にしてください。

カラムを使ってトップページの中身を作成する【Cocoon】

トップページの中身をどうするか迷った場合、とりあえずブロックエディターのカラムを使ってページの構成を整えます。画像やテキストなどアイデア次第でオシャレでバランス良いトップページにできるかも。

unity-right.com

難しい部分から始めてしまうと難しくて分からない → 全然進まない&カスタマイズコードもぐちゃぐちゃ → やる気無くなるなどデメリットもあるので、少しずつ勉強しながら簡単な部分を進めていくのがベターだと思います。

画像作成アプリ「Canva」

Canvaは無料の画像作成アプリ。私みたいな素人でもオシャレなそれっぽい画像を簡単に作ることができます。Googleアカウントで登録できるので、アイキャッチ画像やワンポイントデザインにオススメです。

非表示カスタマイズ

トップページ感を出す為にページタイトルや日付などを非表示にしました。

ページタイトル非表示

#post-2242
.entry-title {
  display: none;
}

※ページID（上記の場合”2242”）はページごとに数値が異なります

投稿日・更新日を非表示

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

タイトルの下に投稿日と更新日を表示する設定にしていますが、トップページのみ非表示にしました。ページIDは前項と同様です。

SNSシェア・フォロー 非表示

.page .sns-share,
.page .sns-follow {
  display: none;
}

特定ページのみ非表示もできますが、今回は固定ページ全てで非表示にしました。

サイドバー非表示

「トップページだけ非表示」「固定ページで非表示」など選択することができます。