人気の記事一覧をトップページにカルーセル表示する

Customize

当サイトの記事の中で、よく読まれている記事（アクセス数の多い記事）上位10件を、トップページ上部にカルーセル表示するようにしてみました。

WP Posts Carouselプラグインは、WordPress Popular Postsプラグインを合わせて使うことで、人気記事一覧をカルーセル表示させることができます。

WordPress Popular Posts
高度にカスタマイズ可能で、使いやすい投稿ウィジェットです。
ja.wordpress.org

手順は以下のようになります。
トップページのみで表示されるようなウィジェットにショートコードを貼りつけてもよいかと思いますが、当サイトで使用しているテーマ「Lightning」(Pro)には「header.php」に「do_action( ‘lightning_header_after’ )」というアクションフックが用意されているので、これを利用してヘッダ下でカルーセルのショートコードを実行させました。

  1. WP Posts Carouselプラグインをインストールして有効化する。
  2. WordPress Popular Postsプラグインをインストールして有効化する。
  3. 当サイト記事「WP Posts Carouselを真面目に改変してみる（プラグインの改変）」のようにfunctions.phpをカスタマイズする。
  4. 当サイト記事「WP Posts CarouselでCOLORS風のカルーセルスライダー」のようにスタイルシートをカスタマイズする（下記参照）。
  5. WP Posts Carouselのショートコードを得るため、新規投稿の下書き画面等でカルーセル挿入ボタンを押し、必要事項を設定する。その際「Post types」には投稿と固定ページの用法を選択、「Select what you want to display」のところでShow:「Popular」を選択する。得られたショートコードをコピーしておく。（そのほかの詳細な設定内容は下記ショートコードの記述を参考にしてください。）
  6. functions.phpに、５で得られたショートコードを使って作成した関数を追加する（下記参照）。

●WP Posts Carousel用スタイルシートの作成例（light.cssを複製後custom2.cssとして改変保存）

/*
* light theme
*/
.custom2-theme.wp-posts-carousel { overflow: hidden; padding-top:20px; padding-bottom:20px;}
.custom2-theme.wp-posts-carousel .wp-posts-carousel-slide { display: none; padding: 1%; position: relative; margin-left: 2%; width: 95%;}
.custom2-theme.wp-posts-carousel.owl-loaded .wp-posts-carousel-slide { display: block; }
.custom2-theme.wp-posts-carousel .wp-posts-carousel-container { border: 1px solid transparent; transition: all 0.3s ease 0s;}
.custom2-theme.wp-posts-carousel .wp-posts-carousel-container:hover { border-color: #ebebeb; background: #fcfcfc; }
/*
* posts's image
*/
.custom2-theme.wp-posts-carousel .wp-posts-carousel-image { text-align: center; vertical-align: central; overflow: hidden; }
.custom2-theme.wp-posts-carousel .wp-posts-carousel-image a { display: inline-block; width: 100%; text-align: center; }
.custom2-theme.wp-posts-carousel .wp-posts-carousel-image img {display: block; margin: 0 auto; width: 100%; border:1px #ddd solid;}
.custom2-theme.wp-posts-carousel .wp-posts-carousel-image img.owl-lazy {opacity: 0;}
/*
* posts's details
*/
.custom2-theme.wp-posts-carousel .wp-posts-carousel-details { display: block; margin: 1% auto; width: 97.5%; height:35%; position:absolute; bottom:5px; right:0; left:0; background: rgba(0,0,0,0.6); padding: 0 5px 5px 5px;}
.custom2-theme.wp-posts-carousel .wp-posts-carousel-title { padding: 0; margin: 0;text-align: left; font-size: 12px; font-weight:700; color:#fff; }
.custom2-theme.wp-posts-carousel .wp-posts-carousel-desc { font-size: 12px; color: #666; padding: 2%; margin-bottom: 2%; }
.custom2-theme.wp-posts-carousel .wp-posts-carousel-created-date { padding: 0; margin: 0;font-size: 12px; color: #fff; font-style: italic; }
.custom2-theme.wp-posts-carousel .wp-posts-carousel-categories { position:absolute; top:0; right:0; padding: 0; margin: 0 10px; font-size: 12px; font-style: italic; font-weight:600;text-align:right;color:#add8e6; }
.custom2-theme.wp-posts-carousel .wp-posts-carousel-buttons { text-align: center; }
.custom2-theme.wp-posts-carousel .wp-posts-carousel-buttons a { padding-right: 5px; }
/*
* tags
*/
.custom2-theme.wp-posts-carousel .wp-posts-carousel-tags { font-size: 11px; }
.custom2-theme.wp-posts-carousel .wp-posts-carousel-tags a:before { font-family: "FontAwesome"; font-size: 11px; content: "\f02c"; padding-right: 7px; }
.custom2-theme.wp-posts-carousel .wp-posts-carousel-tags a { padding: 2px 10px; border: 1px solid #eee; color: #666; line-height: 24px; text-decoration: none; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; transition: all 0.3s ease 0s; }
.custom2-theme.wp-posts-carousel .wp-posts-carousel-tags a:hover { color: #6E95B6; }
/*
* controls
*/
.custom2-theme.wp-posts-carousel .owl-controls { *height: 0; }
/*
* navigation
*/
.custom2-theme.wp-posts-carousel .owl-nav div:before  { font-family: "FontAwesome"; font-size: 30px; display: inline-block; content: '\f104'; }
.custom2-theme.wp-posts-carousel .owl-controls .owl-nav div  {background: #fff; color: #ccc; border: 1px solid #ccc; text-align: center; text-decoration: none; display: block; width: 0px; height: 50px;line-height: 50px; margin: -45px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; border-radius: 50%; -webkit-border-radius: 50%; }
.custom2-theme.wp-posts-carousel .owl-controls .owl-nav .owl-prev { left: -50px; padding: 0px 30px 0px 17px; }
.custom2-theme.wp-posts-carousel .owl-nav .owl-next:before  { content: '\f105'; }
.custom2-theme.wp-posts-carousel .owl-controls .owl-nav .owl-next { right: -50px; padding: 0px 27px 0px 20px; }
.custom2-theme.wp-posts-carousel:hover .owl-controls .owl-nav .owl-prev { opacity: 0.7; left: 0px; }
.custom2-theme.wp-posts-carousel:hover .owl-controls .owl-nav .owl-next  { opacity: 0.7; right: 0px; }
.custom2-theme.wp-posts-carousel:hover .owl-controls .owl-nav .owl-prev:hover,
.custom2-theme.wp-posts-carousel:hover .owl-controls .owl-nav .owl-next:hover { opacity: 1; color: #6E95B6; }

/*
* dots
*/
.custom2-theme.wp-posts-carousel .owl-dots { margin-top: 10px; text-align: center; }
.custom2-theme.wp-posts-carousel .owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; }
.custom2-theme.wp-posts-carousel .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #d6d6d6; display: block; -webkit-backface-visibility: visible; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -ms-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
.custom2-theme.wp-posts-carousel .owl-dots .owl-dot.active span { background: #869791; }
.custom2-theme.wp-posts-carousel .owl-dots .owl-dot:hover span { transform: scale(1.3); }

●アクションフックの作成例

function wpp_carousel(){
 if ( is_front_page() ) {
  echo '<div style="text-align:center; padding-top:20px;padding-bottom:-20px;">★よく読まれている記事★</div>';
  echo do_shortcode('[[wp_posts_carousel template="custom2.css" post_types="post,page" all_items="10" show_only="popular" exclude="" posts="" ordering="desc" categories="" relation="and" tags="" show_title="true" show_created_date="false" show_description="false" allow_shortcodes="false" show_category="true" show_tags="false" show_more_button="false" show_featured_image="true" image_source="medium" image_height="100" image_width="100" items_to_show_mobiles="1" items_to_show_tablets="2" items_to_show="4" slide_by="1" margin="2" loop="true" stop_on_hover="true" auto_play="true" auto_play_timeout="2200" auto_play_speed="2200" nav="true" nav_speed="1800" dots="true" dots_speed="800" lazy_load="false" mouse_drag="true" mouse_wheel="false" touch_drag="true" easing="linear" auto_height="false" custom_breakpoints=":"]]');
 }
}
add_action('lightning_header_after','wpp_carousel');

作成した関数「wpp_carousel()」では、トップページの場合のみカルーセル表示するように、「if ( is_front_page() )」で条件分岐させています。

なお、当サイトの画像のサイズ設定は以下のようにしています。使用する画像のサイズによって表示にズレが生じるかと思いますので、その場合にはご自分の設定にあわせてスタイルシートを調整してみてください。

  • アイキャッチ画像のサイズ：800×450ピクセル
  • サムネイル画像のサイズ：320×240ピクセル
  • 画像の中サイズ：400×300ピクセル
タイトルとURLをコピーしました