【マナブログminimal】人気記事をピックアップして自動で表示させる方法
こんにちは!初心者ブロガーの味方むっくんです!
本日もマナブログの学さんが開発したWordPressテーマ【minimal】について解説していきます。
本日のテーマは
人気記事をピックアップして表示させる方法です!
我らがリスペクトする学さんのマナブログでいうと、この部分ですね↓
これは素敵な機能で、自分のブログ内の記事のPV数を自動で読み取り、その数が多い記事をここに自動で表示させています。
なので、自分で選んだりするわけではなく、本当に人気の記事が出てくるということです。
ある意味自分でもお手軽に人気の記事がわかるので、設定しておくとメリットがいっぱいですね!
スポンサードサーチ
【マナブログminimal】人気記事をピックアップして自動で表示させる方法
マナブログと同じように、Minimalに人気記事を表示させる為には、大きな流れで言うと、2種類のCSSを変更する必要があります。
テーマの為の関数(functions.php)の変更
まずは下↓の画像の通りに画面を開きましょう!
赤文字➀「外観」→赤文字②「テーマエディター」→赤文字③「テーマの為の関数(Functions.php)」の順です。
追加の記述
では、このページで追加の記述をして頂きますが、いたって簡単。下の枠内の文字をコピーして、このCSSの一番下に張り付けるだけです。
// – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – //
//人気記事出力用
// – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – //
function getPostViews($postID){
$count_key = ‘post_views_count’;
$count = get_post_meta($postID, $count_key, true);
if($count==”){
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, ‘0’);
return “0 View”;
}
return $count.’ Views’;
}
function setPostViews($postID) {
$count_key = ‘post_views_count’;
$count = get_post_meta($postID, $count_key, true);
if($count==”){
$count = 0;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, ‘0’);
}else{
$count++;
update_post_meta($postID, $count_key, $count);
}
}
remove_action( ‘wp_head’, ‘adjacent_posts_rel_link_wp_head’, 10, 0);
コピペできましたか?できたら、作業の第一段階完了です。次に行きましょう!
サイドバー(Sidebar.php)の変更
Minimalに人気記事を表示させる場合、設定する場所は必ずしもサイドバーである必要はありません。が、マナブログの学さんは、サイドバーに人気記事を表示させていますので、ここでもそのやり方を説明します。
それでは下↓の通りに、CSSの画面を開きましょう!
赤枠➀「外観」→赤枠②「テーマエディター」→赤枠③「サイドバー(Sidebar.php)」の順です。
当ブログでは、CSSで無駄に迷わないよう、一番左にある行数を指定して説明を行います。
16行~18行の間に追記を行う
現状、何もCSSをイジってなければ、行17が何も打たれていない空欄になっているはずです。
そこにカーソルを合わせて2行ほど改行を行い、その隙間に下記の文字列をコピペしましょう!
<div class=”col-xs-12 popular text-center”>
<h4>人気記事</h4>
<hr>
<?php
setPostViews(get_the_ID());
query_posts(‘meta_key=post_views_count&orderby=meta_value_num&posts_per_page=5&order=DESC’);
while(have_posts()) : the_post();
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), ‘thumbnail_size’ );
if ( !empty($thumb[‘0’]) ) {
$url = $thumb[‘0’];
} else {
$url = get_template_directory_uri() . “/images/no-image.png”;
}
?>
<!– サムネイルの表示 –>
<div itemscope itemtype=’schema.org/ImageObject’ class=”thumbnail”>
<a style=”background-image:url(<?=$url?>);” href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>” itemprop=”url” class=”thumbnail-img”></a>
</div>
<!– タイトル表示 –>
<h5 class=”title” itemprop=”name headline”>
<a href=”<?php the_permalink(); ?>” title=”<?php printf(the_title_attribute(‘echo=0’) ); ?>” itemprop=”url”><?php the_title(); ?></a>
</h5>
<?php endwhile; ?>
</div>
できましたか?これで、CSSを更新してみて下さい。あなたのMinimalにも、人気記事が表示されているはずです。
以上でマナブログの学さん作成のテーマMinimalで、人気記事を自動で選出して表示させる設定方法の説明を終わります!
マナブログの学さん作成のMinimalは、このように自分でCSSをイジり知識を付けていくことができる素晴らしいWordPressテーマです。自分がこの英語の文字列をイジり、記事を表示させただなんて、本当びっくりですよね!
楽しい!と思えたら、こっちのものです♪