Stinger3 – カスタマイズ備忘録〈その三〉 ～標準でSEOに強いWordPressテーマ（無料）～

公開日：  最終更新日：2014/04/08

stinger3-公式サイト

画像は公式サイトより

Stinger3がWordPress3.8に対応したのでアップデート。カスタマイズに挑戦中。備忘録として書いておきます。

前回のカスタマイズはコチラ。

◆Stinger3のカスタマイズでやったこと 【まとめ】
◆Stinger3のカスタマイズ – 追尾型SNSボックスを非表示にする＆記事タイトル下にSNSボックスを設置する方法

【2014年3月12日追記】
上記記事はタイトルを変更しました。

ちなみに僕は全くの初心者なので色々な参考記事を読みながらテキトーにコードを弄っています。
Stingerのカスタマイズについてはコチラ（↓）の記事でリンクをまとめて下さっています。たらい回しにしているようで申し訳ないですが・・・

◆ここを見ておけば検索不要！Stingerカスタマイズ辞典

今回のカスタマイズはこんな感じです。

子テーマを作る

前回のカスタマイズにおける最大の過ちは「子テーマ」を作らなかったことだ。
元のテーマファイルからカスタマイズ用に複製したから、最悪標準状態には戻すことはできるけど。

子テーマの作り方はGoogleで「WordPress 子テーマ 作り方」なんかで検索すれば色々出てくるので、それらを参考に作ってみた。

元のStinger3のテーマファイル名が「stinger3ver20131217」だったので、子テーマの名前は「stinger3ver20131217-child-custom01」とした。
・・・custom01と付けたけど今のところ02の予定は無い。

子テーマを作るだけなら作業はカンタン。

親テーマと同じ階層に子テーマ用のフォルダを作り、その中に必要なファイルを入れる。

これだけ。

親テーマである「stinger3ver20131217」はサーバーの、

/wp-content/themes/

にあるので、子テーマのフォルダは、

/wp-content/themes/stinger3ver20131217-child-custom01

となります。

子テーマとして最低限必要なファイルはstyle.cssです。

/*---------------------------------------------------------
Theme Name: stinger3ver20131217-child-custom01
Template: stinger3ver20131217
---------------------------------------------------------*/
@import url('../stinger3ver20131217/style.css');

これだけの内容で子テーマとなります。
Template:には親テーマの「フォルダ名」を指定、@import urlで親テーマの「ディレクトリ」を指定します。
ここまでで「基本親テーマの外観で、◯◯という名前の子テーマを作りましたよ」ってことです。

ここから自分がカスタマイズしたいファイルを編集・追記などをしてアップしていく作業になります。

Twitterのメンション設定

twitterで記事をツイートしたとき、記事タイトルの後に「@◯◯◯さんから」を付けるようにしました。
メリットとしては、お知らせが来るのでツイートに気づきやすくなることと、自分のtwitterアカウントの宣伝になるということです。
STINGERご利用の方にぜひ、やって頂きたい事。（公式サイト）を参考に。

やることはfooter.phpとsns.phpにあるtwitter関連のコードの中に「data-via=”ここにTwitterアカウント”」という箇所があるので、そこに自分のtwittterアカウントを入れるだけです。こんな感じで。

data-via="tomohiro_mogi"

Zenbackの導入＆記事下のSNSボックスを記事タイトル下に移動

ブログを賑やかにするためにZenbackを導入してみた。
Zenback-トップページ
Zenbackの機能で各種SNSボックスの表示が可能なので、Stinger標準の記事下のSNSボックスを削除し、代わりにタイトル直下に表示させました。

弄るのはsingle.cssです。
元のテーマのものを子テーマにコピーして、それを編集しました。
コードは以下の通り。

<?php get_header(); ?>

<div class="kuzu">
  <div id="breadcrumb">
    <div itemscope itemtype="https://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">ホーム</span> </a> &gt; </div>
    <?php $postcat = get_the_category(); ?>
    <?php $catid = $postcat[0]->cat_ID; ?>
    <?php $allcats = array($catid); ?>
    <?php 
while(!$catid==0) {
    $mycat = get_category($catid);
    $catid = $mycat->parent;
    array_push($allcats, $catid);
}
array_pop($allcats);
$allcats = array_reverse($allcats);
?>
    <?php foreach($allcats as $catid): ?>
    <div itemscope itemtype="https://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_category_link($catid); ?>" itemprop="url"> <span itemprop="title"><?php echo get_cat_name($catid); ?></span> </a> &gt; </div>
    <?php endforeach; ?>
  </div>
</div>
<!--/kuzu-->
<div id="dendo"> </div>
<!-- /#dendo -->
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
  <!--ループ開始-->
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <div class="kizi">
    <h1 class="entry-title">
      <?php the_title(); ?>
    </h1>
    <div class="blogbox">
      <p><span class="kdate">公開日：
        <time class="entry-date" datetime="<?php the_time('c') ;?>">
          <?php the_time('Y/m/d') ;?>
        </time>
        :
        <?php if ($mtime = get_mtime('Y/m/d')) echo ' 最終更新日：' , $mtime; ?>
        </span>
        <?php the_category(', ') ?>
        <?php the_tags('', ', '); ?>
        <br>
      </p>
    </div>

<!-- 記事タイトル下にSNSボックスを設置 ここから -->
    <?php get_template_part('sns');?>
    <!-- ここまで --> 

    <?php the_content(); ?>
    <?php wp_link_pages(); ?>
  </div>
  <div style="padding:20px 0px;">
    <?php get_template_part('ad');?>
  </div>

<!-- X:S ZenBackWidget --><div id="zenback-widget-loader"></div><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var r=Math.ceil((new Date()*1)*Math.random());var j=d.createElement("script");j.id=i;j.async=true;j.src="//w.zenback.jp/v1/?base_uri=http%3A//mogi2fruits.net/&nsid=（Zenbackで指定されています）&rand="+r;d.body.appendChild(j);}}(document,"zenback-widget-js");</script><!-- X:E ZenBackWidget -->

<div class="kizi02">

<!-- 記事下のSNSボックスを削除 ここから -->    
<!--  <?php get_template_part('sns');?> -->
<!-- ここまで --> 

  </div>
  <?php endwhile; else: ?>
  <p>記事がありません</p>
  <?php endif; ?>
  <!--ループ終了-->
  <div class="kizi02"> 
    <!--関連記事-->
    <h4 class="kanren">関連記事</h4>
    <div class="sumbox02">
      <div id="topnews">
        <div>
          <?php
$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
'post__not_in' => array($post -> ID),
'posts_per_page'=> 10,
'category__in' => $category_ID,
'orderby' => 'rand',
);
$st_query = new WP_Query($args); ?>
          <?php
if( $st_query -> have_posts() ): ?>
          <?php
while ($st_query -> have_posts()) : $st_query -> the_post(); ?>
          <dl>
            <dt> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
              <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
              <?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?>
              <?php else: // サムネイルを持っていないときの処理 ?>
              <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" />
              <?php endif; ?>
              </a> </dt>
            <dd>
              <h4 class="saisin"> <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?>
                </a></h4>
              <p class="basui">
             <?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 50 ) . ''; ?></p>
              <p class="motto"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
            </dd>
          </dl>
          <?php endwhile;
?>
          <?php else:
?>
          <p>記事はありませんでした</p>
          <?php
endif;
wp_reset_postdata();
?>
        </div>
      </div>
    </div>
  </div>
  <!--/kizi--> 
  <!--/関連記事-->

  <div style="padding:20px 0px;">
      <?php get_template_part('ad');?>
  </div>

  <?php comments_template(); ?>
  <!--ページナビ-->
  <div class="p-navi clearfix">
<dl>
      <?php
        $prev_post = get_previous_post();
        if (!empty( $prev_post )): ?>
       <dt>PREV  </dt><dd><a href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php echo $prev_post->post_title; ?></a></dd>
      <?php endif; ?>
      <?php
        $next_post = get_next_post();
        if (!empty( $next_post )): ?>
         <dt>NEXT  </dt><dd><a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php echo $next_post->post_title; ?></a></dd>
      <?php endif; ?>
</dl>
  </div>
</div>
<!-- END div.post -->
<?php get_footer(); ?>

50行目くらいにある<?php the_content(); ?>の直前に<?php get_template_part(‘sns’);?>を追記。
60行目くらいにある<div class="kizi02">の直前にZenbackで取得したコードを追記、直後にある<?php get_template_part(‘sns’);?>を削除。（上のコードではコメントアウトしています）

Zenbackについては導入したばかりでまだ効果は分かりません。

追尾型SNSボックスを縦表示にする

AddThis Smart Layersというプラグインを入れていたため前回は追尾型SNSボックスを非表示にしていましたが、WordPressを3.8にアップデートしたためなのか、Stinger3のバージョンを変更したためなのか、このプラグインによるシェアボタンが表示されなくなりました。（原因不明）

で、Stinger標準のものを使おうと思ったのですが、記事に被ってしまうのが邪魔に感じるので縦に表示するようにしました。
弄るのはsns02.phpです。

<ul class="snsb clearfix">以下に、<li> 各SNSのコード </li>で記述されているのですが、</li>の後に<br>を追加しただけです。一応コードはこんな感じ。

<?php if (is_home()) { ?>
<div id="snsbox">
  <div class="sns">
    <ul class="snsb clearfix">
      <li>
       <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="tomohiro_mogi" data-url="<?php echo home_url(); ?>" data-text="<?php bloginfo('name'); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
      </li>
      <br>
      <li>
        <iframe src="https://www.facebook.com/plugins/like.php?href=<?php echo home_url(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
      </li>  
      <br>
      <li>
      <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php echo home_url(); ?>"></g:plusone>
      </li>
      <br>
      <li>
      <a href="https://b.hatena.ne.jp/entry/<?php echo home_url(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
      </li>
      <br>
    </ul>
  </div>
</div>
<?php } else if (is_page()) { ?>
<?php } else { ?>
<div id="snsbox">
  <div class="sns">
    <ul class="snsb clearfix">
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
      </li>
      <br>
      <li>
        <iframe src="https://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
      </li>
      <br>
      <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
      </li>
      <br>
      <li> <a href="https://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
      </li>
      <br>
    </ul>
  </div>
</div>
<?php } ?>

ホントは縦表示にした後ボックス内で中央配置にしたいのですが、やり方分からず・・・
多分style.cssを弄ればいいのだと思う。

ボックス全体の位置の調整はstyle.cssの中にある「.sns {」以下を編集します。
margin-left: 10px;、bottom: 50px;と変更し、ちょい中央寄りにし、ちょい上に上げました。

ちなみに同じような機能のプラグインにShareBarというものもあります。使い方はコチラで詳しく解説されています（↓）
◆ソーシャルボタンSharebar（シェアバー）の使い方と設置方法。WordPressプラグイン。｜IAO-@In_advance_only-

フッターの装飾＆ウィジェット対応

参考サイトはコチラ。
◆おしゃれは足元から！Stinger3フッターカスタマイズで差をつけろ！#Stinger-WP

この記事ではウィジェットエリアとして「フッター左」と「フッター右」を追加しているのですが、ちょっと弄って「フッター中央」も追加しました。

弄るのはfunctions.phpとfooter.php。詳しくは分かりませんが、functions.phpは子テーマ内に作るとエラーが出てブログが表示されません。
従ってこのファイルだけは元のテーマのものを編集しました。

まずはfunctions.php。「//ウイジェット追加」以下を編集します。コードを抜粋するとこんな感じ。

//ウイジェット追加
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(7) )
register_sidebars(1,
    array(
    'name'=>'サイドバー1',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'スクロール広告用',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2" style="text-align:left;">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'Googleアドセンス用',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

register_sidebars(1,
    array(
    'name'=>'Googleアドセンスのスマホ用width300',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

register_sidebars(1,
    array(
    'name'=>'フッター中央',
    'before_widget' => '<div class="footer_c">',
    'after_widget' => '</div>',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));

register_sidebars(1,
    array(
    'name'=>'フッター左',
    'before_widget' => '<div class="footer_l">',
    'after_widget' => '</div>',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));

register_sidebars(1,
    array(
    'name'=>'フッター右',
    'before_widget' => '<div class="footer_r">',
    'after_widget' => '</div>',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));

参考記事のコードに追加して「フッター中央（footer_c）」を追加しました。

次にfooter.phpでウィジェット領域を定義します。これは子テーマ内で作成。コードはこんな感じ。

</div>
<!-- /#main -->
<?php get_sidebar(); ?>

<div class="clear"></div>
<!-- /.cler -->
</div>
<!-- /#wrap-in -->

</div>
<!-- /#wrap -->
</div>
<!-- /#container -->
<div id="footer">
  <div id="footer-in">
    <div id="gadf"> </div>
    <h3><a href="<?php echo home_url(); ?>/">
      <?php wp_title(''); ?>
      </a></h3>
    <h4><a href="<?php echo home_url(); ?>/">
      <?php bloginfo('description'); ?>
      </a></h4>

<div id="footer_w">
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?>
      <?php endif; ?>
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(6) ) : else : ?>
      <?php endif; ?>
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(7) ) : else : ?>
      <?php endif; ?>
</div>
<div class="clear"></div>

<!--著作権リンク-->
     <p class="stinger"><a href="https://stinger3.com">WordPress-Theme STINGER3</a></p>
    <p class="copy">Copyright&copy;
      <?php bloginfo('name');?>
      ,
      <?php the_date('Y');?>
      All Rights Reserved.</p>
  </div>
  <!-- /#footer-in --> 
</div>
<?php wp_footer(); ?>
<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper">PAGE TOP ↑</a></div>

<!-- ページトップへ戻る　終わり --> 
<!---js切り替え--->
<?php if(is_mobile()) { ?>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/smartbase.js"></script>
<?php 
}else{
?>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/base.js"></script>
<?php
}
?>
<!-- ここにsns02 -->
<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<?php else: ?>
<?php get_template_part('sns02');?>
<?php endif; ?>
<!-- ここまでsns02 -->

</body></html>

最後に子テーマのstyle.cssで、配置やデザインを編集。以下を追記しました。

/*---------------------------------
フッターウィジェット追記
--------------------------------*/
#footer {
	background-color: #33221a;
}

#footer_w {
	width: 986px;
	background-color: #33221a;
	margin: 20px auto;
	text-align: center;
}
.footer_c {
	float: center;
	width: 986px;
	margin: 0 10px 20px 0;
	padding: 0;
}

.footer_l {
	float: left;
	width: 336px;
	margin: 0 10px 20px 0;
	padding: 0;
}

.footer_r {
	float: right;
	width: 620px;
	margin: 0 0 20px 20px;
}

#footer_w h5 {
	font-size: 120%;
	color: #fcfcfc;
}

#footer_w p {
	color: #fcfcfc;
}

/*---------------------------------
フッター文字色変更
--------------------------------*/
/*h3タグ色*/
h3 a {
	color: #CCC;
	text-decoration: none;
}
h3 a:hover {
	color: #C03;
}
/*h4タグ色*/
#footer #footer-in h4 a {
	color: #CCC;
	text-decoration: none;
}
/*フッター文字色等*/
#footer-in {
	text-align: center;
	color: #CCC;
	padding: 20px;
}
/*Stingerへのリンク文字*/
#footer #footer-in .stinger a {
	color: #CCC;
	text-decoration: none;
	padding: 0px;
	margin: 0px;
}
/*h4タグ*/
#footer #footer-in h4 {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-size: 13px;
	font-weight: normal;
	color: #CCC;
	padding: 5px;
}

フッター背景に合わせて文字色を変更しました。

「フッター中央」ウィジェットは970×90のラージビッグバナーを想定しています。
Stinger標準でも十分広告は表示されているので、今のところ必要性は感じていませんが・・・

ここまでで ダッシュボード → 外観 → ウィジェット に「フッター中央・左・右」が追加されているはずです。
Stinger3-ダッシュボード-フッターウィジェット追加

スクロール広告ウィジェットにランダム記事を表示

ちょっとしたことですが、単に広告だけ表示するのはもったいないと思ったので。
基本的には追尾型の広告は邪魔に感じる方です・・・

ランダム記事の表示の仕方は前回同様。
予めExec-PHPなどでテキストウィジェットでPHPが使えるようにしておきます。
あとはウィジェットテキスト内でランダム記事表示関数を呼び出し、広告コードを書くだけです。

ここは広告以外のもっと別の使い方を模索した方がいいと個人的には感じます。

あとがき

今回のカスタマイズは以上となります。

記事冒頭にも書きましたが、あくまで素人がテキトーにコードを弄っているので、試してみたい方は自己責任でお願いしますm(_ _)m
それよりなにより自分がもっと勉強しなければならないのですが・・・

間違いなどありましたらご指摘いただけると幸いです。

[milliard]
PREV：
低スペックPCの再活用にAndroidどうでしょう？【その3：必須アプリ導入・日本語環境構築編】
NEXT：
書評：マンガでわかるアフィリエイト （著：あびるやすみつ）

  • サイト内検索

  • カテゴリ


  • スポンサードリンク



PAGE TOP ↑