STINGER8にテンプレートを変更、カスタマイズメモ

2017.01.11
WordPress
STINGER

いつの間にかSTINGER8がリリースされていたんですね。

STINGER7がリリースされたのが2016年2月、STINGER Plus+が6月、STINGER8が11月くらいなので、1年の間に3回も新バージョンがリリースされたことになります。非常に早い、というか少し早すぎるかな。

今回リリースされたSTINGER8では、STINGER Plus+にあった「カスタマイザー機能」や「管理機能」が削除され、昔のシンプルなSTINGERに戻っています。シンプルなSTINGERを求めるユーザの要望に応えたという事ですが、私もその一人なので大変有り難いです。

高機能なSTINGER Plus+の機能は、AFFINGER3に統合され、有料のAFFINGER4proとしてリリースされたようです。

私の場合、STINGER Plus+の機能は色指定といくつかの表示／非表示しか使っていなかったので、STINGER8で十分のようです。

という事で、早速STINGER8にテンプレートを変更してみたので、カスタマイズメモを残しておきます。

1. カスタマイズ前に子テーマの準備
2. STINGER8のカスタマイズメモ
3. まとめ

カスタマイズ前に子テーマの準備

カスタマイズの前に、子テーマの準備です。

子テーマを作っておくとアップデートが容易になったり、どのファイルをカスタマイズしたか把握しやすくなったりするので便利です。

STINGER8ではダウンロードページに子テーマも用意されており、自分で作る必要がないので簡単です。

私の場合、子テーマのディレクトリ名やテンプレート名を修正して使っています。

STINGER8のカスタマイズメモ

子テーマの設定が完了したら、どんどんカスタマイズしていきます。

メインナビを色付け

STINGER Plus+では「カスタマイザー機能」を利用して簡単に色指定できましたが、STINGER8では自分でcssを記述して色指定する必要があります。

STINGER Plus+での色指定を参考にして、子テーマのstyle.cssに色指定を記述しました。

#st-menubox {
        border-top-color: #1976D2;
        border-bottom-color: #1976D2;
        border-left-color: #1976D2;
        border-right-color: #1976D2;
        background: #1976D2;
        background: -webkit-linear-gradient(#2196F3 0%, #1976D2 100%) !important;
        background: linear-gradient(#2196F3 0%, #1976D2 100%) !important;
}
header .smanone ul.menu li{
	width:150px;
        border-right-color:#2196F3;
}
header .smanone ul.menu li {
        border-right-color: #2196F3;
}
header .smanone ul.menu li a {
        color: #FFF;
}
header .smanone ul.menu li a:hover {
        color: #FFC107 !important;
}
header .smanone ul.menu li li a {
        background: #2196F3;
        border-top-color: #1976D2;
}
header .smanone ul.menu li li a:hover {
        color: #FFC107 !important;
}

#st-menubox {

border-top-color: #1976D2;

border-bottom-color: #1976D2;

border-left-color: #1976D2;

border-right-color: #1976D2;

background: #1976D2;

background: -webkit-linear-gradient(#2196F3 0%, #1976D2 100%) !important;

background: linear-gradient(#2196F3 0%, #1976D2 100%) !important;

}

header .smanone ul.menu li{

width:150px;

border-right-color:#2196F3;

}

header .smanone ul.menu li {

border-right-color: #2196F3;

}

header .smanone ul.menu li a {

color: #FFF;

}

header .smanone ul.menu li a:hover {

color: #FFC107 !important;

}

header .smanone ul.menu li li a {

background: #2196F3;

border-top-color: #1976D2;

}

header .smanone ul.menu li li a:hover {

color: #FFC107 !important;

}

設定した色は4種類（メニューの背景、区切り線、文字、選択時の文字）です。

新着記事のカテゴリ対応

サイドバーに表示される新着記事のカテゴリ対応、STINGERでは毎回行っている作業です。

カテゴリ対応と併せて、ホーム（トップ）ページへの新着記事の非表示も実装しています。表示／非表示は、STINGER Plus+では「管理機能」で簡単に設定できた機能です。

また、タイトルの表示が無かったので追加しています。

子テーマにnewpost.phpをコピーして、それを修正します。

<?php if( !is_home() ) { ?>
<p class="menu_underh2">新着記事</p>
<div class="kanren">
	<?php
	$newentrypost_no = 5; //表示したい記事数
	$args = array(
		'posts_per_page' => $newentrypost_no,
	);
	if( is_category() ) { //カテゴリーページ
	$cat= get_queried_object();
	$categories = get_categories("child_of=".$cat->term_id);
	$cats = array($cat->term_id);
	foreach($categories as $category)
		$cats[] = $category->term_id;
		$args['category__in'] = $cats;
	} elseif( is_single() ) { //シングルページ
		$cat = get_the_category();
		$categories = get_categories("child_of=".$cat[0]->cat_ID);
		$cats = array($cat[0]->cat_ID);
		foreach($categories as $category)
			$cats[] = $category->term_id;
		$args['category__in'] = $cats;
		$args['post__not_in'] = array(get_the_ID());
	}
	$st_query = new WP_Query( $args );

～中略～

</div>
<?php } ?>

<?php if( !is_home() ) { ?>

<?php

$newentrypost_no = 5; //表示したい記事数

$args = array(

'posts_per_page' => $newentrypost_no,

);

if( is_category() ) { //カテゴリーページ

$cat= get_queried_object();

$categories = get_categories("child_of=".$cat->term_id);

$cats = array($cat->term_id);

foreach($categories as $category)

$cats[] = $category->term_id;

$args['category__in'] = $cats;

} elseif( is_single() ) { //シングルページ

$cat = get_the_category();

$categories = get_categories("child_of=".$cat[0]->cat_ID);

$cats = array($cat[0]->cat_ID);

foreach($categories as $category)

$cats[] = $category->term_id;

$args['category__in'] = $cats;

$args['post__not_in'] = array(get_the_ID());

}

$st_query = new WP_Query( $args );

～中略～

</div>

<?php } ?>

※ WPP Plus Widgetにカテゴリ対応の新着記事ウィジェットを追加したので不要になりました。

WPP Plus Widgetにカテゴリ新着記事のウィジェットを追加しました
 STINGER8の新着記事を簡単に消す方法

投稿日の非表示

新着記事に表示される投稿日は、テンプレートを修正するついでに削除してもよかったのですが、cssで非表示にしています。

#side .blog_info {display:none;}

1	#side .blog_info {display:none;}

個別投稿ページの記事上カテゴリの非表示

個別投稿ページで記事上に表示されるカテゴリは、cssで非表示にしています。STINGER Plus+では「管理機能」で簡単に設定できた機能です。

.st-catgroup {display:none;}

1	.st-catgroup {display:none;}

個別投稿、固定ページの執筆者の非表示

表示部分を削除して非表示にしていましたが、執筆者情報はAMPに必要な項目のようなのでクラスを指定してスタイルシートで非表示に変更しました。

<p class="author">執筆者：<?php the_author_posts_link(); ?></p>

1	<p class="author">執筆者：<?php the_author_posts_link(); ?></p>

.author {display:none;}

1	.author {display:none;}

その他

とかもやってます。

まとめ

色付け以外は、これまでのSTINGERでも行っていたカスタマイズばかりです。

STINGER8には必要な機能は基本機能として備わっているので、これまで同様ほとんどカスタマイズの必要がありませんでした。また、これまでと構成が大きく変わっているわけではないので、これまでと同様にカスタマイズが可能でした。

これまでカスタマイズしたことがある人だけでなく、STINGER Plus+よりテンプレート数が減って構成の把握がし易いので、初めてカスタマイズする人にもお薦めです。