【Cocoon】フロントページに任意のおすすめ記事を表示させる方法

WordPressのCocoonテーマを利用してブログを運営しています。
フロントページをカスタマイズして、
読者へ訴求したい任意のおすすめ記事を表示させたいです。

こんなお悩みにお答えします。

今回は、Cocoonのフロントページをカスタマイズして

任意に選んだおすすめ記事を３つ表示させる方法をご紹介していきます。

コピペすれば、完成までに10分もかからないと思いますので、ぜひ試してみてください。

おすすめ記事の画像、タイトル、「記事を読む」ボタンをクリックすると、

記事ページへ遷移するといった動きになります。

実際に動作を確認したい方は、当ブログのトップページを見てみて下さい。

■ PCの完成イメージ（赤枠箇所）

■ スマートフォンの完成イメージ（赤枠箇所）

本記事の内容

Cocoonのフロントページをカスタマイズして
任意のおすすめ記事を３つ表示させる

それでは、実装方法をご紹介していきます。

フロントページに任意のおすすめ記事を3つ表示させる方法

フロントページに任意のおすすめ記事を3つ表示させる方法

事前にWordpressのバックアップを取得するなど、

問題が起きたときに、実施前の状態に戻せるようにしておきましょう。

Cocoon子テーマを有効にする

「WordPress管理画面」->「外観」->「テーマ」

Cocoon Childが有効になっているかを確認します。

子テーマのダウンロードがまだの方は、こちらの記事を参考にしてください。

テーマのダウンロード

CSS

「WordPress管理画面」->「外観」->「テーマエディタ」

Cocoon Child: スタイルシート (style.css) に以下のコードを追加してください。

.recommend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.recommend .wrap {
  width: 33.33333%;
  margin-top: 20px;
  padding-bottom: 40px;
  background: #fff;
  text-align: center;
  padding: 0;
}

.recommend .wrap.center {
  margin-left: 3%;
  margin-right: 3%;
}

.recommend .wrap .thumbnail {
  margin-top: 30px;
  margin-bottom: 20px;
  border: none;
  padding: 0;
  display: block;
  line-height: 1.42857;
  background-color: #fff;
}

.recommend .wrap .thumbnail a img {
  display: block;
  padding: 0;
  width: 100%;
  height: 200px;
}

.recommend .wrap .thumbnail a:hover {
  opacity: 0.7;
  transition: all .25s ease-out;
}

.recommend .wrap h2 {
  font-size: 19px;
  padding-right: 5px;
  padding-left: 5px;
}

.recommend .wrap h2 a {
  font-weight: 600;
  color: #7B7B7B;
  line-height: 40px;
  text-decoration: none;
}

.recommend .wrap h2 a:hover, .recommend .wrap h2 a:focus, .recommend .wrap .readmore a:hover, .recommend .wrap .readmore a:focus {
  text-decoration: underline;
}

.recommend .wrap .readmore {
  margin: 40px 0 40px 0;
}

.recommend .wrap .readmore a {
  border: 1px solid #909090;
  color: #7B7B7B;
  padding: 15px 33px 14px;
  text-decoration: none;
  border-radius: 99px;
}

@media screen and (max-width: 1023px){
  .recommend {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
	
  .recommend .wrap {
    width: 100%;
  }

追加したら、「ファイルを更新」ボタンをクリックします。

HTML

以下のコードの「記事URL」、「画像URL」、「タイトル」を書き換えて

「WordPress管理画面」->「外観」->「テーマエディタ」

Cocoon Child: main-before.php (tmp-user/main-before.php) に追加してください。

画像は、1200x400 や 600x200 など、3 : 1 の比率を推奨します。

<?php if ( is_home() || is_front_page() ) : ?>
<div class="content cf">
  <div class="content-in wrap" style="height: auto !important;">
    <div class="recommend">
      <div class="wrap">
        <div class="thumbnail">
          <a href="記事URL">
            <img src="画像URL" alt="タイトル">
          </a>
        </div>
        <h2>
          <a href="記事URL" title="タイトル">タイトル</a>
        </h2>
        <div class="readmore">
          <a href="記事URL">記事を読む</a>
        </div>
      </div>
      <div class="wrap center">
        <div class="thumbnail">
          <a href="記事URL">
            <img src="画像URL" alt="タイトル">
          </a>
        </div>
        <h2>
          <a href="記事URL" title="タイトル">タイトル</a>
        </h2>
        <div class="readmore">
          <a href="記事URL">記事を読む</a>
        </div>
      </div>
      <div class="wrap">
        <div class="thumbnail">
          <a href="記事URL">
            <img src="画像URL" alt="タイトル">
          </a>
        </div>
        <h2>
          <a href="記事URL" title="タイトル">タイトル</a>
        </h2>
        <div class="readmore">
          <a href="記事URL">記事を読む</a>
        </div>
      </div>
    </div>
  </div>
</div>
<?php endif; ?>

追加したら、「ファイルを更新」ボタンをクリックします。