みなさんこんにちは。
WordPress Popular Posts は人気記事を表示するには欠かせないプラグインです。ですが、そのまま入れただけではサイドバーのウィジェットでしか使えません。
いろんなプラグインがあり、関数もたくさんあるので混乱してしまいますよね。
記事下やフッターなど、任意の場所で表示する方法や、HTML部分をカスタマイズする関数について説明します。
WordPress Popular Posts で用意されている関数
以下の関数は、WordPress Popular Postsプラグインを入れた時点で使用可能です。任意の場所に記述することで、いろんな場所へ人気記事を表示できますよ。
wpp_get_views()
wpp_get_views() は指定した投稿IDのPV数を取得する関数。
- 第1引数：投稿ID
- 第2引数：PV集計期間（daily, weekly, monthly, all から選べます）
- 第3引数：PV数をカンマで区切るかどうか（trueなら 15,000 views、falseなら 15000 views）
投稿一覧のループの中で使うならこれを使いましょう。例えば以下のように使います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?php while ( have_posts() ) : the_post(); ?> <article<?php post_class()?>> <header> <?php if( get_the_post_thumbnail() ) { ?> <div> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full')?></a> </div> <?php } ?> <span> <?php echo wpp_get_views ( get_the_ID(), 'all', false );?> views </span> </header> <section> <h2><a href="<?php the_permalink(); ?>"><?php esc_html(the_title()); ?></a></h2> </section> </article> <?php endwhile;?> |
wpp_get_mostpopular()
wpp_get_mostpopular() は、記事一覧をPV数が多い順に並び替え、それを丸ごと出力してくれる関数。
画像のサイズやHTML部分を引数に渡すことで、レイアウトを調整することができます。PV数順に並び替えたいときはこれを使いましょう。
オプションは配列で指定します。例を出すと、、、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <h2>人気記事一覧</h2> <?php wpp_get_mostpopular( array( // PV集計期間（daily, weekly, monthly, all から選べます） 'range' => 'daily', // PV数順で並び替え（comments を指定するとコメント順になります） 'order_by' => 'views', // post OR page 'post_type' => 'post', // 表示数 'limit' => 8, // 閲覧数表示するか（1なら表示、 0なら非表示） 'stats_views' => '1', // HTMLのラッパー 開始タグ 'wpp_start' => '<div class="wpp-posts-container">', // HTMLのラッパー 終了タグ 'wpp_end' => '</div>', // サムネイル画像の幅 'thumbnail_width' => '572', // サムネイル画像の高さ 'thumbnail_height' => '572', // HTML部分 'post_html' => ' <article> <header> <div class="post-thumbnail">{thumb}</div> <span class="post-wpp-views">{stats}</span> </header> <section> <h2>{title}</h2> </section> </article>' ) ); ?> |
HTML部分では、所定の変数を使用できます。
- {thumb}：サムネイル画像（リンクも付く）
- {stats}：PV数
- {title}：記事のタイトル
- {summary}：抜粋文
私はこちらの関数を使いました。
※ 注意点ですが、thumbnail_width、thumbnail_height は必ずpx単位で指定するようにしてください。でないと画像が表示されません。
ただ、人気記事一覧で関数を使用するなど、複雑なカスタマイズが必要な場合はwpp_custom_htmlというフィルターフックがあるのでこれを利用します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?php function my_custome_popular_html($mostpopular, $instance) { foreach( $mostpopular as $popular ) { // ここにHTML ?> <article> <header> <div class="post-thumbnail"><?php echo get_the_post_thumbnail($popular->id)?></div> <span class="post-wpp-views"><?php echo wpp_get_views($popular->id)?></span> </header> <section> <h2><?php echo get_the_title($popular->id)?></h2> </section> </article> <?php } } add_filter( 'wpp_custom_html', 'my_custome_popular_html', 10, 2 ); |
最後に
たくさんあるウィジェットの中でも、人気記事はかなり重要で欠かせないです。
WordPress Popular Postsプラグインではこれらの関数が標準で使用できますので、記事一覧のレイアウトを変えたい場合や、サイト内のいろいろな場所で表示したい場合は、是非使ってみてください。
![PC版のWebサイトのテキストボックスにも[type=”tel”]と[type=”email”]を使おう](http://design.all-connect.jp/wp-content/uploads/2017/08/corinne-kutz-211251-1024x683.jpg)
