このブログ「OBRIGADO! ARIGATO!」Stinger を使わせてもらう前は、購入したテンプレートに手を加えて運用していました。今年の夏頃、秋田がチェックしているブロガーのブログが、結構な割合で似たようなデザインになり、なかなか行けてる感じのレイアウト変わって来ました。フッタを見ると皆同じ「Stinger」。
それらブログのフッタリンクを辿り「Stinger」と出会いました。
「おぉ〜！フリーじゃん！」って事で早速インストール。秋田のブログも、チェックさせてもらっているブロガーさん達の仲間入りぃ〜！てな事で、それから Stinger と暮らす日々が始まった訳です。
Stinger にしてから程なく「Stinger3」がリリースされたので、入れ替え。今は「Ver 20130906」を利用。
Stinger を作成し、無料配布しているENJILOGさんに感謝します。
また、今日のこのエントリーは「Stinger」好きが集まって行っている「Stinger Advent Calendar 2013」。１２月１日からクリスマスの２５日まで、「Stinger」をお題に、ブログでリレーを行っていくイベントへの参加エントリーです。
立案者のniji_mamiさんに感謝致します。
さて「Yuta Watanabe @fukujion」さんからバトンを空中で受け取りました（笑）。「Stinger3」に出会ってからこれまでに行ったカスタマイズをまとめてみます。
photo credit: Puzzler4879 via photopin cc
メインビジュアルの変更
インストール直後、まずはメインビジュアルの変更。流石にそのままって訳にはいかない。
皆さんどうやっているのか解らないが、秋田の場合はメインビジュアルを作ってそのまま上書き作戦。
メインビジュアルは
/wp-content/themes/stinger3ver20130906/images/stinger3.png
ここに配置されているので、FTP ソフトを使いファイルをダウンロード。フォトショップ等の画像レタッチソフトを使い画像を加工。
再び FTP ソフトを使って該当ファイルを上書き。
これでメインビジュアルが入れ替えられます。
今、改めて見てみると、左メニューの「外観」→「ヘッダー」から入れ替えられますね。ややこしい事をしてしまった・・・（涙）
リスト表示時にショートコードを見せなくする方法
実際に運用に入って行くと、リスト表示の時にショートコードがそのまま見えてしまって、なんだか格好悪いなぁ〜と思ったので、ショートコードをエスケープするようにカスタマイズをしました。
これのエントリーはこちら「WordPress STINGER3 を使っていてショートコードが見えちゃって嫌な場合の対処法（簡易版）」
/wp-content/themes/stinger3ver20130906/functions.php に、
//ショートコードを外す function akita_noshotcode($content){ $rtn = ""; preg_match("/\[.+?\]/",$content,$retArr); $rtn = str_replace($retArr[0],'',$content); return $rtn; }
を記述し、
/wp-content/themes/stinger3ver20130906/sidebar.php
/wp-content/themes/stinger3ver20130906/archive.php
/wp-content/themes/stinger3ver20130906/home.php
/wp-content/themes/stinger3ver20130906/single.php
それぞれのファイルの
strip_tags($post-> post_content);
となっている箇所を
strip_tags(akita_noshotcode($post-> post_content));
と書き換えます。
これでリスト表示箇所で、ショートコードを見せなくする事が出来ました。
アイキャッチの登録回避
photo credit: @Doug88888 via photopin cc
Stinger のリスト部分は、サムネイルが表示されるようになっています。アイキャッチ登録が無い場合は「no image」が表示されるようになっています。
このブログ、今では３００エントリーですが、Stinger3 に入れ替えた事は１００エントリー程度。なんとか手動でアイキャッチ登録をしたのですが、以前書いてブログは５００エントリー以上あり、アイキャッチ登録なんてしてませんでした。
気軽に Stinger3 テーマを入れ替えたのですが、一つ一つアイキャッチ登録をしなけれ格好わるくて仕方が無い。元のテーマに戻すか？このままアイキャッチ無しで使い続けるか？それとも頑張ってアイキャッチ登録するか？とても悩みました。
画像はそれなりに記事に入れてあるので、なんとかそれを使えない物か？と考え、「アイキャッチが登録されていなかったら、記事中の１つ目の画像をサムネイルとして使う」ってカスタマイズをしました。
これのエントリーはこちら「WordPress STINGER3 を使っていてアイキャッチを登録したくない場合の対処法」
/wp-content/themes/stinger3ver20130906/functions.php に、
function akita_catch_that_image($content) { $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = get_template_directory_uri()."/images/no-img.png"; } return $first_img; }
を、記述。
それぞれのファイルの該当する箇所を書き換えます。
/wp-content/themes/stinger3ver20130906/sidebar.php
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" /> ↓ <img src="<?php echo akita_catch_that_image($post->post_content); ?>" width="100" />
/wp-content/themes/stinger3ver20130906/archive.php
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="150" height="150" /> ↓ <img src="<?php echo akita_catch_that_image($post->post_content); ?>" width="150" />
/wp-content/themes/stinger3ver20130906/home.php
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="150" height="150" /> ↓ <img src="<?php echo akita_catch_that_image($post->post_content); ?>" width="150" />
/wp-content/themes/stinger3ver20130906/single.php（２ヶ所あります）
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" /> ↓ <img src="<?php echo akita_catch_that_image($post->post_content); ?>" width="110" />
これで、元のテーマに戻す事無く Stinger3 にする事が出来ました。
画像を掲載していないエントリーもあります。その場合は Stinger3 に元々用意されている「no image」画像が表示されます。こちらが並ぶと味気ないので、会社のロゴに変更。少しいい感じになりました。
デフォルトの no image を変更する場合は、「/wp-content/themes/stinger3ver20130906/images/no-img.png」を入れ替えます。
見出しアイコン設置
色々な方の Stinger サイトをみていると、hタグにいい感じのアイコンが付いています。う〜ん。秋田も欲しぃ〜！とのたうち回ったのですが、自分では上手に出来ない。
デザイナーのスタッフにお願いしてアイコン作ってもらいました。
エントリーはこちら「WordPress テーマ STINGER ちょいとお洒落をさせてもらい、個性を出してみました。」
h1 〜 h3 の画像を用意
h1
h2
h3
CSS に関しては Stinger3 サイトのエントリー「見出し命！ブログに必要なデザイン」を参考にするようにと、スタッフに伝え作業依頼。
お気に入りの Stinger3 に仕上がりました。
まとめ
photo credit: Denis Dervisevic via photopin cc
他にも色々とカスタマイズは行っていますが、それは Stinger3 じゃなくても行ったカスタマイズです。今回のエントリーは Stinger 縛りなので、Stinger3 だからこうカスタマイズした。ってカスタマイズに絞ってまとめてみました。
Stinger3 は、お気に入りのテーマです。知人のブログを立ち上げる時にも使っています。「地下鉄のギタリスト 復活編 〜ギターその愛〜」。知人も気に入って頂けているようです。
てな訳で Stinger Advent Calendar 2013 １８日目。皆さんのお役に立てましたでしょうか？少しでも皆さんの Stinger life のお役に立てたらな幸いです。
明日の担当は「hamako9999」さん。バトン渡します。よろしくお願いします！
コメント