Stinger3 – カスタマイズ備忘録〈その一〉 ～標準でSEOに強いWordPressテーマ（無料）～
Stinger3 の公式ページはコチラ → WordPressテーマのSTINGER3公式サイト
※画像は公式ページのヘッダーになります。
SEOに強いと噂のWordPressテーマ「 Stinger 」（現在は ” 3 ” ）なんだけど、デザインが好みでなく今まで敬遠していた。
・・・が、カスタマイズ記事を色々見ていると自分でもできそうなのでチャレンジしてみた。
参考にさせていただいたサイトはコチラ。
◆女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう | えけこのくるる
◆Stinger | りんろぐ。
◆wordpressのテーマstinger3で始めに行った7つのカスタマイズ ｜ takahirosuzuki.com
◆[WP] Stinger 3 の検索ボックスを Google カスタム検索に変更しました| 最近,気になったこと…
◆人気のWordPressテーマ「Stinger2」を簡単にカスタマイズ。サイドバー編 | ふーたらのページ (GALAXY S4やAndroidやドコモとiPad miniもね)
◆WordPressでランダム記事の一覧をプラグインを使わないで表示させるやり方 | bl6.jp
目次
カスタム用にテーマを複製
後から分かったことだけどホントは「子テーマ」を作った方が良いらしい。僕はダウンロードしたテーマを複製して編集した。
公式ページよりダウンロードしたテーマファイルはコレ。
stinger3ver201310231.zip
コレを 7zip で解凍した後、必要なファイルを追加したり設定ファイルを編集したりした。
変更が終了したら再び 7zip で圧縮しインストール。もちろんインストールした後で「テーマ編集」しても良い。
オリジナルとカスタムを区別するためにテーマ名を変更。
- オリジナルのテーマ名：stinger3ver20131023
- カスタム後のテーマ名：stinger3ver20131023_custom01
ダッシュボードで表示されるテーマ名を変更するには style.css を編集する。初めに記述してある Theme Name:◯◯◯◯ を編集すれば良い。
|
1 2 3 4 5 6 7 8 9 10 |
/*--------------------------------------------------------- Theme Name: stinger3ver20131023_custom01（←この部分） Theme URI: https://stinger3.com Description: stinger3 Author: enji Author URI: https://stinger3.com License: License URI: Version: 20131023 ---------------------------------------------------------*/ |
ヘッダーのブログタイトルをロゴに変更
好きなロゴ画像をテーマの中にあるimagesフォルダに追加。場所はWordPressがインストールされているディレクトリから、
./wp-content/themes/stinger3ver20131023_custom01（ココがテーマ）/images
をたどれば良い。
僕は300×60ピクセルの画像 title_logo.png を作成した。
画像サイズはなんでも良いとは思うのだけれど、Stingerの仕様（？）のためスマホから見た場合はヘッダー画像（大）は表示されず、ロゴ画像が表示されるためスマホサイズに合わせた。PCでもスマホでもこのロゴをクリックするとトップページに飛ぶようだ。
画像をimagesフォルダに追加したら次は header.php の編集。
98行目にある、
|
1 2 3 |
<p class="sitename"><a href="<?php echo home_url(); ?>/"> <?php bloginfo('name'); ?> </a></p> |
この部分を、
|
1 2 3 |
<p class="sitename"><a href="<?php echo home_url(); ?>/"> <img src="<?php echo get_template_directory_uri(); ?>/images/title_logo.png（画像の名前）" /> </a></p> |
に差し替える。
フォントの変更・記事タイトルの装飾
style.css の最後に以下を追記。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* タイトル設定追加 */ .entry-title { border-bottom: dotted 7px #b0c4de; padding: 0px 5px 8px; } /* フォント設定追加 */ p { font-size: 17px; line-height: 30px; } * { font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif; } |
記事タイトル下に点線を入れた。
テーマ全体のフォントは参考サイトそのままである。
検索窓をGoogleカスタム検索に変更
元の検索フォームのデザインが暗い＆Google好きのため変更。searchform.php を編集する。
<div id=”search”>以下を次の様に変更。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="search"> <form id="cse-search-box" action="https://google.com/cse" target="_blank"> <label class="hidden" for="s"> <?php _e('', 'kubrick'); ?> </label> <input type="hidden" name="cx" value="【カスタム検索エンジンのID】" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" id="s" name="q" /> <input type="image" src="<?php echo get_template_directory_uri(); ?>/images/btn2.gif" alt="検索" id="searchsubmit" name="sa" value="<?php _e('Search', 'kubrick'); ?>" /> </form> </div> <script type="text/javascript" src="https://www.google.co.jp/coop/cse/brand?form=cse-search-box&lang=ja"></script> |
カスタム検索エンジンのIDはコチラから取得できる。 → カスタム検索 – 検索エンジンの編集
サイドバーに表示される項目の順番を変更
Stingerは標準でサイドバーの並びが上から、
- Google AdSense
- サイト内検索
- NEW ENTRY
- ウィジェット
- スクロール追随広告
となっている。AdSense、サイト内検索はそのままでもいいとして、その次に他のウィジェットを表示させたい。
これには sidebar.php を編集する必要がある。元々のコードの順番を変えてあげれば良い。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<div id="side"> <div class="sidead"> <?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?> <?php else: ?> <?php get_template_part('ad');?> <?php endif; ?> </div> <?php get_search_form(); ?> <div class="kizi02"> <!--最近のエントリ--> <h4 class="menu_underh2">NEW ENTRY</h4> <div id="topnews"> <div> <?php $args = array( 'posts_per_page' => 5, ); $st_query = new WP_Query($args); ?> <?php if( $st_query->have_posts() ): ?> <?php while ($st_query->have_posts()) : $st_query->the_post(); ?> <dl><dt><span><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'thumb100' ); ?> <?php else: // サムネイルを持っていないときの処理 ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" /> <?php endif; ?> </a></span></dt><dd><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <p><?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 35 ) . ''; ?></p> </dd> <p class="clear"></p> </dl> <?php endwhile; ?> <?php else: ?> <p>記事はありませんでした</p> <?php endif; ?> <?php wp_reset_postdata(); ?> <p class="motto"> <a href="<?php echo home_url(); ?>/">→もっと見る</a></p> </div> </div> <!--/最近のエントリ--> <div id="twibox"> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?> <?php endif; ?> </div> </div> <!--/kizi--> <!--アドセンス--> <div id="ad1"> <div style="text-align:center;"> <?php get_template_part('scroll-ad');?> </div> </div> </div> <!-- /#side --> |
（↑）コレが元のコード。この中の45行目にある、
|
1 2 3 4 5 |
<div id="twibox"> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?> <?php endif; ?> </div> |
この部分を検索の下に移動した。変更後のコードがコレ（↓）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<div id="side"> <div class="sidead"> <?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?> <?php else: ?> <?php get_template_part('ad');?> <?php endif; ?> </div> <?php get_search_form(); ?> <div id="twibox"> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?> <?php endif; ?> </div> <div class="kizi02"> <!--最近のエントリ--> <h4 class="menu_underh2">NEW ENTRY</h4> <div id="topnews"> <div> <?php $args = array( 'posts_per_page' => 5, ); $st_query = new WP_Query($args); ?> <?php if( $st_query->have_posts() ): ?> <?php while ($st_query->have_posts()) : $st_query->the_post(); ?> <dl><dt><span><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'thumb100' ); ?> <?php else: // サムネイルを持っていないときの処理 ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" /> <?php endif; ?> </a></span></dt><dd><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <p><?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 35 ) . ''; ?></p> </dd> <p class="clear"></p> </dl> <?php endwhile; ?> <?php else: ?> <p>記事はありませんでした</p> <?php endif; ?> <?php wp_reset_postdata(); ?> <p class="motto"> <a href="<?php echo home_url(); ?>/">→もっと見る</a></p> </div> </div> <!--/最近のエントリ--> </div> <!--/kizi--> <!--アドセンス--> <div id="ad1"> <div style="text-align:center;"> <?php get_template_part('scroll-ad');?> </div> </div> </div> <!-- /#side --> |
サイドバーにランダム記事を表示
これはStingerのカスタマイズではないのだけれどついでに。
まずテキストウィジェット内でPHPを実行させるために Exec-PHP というプラグインをインストールしておく。
次に functions.php を編集して、新たにランダム記事表示用の関数を作る。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// ランダム function random_post_list($show_num) { query_posts('posts_per_page=' . $show_num . '&orderby=rand'); if(have_posts()) { while(have_posts()) { the_post(); echo '<li><a href="'; the_permalink(); echo '">'; the_title(); echo '</a><span>('; the_time('Y年m月d日'); echo ')</span></li>'; } } wp_reset_query(); } |
テキストウィジェット内で関数を呼び出し。
|
1 2 3 |
<ul> <?php random_post_list(5); ?> </ul> |
これでランダム記事を5件表示させることができる。
SNSボックスにPocketを追加
僕自身はPocketを使っていないが、どうやら人気らしいので追加した。
コードはココから取得。
sns.php と sns02.php の編集。sns02.php が追尾型SNSボックスのようだ。
どちらのファイルも各種SNSのコードが <li> 【SNSのコード】 </li> で囲まれている。
並びで最後にPocketのコードを追記した。
追尾型SNSボックスを非表示にする＆記事タイトル下にSNSボックスを設置する
記事追加しました。
Stinger3のカスタマイズ – 追尾型SNSボックスを非表示にする＆記事タイトル下にSNSボックスを設置する方法
【2014年3月12日追記】
上記記事はタイトルを変更しました。
あとがき
いったんカスタマイズはここまで。これで標準の男臭い（？）イメージからだいぶ変わったのではないだろうか。
ホントはメニューまわりもカスタマイズしたいのだけれど、いかんせん知識が無い・・・
自分でコードを書けるようになればもっと自由にカスタマイズできるのだがなぁ。
【2013/12/23 追記】
カスタマイズ記事を更新しました。
◆Stinger3【WordPress3.8対応】 – カスタマイズ備忘録①
