8wired.jp

ITネタとか時々書いてます

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

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

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

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

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

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

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

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

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

目次

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

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

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

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;
}

設定した色は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 } ?>

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

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

投稿日の非表示

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

#side .blog_info {display:none;}

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

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

.st-catgroup {display:none;}

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

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

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

.author {display:none;}

関連記事の精度を上げる

STINGERに実装されている関連記事は、同じカテゴリの記事をランダムにピックアップしてくるものなので精度が高いとは言えません。

代替として関連記事には、プラグインのSimilar Postsが使いやすいので愛用しています。

子テーマにkanren.phpのテンプレートを作成して、テンプレートからSimilar Postsを呼び出します。

<?php
/**
 * 関連記事の一覧
 */
?>
<p class="point"><span class="point-in">関連記事</span></p>
<?php
if(function_exists('similar_posts')) similar_posts();
?>

Similar PostsのOutput設定はこんな感じ。

Output template:

<dl class="clearfix"><dt><a href="{url}">{php: if(has_post_thumbnail({postid})) echo get_the_post_thumbnail({postid},thumbnail); else echo '<img src="/wp-content/themes/stinger5ver20141011/images/no-img.png" />';}</a></dt><dd><p class="kanren-t"><a href="{url}">{title}</a></p></dd></dl>

Text and codes before the list:

<div class="similar-posts kanren">

Text and codes after the list:

</div>

Similar Postsの基本設定は下記ページで記載しています。
STINGER5の関連記事をSimilar Postsで精度を上げる方法

関連記事見出しの色付け

STINGER Plus+では「カスタマイザー機能」の色指定で一緒に色付けされましたが、STINGER8では自分でcssを記述して色指定する必要があります。

.post p.point {
        border-bottom:solid 1px #212121;
}
.post span.point-in {
        background:#212121;
        color:#f3f3f3;
}

その他

とかもやってます。

まとめ

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

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

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