harulog

manablogのマナブさんが作ったテーマ「minimal」をカスタムしてみた【初心者がプラグインなしで導入】

Blog・YouTube

こんにちは。はるろぐ管理者のはるみ（@harumitsu0112）です。

manablogのマナブさんが作ったWordPressのテーマ「minimal」を購入しました。CSSやPHPといったコードの知識０の初心者ですがググりながら変更したことをまとめてみました。

公式manablog：Written by Manabu Bannai

目次

記事ページの一番下に関連記事の表示

記事ページの一番下（SNSボタンの下）に関連の記事が表示されます。

各記事にタグを追加するだけです。カテゴリーではなくタグで絞られて表示されます。

画像が横幅いっぱいに広がるを修正

下記をコピーすればOKです。

.wp-block-image {
 width: 90%;
 margin: 10px auto;
 }

コピペ場所に注意してくださいね。

  • 誤：外観 → テーマエディター → CSS → style.css
  • 正：外観 → カスタマイズ → 追加CSS

人気記事をサイドバーに表示

２箇所へコピペすると完了です。ステップとしては下記の通り。

  1. テーマのための関数（functions.php）の変更
  2. サイドバー（Sidebar.php）の変更

人気記事が表示されるまでの仕組みは、人気記事を抽出するためのコードを設置、抽出した記事を出力するためのコードを設置という感じです。

サイドバーへ標準で設置されている最新の記事を削除して、人気記事のコードをコピーする場所を迷うかもしれません。

テーマのための関数（functions.php）の変更

下記コードを一番下にコピペすればOKです。

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  //
 // 人気記事出力用
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  //
 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）の変更

サイドバーには27か28あたりに、最新記事を表示するコードがあります。それを削除して下記コードをコピペすればOKです。

<div class="col-xs-12 recent 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>

自動でGoogleAdSenseの広告を最初のH2ダグ上に表示

テーマのための関数（functions.php）へ下記をコピペして、【【【ここにアドセンスコードを貼り付けます】】】にGoogleAdSenseのコードをコピペすればOKです。

// 本文中にアドセンス表示
function add_ads_before_h2($the_content) {
if (is_single()) {
$ads = <<< EOF
<p>スポンサードサーチ</p>

【【【ここにアドセンスコードを貼り付けます】】】

<div style="clear:both"></div>
EOF;
	$h2 = '/^.+?<\/h2>$/im';//H2見出しのパターン

	if ( preg_match_all( $h2, $the_content, $h2s )) {
		if ( $h2s[0] ) {

			// 1つ目のh2見出しの上にアドセンス挿入
			if ( $h2s[0][0] ) {
				$the_content  = str_replace($h2s[0][0], $ads.$h2s[0][0], $the_content);
			}

		}
	}
}
return $the_content;
}
add_filter('the_content','add_ads_before_h2');

今後の変更予定

ブログカードの設定、３カラムへ変更、SNSボタン追加を予定しております。

参考ワードプレステーマ『Minimal』のデザインカスタマイズ
参考WordPress有料テーマ「Minimal」のカスタマイズ方法と購入した感想