PR

Stinger3 に対して行ったカスタマイズのセルフまとめ #Stinger-WP

wordpress
記事内に広告が含まれている事があります。

Stinger Advent Calendar 2013

このブログ「OBRIGADO! ARIGATO!Stinger を使わせてもらう前は、購入したテンプレートに手を加えて運用していました。今年の夏頃、秋田がチェックしているブロガーのブログが、結構な割合で似たようなデザインになり、なかなか行けてる感じのレイアウト変わって来ました。フッタを見ると皆同じ「Stinger」。

それらブログのフッタリンクを辿り「Stinger」と出会いました。

おぉ〜!フリーじゃん!」って事で早速インストール。秋田のブログも、チェックさせてもらっているブロガーさん達の仲間入りぃ〜!てな事で、それから Stinger と暮らす日々が始まった訳です。

Stinger にしてから程なく「Stinger3」がリリースされたので、入れ替え。今は「Ver 20130906」を利用。

Stinger を作成し、無料配布しているENJILOGさんに感謝します。

また、今日のこのエントリーは「Stinger」好きが集まって行っている「Stinger Advent Calendar 2013」。12月1日からクリスマスの25日まで、「Stinger」をお題に、ブログでリレーを行っていくイベントへの参加エントリーです。

立案者のniji_mamiさんに感謝致します。

さて「Yuta Watanabe @fukujion」さんからバトンを空中で受け取りました(笑)。「Stinger3」に出会ってからこれまでに行ったカスタマイズをまとめてみます。

medium_6485865107
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)); 

 

 

と書き換えます。

これでリスト表示箇所で、ショートコードを見せなくする事が出来ました。

アイキャッチの登録回避

medium_3295094303
photo credit: @Doug88888 via photopin cc

Stinger のリスト部分は、サムネイルが表示されるようになっています。アイキャッチ登録が無い場合は「no image」が表示されるようになっています。

このブログ、今では300エントリーですが、Stinger3 に入れ替えた事は100エントリー程度。なんとか手動でアイキャッチ登録をしたのですが、以前書いてブログは500エントリー以上あり、アイキャッチ登録なんてしてませんでした。

気軽に Stinger3 テーマを入れ替えたのですが、一つ一つアイキャッチ登録をしなけれ格好わるくて仕方が無い。元のテーマに戻すか?このままアイキャッチ無しで使い続けるか?それとも頑張ってアイキャッチ登録するか?とても悩みました。

画像はそれなりに記事に入れてあるので、なんとかそれを使えない物か?と考え、「アイキャッチが登録されていなかったら、記事中の1つ目の画像をサムネイルとして使う」ってカスタマイズをしました。

これのエントリーはこちら「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(2ヶ所あります)

 <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 に仕上がりました。

まとめ

medium_4745520501
photo credit: Denis Dervisevic via photopin cc

他にも色々とカスタマイズは行っていますが、それは Stinger3 じゃなくても行ったカスタマイズです。今回のエントリーは Stinger 縛りなので、Stinger3 だからこうカスタマイズした。ってカスタマイズに絞ってまとめてみました。

Stinger3 は、お気に入りのテーマです。知人のブログを立ち上げる時にも使っています。「地下鉄のギタリスト 復活編 〜ギターその愛〜」。知人も気に入って頂けているようです。

てな訳で Stinger Advent Calendar 2013 18日目。皆さんのお役に立てましたでしょうか?少しでも皆さんの Stinger life のお役に立てたらな幸いです。

明日の担当は「hamako9999」さん。バトン渡します。よろしくお願いします!

コメント

タイトルとURLをコピーしました