当ブログでもTOPページに掲載させていただいておりますが、「13000 Views」のように人気記事とその閲覧数を表示することができるWordPressプラグイン WP-Post Views のカスタマイズのご紹介です。
今回の WP-Post Views のカスタマイズのポイント
WP-Post Views プラグインは、デフォルトで以下の情報をフロント画面に出力させることが可能ですが、・表示数(%VIEW_COUNT%)
・記事タイトル(%POST_TITLE%)
・記事抜粋(%POST_EXCERPT%)
・記事内容(%POST_CONTENT%)
・記事URL(%POST_URL%)
今回紹介させていただくカスタマイズにより、・記事タイトル(%POST_TITLE%)
・記事抜粋(%POST_EXCERPT%)
・記事内容(%POST_CONTENT%)
・記事URL(%POST_URL%)
・記事で設定しているアイキャッチ
・記事で設定しているカスタムフィールドの名前
を取得して、フロント画面に出力させることが可能になります。・記事で設定しているカスタムフィールドの名前
WP-Post Views の基本的な使用方法
WP-Post Viewsプラグインをインストールして有効化すると、プラグインファイルwp-postviews.phpの234行目付近は以下のように記述になっていると思います。WP-Post Views プラグインファイル内のデフォルトの記述
1 2 3 4 5 6 7 8 9 10 |
<?php $post_excerpt = views_post_excerpt($post->post_excerpt, $post->post_content, $post->post_password, $chars); $temp = stripslashes($views_options['most_viewed_template']); $temp = str_replace("%VIEW_COUNT%", number_format_i18n($post_views), $temp); $temp = str_replace("%POST_TITLE%", $post_title, $temp); $temp = str_replace("%POST_EXCERPT%", $post_excerpt, $temp); $temp = str_replace("%POST_CONTENT%", $post->post_content, $temp); $temp = str_replace("%POST_URL%", get_permalink($post), $temp); $output .= $temp; ?> |
Most Viewed Template: のデフォルトの記述
管理画面の WP-Post Views の設定画面では、「Most Viewed Template:」の欄が以下のようになっているかと思います。※当ブログの表記の都合で改行しています。
1 2 |
<li><a href="%POST_URL%" title="%POST_TITLE%">%POST_TITLE%</a> - %VIEW_COUNT% views</li> |
テーマファルへの記述方法
フロントへの出力方法として、テーマファル(sidebar.php など)に以下のコードを追記します。※20 は記事表示数です。
1 2 3 |
<?php if (function_exists('get_most_viewed')): ?> <?php get_most_viewed('post', 20); ?> <?php endif; ?> |
この基本的な使用方法をベースに、アイキャッチ、カスタムフィールドを出力させるカスタマイズを行います。
アイキャッチを出力する
人気記事にアイキャッチを出力させる場合は、プラグインファイルwp-postviews.phpの234行目付近の記述に以下のコードを追記します。
1 |
$temp = str_replace("%THUMBNAIL%", get_the_post_thumbnail($post->ID,"thumbnail",true), $temp); |
アイキャッチを呼び出すための、プラグインファイル内の編集例
234行目付近は、全体としてはこうなります。
1 2 3 4 5 6 7 8 9 10 11 |
<?php $post_excerpt = views_post_excerpt($post->post_excerpt, $post->post_content, $post->post_password, $chars); $temp = stripslashes($views_options['most_viewed_template']); $temp = str_replace("%VIEW_COUNT%", number_format_i18n($post_views), $temp); $temp = str_replace("%POST_TITLE%", $post_title, $temp); $temp = str_replace("%POST_EXCERPT%", $post_excerpt, $temp); $temp = str_replace("%POST_CONTENT%", $post->post_content, $temp); $temp = str_replace("%POST_URL%", get_permalink($post), $temp); $temp = str_replace("%THUMBNAIL%", get_the_post_thumbnail($post->ID,"thumbnail",true), $temp); $output .= $temp; ?> |
※%THUMBNAIL%は任意の名前でも構いませんが、後述するWordPress 管理画面側の記述と合わせる必要があります。
アイキャッチを呼び出すための、Most Viewed Template: の編集例
管理画面のWP-Post Viewsの設定画面で、「Most Viewed Template:」欄に以下のように追記します。
1 |
<li>%THUMBNAIL%</li> |
※ちなみに、投稿記事にアイキャッチが設定されている必要があります。
投稿記事に自動でアイキャッチを設定するにはAuto Post Thumbnailプラグインを利用すると便利です。
[WordPress]自動で投稿記事にアイキャッチを設定してくれるプラグインAuto Post Thumbnailの使い方わたし自身は今まであまり利用する機会がなかったのですが、WordPressでギャラリーサイトやEC的なサイトを構築する場合、アイキャッチ(サムネイル)を利用することで演出に幅が出てきます。 例えば、ECサイトであれば「売れ筋・人気商品」や「...
(3)カスタムフィールドの項目を出力する
カスタムフィールドに設定している「値」「名前」を取得してフロントへ出力することができます。このカスタムフィールドの「値」「名前」を取得したい場合は以下の通りです。
1 |
$temp = str_replace("%POST_CUSTOMFIELD%", get_post_meta($post->ID,'カスタムフィールド名前',true), $temp); |
カスタムフィールドを呼び出すための、プラグインファイル内の編集例
1 2 3 4 5 6 7 8 9 10 11 |
<?php $post_excerpt = views_post_excerpt($post->post_excerpt, $post->post_content, $post->post_password, $chars); $temp = stripslashes($views_options['most_viewed_template']); $temp = str_replace("%VIEW_COUNT%", number_format_i18n($post_views), $temp); $temp = str_replace("%POST_TITLE%", $post_title, $temp); $temp = str_replace("%POST_EXCERPT%", $post_excerpt, $temp); $temp = str_replace("%POST_CONTENT%", $post->post_content, $temp); $temp = str_replace("%POST_URL%", get_permalink($post), $temp); $temp = str_replace("%POST_CUSTOMFIELD%", get_post_meta($post->ID,'カスタムフィールド名前',true), $temp); $output .= $temp; ?> |
※%POST_CUSTOMFIELD%は任意の名前でも構いませんが、後述するWordPress管理画面側の記述と合わせる必要があります。
カスタムフィールドを呼び出すため、Most Viewed Template:の編集例
管理画面のWP-Post Viewsの設定画面で、「Most Viewed Template:」欄に以下のように追記します。
1 |
<li>%POST_CUSTOMFIELD%</li> |
全体的にCSSで補正をかけることで、レイアウトを自由に変えて出力することができます。
コメント