ワードプレスのテーマ「SANGO」が気に入ったので購入してみた。
当方の環境はTCD036「MAG」から「SANGO」へのテーマ変更。他のテーマを使っていても、ショートコードまわりの面倒な設定が無ければ同じような手順ですぐにカスタマイズできるはず。
もくじ
1.テーマのテンプレートを入れる
テンプレダウンロード
→インストール
→有効
2.子テーマのテンプレートを入れる
子テーマダウンロード
→インストール
→有効
子テーマのfunction.phpとcssに前のテーマから引き継ぐカスタマイズ内容をコピペ
（※独自のカスタマイズをしないのであれば子テーマは入れなくても良い）
3.テーマの各種設定（管理画面の外観→カスタマイズ）
「SANGO」はド素人でも簡単操作でデザインを変更できるのが魅力のひとつ。
サイト基本情報
- サイトタイトル、キャッチフレーズ、サイトの詳しい説明を確認、修正
- ロゴ画像を再登録
- サイトアイコン登録（前テーマに設定したものがあればそのまま反映される）
色
「SANGO」では細かい部分まで自分の好きな色を設定できる。
俺が設定した例は以下の通り。
コンセプトはビターチョコにラズベリーとかそういう系。
- 背景色を白に変更
- メインカラー、ヘッダー背景色、ウィジェットタイトルの色を統一
- 薄めの下地色はコーヒー牛乳をイメージ
- アクセントカラーはラズベリーをイメージ
- リンクはオレンジをイメージ
- 濃い背景になる部分の文字色は全て白
デフォルトのサムネイル
アイキャッチ非表示時の画像を設定しておきたいなら登録しておく。
特別なこだわりがなければ無視してもOK。
背景画像
サイト全体に背景画像を入れたいならここに登録する。
メニュー
グローバルメニューとフッターメニューの設定はここで。
前テーマと同じ状態にしたいのであれば再登録しておく。
ヘッダーアイキャッチ
サイトトップページのヘッダーアイキャッチを入れたい時はここで設定する。
トップページの読み込みを高速化したい人は無視しても良い。
２分割ヘッダーアイキャッチ
サイトトップページのヘッダーアイキャッチ（左と右の二分割バージョン）を入れたい時はここで設定する。
トップページの読み込みを高速化したい人は無視しても良い。
記事一覧レイアウト
PCとモバイルの記事一覧レイアウトを変更したい時はここで設定する。
デフォルトのままで問題ないなら無視でOK。
ウィジェット
とりあえずサイドバーだけ設置
人気記事、カテゴリーあたり突っ込んでおけばとりあえず格好はつくと思う
固定フロントページ
「SANGO」ではカスタマイズした固定ページをトップページに設定することができる。
「SANGO」ならではのシンプルな記事一覧を表示したいならここは無視でOK。
関連記事（記事下）
記事直下に表示できる関連記事のタイトルとデザインの変更はここで。
無難な感じにしたいなら「よく読まれている記事」などにしておけばOK。
おすすめ記事（記事下）
記事下に指定した投稿IDの記事を表示したいならここで設定する。
読ませたい記事があるならここに登録しておこう。
特になければ無視でOK。
フォローボックス
「この記事を気に入ったらいいね」的なボックスの表示・非表示を切り替えられる。
俺はこういうの邪魔だから非表示にしてある。
CTA（記事下）
「SANGO」は、記事下に「Call To Action(コール トゥ アクション)」を設定できる。
メルマガ登録、PDFのダウンロードなどのアクションを促したいならここで設定しておく。
ヘッダーお知らせ欄
ヘッダー部分にお知らせ欄（テキストリンク入り）を表示したいならここで設定する。
メンテナンスなどの緊急告知を目立つ場所に表示したい時に重宝する。
トップへ戻るボタン
よくある画面右下に表示される一気にトップに戻れるボタンを出すやつ。
PCとモバイル別々に設定できる。
ボタン色はサイトカラーに合う色で！
フッター固定メニュー
「外観」→「メニュー」で作成・登録した「モバイル用フッター固定メニュー」の詳細設定はここで。
「モバイル用フッター固定メニュー」を使わないのであれば無視でOK。
詳細設定
ここでは日付の非表示や端末ごとのフォントサイズ変更などの様々な細かい設定ができるが、最低限これだけはやっておこう。
- Google Analyticsのコードを貼る
- 絵文字用のJSを読み込まない、にチェック
パブリッシャー
発行組織名にはサイト名、ロゴ画像を登録しておく。
構造化データなんてどうでもいいという人は無視でOK。
追加CSS
ここには何も書かない。
CSSのカスタマイズは子テーマで！
4.Googleアドセンスのコード設置
記事ページにアドセンスを設置している人はこちらも参考にどうぞ。
アドセンス設置しないのであれば無視でOK。
※アドセンスのコードは、ウィジェット「カスタムhtml」を使って表示
サイドバー
「外観」→「ウィジェット」→「サイドバー」
「サイドバー」のウィジェットは、前ページのサイドバーに共通で表示される。
記事中広告
「外観」→「ウィジェット」→「記事中広告」
「記事中広告」のウィジェットは、最初のh2見出しの前に表示される。
記事コンテンツ後広告（モバイル・PC）
「記事コンテンツ後広告」のウィジェットは、記事本文の真下に表示される。
モバイルとPC別々に設定できるので、各デバイスに合わせて好みのサイズを選ぶと良い。
5.プラグインの設定
下記の拡張機能を追加しておくと、「SANGO」のテーマがより使いやすくなる。使っていないものがあれば追加しておこう。
Regenerate Thumbnails
ワードプレスのサムネイルはテーマごとにサイズが最適化されるケースが多く、テーマを変更するとサムネイル画像が正しく表示されなくなることがある。そんな問題をクリック操作のみで解決してくれるのが「Regenerate Thumbnails」だ。
クリックして待つだけでSANGO用に最適化してくれるのでぜひ使っておきたい。
Table of Contents Plus
「Table of Contents Plus」は目次を設定するプラグイン。「SANGO」には当プラグインのデザインカスタマイズコードが最初から入っているので、プラグインを有効可して「CSS ファイルを除外」にチェックを入れるだけでオシャレな目次を表示できるようになる。
6.プラグイン停止
「SANGO」のテーマを使うのであれば「All in one SEO」のプラグインは不要なので、停止または削除する。
必ずSANGOのディスクリプションが空欄になっていないか確認してから行うこと。All in one SEOのディスクリプションのみ埋めている場合は要注意！
7.ショートコード差し替え
前テーマで使っていたショートコードはテーマ変更後、ショートコードがそのまま表示されてデザインが崩れたりリンクがなくなったりしてしまうので差し替える必要がある。
ショートコードの置換は、文字列を一括置換できる「Search Regex」などのプラグインを使って行うのが一般的。１ページずつ直すと膨大な時間がかかってしまうのでNG。
まとめ
ここまで一通りの作業を行えば、ひとまず見られる形にはなる。テーマ変更時は、とにかく素早く体裁を整えることが大事。より細かいカスタマイズは運用しながら行えば良い。
慣れている人なら30分以内にできると思うが、ショートコードの置換作業の量によっては数時間では終わらない可能性もある。「SANGO」に限ったことではないが、ショートコード問題のせいでテーマ変更に踏み切れないブロガーは少なくないのではないだろうか。
ショートコードを多用すればするほどテーマの変更が面倒になる。テーマをコロコロ変える可能性がある人は、使うショートコードの数を絞る等の工夫をしておいた方が良いと思う。「SANGO」には膨大な数のショートコードがあるから色々と使いたくなっちゃうんだけどね( ；∀；)
