Amazonギフト券にチャージで最大2.5%還元!

WordPressテーマSANGO導入後に行ったカスタマイズまとめ【時短で即実戦に】

WordPressテーマ「SANGO」導入後に行ったカスタマイズまとめ【時短で即実戦に】

WordPressテーマをAFFINGER5からSANGOへ変えました。

1年2ヶ月目でこれで4つ目のテーマですね。

(ちなみにSTORK→JIN→AFFINGER5→SANGO)

SANGOの導入で少し困ってしまうのが、ただ載せ替えるだけではいわゆる「よく見るSANGO」にはならないということ。

SANGOは発売されて2年以上経つテーマなので、蓄積されたカスタマイズの知見がめちゃくちゃ豊富なんですよね。

ブログで使われているSANGOもその多くがカスタマイズされたもの。

このブログも現在の状態に持ってくるまでわりと時間がかかったので、ここでは採用したカスタマイズについてまとめてみました。

外観の設定は楽しい作業である一方、かかる時間は生産性に直結しない部分でもあります。

なるべく時短ですませられるよう情報を集約してみたので、これからSANGOをお考えの方はぜひ参考にしてみてください。

子テーマ「PORIPU tears」を導入

SANGOには公式から提供の子テーマがありますが、今回はマサオカブログさんの作成された「PORIPU」を導入しました。

参考 収益がアップするSANGOの公認 子テーマPORIPU-SANGO公認の子テーマ

なお導入したのは上位版の「PORIPU tears」。

これにより本来のSANGOよりもデザインや機能面が拡張されています。

POPURIは上位版tearsと通常版があり

PORIPUには上位版の「tears」と通常版の無印があります。

必要なもの

  • PORIPU tears:4,980円
  • PORIPU 通常版:3,980円

ちなみにtearsはPORIPUの機能を拡充してアフィリエイト機能を強化したもの。

価格的は1,000円しか違わないので、余裕があれば上位版を購入でよいかと思います。

私もPORIPU tearsを買いました。

PORIPUの機能

具体的に何ができるようになるかと言うと、下記のとおり。

 PRIPU 通常版PORIPU tears
アイキャッチにバイラルデザインを選択
アイキャッチにキャプションを表示
アイキャッチを記事ごとに非表示
吹き出しの色を変更
トップページにおすすめ記事を表示
オリジナルデザインの装飾
赤字・青字を太く調整
グーテンベルクエディタ対応
商品ランキング機能
記事中広告の追加
インフィード広告の挿入
自動広告のページごとの表示設定
WordPressPopularPostsへの対応
SNSCountCashへの対応
WPアソシエイトポスト・RINKERへの対応
カスタマイズボックスを3パターン15種類追加
フッターにブログロゴを自動表示
ポチレバデザインをSANGO風に調整
カエレバのYahoo!ショッピングボタンの色味を調整
モバイル追尾ヘッダー
ウィジェット アイテムランキング(サイドバー用・記事内用)
ショートコード アイテムランキング(記事内用)
ランキング用アイテムの管理スペース
ショートコード 新吹き出し(吹き出し下)
モバイル時の固定ヘッダー
FontAwesome5対応
その他デザイン追加

視覚に訴える機能が主なため、公式サイトで実際にご覧いただいた方が理解が早いかもしれません。

かなり多機能なので、購入しておくと何かしらに活用できるかと思います。

利用しそうな機能がなければ購入を見合わせるのもありですね。

あとからSANGOの公式子テーマに重ねてインストールもできるようなので。

ちなみに私の場合は自動的に適用されるもの以外では、主にボックスデザインを増やすために利用しているかたちです。

当初はトップページのサイト型設定を目的として購入しましたが、次にご紹介するカスタマイズ方法を採用したので、結局使っていません。

トップページをサイト型にカスタマイズ

トップページをサイト型にカスタマイズしています。

サイト型デザインはみやちまんさんのnoteを参考に

詳細は下記を参考にさせていただきました。

参考 マクリンブログのようなトップページを実現するカスタマイズ方法【SANGO限定】みやちまん|note

サイト型にするとカテゴリごとに記事をピックアップできるので、回遊率が上がります。

特化・半特化ブログはぜひ採用したい表示方法です。

なお最新のマクリンさんのブログはデザインが変わっているので、一代前のデザインですね。

aタグ消失バグとpタグ余白バグに注意

サイト型カスタマイズは上記のnoteの手順どおりに進めれば完成するのですが、WordPressのエディタ起因のバグにより上手く進まない場合があります。

しかも私の場合は2つが絡んでいたのでちょっと混乱したところもあります。

ポイントは主に次の二つ。

エディタにより起こる現象

  • ビジュアルエディタとテキストエディタを切り替えた際にaタグが勝手に消える場合がある
  • エディタの自動整形機能により、pタグが自動挿入されデザインに余白が生じる場合がある

二つ目のpタグ問題はnoteに解決策も含めて書いてあるのですが、TinyMCEの設定で自動整形を回避する方法は上手くいかず。

結局noteにも書いてある、function.phpにコードを差し込む方法を採用しました。

一つ目のaタグ問題は原因がしばらくわからなかったのですが、どうやらこちらに書いてある説明で当たりっぽいですね。

参考 【WordPress】ビジュアル・テキスト切り替えでタグが消えてしまう(株)オルテナジーの社内情報共有と動作確認のついでのブログです。

コードを修正してpタグとaタグを入れ替えるのが正解のようです。

それ以外ではエディタを切り替えないようにするか、極力トップページに触らないようにするかのどちらかしかないのではないでしょうか。

マイクロコピー対応ボタンを導入

sangoはデフォルトで用意されているボタンのバリエーションは豊富ですが、マイクロコピー対応がありません。

そのため、下記のサイトさんを参考にさせていただきました。

参考 【SANGOを自分でカスタマイズ】ボタン周りにテキストを追加してみたfor men

for menさんはSANGOをはじめWordPressテーマのカスタマイズ例が豊富なサイト。

おしゃれなデザインが揃っているので、どんどん取り入れたいですね。

ちなみにマイクロコピーはこんな感じ。

\プライムビデオなど特典多数!/

※30日以内に解約すれば料金はかかりません

追加CSSに貼るだけで簡単に利用できます。

オーソドックスなマイクロコピーボタンとしてまず導入したいですね。

サルワカ公式からカスタマイズ例を採用

SANGOの製作者、サルワカさんも公式にカスタマイズ例を紹介してくれています。

サイドバーにプロフィールを導入

サイドバーにプロフィールを導入します。

参考 サイドバーや記事下にプロフィール(この記事を書いた人)を設置するサルワカ

方法はウィジェットからカスタムHTMLを選んでコードを貼り付けるだけ。

簡単ですね。

プロフィール欄はブログにとっては超重要なのでまず最初に対応しておきたいところです。

SHAREボタンの文字色を変更

SHAREボタンの文字色はデフォルトでは黒系の配色ですが、ボタンの色によっては見えにくくなってしまうことがあります。

白系の方がよければ、追加CSSで対応するのがおすすめです。

参考 アイキャッチ画像右下のSHAREボタンの色を変更したいサルワカ

積み上げ横棒グラフのカスタマイズを導入

ぽんひろ.comさんもWordPressカスタマイズを幅広く紹介してくれているサイト。

VOD関連記事でグラフの利用場面が多くなることが想定されたので、下記のカスタマイズを以前から導入しています。

参考 【HTML/CSS】割合がわかる積み上げ横棒グラフ【WordPress】ぽんひろ.com

適用するとこのようなグラフが使用できます。

580件
FODプレミアム
730件
Hulu
980件
Paravi
1,250件
U-NEXT
360件
dTV

画像で作成する手間が省ける上、デザインも美しいので一石二鳥。

おいしいカスタマイズです。

インフォグラフィックやグラフの自作も静かなブームですが、目的によって使い分けるのがよさそうです。

  • 手早くグラフを作りたい→ぽんひろ.comカスタマイズ
  • 被リンク獲得も視野に入れたい→自作

ちなみにこのグラフカスタマイズはこちらの記事で使用しています。

国内テレビドラマが見放題できるおすすめの動画配信サービスを一覧で比較国内テレビドラマが見放題できるおすすめの動画配信サービスを一覧で比較

まとめ:SANGO導入はカスタマイズを事前にチェックするとスムーズ

これで4つ目のテーマということで、テーマを変えすぎやろ!というツッコミもあるかと思いますが、やはりSANGOはデザインが至高。

長く使っていきたいですね。

また突発的に載せ替えてしまった結果、カスタマイズのネタ元を探すのに予想以上に時間がかかってしまいました。

他サイトを見てもカスタマイズした結果こうなっているのか、オリジナル機能でそれができるのかすら最初のうちは分からないんですよね。

載せ替えは計画的に行うに越したことはないので、事前によくリサーチすることをおすすめします。

とくにショートコードは手動で置き換えようとすると死ぬ目に遭います。

SearchRegexの利用は必至なので、正規表現も含め、事前に置き換えの対応表を作っておくと失敗がありません。

事前準備によって全体の作業量も違ってくるので計画をよく立てておきましょう。