コクーンでトップページをカスタマイズ|カテゴリー画像を入れる

Word Press(コクーン)トップページ編集_1 コクーン

トップページは、「コクーン設定」の「インデックス」タブから、

簡単にカテゴリーごとの3カラム(3段組み)に変えられます。

この設定を使わないで自分でカスタマイズしてみたいと思います。

このブログのように、カテゴリー画像を使った3カラム(3段組み)表示にカスタマイズしてみたいと思います。

さらに、トップページのみ、右サイドバーを非表示にして消したいと思います。

もちろん、下のような2カラム(2段組み)にもできます。

※モバイルでは1カラム表示になります。

ちょっと長いですが、手順を説明します。

最初にカテゴリー画像を準備する

pixabayO-DANといった、無料で使用できる画像素材サイトで好きな画像を探し、下のようなカテゴリー画像を作ります。

3カラム(カテゴリーが3つ)なので、3枚(サイズ567×220)用意しました。

サイズは好みで調整してください。

記事のグループ分け|手順1

次に、各カラム(段組み)に入れる記事のグループ分けをします。

1グループに5記事ずつ入れて、3グループ作りたいと思います。

記事5つをメニューで編成|(1)

外観」>「メニュー」を開きます。

下の画面になります。

①「新しいメニューを作成」をクリック

②メニュー名(例:トップカテゴリー1)を入れる

③「メニューを作成」ボタンを押す

次に、新しいメニュー(グループ)に入れる記事を5つ選びます。

④ 固定ページ・投稿・カテゴリーを展開し、入れたい記事(カテゴリー)にチェックを入れる

メニューに追加」ボタンを押す

すると、記事が下のように追加されます。

⑤ ドラッグして好きな順番に入れ替えます。

⑥ 最後に「メニューを保存」ボタンを押します。

1グループ目が完成です!

上の手順を繰り返す|(2)

上の手順を繰り返して、新しいメニューをもう2つ作ります。

①「新しいメニューを作成」
②「メニュー名を付ける(トップカテゴリー2・3)」
③「作成」ボタン
④ 5記事選んで「メニューに追加」
⑤  並び替え
⑥「保存

3つのメニューが保存されました。

固定ページでトップページを作る|手順2

トップページ本体を作成します。

ブロックを3カラムにする|(3)

固定ページ」>「新規追加」を押します。

記事の編集画面になります。

画像に alt 属性が指定されていません。ファイル名: top_4.jpg

好きなタイトル(例:トップページ)を付けます。

① ブロックの「+」を押して展開し、「Consoleレイアウト」から「3カラム」をクリックします。

カテゴリー画像3枚とショートコードを入れる|(4)

下のように、3ブロックにそれぞれ最初に作成した画像を1枚ずつ貼り付けます。

そして、各3つの画像の下に、先ほど作ったメニューを呼び出す下のショートコードをそれぞれを入れます。

navi name="トップカテゴリー1" arrow="0"
navi name="トップカテゴリー2" arrow="0"
navi name="トップカテゴリー3" arrow="0"

※ショートコードは[ ]で囲んで下さい。

下のように右にアロー「>」を入れたい場合は、

ショートコードのarrow=「0」を「1」に変えます。

トップページの編集は、これで完了です。

新着記事を表示させるには?

新着記事を自動的に表示させるには、カテゴリー画像の下に以下のコードを貼り付けます。

new_list count="5" type="default" cats="all" children="0" post_type="post"

※ショートコードは[ ]で囲んで下さい。
  • 新着5記事を表示する設定になっています。countの「5」 の数字を変えて記事数を変更できます。

タイトルを消したい|手順3

このまま公開すると、下のようにタイトルが入ってしまいます。

これを消したいと思います。

外観」>「テーマエディター」を開きます。

コクーンの「子テーマ」>「スタイルシート」を開きます。

トップページのみタイトルを非表示にする下のコードを貼り付けます。

  1. /* トップページのタイトル非表示 */
  2. post-●●●● h1.entry-title {
  3. display: none;
  4. }

※コードの「post-●●●●」には、トップページの編集画面URLにある番号を入れます。

いよいよ、「固定ページでトップページを作る」手順2で作成したページを表示させます。

設定」>「表示設定」を開きます。

ホームページの表示」の設定を変えます。

  • ①「固定ページ」にチェックを入れる
  • ② 固定ページ(手順2)で作成したページを選ぶ
  • ③ 「変更を保存」ボタンを押す

公開されました!

サイドバーも消しておく|手順4

最後に、トップページのみ、サイドバーを非表示にして消したいと思います。

Cocoon設定」>「全体」タブを開きます。

下方の「サイドバーの表示状態」で、フロントページで非表示に変更して保存します。

これでサイドバーが非表示になりました!

以上で作業完了です!お疲れ様でした。

コメント