細かすぎて伝わらないStingerカスタマイズ! #Stinger-WP

Stinger Advent Calendar 2013 7日目を担当します瑞佳(@mizuka123)です!

6日目担当のアヤトさん(@white_ayato)からバトンを受け取りましたが,自分はPHPとか新規に書くことはできないので基本的に情報の寄せ集めですw
色とか背景とかはデフォルトのままなのであまり変わっていないように見えますが,結構細かいところを変更してきているのでこれまで変更してきた点をまとめていきたいと思います.
もっと自分にデザインセンスがあれば見た目を変えるんですけどねぇ・・・w

http://love-guava.com/stinger-advent-calendar-2013-entry/
「Stinger Advent Calendar 2013」エントリー一覧!随時更新中! #Stinger-WP | love guava!
スポンサーリンク

前提情報

当ブログでは「stinger3HUNTER ver20130917」を元に改造しています.

http://stinger3.com/sabun/
今までのSTINGER3の主な変更のまとめ

Stinger本体の更新は10月23日更新分まで対応済みです.

パンくずリストに表示させるカテゴリを選択する

Stingerでは標準でパンくずリストが表示されます.
が,1つの記事に対して複数のカテゴリを設定している場合思い通りのパンくずリストにすることはできません.

表示の優先順位は「A~Z」→「日本語」の順だと思われます.
これはStingerではなくWordpressの仕様ですね.

記事1つに対してカテゴリ1つしか設定しなければいいのですが,自分の場合結構複数カテゴリにまたがった記事を書くことがあるので,自分の思い通りにパンくずリストが表示できるように変更しています.

http://marubon.info/method-add-breadcrumbs-having-ability-to-select-category-to-display-3707/
[試] パンくずリスト表示カテゴリの悩み解決!カテゴリ選択式パンくずリストの設置方法 | 試行錯誤ライフハック

修正は上記サイトを元にfunction.phpとsingle.php,style.cssを書き換えます.

function.php

ほぼ上記のサイト通りですが一部修正しています.

・「パンくずリストを出力する関数」7行目「$str.= ‘<ul>’;」→「$str.= ‘<ul class=”breadcrumb_ul”>’;」
※CSSでリストを横並びにするため

・「パンくずリストを出力する関数」50,56,74行目「$str.= ‘<li itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>~」を削除
※ページタイトルを非表示にするため

表示カテゴリ選択用フィールドを設置するコード

[html] add_action(‘admin_menu’, ‘add_breadcrumbs_category_meta_box’);
add_action(‘save_post’, ‘save_breadcrumbs_category_custom_fields’);
// パンくずリスト用メタボックスの追加
function add_breadcrumbs_category_meta_box() {
add_meta_box( ‘my_sectionid4’, ‘パンくずリスト用カテゴリ’, ‘breadcrumbs_category_custom_fields’, ‘post’, ‘advanced’ );
}
// パンくずリストカテゴリ選択用カスタムフィールドの入力フォーム作成と値の設定
function breadcrumbs_category_custom_fields() {
global $post;
$options = get_the_category($post->ID);
$n = count($options);
$radio_field = get_post_meta($post->ID,’_organizer_breadcrumbs_category’,true);
for ($i=0; $i<$n; $i++) {
$option = $options[$i];
if ($option -> cat_ID == $radio_field) {
echo ‘<input type="radio" name="_organizer_breadcrumbs_category" value="’.esc_html($option->cat_ID).’" checked /> ‘.$option->cat_name.’ ‘;
} else {
echo ‘<input type="radio" name="_organizer_breadcrumbs_category" value="’.esc_html($option->cat_ID).’" /> ‘.$option->cat_name.’ ‘;
}
}
}
// パンくずリスト用カテゴリのカスタムフィールドの保存
function save_breadcrumbs_category_custom_fields( $post_id ) {
if (defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) return $post_id;
$meta_key = ‘_organizer_breadcrumbs_category’;
$meta_value_new = $_POST[$meta_key];
$meta_value_current = get_post_meta($post_id, $meta_key, true);
$cats = get_the_category($post_id);
if(!empty($cats)){
$meta_value_default = $cats[0]->cat_ID;
}
if(!empty($meta_value_current) ){
update_post_meta($post_id, $meta_key, $meta_value_new);
}else{
if(!empty($meta_value_new)){
update_post_meta($post_id, $meta_key, $meta_value_new);
}else{
if(!empty($meta_value_default)){
update_post_meta($post_id, $meta_key, $meta_value_default);
}
}
}
}
[/html]

パンくずリストを生成するコード(関数)

[html] //パンくずリストを出力する関数
function breadcrumb(){
global $post;
$str =”;
if(!is_home()&&!is_admin()){
$str.= ‘<div id="breadcrumb" class="clearfix">’;
$str.= ‘<ul class="breadcrumb_ul">’;
$str.= ‘<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’. home_url() .’/"><span itemprop="title"><strong>ホーム</strong></span></a></li>’;
$str.= ‘<li>&gt;</li>’;
if(is_search()){
$str.='<li>「’. get_search_query() .’」で検索した結果</li>’;
} elseif(is_tag()){
$str.='<li>タグ : ‘. single_tag_title( ” , false ). ‘</li>’;
} elseif(is_404()){
$str.='<li>404 Not found</li>’;
} elseif(is_date()){
if(get_query_var(‘day’) != 0){
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’. get_year_link(get_query_var(‘year’)). ‘"><span itemprop="title">’ . get_query_var(‘year’). ‘年</span></a></li>’;
$str.='<li>&gt;</li>’;
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’. get_month_link(get_query_var(‘year’), get_query_var(‘monthnum’)). ‘"><span itemprop="title">’. get_query_var(‘monthnum’) .’月</span></a></li>’;
$str.='<li>&gt;</li>’;
$str.='<li>’. get_query_var(‘day’). ‘日</li>’;
} elseif(get_query_var(‘monthnum’) != 0){
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’. get_year_link(get_query_var(‘year’)) .’"><span itemprop="title">’. get_query_var(‘year’) .’年</span></a></li>’;
$str.='<li>&gt;</li>’;
$str.='<li>’. get_query_var(‘monthnum’). ‘月</li>’;
} else {
$str.='<li>’. get_query_var(‘year’) .’年</li>’;
}
} elseif(is_category()) {
$cat = get_queried_object();
if($cat -> parent != 0){
$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, ‘category’ ));
foreach($ancestors as $ancestor){
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’. get_category_link($ancestor) .’"><span itemprop="title">’. get_cat_name($ancestor) .'</span></a></li>’;
$str.='<li>&gt;</li>’;
}
}
$str.= ‘<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">’. $cat -> name .'</span></li>’;
} elseif(is_author()){
$str .='<li>投稿者 : ‘. get_the_author_meta(‘display_name’, get_query_var(‘author’)).'</li>’;
} elseif(is_page()){
if($post -> post_parent != 0 ){
$ancestors = array_reverse(get_post_ancestors( $post->ID ));
foreach($ancestors as $ancestor){
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’. get_permalink($ancestor).’"><span itemprop="title">’. get_the_title($ancestor) .'</span></a></li>’;
$str.='<li>&gt;</li>’;
}
}
} elseif(is_attachment()){
if($post -> post_parent != 0 ){
$str.= ‘<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’. get_permalink($post -> post_parent).’"><span itemprop="title">’. get_the_title($post -> post_parent) .'</span></a></li>’;
$str.='<li>&gt;</li>’;
}
} elseif(is_single()){
$cat_ID = get_post_meta($post->ID,’_organizer_breadcrumbs_category’, true);
if($cat_ID){
$cat = get_category($cat_ID);
} else {
$categories = get_the_category($post->ID);
$cat = $categories[0];
}
if($cat -> parent != 0){
$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, ‘category’ ));
foreach($ancestors as $ancestor){
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’. get_category_link($ancestor).’"><span itemprop="title">’. get_cat_name($ancestor). ‘</span></a></li>’;
$str.='<li>&gt;</li>’;
}
}
$str.='<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="’. get_category_link($cat -> term_id). ‘"><span itemprop="title">’. $cat-> cat_name . ‘</span></a></li>’;
$str.='<li>&gt;</li>’;
} else{
$str.='<li>’. wp_title(”, false) .'</li>’;
}
$str.='</ul>’;
$str.='</div>’;
}
echo $str;
}
[/html]

single.php

image
<div class=”kuzu”>~<!—/kuzu–>を削除し「<?php breadcrumb(); ?>」を記載.

style.css

[html] ul.breadcrumb_ul li {
float: left;
}
[/html]

リストを横並びにするために追記します.function.phpで指定したクラス名と同じものに設定します.

ソーシャルボタンをオリジナル画像にする

通常のソーシャルボタンの他にオリジナルのソーシャルボタンを設置しています.

image

オリジナル画像による実際の効果はよくわかりませんが,設置方法については記事を書いているので参考にしてみてください.

//mizuka123.net/4307/
ブログのソーシャルボタンをオリジナル画像にしてみた!

Feedly購読ボタンを設置する

Twitter,Facebook,Google+,はてぶ,Pocketのボタンは簡単に設置できますが,購読者数表示付Feedly登録ボタンはなかなか複雑だったのでまとめておきます.

http://hayashikejinan.com/webwork/rss/432/
FeedlyのブログRSS購読者数(フォロワー数)を取得・表示してうれしがる方法を紹介するよ!もちろんWordPressでも | ホホ冢次男
http://hayashikejinan.com/webwork/rss/526/
FeedlyのRSS登録ボタンを購読者数を付けてソーシャルボタン風に設置するサンプルを載せてみる。 | ホホ冢次男

上記サイトを参考にしてsingle.phpとstyle.cssに追記します.

single.php

[html] <?php
/**
* FeedlyのブログRSS購読者数(フォロワー数)を取得・表示
*/
// 値がない、もしくは古いときはデータベースへ一時保存
if ( false === ( $subscribers = get_transient( ‘feedly_subscribers’ ) ) ) :
// RSS feed のURLをエンコード
$feed_url = rawurlencode( get_bloginfo( ‘rss2_url’ ) );
// 購読情報をJsonで取得して購読者数だけ頂く
$subscribers = wp_remote_get( "http://cloud.feedly.com/v3/feeds/feed%2F$feed_url" );
$subscribers = json_decode( $subscribers[‘body’] );
$subscribers = $subscribers->subscribers;
// データベースへ購読者数を一時保存する。60 * 60 * 12 = 半日。お好きに値は変えましょう
set_transient( ‘feedly_subscribers’, $subscribers, 60 * 60 * 12 );
endif;
?>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F<?php echo rawurlencode( get_bloginfo( ‘rss2_url’ ) ); ?>"
class="feedlyButton"
target="_blank"
title="<?php bloginfo(‘name’); ?>のRSSをFeedlyで購読してみませんか">
<div class="arrow_box_feedly">
<span class="feedlyCount">
<?php echo get_transient( ‘feedly_subscribers’ ); ?>
</span>
</div>
<img id="feedlyFollow" src="http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-small_2x.png"
alt="follow us in feedly" width="66" height="20">
</a><br /><br />[/html]

style.css

[html] /*—————————–
Feedlyボタン(追記)
——————————*/<br /><br />a.feedlyButton {
color: #777777;
text-align: center;
text-decoration: none;
}
a.feedlyButton:hover {
color: #333333;
}
a.feedlyButton:visited {
color: #777777;
}
.arrow_box_feedly {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
height: 35px;
width: 66px;
margin-bottom: 8px;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.arrow_box_feedly:after, .arrow_box_feedly:before {
border: medium solid transparent;
content: " ";
height: 0;
left: 50%;
pointer-events: none;
position: absolute;
top: 100%;
width: 0;
}
.arrow_box_feedly:after {
border-color: #FFFFFF rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
border-width: 4px;
margin-left: -4px;
}
.arrow_box_feedly:before {
border-color: #CCCCCC rgba(204, 204, 204, 0) rgba(204, 204, 204, 0);
border-width: 5px;
margin-left: -5px;
}
.arrow_box_feedly img {
margin: 0;
border: none;
}
.arrow_box_feedly span {
line-height: 35px;
}
[/html]

image 
このように表示されます.
まだ26人と少ないですね・・・w

ナビゲーションバーのアコーディオン化

カテゴリで階層構造を作っているためアクセスしやすいようにナビゲーションバーをアコーディオン化しています.

http://primode.net/wordpress/customize/navigation/
WordPressテーマ「STINGER」でナビゲーションバーをアコーディオン化するには| WordPress無料テーマ「S​TINGER」のカスタマイズ

修正は上記のサイトの通り.

image
このように子カテゴリーが表示されます.

記事中にAdsenseを表示

記事タイトルの下にすぐ広告があるのはあまりよろしくないということで,記事の途中に広告を入れるようにしてます.

http://no-creation-no-life.net/?p=552
wordpressの[more]抜粋の後に、google adsensを自動的に入れる方法 | CreativeLife

上記サイトを参考にfunction.phpに追記します.
あとは記事に「more」を挿入すればその位置に広告が挿入されます.

image
こんな感じで記事の途中に表示されます.
あまりアフィリエイトはいいイメージがないですが,モチベーションアップにもつながるのでブログを続けていくためには必要だと思います.
ただ広告ありきで(広告を載せるために)記事を書くのは個人的には好きではないですね.

Stingerで出来ることの中で使っていない機能

「ブログの運営に必要なモノがプラグイン無しで揃っている!」というStingerですが当ブログではパンくずリスト以外でも結構使っていない機能がありますw

レスポンシブデザイン

もうちょっと弄りたい!とうことで当ブログでは「WPtouch Pro」を利用しています.
49ドルと有料ですがそれだけの価値はあると思っています.

http://www.bravenewcode.com/wptouch/
WPtouch – Create your mobile WordPress website with just a few clicks

導入方法等はここで語るにはボリュームがありすぎるので割愛しますが,ググれば情報は出てくるので比較的簡単に導入することができます.

追尾式自動広告

「scroll-ad.php」ですね.
このファイルには何も記載はしてません.
ただ,追尾機能を使って「人気ある記事」を表示しています.

広告表示

Stingerでは広告効果が高いところに表示されるよう「ad.php」というファイルがあります.

が,これを使ってしまうと全ての広告が同じ「広告ユニット」になってしまい,どこの場所が広告効果が高いのかがわかりません.
そのため当ブログでは「ad.php」は利用せず直接「single.php」や「header.php」に記載しています.

まとめ

このように見た目の割に結構弄っていますw
使っていない機能が結構あってStingerの良さを消してしまっているのでは・・・と思うかもしれませんが,Stingerの良さというのは初心者でも詳しい人でも使いやすいところだと思います.
コードがとてもシンプルでわかりやすいため改造がとてもやりやすいですね.
だからこそこれだけ使っている人いるのだと思います.
初心者から上級者まで幅広く利用できるテーマ,それが「Stinger」なんですよね.

でもStingerは改造してなんぼですので,初心者でも恐れず改造していってほしいと思います.
自分なんかが言えたもんじゃないですけどねw
もちろん改造前のバックアップはお忘れ無く・・・(何度かサイトを真っ白にしてますw)

Stinger Advent Calendar 2013が終わる頃には相当情報が集まっていると思うので,これを参考に改造してみるといいかもしれませんね.
もちろん自分も「これは!」と思えるものがあったらどんどん導入していこうと思っています.
また本記事で紹介したこと以外で「これどーやってんの?」というものがあれば質問いただければ回答しますので,何かあればコメントやSNSからご質問ください.

ここまで人を動かすことが出来るテーマ「Stinger」.
これからどのように進化していくか期待をしつつ7日目の記事を終わりにしたいと思います.

8日目はくぉさん(@QuoQlish)です.
「Stinger 改造記事書きます!」とのことですが,どんな記事を書いてくれるのか楽しみですね!

Stingerは本でも紹介されています!

スポンサーリンク