WordPressテーマ・SANGOに私が行った最初のカスタマイズ

WordPressテーマ・SANGOに私が行った最初のカスタマイズ

ここからは、私がSANGO導入に際して行ったカスタマイズのうち主なものを挙げていきます。

長くWordPressサイトを運営している割に基本的な知識があまり備わっていないため、先人たちが書き残しているブログ記事に大いに助けられました…!

よくあるカスタマイズのほとんどは、SANGOカスタマイズガイドで網羅されています。

私の場合はこのカスタマイズガイドを中心に、一部は個人ブログで公開されている内容も取り入れつつ自分好みに改造しました。

WordPressテーマ変更の準備

まず、トラブルを避けるためにWordPressテーマ変更の事前準備をしておきます。

WordPressでテーマ変更や大きな修正を行うときには必ずやっておくべき基本的な内容。

ローカルのテスト環境を作ろう

既にある程度の記事を公開しているWordPressサイトであれば、移行に際してしばらく見られないなどというわけにはいきません。
かといって、テーマをいきなり変更してしまうと予期せぬ不具合や表示崩れが起こってしまうことも。


それを回避するためには、ローカル(自分のパソコン内)にテスト環境を作ってそこで試してみるのがセオリー。

Macであれば、例えばMAMPというソフトがおすすめ。


他にもWordPressプラグイン「Theme Test Drive」を使う方法など、テスト環境を作る方法は色々あるようです。

私はMAMPを使う方法しかやったことがないので、それ以外の方法については検索などでさがしてみてください。


ローカルでしっかり作り込んでから実際のWordPressに実装→公開するのが理想ですが、反映の手間も考えると面倒。

今回は最低限の表示確認までしてから見切り発車で本番環境に公開、深夜から朝にかけてサイトを直でカスタマイズするというなかなかに大胆な方法を取りました。


夜通しの作業が可能な私の状況と、SANGOの完成度が元々高いことで何とかなりましたが、マネするのはオススメしません…。

子テーマを作ろう

WordPressテーマを直接いじってしまうと、テーマのアップデート時に上書きされてしまい再度修正する羽目になります。

そこでやっておきたいのが、子テーマの作成

以下の記事が図解入りでとてもわかりやすい。


要するに、ベースとなる親テーマ(今回の場合はSANGO)に対し、変えたい部分だけを子テーマに記述すれば良いという仕組み。

親テーマのアップデートがあったとしても自作の子テーマはそのままなので、カスタマイズ内容も反映したままで維持できます。

Search Regexでショートコードを置換

テーマ変更時に特に注意すべきなのが、ショートコードの扱い

短いコードでさまざまな機能を実現できて便利な反面、テーマによって当然ながら実装されているショートコードも異なるため、引っ越しの際には移行先テーマでこれまで記述したショートコードをどう置き換えるかが重要なポイントとなります。


通常であれば前テーマで使っていたショートコードを1つ1つ洗い出し、それに対応したSANGOのショートコードを探して、プラグインSearch Regexでどう置換するか正規表現を考えて……という手順が必要になるところですが、ググってみたところ以下のブログ記事を発見。

前テーマ・アルバトロスと同じショートコードを採用しているストークからSANGOへテーマ変更する際、Search Regexを使ってどう置換すればよいかをリストアップしてくれている記事です。あなたが神かっ……!


私が使っていた関連記事、補足説明、2カラム表示、ボタンをこの記事の通り置換、無事うまくいきました。感謝、感謝。

SANGOで使うサムネイル画像の再作成

SANGOでは、トップページや人気記事ランキング等で「thumb-520」「thumb-160」と2種類のサムネイル画像を使います。逆に言えばこれだけ(のはず)。


SANGOインストール後に新規追加した画像に対しては自動的に生成されますが、既存の画像に対してはサムネイルが無い状態。

わざわざ再作成しなくても見た目に問題はありませんが、小さいサイズで十分な場合でもファイルサイズの大きい元画像を使うことになるため、サイトが重くなってしまいさまざまな悪影響が懸念されます。


サムネイルを作り直す方法としては、例えばRegenerate ThumbnailsというWordPressプラグインがあります。テーマに合わせて必要なサムネイル画像を再作成してくれるプラグイン。

WordPressではテーマを移行した場合にも、新しいテーマ用のサムネイル画像が自動生成されることはありません。つまり、SANGO用の旧テーマのサイズの画像がそのまま使われています。

Regenerate Thumbnailsというプラグインを使うと、1クリックでSANGOに合ったサムネイル画像を再生成してくれます。
他テーマからSANGOに移行される方へ(作成中) | SANGOカスタマイズガイド

Regenerate Thumbnailsの使い方に関しては、以下の記事をどうぞ。

カテゴリ別人気記事の表示

SANGOには、人気プラグインWordPress Popular Postsを使わなくとも人気記事ランキングを表示できる機能があります。
ただし、カテゴリ別の人気記事には未対応

私のようなカテゴリが多岐に渡るブログだと、例えばグルメ記事を探してたどり着いた人にはiPhoneの人気記事ではなくグルメの人気記事をレコメンドしたい。


なので、以下の記事を参考にして「読んでいる記事と同じカテゴリの人気記事」を表示するようにカスタマイズしました。

結局WordPress Popular Postsを使うことになってしまいますが、まあ仕方ない。

見出しのデザインを変更

記事中で使っているh2〜h4タグの見出しを、好みのデザインに変更。
子テーマのCSS(style.css)に記述するだけです。


SANGOの作者でもあるサルワカさんの以下の記事から、気に入ったものを選んで使わせてもらいました。

CSSにコピペして変えたいタグ(h2〜h4)を指定するだけなので超簡単。ありがたい。

モバイルフッター固定メニュー

SANGOテーマの中でも特に気に入っている機能の1つ、モバイルフッターの固定メニュー

SANGOのフッターメニュー

カスタマイズガイドに沿って設定すれば、簡単に表示させることができます。


以前はここにモバイルアンカー広告(追尾広告)を設置したりもしていたんですが、読むのに邪魔な割に効果が薄かったので外してたんですよね。

このモバイル固定メニューならユーザビリティも向上するし見栄えもいいし、満足。

使わないCSS、プラグインの整理・削除

WordPressテーマをSANGOに変更したので、以前のテーマ用に記述していたCSSのうち必要のないものを削除


また、一部プラグインも不要となったので停止しました。

私の場合、具体的にはAll in One SEO PackとCrayon Syntax Highlighterを停止。

All in One SEO Packを削除

OGP出力や基本的なSEO対策もSANGOには備わっているため、All in One SEO Packのようなプラグインは基本的には不要。

ただし、これまでディスクリプションや検索用タイトルをAll in One SEO Packの機能を使って記述していた場合は、プラグイン停止するとそれらもごっそり解除されてしまうため注意が必要。はい、私のことです。


私の場合、タイトルの書き換えはしていないのですがディスクリプションは述べ1,000記事以上わざわざ記述しており、停止するかどうか迷いどころでした。

でもせっかくテーマ変更したしなるべくプラグインは減らしたい……という気持ちが勝ったので、検索流入の多いトップ50記事程度のみディスクリプションをコピペでSANGOテーマ側に移し、残りの記事については諦めることに。


他にもAll in One SEO Packを停止することで書き換わる部分が無いかどうか、あるとしたらそれは問題ないのか、十分ご確認ください。

OGP周り、タイトル書き換え、タイトルやカテゴリページ後にサイト名を表示するかどうか、ディスクリプションあたりを重点的にチェックすると良いかと。

Syntax Highlighterの削除

ソースコードを綺麗に表示するプラグインですが、SANGOには既にその機能が備わっているため削除。
※記事内で利用している場合は、タグの置換が必要

あとがき

SANGOはそれなりの値段するWordPressテーマですが、それ以上の価値はあると私は思います。

好みや運営スタイルに合いそうであれば、ぜひチェックしてみてください!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA