アフィリエイト Wordpress SINGER PLUS+

テーマをSTINGER PLUS+にしたのでその手順とカスタマイズまとめ

更新日:

どうもみなさんこんにちは
最近サイトを統廃合したり記事を書いたりしたので、せっかくなので当サイトでずっと使わせているテーマSTINGERシリーズを最新のSTINGER PLUS+にバージョンアップさせていただきました。

アイキャッチのようにアクセス伸びろー という感じです(笑)

STINGERはとても素晴らしいテーマですので初心者の方にぜひお薦めしたいテーマです。
今回はSTINGER6からのバージョンアップですので、1つバージョンを飛ばした形ですが、思いのほか大変だったので途中でめげそうになりましたが、サイトはかっこよくなりますし、便利すぎて泣きそうです。

また、今回は、既存のテーマのサイトを残してサイト訪問者様にはこれまでのままを表示して、裏で自分だけが新しいテーマで構築するという、構築途中で表示がぐじゃぐじゃに崩れたりしてしまっても恥ずかしい思いをしなくて済む方法を試してみました。

尚、私は子テーマを使わない(使えない)ので、親テーマのphpファイルを直接編集しています。子テーマを使う方法をお探しの方はすみません。

結構長い道のりなので途中途中で詳細があった方は良いかなぁという場合は別の記事にしたいと思いますので、ここでは流れをさーっと説明します。

スポンサーリンク

テーマをバージョンアップする前に

いかに素晴らしいSTINGERシリーズといえども、テーマのバージョンアップで何が起こるかは分かりません。念のため現在の状態をバックアップしましょう。面倒くさいかもしれませんが、これまで積み上げてきたものが一瞬で無くなる事を回避するためにもやった方が良いです。

私はBackWPupというプラグインを使用していますので、ボタン一つでデータベースまでバックアップ完了です。

テーマを入手しインストール

STINGERPLUS+の最新版は、STINGERの公式サイトからダウンロードできます。ダウンロードしたZIPファイルをアップロードしましょう。テーマのアップロードの説明などは難しくないですし、私が説明するよりSTINGER公式サイトの説明の方が素晴らしいですからそちらをご参考に。

裏画面を作りましょう

既存のテーマのサイトを残して、サイト訪問者様にはこれまでのままを表示して、裏で自分だけが新しいテーマで構築するために、1つプラグインを導入します。

Theme Test Drive」というプラグインを使うことで実現できます。

これで訪問者様が見る表サイトには何の影響も無くて済むかと思いきや、

テスト環境(裏画面)でカラーの設定をすると、同じCSSのクラスなどは表画面でも反映されてしまう

などが有り、微妙に表画面にも影響があったようです。

ただ、レイアウトの調整などは表画面には出ていなかったので、恥ずかしい思いはしなかったと(勝手に)思っています。

ところが最後の工程で、主テーマをSTINGER PLUS+に切り替えた際に、
カラーの設定が全て吹っ飛ぶ(リセット)
ので、裏環境では余り細かくカラーの設定をしても疲れるだけですから、ざっくりとしたイメージのため主要な項目だけ設定して、あとはテーマを切り替えてからゆっくり設定すれば良いかと思います。

裏環境で出来なかったことは他にもありまして
ヘッダー画像をスライドショーで表示する
が効きません。
これは何度も画像を入れ替えたりして頑張ってもスライドショーにならなかったのですが、主テーマとしてSTINGER PLUS+を設定したらあっけなくスライドショーになりました。

STINGER PLUS+を自分好みにカスタマイズ

自分好みにカスタマイズするために、結構な作業をしなければなりませんが、それぞれ別記事を作成しますのでご興味がある方はそちらで見て頂ければと

まずはSTINGER管理

これまでのSTINGER6に比べSTINGER管理が非常に充実していて、どこをどうして良いか困ってしまうくらい凄いです。
今までプラグインやソースに直書きしていた部分などを、相当数ここのSTINGER管理で実現できてしまいます。

例えば

・ヘッダーフッターのレイアウトカスタマイズ
・今まで記事を書くごとにイチイチ画像を挿入していた投稿記事最上部への画像の自動表示
・女性向けサイトによく使うサムネイルを丸く
・ヘッダ画像の高さをpxで指定出来たり、スライドショーの設定が出来たり
・FacebookのOGP設定

などなど、とにかくたくさんです。

メディアの設定を変えましょう

古いSTINGERシリーズをお使いの方は、メディアの横幅の上限設定を580pxとかにしたままではないでしょうか?

STINGERPLUSでは

中サイズ680px
大サイズ1060px

に設定しておいた方が良さそうです。

公式サイトでもそのように書いてありますので。

2016/07/04追加)スマホの画面などを載せる方などは、中サイズの横幅は300pxの方が良さそうですね。

ウィジェットの設定

便利なウィジェットが増えているのでウィジェットの組みなおしをお薦めします。
例えば、STINGERフリーボックスなどはとても使いやすく、右サイドバーの【執筆者のこと】のような使い方や、資料のダウンロード、告知を強調するなど使い方は様々できそうです。

また、ウィジェットの配置できる場所がすごい増えています。

GoogleAdsenseの広告設置

私はGoogleAdsense広告の配置を、ほとんどソース(php)に直書きしている何ともセンスのないやり方ですので、もっと良い方法が有るかと思いますが、これが一番確実なのです。場所場所で広告のサイズや感度を分析するために全て別の広告を置くので、自動で広告を配置してくれるSTINGERの超便利機能を無視する暴挙です。

ただ、今回からウィジェットにサイドバートップという枠が出来て、そこにテキストウィジェットで任意の広告なりが置けるようになったのでそれはそのまま活用しました。

YARPP用のテーマファイルの構築

関連記事をマッチングするスコア順に表示させるプラグインYARRPのためには、phpファイルを書き直したり、新たなファイルを生成する必要があります。

結構大変かもですが、完成の高い記事が表示されますので、サイト訪問者に興味のある内容を表示できますので頑張る価値ありです。

WordPress Popular Postsのスタイルを合わせる

せっかくカッコイイSTINGER PLUS+です。サイドバーに使用している記事閲覧ランキングプラグインのWordPress Popular PostsのスタイルもSTIGNE PLUS+にあわせます。

スタイルシートの改造

当ブログのような特段デザインにこだわっているサイトで無い場合、スタイルシートを改造する事はほとんど必要ありませんが、下記のために少々スタイルシートをいじりました。

・Contact Form7のカスタマイズ
・右下に出てくるPAGE TOPへのデザイン変更
・右サイドバーに表示するGoogleAdsenseのカスタム検索エンジンの幅を1行に納めるため
・右サイドバーのカテゴリー表示で子カテゴリー以下を字下げするため
・ヨメレバ、カエレバのカスタマイズのため

たったこの5点だけになったので、とても簡単です。

プラグインは全て問題なく動きました

これまで使っていたプラグインは全て問題なく動いています。(と思います)
大丈夫かな?と思ったら下のリストを参考にしてください。

私が使っていたプラグイン

404 Notifier
AddQuicktag
BackWPup
Batch Cat
Broken Link Checker
Category Order
Contact Form 7
EWWW Image Optimizer
Google Analytics Dashboard for WP
Google XML Sitemaps
Limit Login Attempts
Meta Manager
PS Auto Sitemap
PubSubHubbub
Pz-HatenaBlogCard
SNS Count Cache
SyntaxHighlighter Evolved
Table of Contents Plus
WordPress Ping Optimizer
WordPress Popular Posts
Yet Another Related Posts Plugin

いざ、テーマをSTINGER PLUS+へ!

テスト環境での構築が終わったら、Theme Test Driveを無効にして(「外観」-「Theme Test Drive」-「Disable Theme Drive」で無効になります)、テーマをSTINGER PLUS+に切り替えましょう!

テスト環境(裏画面)で設定した色は悲しい事に全てリセットされている?ハズですので、テーマカスタマイザーを使って色を変えていきましょう。
また、さっきまで動かなかったヘッダー画像がスライドショーとして動いているはずですので見てみて下さい。

実はこの後が大変だった

これで終わりと思いきや、調子に乗ってSTINGER管理で投稿記事最上部にアイキャッチ画像を表示するをチェックしていたので、こんなことになっていました。

stingerplus1

河村友歌さんが2人も!可愛い!(チガウ)
今回から設定した記事の上にアイキャッチ画像が表示される機能のおかげで、今までよりカッコイイ大きさで画像表示されます。
でもしかし、これまでアイキャッチ画像と同じ画像を記事を書くときに一番上にチマチマつけていたのが下に表示されて同じ画像が大きさ違いで表示されてしまってカッコ悪い・・・

(コレ、ヒトツヅツ、キジヲヘンシュウシテ、imgタグヲケシテイカネバ、ナラナクナイ?)

(ソレッテ、トテモ、メンドウダヨネ?アサニナチャウヨネ?)

(ネチャウカ!?)

悪魔の囁きもありましたが、泣く泣く各記事の一番上の画像を一つ一つ手作業で削除していく羽目に。。。だってせっかくですからカッコよくしたいじゃないですか。
でもこの作業をしているうちにもっと激しい事態に遭遇しまして。。。

激しい事態の真相は?!

その他のカスタマイズ

他にもちょこちょこいじりました。


STINGER PLUS+導入まとめ

最後に大変な思いをしましたが、とても素晴らしいテーマです。自分でやることも減ってきて、設定できる項目をSNS関係を中心にどんどん進化しているので、自分が何もしなくて良くなると技術力が落ちるのでは?と思いながらもその分コンテンツ制作に力を注げるのは?と前向きに考えたりしますが、結局STINGERは素晴らしいので、また新しいバージョンが出たりしてしまったら、当然入れたくなってしまうので、STINGER8はしばらく出さないで欲しかったり、楽しみだったりします。

さらに、このSTINGER PLUS+では、ページ毎に1カラムやLP化などもできるようですので、引き続きチャレンジしていきたいと思います。

最後にENJI様いつもありがとうございます。

-アフィリエイト, Wordpress, SINGER PLUS+

Copyright© 上善如水 , 2019 All Rights Reserved.