【Cocoon】「人気記事」を表示する方法を初心者にも分かりやすく紹介

 

WordPressのCocoonテーマでの「人気記事」の追加方法です。

 

サイドバーに人気記事を追加してサイト内回遊率を上げましょう

 

設定の仕方とともに、おまけとしてデザイン変更用のCSSも貼り付けておくので、気に入られたらそのままご使用ください。

 

 

できあがりのイメージ

 

まずはできあがりのデザインイメージです。

 

 

 

オレンジ色の線で囲った部分が表示されるようになります。

 

 

「人気記事」設定方法

 

ウィジェットの設定で変更可能

 

ウィジットの設定でサイドバーに「人気記事」を表示させましょう。

「外観」→「ウィジット」を選択します。

 

 

続いて、「人気記事」欄をサイドバーの直下にドラッグ&ドロップ。

 

 

プルダウンから記事表示数などの設定を行うことができますが、気にしなければそのままでもOKです。

(好みによって設定を変えてください。)

 

 

 

 

おまけ:デザイン変更する場合はCSSを貼付けよう

 

続いてCSSをどこに貼り付ければよいかを説明します。

「外観」→「テーマの編集」クリックします。

 

 

右端の項目から「スタイルシート」を選択します。

 

 

下図の欄にCSSを貼り付ければOKです。

 

 

貼付け後は忘れずに「ファイルの更新」を押してください。

 

失敗しても元に戻せるように、バックアップを取りながら作業してくださいね!

 

 

 

CSS(コピーしてご使用ください)

 

CSSを「スタイルシート」内に貼り付けて更新すれば目次のデザインが変更されます。

以下のCSSをコピーして貼り付けてみてください

 

/************************************
 **  サイドバー
************************************/
 .search-submit:hover::before{/* 検索エンジン */
color:#90C31F;/*検索ボタンホバー時の色*/
 }
#sidebar {
 font-size: 14px;
}
 .widget_search{
 padding-bottom:1em;
 }
 .sidebar h3{/*サイドバーのタイトル表記と緑の点線*/
color:#7b7b7b;
 border-radius: 0%;
 border-bottom:3px dotted;
 border-color:#90C31F;
 padding-bottom:0.3em;
 margin-top:-0.5em;
 margin-bottom:1em;
 }
 .widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a {/* widgetsの中身*/
background-color:#f7f7f7;
 color:#afafb0!important;
 margin: 6px 0;
 padding: 4px 10px;
 border-radius:20px;
 transition: 0.4s
 }
 .widget_recent_entries ul li a:hover, .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover, .widget_rss ul li a:hover, .widget_nav_menu ul li a:hover{/* widgetsの中身 hover */
 background-color:#90C31F;
 color:#fffff4!important;
 }
 .tagcloud a{/*tag cloud*/
 background-color:#f7f7f7;
 color:#afafb0!important;
 }
 .tagcloud a:hover{
 background-color:#90C31F;
 color:#fffff4!important;
 transition: 0.4s ;
 }

.widget {
 margin-bottom: 50px;
}

 

 

 

 

まとめ

 

人気記事を入れると回遊率の向上が期待できます。

サイトの見た目が整うのもうれしいですよね。

まだまだ私も勉強中ですが、参考にしていただけると幸いです。

 



 

コメント

タイトルとURLをコピーしました