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

【Cocoon】おすすめ記事をトップに表示させる方法！脱カルーセル！

トップページにおすすめ記事を載せる Cocoonカスタマイズ

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。

Cocoonでおすすめ記事をトップに表示させたいって人、結構いると思うのです。

現状(2019/7現在)カルーセルがありますがカルーセルは表示数が多く表示も小さいため、個人的に使いやすさの向上には繋がっていないのかなと思っていました。

ワンクリックで表示できる簡単さがメリットではあるんですけどね。

  • 「この記事をどうしても見てもらいたい！」
  • 「まとめ記事をトップに表示したい！」

って時はもっと目立たせる必要があると思うんです。

そこで今回はトップにおすすめ記事を表示させるカスタマイズを紹介します。

二通り用意しました！

一つ目はタイトルなしバージョンです。アイキャッチ画像に文字がある人はこちらがオススメです。

cocoonでトップページにおすすめ記事を載せる(タイトルなし)

デモは当ブログです。

デモページ(タイトルなし)

二つ目はタイトルありバージョンです。

cocoonでトップページにおすすめ記事を載せる

デモページはこちら！

デモページ(タイトルあり)

それでは作り方を紹介していきます！

必ずバックアップを取ってから行なってください。

編集するファイル
  • style.css
  • main-before.php

【タイトルなし】おすすめ記事をトップに表示させる方法！

タイトルがない方のやり方です。タイトルを入れたい方は飛ばしてください。

こんな人にオススメです。

  • 画像に文字がある人
  • ごちゃごちゃさせたくない人

注意として画像のサイズを統一させる必要があります。バラバラな人はタイトルありの方を行なってください。

STEP1：CSSを追加

下記コードをCSSに追加してください。

「外観→テーマエディター→style.css」もしくは「外観→カスタマイズ→追加CSS」のどちらかでOKです。

  1. /************************************
  2. ** おすすめ記事(タイトルなし)
  3. ************************************/
  4. .recommend{
  5. display:-webkit-box;
  6. display:-ms-flexbox;
  7. display:flex;
  8. }
  9. .recommend a img{
  10. display:block;
  11. padding:0 2px;
  12. width:100%;
  13. }
  14. .recommend a:hover{
  15. opacity:0.7;
  16. transition: all .25s ease-out;
  17. }
  18. @media screen and (max-width: 1023px){
  19. .recommend{
  20. -ms-flex-wrap: wrap;
  21. flex-wrap:wrap;
  22. }
  23. .recommend a img{
  24. padding:1px 0;
  25. }
  26. .recommend a{
  27. width:50%;
  28. }
  29. }
/************************************
** おすすめ記事(タイトルなし)
************************************/
.recommend{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}
.recommend a img{
  display:block;
  padding:0 2px;
  width:100%;
}
.recommend a:hover{
  opacity:0.7;
  transition: all .25s ease-out;
}
@media screen and (max-width: 1023px){
  .recommend{
    -ms-flex-wrap: wrap;
    flex-wrap:wrap;
  }
  .recommend a img{
    padding:1px 0;
  }
  .recommend a{
    width:50%;
  }
}

ブラウザ(画面)サイズが1023px以下になると並びが変わるようになっています。

数値は自由に変更して大丈夫です。

スマホ時に一列で表示させたい場合

CSSのwidth:50%;と書いてあるところが横幅になります。

50%は画面の半分の大きさになるため二列になります。

そのため下記コードを削除するか100%に変更すれば一列になります。

  1. .recommend a{
  2. width:50%; /* スマホタブレット二列 */
  3. }
  .recommend a{
    width:50%; /* スマホタブレット二列 */
  }
  1. .recommend a{
  2. width:100%; /* スマホタブレット一列 */
  3. }
  .recommend a{
    width:100%; /* スマホタブレット一列 */
  }

STEP2：HTMLを編集

表示させるためのHTMLを入力していきます。

まず「投稿→新規追加」を開いてください。投稿はしませんが入力を簡単にするために使います。

下記コードをテキストエディタにコピペしてください。

  1. <div class="recommend">
  2. <a href="リンク1URL">
  3. <article>
  4. <h2>画像1</h2>
  5. </article>
  6. </a>
  7. <a href="リンク2URL">
  8. <article>
  9. <h2>画像2</h2>
  10. </article>
  11. </a>
  12. <a href="リンク3URL">
  13. <article>
  14. <h2>画像3</h2>
  15. </article>
  16. </a>
  17. <a href="リンク4URL">
  18. <article>
  19. <h2>画像4</h2>
  20. </article>
  21. </a>
  22. </div>
<div class="recommend">
<a href="リンク1URL">
<article>
<h2>画像1</h2>
</article>
</a>
<a href="リンク2URL">
<article>
<h2>画像2</h2>
</article>
</a>
<a href="リンク3URL">
<article>
<h2>画像3</h2>
</article>
</a>
<a href="リンク4URL">
<article>
<h2>画像4</h2>
</article>
</a>
</div>

4つのリンクを作ります。

リンクURLと書いてあるところにリンク先のURLをコピペしてください。

次にそれぞれ画像を入れていきます。

メディアを追加からでOKです。

注意

画像サイズは全て統一させてください

SEOのためにalt属性は必ず入力しましょう。

alt属性とは

画像の代わりになるテキスト。画像に関係あるキーワードを入れればSEO対策になると言われています。

STEP3：main-before.phpを編集

先ほど入力をしたHTMLをコピーします。

「外観→テーマエディター→tmp-user→main.before.php」を開きます。

下記コードを入力し、中に先ほど入力したHTMLを貼り付けます。

  1. <?php if ( is_home() || is_front_page() ) : ?>
  3. ここに貼り付け！
  5. <?php endif; ?>
<?php if ( is_home() || is_front_page() ) : ?>

ここに貼り付け！

<?php endif; ?>

トップページだけ表示させるための分岐なのでトップページ以外でも表示させたいって人は上記コードなしでそのまま貼り付けてください。

これでタイトルなしのおすすめ記事表示は終了です！

次にタイトルありのパターンの紹介です。

【タイトルあり】おすすめ記事をトップに表示させる方法！

こちらはこんな人におすすめです。

  • 画像に文字がない人
  • 画像サイズがバラバラな人

もちろん画像サイズが統一されてる人でも全然OKです。

STEP1：CSSを追加

下記コードをCSSに追加してください。

「外観→テーマエディター→style.css」もしくは「外観→カスタマイズ→追加CSS」のどちらかでOKです。

  1. /************************************
  2. ** おすすめ記事（タイトルあり）
  3. ************************************/
  4. .recommend{
  5. display:-webkit-box;
  6. display:-ms-flexbox;
  7. display:flex;
  8. }
  9. .recommend a{
  10. background-position: center;
  11. background-size: cover;
  12. width: 100%;
  13. height: 230px;
  14. text-decoration:none;
  15. }
  16. .recommend a:nth-of-type(1){
  17. background-image: url(画像1URL); /* 一番左 */
  18. }
  19. .recommend a:nth-of-type(2){
  20. background-image: url(画像2URL); /* 左から二番目 */
  21. }
  22. .recommend a:nth-of-type(3){
  23. background-image: url(画像3URL); /* 左から三番目 */
  24. }
  25. .recommend a:nth-of-type(4){
  26. background-image: url(画像4URL); /* 左から四番目 */
  27. }
  28. .recommend a article:hover{
  29. background: rgb(100, 100, 100,0.3);
  30. transition: all .25s ease-out;
  31. }
  32. .recommend a article{
  33. display:-webkit-box;
  34. display:-ms-flexbox;
  35. display:flex;
  36. -webkit-box-align: end;
  37. -ms-flex-align: end;
  38. align-items:flex-end;
  39. height:100%;
  40. -webkit-box-pack: center;
  41. -ms-flex-pack: center;
  42. justify-content: center;
  43. }
  44. .recommend a article h2{
  45. color: #fff;
  46. font-size: 16px;
  47. letter-spacing:0.7px;
  48. text-decoration: none;
  49. padding: 20px;
  50. line-height: 1.5;
  51. text-shadow: 0 0 7px rgba(0,0,0,1);
  52. font-size: 16px;
  53. }
  54. @media screen and (max-width: 1023px){
  55. .recommend{
  56. -ms-flex-wrap: wrap;
  57. flex-wrap:wrap;
  58. }
  59. .recommend a{
  60. width:50%;
  61. }
  62. }
  63. @media screen and (max-width: 480px){
  64. .recommend a{
  65. height:120px;
  66. }
  67. .recommend a article h2{
  68. line-height:1.7;
  69. font-size:10px;
  70. padding: 15px;
  71. }
  72. }
/************************************
** おすすめ記事（タイトルあり）
************************************/
.recommend{
  display:-webkit-box;
  	display:-ms-flexbox;
  display:flex;
}
.recommend a{
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 230px;
  text-decoration:none;
}
.recommend a:nth-of-type(1){
  background-image: url(画像1URL); /* 一番左 */
}
.recommend a:nth-of-type(2){
  background-image: url(画像2URL); /* 左から二番目 */
}
.recommend a:nth-of-type(3){
  background-image: url(画像3URL); /* 左から三番目 */
}
.recommend a:nth-of-type(4){
  background-image: url(画像4URL); /* 左から四番目 */
}
.recommend a article:hover{
  background: rgb(100, 100, 100,0.3);
  transition: all .25s ease-out;
}
.recommend a article{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items:flex-end;
  height:100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.recommend a article h2{
  color: #fff;
  font-size: 16px;
  letter-spacing:0.7px;
  text-decoration: none;
  padding: 20px;
  line-height: 1.5;
  text-shadow: 0 0 7px rgba(0,0,0,1);
  font-size: 16px;
}
@media screen and (max-width: 1023px){
  .recommend{
    -ms-flex-wrap: wrap;
    flex-wrap:wrap;
  }
  .recommend a{
    width:50%;
  }
}
@media screen and (max-width: 480px){
  .recommend a{
    height:120px;
  }
  .recommend a article h2{
    line-height:1.7;
    font-size:10px;
    padding: 15px;
  }
}

ブラウザ(画面)サイズが1023px以下になると並びが変わるようになっています。

数値は自由に変更して大丈夫です。

変更しなければいけないのが画像URLです。

4つ全て画像URLを入れてください。

画像URLはメディアから確認できます。

「メディア→ライブラリ」を開き、URLを確認したい画像を開きます。

リンクをコピーと書いてあるとこのURLをコピーします。

メディアからリンクをコピー

高さを変更する場合

正方形の形にしたいときなど高さを変更したい場合

  1. .recommend a{
  2. height: 230px;
  3. }
.recommend a{
  height: 230px;
}

heightの数値を変更すれば高さが変わります。二つあるのは上がPC、下がスマホとなっています。

スマホ時の高さを変更したい場合は

  1. .recommend a{
  2. height: 120px;
  3. }
.recommend a{
  height: 120px;
}

ここの数値を変更してください。

スマホ時に一列で表示させたい場合

デフォルトでは二列になるようになっていますが一列に表示させたい場合はCSSで

  1. @media screen and (max-width: 1023px){
  2. .recommend a{
  3. width:50%;
  4. }
  5. }
@media screen and (max-width: 1023px){
  .recommend a{
    width:50%;
  }
}

ここの50%を100%にするか削除すればOKです。

STEP2：main-before.phpを編集

「外観→テーマエディター→tmp-user→main.before.php」を開きます。

下記コードをコピペしてください。

  1. <?php if ( is_home() || is_front_page() ) : ?>
  2. <div class="recommend">
  3. <a href="リンク1URL">
  4. <article>
  5. <h2>リンク1タイトル</h2>
  6. </article>
  7. </a>
  8. <a href="リンク2URL">
  9. <article>
  10. <h2>リンク2タイトル</h2>
  11. </article>
  12. </a>
  13. <a href="リンク3URL">
  14. <article>
  15. <h2>リンク3タイトル</h2>
  16. </article>
  17. </a>
  18. <a href="リンク4URL">
  19. <article>
  20. <h2>リンク4タイトル</h2>
  21. </article>
  22. </a>
  23. </div>
  24. <?php endif; ?>
<?php if ( is_home() || is_front_page() ) : ?>
<div class="recommend">
<a href="リンク1URL">
<article>
<h2>リンク1タイトル</h2>
</article>
</a>
<a href="リンク2URL">
<article>
<h2>リンク2タイトル</h2>
</article>
</a>
<a href="リンク3URL">
<article>
<h2>リンク3タイトル</h2>
</article>
</a>
<a href="リンク4URL">
<article>
<h2>リンク4タイトル</h2>
</article>
</a>
</div>
<?php endif; ?>

リンク先のURLとタイトルをそれぞれ入力すれば完了です！

トップページ以外でも表示させたい人は最初と最後の行を削除してください。

アイキャッチの上にラベルを表示させる

ラベルで補足を付けられるようにします！やってもやらなくてもOK！

STEP1：CSSを追記

下記コードをコピペしてください。

  1. .recommend a{
  2. position:relative;
  3. }
  4. .recommend .recommend-label{
  5. position:absolute;
  6. top:7%;
  7. left:5%;
  8. z-index: 1;
  9. }
  10. .recommend .recommend-label div{
  11. background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  12. color: #fff;
  13. padding: 0em 0.8em;
  14. font-size: 13px;
  15. border-radius: 20px;
  16. line-height: 2;
  17. font-weight:bold;
  18. letter-spacing:0.5px;
  19. }
  20. @media screen and (max-width: 768px){
  21. .recommend .recommend-label div{
  22. padding: 0em 0.8em;
  23. font-size: 10px;
  24. line-height: 1.5;
  25. }
  26. }
.recommend a{
    position:relative;
}
.recommend .recommend-label{
    position:absolute;
    top:7%;
    left:5%;
    z-index: 1;
}
.recommend .recommend-label div{
    background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
    color: #fff;
    padding: 0em 0.8em;
    font-size: 13px;
    border-radius: 20px;
    line-height: 2;
    font-weight:bold;
    letter-spacing:0.5px;
}
@media screen and (max-width: 768px){
  .recommend .recommend-label div{
      padding: 0em 0.8em;
      font-size: 10px;
      line-height: 1.5;
  }
}

背景色を変えたい場合はbackground-imageを削除してbackground:#fff;のようにカラーコードを入力してください。

文字色を変えたい場合はcolor:#fff;のカラーコードを変更してください。

STEP2：main-before.phpを編集

各リンクに3行追加します。

  1. <a href="リンクURL">
  2. <article>
  3. <div class="recommend-label">
  4. <div>ラベル</div>
  5. </div>
  6. <h2>画像</h2>
  7. </article>
  8. </a>
<a href="リンクURL">
<article>
<div class="recommend-label">
<div>ラベル</div>
</div>
<h2>画像</h2>
</article>
</a>

ラベル名はなんでもOKです。

自動で新着記事を取得して表示させる

一つだけ新着記事を取得して表示させるように変更します。

注意
  • タイトルなしの方しか対応していません
  • アイキャッチのサイズを統一しなければいけません

リンクの一つを入れ替えてください。

before

  1. <a href="リンクURL">
  2. <article>
  3. <div class="recommend-label">
  4. <div>ラベル</div>
  5. </div>
  6. <h2>画像</h2>
  7. </article>
  8. </a>
<a href="リンクURL">
<article>
<div class="recommend-label">
<div>ラベル</div>
</div>
<h2>画像</h2>
</article>
</a>

after

  1. <?php
  2. global $post;
  3. $args = array( 'posts_per_page' => 1 );
  4. $myposts = get_posts( $args );
  5. foreach( $myposts as $post ) {
  6. setup_postdata($post);
  7. ?>
  8. <a href="<?php the_permalink(); ?>">
  9. <article>
  10. <div class="recommend-label">
  11. <div>NEW</div>
  12. </div>
  13. <?php if ( has_post_thumbnail()): ?>
  14. <h2><?php the_post_thumbnail('full'); ?></h2>
  15. <?php else: ?>
  16. <img src="アイキャッチが未設定の時の画像URL">
  17. <?php endif; ?>
  18. </article>
  19. </a>
  20. <?php
  21. }
  22. wp_reset_postdata();
  23. ?>
<?php
global $post;
$args = array( 'posts_per_page' => 1 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) {
setup_postdata($post);
?>
<a href="<?php the_permalink(); ?>">
<article>
<div class="recommend-label">
<div>NEW</div>
</div>
<?php   if ( has_post_thumbnail()): ?>
<h2><?php the_post_thumbnail('full'); ?></h2>
<?php else: ?>
<img src="アイキャッチが未設定の時の画像URL">
<?php endif; ?>
</article>
</a>	
<?php
}
wp_reset_postdata();
?>

アイキャッチが未設定の時に表示する画像URLだけ入力してください。

コメント

  1. 名前:おこげ :投稿日：2020/04/08(水) 13:45:07 ID：EwMDQ0NTM

    はじめまして。

    こちらの記事を参考にカスタマイズしたのですが、4枚のうち一番左の画像のみ表示されずに困っています。

    サイトURL：https://cat-manners.com

    CSS

    /************************************
    ** おすすめ記事（タイトルあり）
    ************************************/
    .recommend{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    }
    .recommend a{
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 230px;
    text-decoration:none;
    }
    .recommend a:nth-of-type(1){
     background-image: url(https://cat-manners.com/wp-content/uploads/2020/03/525ae598b3fa5822b12f8c3100df307e_s.jpg); /* 一番左 */
    }

    解決方法がありましたらご教授下さい

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2020/04/23(木) 17:23:16 ID：M5NDQ1NzA

      ＞おこげさん

      返信遅くなってしまい申し訳ございません。

      回答になってないのですが…
      公式でおすすめ記事が設定できるようになりましたのでそちらの方が簡単かもです！

      https://wp-cocoon.com/recommended-cards/

      返信
  2. 名前:みみ :投稿日：2021/02/20(土) 14:07:42 ID：c2MDE1ODE

    はじめまして。
    こちらのカスタマイズが大変分かりやすく、見た目も綺麗で気に入って使わせていただいております。

    こちらをヘッダーのメニューの代わりに使いたいと思っているのですが、トップページだけでなく他の記事など、どのページにも表示させるにはどうしたらいいでしょうか？
    おすすめカードも使ってみましたが、余白が思った通りにならないので、こちらを使いたいと思っています。

    返信
    • 名前:みみ :投稿日：2021/02/20(土) 15:55:24 ID：c2MDE1ODE

      すみません、説明にあった上記コードを入れなければ全ページに入るのですね。
      見落としていて申し訳ありません。
      素敵なカスタマイズをありがとうございます。

      返信

ページトップへ