トップページをオシャレにして自分だけの個性を出しませんか？
トップページをサイト型にカスタマイズしてみたいと思います。
固定ページを追加する
ダッシュボードの「固定ページ」→「新規追加」を選択してください。
編集画面に遷移したら、まずはタイトルを入力しましょう。
ここで入力するタイトルは実際には表示されないのでなんでもOKです。
カラムを追加する
2列表示になっているとオシャレなサイトっぽくなるので、カラムを追加しましょう。
ブロック一覧から「デザイン」→「カラム」を選択します。
カラムのパターンを選択できるので、お好みで選択してください。
ここでは、２カラムの「50 / 50」を選択します。
カラム内に見出しをつける
“＋”マークをクリックするとカラム内にブロックを追加できます。
さっそく、見出しブロックを追加しましょう。
見出しを任意で入力してください。カテゴリー名等にしておくと良いと思います。
ショートコードで記事一覧を表示する
段落ブロックに適当な文字を入力して、メニューが表示される状態にしてください。
メニューの中から、「ショートコード」をクリックします。
候補が表示されますので「新着記事一覧」を選択します。
最初に入力した適当な文字は、すぐに消しておきましょう。
カテゴリー一覧を表示する
このままでは、全投稿の新着一覧が表示されますので、カテゴリ毎の新着一覧になるようにしてみましょう。
まずは、カテゴリのIDを調べます。
ダッシュボードをブラウザの別画面で表示して、「投稿」→「カテゴリー」に移動します。
カテゴリー一覧が表示されますので、トップページに表示したいカテゴリを探してください。
マウスカーソルを合わせるとメニューが表示されるので、「編集」の文字にマウスカーソルを合わせてください。
※クリックは不要です。
「編集」にマウスを合わせると左下にURLが表示されるはずです。
URLの中に「tag_ID=99」の部分があるはずなので、数字を覚えておきます。
カテゴリーのIDを覚えたら、固定ページの編集画面に戻ります。
ショートコードの中に「cats=”all”」の部分がありますので、「cats=”99″」に変更してください。
ここまでで、プレビューしてみると下のように特定のカテゴリだけが表示されるはずです。
ボタンを追加して続きを見れるようにする
「COCOONブロック」→「ボタン」を選択します。
ボタンが追加できたら、ブロックを選択した状態で、右側で設定を変更します。
設定が表示されていない場合は、右上にある歯車マークをクリックしてください。
設定内容は、お好みで設定してください。
以上を繰り返して、カッコよくレイアウトしましょう。
目次を非表示にする
固定ページを使うと目次が表示されてしまいますが、トップページに目次があるのはおかしいので、目次を非表示にしましょう。
タイトルを非表示にする
いらない部分を非表示にします。
「外観」→「テーマエディター」を選択します。
Cocoonの子テーマのスタイルシート（style.css）にタイトルなど不要な項目を消すためのスタイルを指定します。
「子テーマ用のスタイルを書く」と書かれている下部に、下のコードをコピーして貼り付けてください。
/*トップページのカテゴリ別最新記事の幅固定*/
.widget-entry-cards .widget-entry-card-content{
padding-top:0.5em;
height:100px;
}
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
display: none;
}
/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{
display: none;
}
/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{
display: none;
}
/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
display: none;
}
/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
display: none;
}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
display: none;
}貼り付けた後は、下のようになるはずです。
「ファイルを更新」ボタンを押して、保存してください。
ページが出来たら公開しよう
トップページが完成したら「公開」ボタンをクリックしましょう。
続いて、実際にトップページとして表示されるように設定します。
「設定」→「表示設定」を選択します。
「ホームページの表示」設定で、固定ページ → ホームページ に先ほど公開したページを指定します。
設定が出来たら、「変更を保存」ボタンをクリックして完了です。
お疲れさまでした
自分のサイトを確認してみてください。
トップページが変わっていたら、成功です。
Cocoonの設定でもサイト型のような見た目にすることは出来ます。
が、オリジナリティを出すのであれば自分でレイアウトする方がおすすめです。
少しでも参考になれば幸いです。
コメント