Stingerを初導入したのは良かったが、最初は戸惑った。

SEOに強いという評判を信じ、勧められるままに私が導入したのは最新版のStinger6。リリース直後ということもあってかStinger6についての情報はあまりなく、お手上げ状態。しかし、後には引けないので噛り付いてみた。

Stinger3、Stinger5の情報はたくさんある。それらに準じて扱えば何とかなるのではないか?そう考えてトライしたところ、案外すんなりといった。

Stinger6のカスタマイズは意外に簡単

Stinger6の導入・カスタマイズは意外に楽だった!というのが私の感想だ。Stingerは日本生まれのテーマ。コードには随所に日本語でコメントがある。なので、横文字に弱い初心者でもカスタマイズが必要な箇所を探しやすい!これは助かる!!!

私が行った主なカスタマイズは以下の4点。

  1. 画像に対する文字の表示位置(回り込み)の調整
  2. ヘッダー画像の縦サイズを400➡120
  3. ヘッダー画像へのリンク挿入
  4. 関連記事の位置をコメントの前に変更
  5. NEW POSTの位置変更とトップページへの非表示

カスタマイズは他にもいくつかあるが、今回最初に一番困ったのは画像と文字の関係。なので、ここでは文字の回り込みについて。

画像への文字の回り込みはCSSで設定

以前採用していたテーマでは、カスタマイズの必要なく画像に対する文字の回り込みは、左右にきちんと処理されていたのに対し、Stinger6を当てたとたん崩れてしまい、非常に困った。

Stinger6では、おそらく何らかの意図があって、もしかしたらSEOの関係で画像への文字の回り込みはしないようにしてあるのかもしれない。そうは思ってもこれまでに作成したページは400超もあるので、一つ一つ修正するわけにもいかない。

一括して処理できる方法はないものか?ネットで探してみると、「文字の回り込みはCSSで対応できる」とのこと。そしてコードもあったので、そのコードをStinger6Childのスタイルシートに記述したら、見事に体裁は整った。

コードをこんな風に格好良く載せるのはどうしたらできるのだろうか?と思って調べてみたら、WordPressではこれを可能にするプラグインがあった。何種類かヒットしたが私が採用したのはCrayon Syntax Highlighter。Crayon Syntax Highlighterは使い方も割と簡単だった。

プラグインのなせる業とは言え、自分のページにコードを格好良く掲載できたとなると、ランクが上がったような気分になる。嬉しいなぁ。

Crayon Syntax Highlighterの導入と使い方はまた次の機会に!

関連記事をYARPPプラグインで連携

関連記事の位置をコメントの前に移動はしたものの、Stinger6での関連記事は、記事内容に関係なくランダムに抽出して表示するとのこと。これでは、いささか残念。

これまではYet Another Related Posts Plugin (YARPP)というプラグインで関連記事を表示していたので、Stinger6の関連記事とYAPPPとを関連付けることはできないか?と考え、探してみたら、やはりあった。

先人の知恵を力を拝借して、関連記事をランダムではなく記事タイトルや内容を評価して表示できるようになった。大感謝!!
参考にさせていただいた先人に敬意を表して、下記に出所を掲示させていただく。

【Stinger6】NEWPOSTの価値を更に上げる3つのカスタマイズもよろしくお願いします。