簡単!固定ページでフロントページを作成しました【WordPress@Cocoon】

この記事を書いた時の環境

当サイトは旅行だのランチだの株だのダイエットだの、カテゴリが18個もある雑多すぎるサイト。

WordPressは元々「新着記事」がずらっと列記されたスタイルなので、ごちゃごちゃ過ぎて意味不明になってしまいました。

固定ページを使って、簡単にフロントページ(サイトの表紙)を作成してみました

固定ページを追加

ダッシュボード→固定ページ→「新規追加」をクリックします。

 

タイトルを付けます。後からタイトルを表示させないようにしますので適当で良いです。

 

作成

テーマCocoonの機能をフル活用します。

記事を左右に分けたい場合は「タグ→2カラム,3カラム」

ボタンを表示させたい場合は「スタイル→ボタン」

また、ショートコードを追加することにより、本文中に動的な操作を加えることも可能。

新着記事を入れたい場合は「ショートコード→新着記事一覧」をクリックします。

 

作成ボタンをただクリックして作ってみました。

<h2 style="text-align: center;">新着</h2>
[新着記事]
<h2 style="text-align: center;">カテゴリ別</h2>
<div class="column-wrap column-3">
<div class="column-left">
<a class="btn btn-grey btn-l" href="https://URL/category/カテゴリID/">カテゴリ名A</a>
[カテゴリ名Aの新着記事]
</div>
<div class="column-center">
<a class="btn btn-grey btn-l" href="https://URL/category/カテゴリID/">カテゴリ名B</a>
[カテゴリ名Bの新着記事]
</div>
<div class="column-right">
<a class="btn btn-grey btn-l" href="https://URL/category/カテゴリID/">カテゴリ名C</a>
[カテゴリ名Cの新着記事]
</div>
</div>

Cocoonを使っていない人はプラグイン「Shortcodes Ultimate」「Page Builder by SiteOrigin」が役に立つかと

 

新着記事の表示方法

まずは、カテゴリIDを確認します。

投稿→カテゴリー→表示させたいカテゴリー名にカーソルをあてると下に表示されます。

この場合は「5」がIDになります。

 

あとは、Cocoonのショートコード機能を使って表示させます。人気記事も同様にカスタマイズが可能です。

new_list count="5"  type="default" cats="all" children="0" post_type="post"
  • countは表示数
  • typeは表示方法
  • catsはカテゴリID(allは全て)
  • childrenは子カテゴリ
  • post_typeは投稿タイプ

 

 

カラムを変更する

固定ページの投稿画面から変更することができます。

 

「ページ設定」でデフォルト、1カラム(広い)(狭い)などを簡単に変えられて便利です。

 

CSSで色々カスタマイズ

外観→テーマ→Cocoon Childカスタマイズ→追加CSSに追加します

 

もしくは、外観→テーマエディタ→Cocoon Child スタイルシートに追記します。

 

固定フロントページのタイトルを非表示

.home.page .entry-title{
display: none;
}

 

モバイルフロント固定ページのタイトルを非表示

@media screen and (max-width:480px){
.home.page .entry-title{
display: none;
}
}

 

固定フロントページの投稿日を非表示

.home.page .post-date{
display: none;
}

 

固定フロントページの更新日を非表示

.home.page .post-update{
display: none;
}

 

固定フロントページの投稿者名を非表示

.home.page .author-info{
display: none;
}

 

モバイルグローバルメニュー非表示

@media screen and (max-width:480px){
.home.page #navi {
display: none
}
}

 

カルーセルのカテゴリーを非表示。

.carousel .cat-label {
display: none;
}

 

フロントページを表示させる

下書きで十分に確認したらフロントページとして表示させます。

設定→表示設定→ホームページの表示を開きます。

「固定ページ」にチェックを入れ、ホームページを選択したら、1番下にある「変更を保存」をクリックして完成です。

 

相変わらずパッとしませんが、とりあえず完成。カルーセルはフロントページのみで表示させています。

 

後日談

ロゴを作成し、グローバルナビを入れて、カルーセルは外し、新着記事のみのシンプルな外観にしました。

 







サイト運営
わたしらしく