Twitterはこちら仕事依頼はこちら

【超簡単!】Cocoonトップページをスッキリとサイト型へカスタマイズ!

Cocoonトップページカスタマイズ
この記事は2019/11/10に大幅に内容を変更しています。修正点をご確認ください。

こんにちは、ぽんひろ(@ponhiroo)です。

この記事はCocoonのトップページカスタマイズの紹介になります!

  • トップページをサイト型にしたい
  • 自由に記事を紹介したい
  • 見た目をスッキリさせたい

記事が増えてくると過去の記事が埋もれてしまい、トップページから探しにくくなりますよね。

見て欲しい記事、おすすめ記事をできれば配置したいです。そんな人に向けたカスタマイズになります。

完成イメージはデモページをご覧ください。

新着記事と人気記事のタブ切り替えは別記事で紹介しています。

注意 カスタマイズする前に必ずバックアップをしてください。

修正情報(2019/12/1)

タイトルの長さによってボックスの大きさが変わっていたので高さを揃えるようにCSSを追加しました。

  • 46行目
  • 87行目
スポンサーリンク

Cocoonでオリジナルのトップページを作る手順

手順は以下の通りです。

手順
  • STEP1
    固定ページ作成
    トップページ用の固定ページを新規作成します。
  • STEP2
    固定ページ設定変更
    目次と広告を非表示設定
  • STEP3
    固定ページ作成
    記事一覧用の固定ページを新規作成します。
  • STEP4
    CSSコピペ
    CSSをコピペします。
  • STEP5
    必要ないもの削除
    非表示にしたいものを削除します。
  • STEP6
    固定ページをトップページに
    設定から固定ページをトップページに設定

STEP1:トップページ用の固定ページを新規作成しよう!

まずは固定ページを作成していきます。

固定ページ→新規追加」を選択!

固定ページのタイトルはサイト名や狙っているキーワードを入れてください。

下記コードをビジュアルエディタではなく、テキストエディタで入力してください。

<h2>新着記事</h2>

[new_list count="6" type="large_thumb"]

<div class="p-button"><a href="./articles">もっと見る <i class="fa fa-chevron-circle-right"></i></a></div>

<h2>おすすめ記事</h2>

[new_list count="2" tags="0" type="large_thumb"]

<h2>カテゴリ1</h2>

[new_list count="2" cats="0" type="large_thumb" class="mobile-2"]

<div class="p-button"><a href="カテゴリページURL">もっと見る <i class="fa fa-chevron-circle-right"></i></a></div>

<h2>カテゴリ2</h2>

[new_list count="2" cats="0" type="large_thumb" class="mobile-2"]

<div class="p-button"><a href="カテゴリページURL">もっと見る <i class="fa fa-chevron-circle-right"></i></a></div>

順番や内容、カテゴリの数などは自由に変更してください!

それでは細かいカスタマイズについて説明していきます。

表示記事数はcountの数値を変更

各項目で表示する記事数を変更したい場合は[new_list]の中にあるcountの数値を変更してください。

6なら6記事、2なら2記事表示されます。

おすすめ記事はtagsの数値を変更

tagsはその名の通り、タグで絞り込む機能です。WordPressにはカテゴリーの他にタグという機能があります。

新規で「おすすめ」タグを作成していきましょう。WordPress管理画面の「投稿タグ」から新規作成ができます。

おすすめとしてトップページに表示させたい記事に「おすすめ」タグを設定します。記事編集画面のタグ欄から設定可能です。

設定が終わったらまたWordPress管理画面から「投稿タグ」を開き、おすすめを開いてください。

URLの「tags_ID」の数値がおすすめタグの数値になります。

タグidの数値を確認する

[new_list]のtags=”0″の数値をおすすめタグの数値に変更すればOKです。

カテゴリーはcatsの数値を変更

カテゴリー別に新着記事を取得するにはcatsの数値を変更します。

WordPress管理画面の「投稿カテゴリー」から表示させたいカテゴリーを開きます。

タグと同様にURLの「tags_ID」の数値を調べます。

カテゴリidの数値を確認する

[new_list]のcats=”0″の数値を調べたカテゴリーの数値に変更すればOKです。

カテゴリーページのURLを変更

カテゴリーのもっと見るボタンのURLをカテゴリーページのURLに変更してください。

普通にページを開いてURLを確認してもいいですし、WordPress管理画面の「投稿カテゴリー表示」からでもページを開くことができます。

スマホで2列表示にする方法

PCやタブレットでは全て2列になっていますが、スマホでは1列になるようになっています。

スマホで見たときに2列にしたい場合は[new_list]にclass=”mobile-2″を追加すればOKです。

サンプルコードではカテゴリーにclass=”mobile-2″が書かれていると思います。

逆に1列にしたい場合はclass=”mobile-2″を削除してください。

STEP2:目次と広告を非表示設定

広告はどちらでもいいですがトップページに目次があるのはおかしいので非表示に設定します。

固定ページ編集画面に設定できる箇所があります。

広告、目次非表示設定

チェックを入れたら固定ページの準備はOKですので
公開しましょう!

公開しても表示されないのでご心配なく!

STEP3:記事一覧用の固定ページを作成(必要な人のみ)

新着記事一覧のページを作りたい人限定です。

新着記事下のもっと見るボタンから飛ばすページになります。

固定ページ新規追加で作成しましょう。

タイトルは何でもいいですがわかりやすいように「記事一覧」とつけて置きます。パーマリンクはarticlesにしましょう。

記事一覧用固定ページ

これでOK!

公開しましょう!

STEP4:トップページ用のCSSをコピペ

CSSでレイアウトとデザインを整えます。

メモ

WordPress利用者は「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

/************************************
** トップページカスタマイズ
************************************/
.home #main h1{
    font-size: 1em;
    color: #555;
    letter-spacing: 1px;
    margin: 1em 0 -2em;
    font-weight: 400;
    display: flex;
    align-items: center;
}
.home #main h1:before, .home #main h1:after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: #aaa;
    display: block;
}
.home #main h1:before {
    margin-right: .4em;
}
.home #main h1:after {
    margin-left: .4em;
}
.home #main .large-thumb{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0.8em 0;
}
.home #main .large-thumb a{
    width: 50%;
    padding: 10px;
}
.home #main .large-thumb a:hover{
    background:unset;
}
.home .widget-entry-cards .e-card {
    font-size: 18px;
    box-shadow: 0 0 4px rgba(0,0,0,.15);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    height:100%;
}
.home .widget-entry-cards .e-card:hover {
    transform: translateY(-3px);
    box-shadow: 0px 3px 18px 3px rgba(0,0,0,.08);
}
.home .widget-entry-cards figure {
    float: none;
    width: 100%;
}
.home .widget-entry-cards figure img {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 210px;
}
.home .widget-entry-cards .card-content {
    margin: 0 0 0.5em;
    padding:10px 15px;
    background:#fff;
}
.home #main .large-thumb .new-entry-card-title,.home #main .large-thumb .popular-entry-card-title {
    font-size: 0.9em;
    line-height: 1.5;
    font-weight: 600;
    color: #555;
    margin-top: 3px;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
    .home #main h1{
        margin: 1em 0 0;
        padding: 0;
        font-size:0.8em;
    }
    .home .widget-entry-cards .e-card {
        margin:0 5px;
    }
    .home #main .large-thumb a {
        width: 100%;
        padding: 0;
        margin:0 0 15px;
    }
    .home .mobile-2{
        justify-content:space-between;
    }
    .home .mobile-2 a{
        width:48% !important;
    }
    .home .mobile-2 figure img {
        object-fit: unset !important;
        height: auto !important;
    }
    .home #main .large-thumb .new-entry-card-title{
        line-height:1.3;
    }
}
/************************************
** ボタン
************************************/
.p-button {
    max-width: 300px;
    margin: 0 auto;
}
.p-button a {
    display: block;
    margin:25px 0;
    padding: 0.8em 1em;
    border-radius: 2em;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    background: #eba02f;
    box-shadow: 0 5px 20px rgba(235, 160, 47, .5);
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity:1;
}
.p-button a:hover{
    box-shadow:none;
    transform: translateY(3px);
    opacity:1;
}

STEP5:トップページからSNSボタンなど必要ないものを削除

好みによりますがSNSボタン、投稿・更新時間、著者情報を消したい場合もあるかと思います。

消す方法は2通りあります。

2つの方法
  • CSSで非表示にする
  • PHPで非表示にする

2019/11/10以前まではPHPを推奨していましたがCocoonのアップデートを考慮した場合、問題が起こりうる可能性があるため現在はCSSを推奨しています。

言ってることコロコロ変わってすみません…

CSSでは下記コードで削除可能です。先ほどコピペしたCSSの下に入れておいてください。

.home header .sns-share,.home footer .sns-share,.home footer .sns-follow,.home header .post-date,.home .post-update,.home .author-info{
    display: none;
}

STEP6:固定ページをトップページに設定

あと少し!

WordPress管理画面→設定→表示設定」を開きます。

ホームページの表示で固定ページを選択し、先ほど作成したトップページ用の固定ページを選択します。

記事一覧を作成した方は投稿ページで「記事一覧」を選択してください。

cocoonトップページ設定

変更を保存で完成です!

お疲れ様でした!

2019/11/10以前にカスタマイズされた方へ

2019/11/10以前にこの記事を参考にカスタマイズされた方は大変申し訳ないのですが修正をお願いします。

理由は以下の通りです。

  • 公式のアップデートで不具合が起きる可能性がある
  • 新機能が使えない可能性がある

修正方法

  • 子テーマ内のtmpフォルダを削除
  • functions.phpの一部コード削除

functions.phpで削除するコードは以下の箇所です。

//Cocoonトップページh1タグ表示
function generate_the_site_logo_tag( $is_header = true ) {
  $tag = 'div';
  if ( ( is_front_page() || !is_singular() && !is_archive() ) && $is_header ) {
    $tag = 'h1';
  }
  if ( $is_header ) {
    $class = ' logo-header';
  } else {
    $class = ' logo-footer';
  }

  $logo_url = get_the_site_logo_url();
  $footer_logo_ur = get_footer_logo_url();
  if ( !$is_header && $footer_logo_ur ) {
    $logo_url = $footer_logo_ur;
  }
  if ( $logo_url ) {
    $class .= ' logo-image';
  } else {
    $class .= ' logo-text';
  }
  //ロゴの幅設定
  $site_logo_width = get_the_site_logo_width();
  $width_attr = null;
  if ( $site_logo_width && $is_header ) {
    $width_attr = ' width="' . $site_logo_width . '"';
  }
  //ロゴの高さ設定
  $site_logo_height = get_the_site_logo_height();
  $height_attr = null;
  if ( $site_logo_height && $is_header ) {
    $height_attr = ' height="' . $site_logo_height . '"';
  }


  $logo_before_tag = '<' . $tag . ' class="logo' . $class . '"><a href="' . get_home_url() . '" class="site-name site-name-text-link" itemprop="url"><span class="site-name-text" itemprop="name about">';
  $logo_after_tag = '</span></a></' . $tag . '>';
  if ( $logo_url ) {
    $site_logo_tag = '<img class="site-logo-image" src="' . $logo_url . '" alt="' . get_bloginfo( 'name' ) . '"' . $width_attr . $height_attr . '>';
  } else {
    $site_logo_tag = get_bloginfo( 'name' );
  }
  echo $logo_before_tag . $site_logo_tag . $logo_after_tag;
}

PHPを変更する方法でSEOに強いトップページ構築についてはこちらのサイトが参考になります。

Cocoonカスタマイズ他にもやってます!

他にもいろいろCocoonカスタマイズをやってますので良かったらご覧ください!

あわせて読む Cocoonカスタマイズをまとめ!おしゃれなものや機能性をあげるものなど!

【30通り以上!】Cocoonカスタマイズ!コピペで簡単!
Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。

コメント

  1. はじめまして。

    Cocoonカスタマイズの記事、いつも参考にさせてもらっています。
    この記事で紹介されているCocoonのnew_list機能なのですが、これで表示される記事の一覧を、デフォルトのトップページで表示される最新記事インデックスのカード風にできないでしょうか?

    CSSで実現できないかと頑張っていたのですが、つい先日ようやくCSSを勉強し始めたところで、なかなかうまくいきません。

    よろしければご教授いただければ幸いです。

    • >hrtさん

      コメントありがとうございます。
      デフォルトのカード風とは本文と日付が表示されてるものですかね?違ったらすみません。

      その場合、PHPを変更しないと難しいかもしれません。

      こちらのサイトにやり方が書いてありますね
      https://neverendworks.com/news/creation-of-new-articles-list-with-excerpts/

      ちなみに日付だけだったらCSSで表示できそうです

  2. >ぽんひろさん
    回答ありがとうございます。

    テーマのアップデートで使えなくなる可能性もあったりと、一筋縄ではいかなさそうですね。

    まずはぽんひろさんのブログで紹介されている形でやってみて、おいおい考えてみたいと思います。
    ありがとうございました!

    • >hrtさん

      なるべくPHPはいじりたくないですよね。

      Cocoonの公式フォーラムに書き込めばもしかしたら要望に応えてくれるかもしれません!

  3. 詳しい解説ありがとうございます。

    1点質問なのですが、tmp/content.phpを入れるとアイキャッチが非表示になってしまいます。

    アイキャッチを残すことはできますか?

    お忙しい中申し訳ありませんが、お時間のある時にご教示いただけましたら幸いです。

    • >さくらさん

      返信遅くなってすみません!

      アイキャッチは非表示にならないはずなのでどこか別の理由で非表示になってるのかもしれません。

      他は問題なく表示されているのでしょうか?

  4. ぽんひろさん

    いつも参考にさせて頂いています。
    Cocoonのバージョンを上げたせいか、トップページのサムネイル画像の正しく表示されなくなってしまいました。
    事象としては、今までスマホで横一杯に表示されていたサムネ画像が、半分ほどの横幅になってしまうというものです。

    style.cssを見てみると、

    -webkit-box-orient: column;
    -webkit-box-direction: column;

    上記の部分で”columnは想定されていません”のような警告が出ており反応していなさそうです。

    お手数おかけしますが、解決方法ありましたら教えていただきたいです。

    • 重ねて失礼します。

      style.cssを触ってみたところ、9~13行目のデフォルト用画像サイズが反映されてしまっているようでした。

      私はlarge_thumbのサイズで表示したかったので、一旦そのソースをコメントアウトして対応することが出来ました。

      お騒がせいたしました。

  5. いつも素敵なテーマのカスタマイズ方法を参考にさせて頂いてます。

    今回
    「SEOに強いオリジナルトップページを作る!」
    「トップページにオシャレなカテゴリ切り替えタブを作る」

    以上2つのページを参考にトップページのカスタマイズを行ったのですが、ヘッダー下のグローバルメニューが表示されなくなりました。

    cocoonの設定やメニューの見直しをしたのですが改善されず、もしトップページ用に作成した固定ページにもメニューを表示させる方法があればご教授していただきたくコメントさせて頂きました。

    何卒よろしくお願いいたします。

    • >ぴー助さん

      コメントありがとうございます。
      設定等を調べてみないと原因の特定はちょっと難しいですね…。

      問い合わせからで大丈夫ですので対象URLをお教えいただいてもよろしいでしょうか。

  6. ぽんひろさん、はじめまして。
    「さくらの羽根」というブログ運営をしております。さくらと申します。

    トップページのカスタマイズが、とてもわかりやすく初心者の私でも簡単に変更することが出来ました。
    ありがとうございます!!

    ですが・・・
    なぜかトップページのみ、サイドバーが下の方に表示されるようになりました。
    初心者なもので、まったく原因がわからず・・・
    今は、cocoon設定でフロントページのみ非表示で対応しております。

    お手数おかけしますが、ご教示いただけませんでしょうか?
    よろしくお願いいたします。

    • >さくらさん

      初めまして!
      参考にしていただきありがとうございます!

      おそらくdivタグが一つ多いか、少ないため起こってる現象かと思います。
      余計なところにdivタグが入ってるかどうか大変ですが探してみてください。

      • ぽんひろさん、お忙しい中お返事ありがとうございます。

        divタグも確認してみたのですが…変わらなかったんです。
        でも、確認漏れかもがあるのかも…ですね。

        あとは、アイキャッチの画像サイズかもしれないな…と思いました。
        アイキャッチは、横1200pxとかにしてるので…

        ひとまず、コクーンの色んな機能を使ってカスタマイズし直しちゃったので、また時間のある時に再チャレンジしてみます!

        私のブログでは、ぽんひろさんのカスタマイズの方が、読者さん的には良いと思うので、使いこなせるように頑張ります!

        ありがとうございました!!

  7. ぽんひろ様

    いつもサイトの参考にさせていただいております。済ブログというものを運営しておりますイカスミと申します。
    今回この「オリジナルのトップページ」を作成していたのですが、記事が全て1列の表示となってしまって原因がわかりません。

    HTMLはぽんひろ様のものをそのままコピペした状態なのですが・・。何か他の表示設定がおかしいのでしょうか?

  8. ぽんひろ様

    上記で相談した件ですが、プレビューで反映されていないだけでした。
    大変失礼いたしました。。

    • はじめまして。

      横からすみません。

      私も同じような状態で1列表示のままになっています。

      cocoon設定で何か変更しておいた方がいいのでしょうか?

      今までcocoonはデフォルトのまま利用しており、カスタマイズなどは一切していません。

      何かアドバイスいただけると助かります。

      • >イカスミさん、ぱろぱろさん

        連絡遅くなりまして申し訳ございません。

        説明不足で申し訳ないのですが、公開をしないとCSSが反映されません。
        ですので、プレビューが見れないのは不安だと思いますが公開をしてトップページに設定してみてください。

ページトップへ