コクーン

トップページをカスタマイズ|固定ページで作成する(コクーン)

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

簡単に変えられます。

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

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

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

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

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

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

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

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

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

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

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

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

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

記事5つをメニューで編成する

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

メニューを開く

下の画面になります。

新しいメニューを作成しましょう。 をクリック

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

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

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

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

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

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

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

⑥ 最後にメニューを保存 ボタンを押す

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

上の手順を繰り返す

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

メニュー作成の手順

  1. 新しいメニューを作成しましょう。をクリック
  2.  メニュー名(例:トップカテゴリー2・3)を付ける
  3.  メニューを作成 ボタンを押す
  4.  5記事選んでメニューに追加  ボタンを押す
  5.  好きな順に並び替える
  6.  最後にメニューを保存 ボタンを押す

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

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

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

「固定ページ」>「新規作成」を開きます。

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

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

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

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

① ブロックの [ ⊕ ] を押して展開し、からをクリックします。

カテゴリー画像とメニューを呼び出すコードを入れる

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

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

  1. [navi name="トップカテゴリー1" arrow="0"]
  2. [navi name="トップカテゴリー2" arrow="0"]
  3. [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. }
  5. /* ここまで */

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

手順4 作成したページをサイトに表示させる

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

つあちゃん
作成したページは公開しておきます。
「設定」「表示設定」を開きます。

下のようにの設定を変更します。

固定ページにチェックを入れる

 ②固定ページ(手順2)で作成したページを選ぶ

変更を保存 ボタンを押す

公開されました!

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

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

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

下方ので、[フロントページで非表示]に変更して保存します。

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

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

  • この記事を書いた人

つあちゃん

ブログ歴2年。Wordpress初心者から試行錯誤しながら始めました。普段は翻訳のお仕事をしながら余暇にまったりとブログを書いています。他にも「台湾メモ」という旅行ブログを運営しています。

-コクーン