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

 

当サイトは旅行だのランチだの株だのダイエットだの、

カテゴリが18個もある雑多すぎるサイト。

WordPressは元々「新着記事」がずらっと列記されたスタイルなので、

ごちゃごちゃ過ぎて意味不明になってしまいました。

 

 

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

 

固定ページ

 

  1. 固定ページ
  2. 「新規追加」をクリック

 

 

タイトルを付けます。

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

 

 

表紙を作成

 

現在はテーマCocoonを使っています。Cocoonには様々な機能が備わっており、クリック1つで見出しの作成や、画面をカラムで分けることができます。

 

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

 

記事を左右に分けたい場合は「タグ→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」が役に立つと思います。

 

新着記事の表示方法

 

人気記事も同様にカスタマイズが可能です。

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

 

  • countは表示数
  • typeは表示方法
  • catsはカテゴリID(allは全て)
  • childrenは子カテゴリ
  • post_typeは投稿タイプ
  • Cocoon参照

 

カテゴリIDを確認する方法

 

https://URL/category/カテゴリID/

 

カテゴリ名にカーソルをあてると下に表示されます。

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

 

 

他の機能

 

ページタイプを1カラムにすることができます。

「目次を表示しない」「AMPを生成しない」設定もCocoonなら簡単。

 

 

カルーセル

 

フロントページのみで表示させています。

 

 

カルーセルのカテゴリを非表示にするCSS
.carousel .cat-label {
display: none;
}

 

CSSでカスタマイズ

 

  1. 外観
  2. テーマの編集
  3. 子テーマ
  4. スタイルシートに記載
  5. ※もしくは外観→カスタマイズ→追加CSSに記載

 

 

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

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

 

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

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

 

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

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

 

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

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

 

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

.home.page #navi {
display: none
}

 

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

 

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

  1. 設定
  2. 表示設定
  3. ホームページの表示
  4. 「固定ページ」を選択
  5. 「変更を保存」をクリック

 

 

完成

 

完成しました

まだまだダサいですが(センスが欲しい)とりあえずはこれで良いです。

※後日、サイドバーを無くして1カラムにしてみました。

 

エックスサーバーを使っています。