こんにちは、かのです。
AFFINGER４からSANGOにWordPressのテーマを変更しました。
違うテーマに変えると、それをキッカケにいろいろなことを学んだ気がします。
わたしはあまり難しいことわかってないんですが・・・。
公式のカスタマイズガイドがとってもわかりやすくって、助かりました。
あとはSANGOの人たちはいろいろおしえてしてくださる方も多くてとても勉強になります！
得た知識と、カスタマイズしたものをメモしていきたいと思います。
なお随時、更新していきます。
他にも、わかりやすくカスタマイズ情報をまとめたブログがありますので…
参考にするブログの1つになれば幸いです。
SANGOについて
サルワカのCatNoseさんが作られたテーマです。
マテリアルデザインが使われ、たいへん美しいのが特徴です。
くわしくは以下のブログをご覧ください。
WordPressテーマ『SANGO』はオシャレ&わかりやすいテーマだったよ【感想・レビュー】 知っておきたい、SANGOのデザインのこと
SANGOはマテリアルデザインが使われています。
ちょっと勉強してみませんか？この機会に♪
SANGOの作者さんのサイト、サルワカにわかりやすい記事がありました。
デザインど素人のわたしも楽しく読める内容でした！
AFFINGER4からSANGOへの移行
丸一日作業して、残りは記事修正だけ
9月27日(水）ワードプレステーマを変更工事します！【AFFINGER4→SANGO】 くわしい移行の記録は上記をご覧ください。
ただし、移行した時点で気が付かずあとから、修正した部分も多いのでご参考程度に！
時間としては丸一日かかりました。
あと、細かい修正や見落としていた部分を順次修正していきました。
SANGOカスタマイズガイドを片手に
公式のSANGOカスタマイズガイドが凄く分かりやすいです。
是非見ながらやることをオススメします。
見えない場所の修正を見逃さずに
リストの装飾のHTMLを見逃していました。
その他にも表面上は見えない部分の修正も忘れずに！
<div class="maruck">
<ul>
<li>AFFINGER4の機能を使って、箇条書きを装飾してたんです。</li>
<li>divタグ内はもういらない！</li>
<li>消し忘れに注意！</li>
</ul>
</div>
赤字の部分がいらないソースコードです。
AFFINGER4の箇条書きの装飾を使っていた人は要注意です！
普通に見ると、ちゃんと箇条書きに見えるので見落としてました…。
見た目でサムネイル画像がキレイでも再生成しよう！
2017/10/11 追記
カスタマイズガイドにも記載があることなんですが…
WordPressではテーマを移行した場合にも、新しいテーマ用のサムネイル画像が自動生成されることはありません。つまり、SANGO用の旧テーマのサイズの画像がそのまま使われています。
Regenerate Thumbnailsというプラグインを使うと、1クリックでSANGOに合ったサムネイル画像を再生成してくれます。操作は簡単ですが、詳しい使い方は下の記事をご覧くださいませ。
これを自己判断で、スルーしていました。見た目がキレイだったから！
でもサイトの表示速度等にも影響があるらしく、必ず行っておくことにしましょう。
ちなみに作業自体は自動で作業してくれますが、5時間近くかかりました…。
パソコンをつけっぱなしにできる環境で作業を始めることをオススメします。
目次のデザインがズレている
TOC＋はAFFINGER4でも使っていたの設定を引き継いだままソコソコキレイだったので放置していました。
ただ、微妙にズレてるのが気になる。その原因は、設定を怠っていたから！
以下の参考ページから設定方法を参照できます。必ずやっておきましょう！
AFFINGER４とSANGOの違いについて
とりあえず、移行ができていざ記事を書こうと思う時に、テーマの差が気になるものだと思います。
そのあたりの話を少し挟んでみますね。
SANGOは初期の頃に比べて、機能も増えとても使いやすくなりました。
ただ、前使ってたテーマとは別物です！卒業したのです！
（いや併用してるかもしんないけど）
かの
豊富なショートコードへの戸惑い
初期の頃、ショートコードによる記事作成に慣れず苦労しました。
Ver.1.3のバーションアップでプルダウンメニューが追加され、かなり満足しました。
ただ、ショートコードが豊富すぎるため、ショートコードでしか使えないものも残っています。
数は少ないので、問題ないでしょう。もし使いたければ公式のカスタマイズガイドからコピペできますしね。
また、プラグイン『AddQuicktag』を使うことで更に便利に使えます。
参考 AddQuicktagで簡単にショートコードを挿入しよう SANGOカスタマイズガイド下記で紹介しますが、他サイトへのリンク用にブックマートレットを作っておくと、とても便利です。
参考 【SANGO】他サイトへのリンクのブックマークレット | ブログ・デ・イコラブログ・デ・イコラかの
カスタマイズ手段のちがい
機能差も、慣れとバージョンアップのおかげでかなり気にならなくなりました。
バージョンアップに連れて、AFFINGER４にはない良さを目立たせてきたイメージでしょうか。SANGOらしい装飾に特化した機能がどんどん触れています。
むしろ！！
機能のあるなしの差よりも、元AFFINGERユーザーが気になるのは操作性ではないでしょうか。
AFFINGER４のチェックひとつ、ボタンひとつで簡単に変えられるカスタマイズ方法に慣れてる人は戸惑うかもしれません。
SANGOは、たとえばサイドバーのウィジェットに機能を挿入する場合…
カスタマイズガイドからソースをコピーペーストし、必要部分を編集するといった感じです。
こればかりは慣れなんですけど…。頻度の多いものでもないので気になりません。
カスタマイズガイドの説明がとにかくわかりやすいので安心してください。
AFFINGERの頃、チェックボックス探して迷子になっていたあの頃より楽かもしれません 笑
では、ここからカスタマイズしたメモを残していきますので活用いただけたら幸いです。
サイト全体の見直し
カテゴリとタグ分け
現在のカテゴリ分けは『SEOを考えたカテゴリー設定をしよう(SANGOカスタマイズガイド)』を参考にしています。
SANGOは基本的に、1記事1カテゴリーに対応するように作られています。
だから、これに従ってカテゴリーを整理し直しました。
- 1記事1カテゴリー
- カテゴリーは大きな枠で組んで、道案内になるように設定して、1記事1カテゴリーに所属させる
- １つの記事が複数のジャンルにまたがる場合、タグを活用して整理する。
1つの記事が複数ジャンルにまたがる場合はタグを使うというのは…
従って、カテゴリーは『旅と写真＞写真論』にいれました。そして、タグを『アート』『映画』『読書』というその他の切り口はタグで整理をしています。
SANGOを高速化！
解説しました。
WordPressの高速化〜表示速度を上げる12の技〜｜サルワカ https://t.co/E1q2vpkFBk— サルワカくん (@saruwakakun) October 3, 2017
サルワカと言うサイトは、SANGOの制作者さんのサイトです。
ワードプレスユーザー全体に向けた記事ですが、SANGOの場合の対応も書いてあるのでよりわかりやすいです。
上記のページを参考にして行えばOKです。
実際にやってみて感じた部分を補足と特に注意するべき点を書いておきます。
All in SEO Pack等のOPG設定プラグインは不要
基本的にSANGOでは、All in One SEO Packは不要です（All in One SEO PackはWordPressが重たくなる原因になります）。
— SANGOの情報まとめ (@sangowp) October 3, 2017
「JavaScript to Footer」とSANGOは相性が悪いので停止させておきましょう。
※使うと、トップへ戻るボタンが表示されなくなります。
エディタをより使いやすく！
タイトルの文字数が知りたい！
25字〜30字程度のタイトルの長さであれば、パソコンでも、スマホでも検索結果に途中で切れることなく表示されるでしょう。長くとも35字をこえるタイトルはやめましょう。ユーザーが瞬時にタイトルを読み切ることができなくなり、クリック率が下がります。
引用：https://saruwakakun.com/it/seo/blog-article
クリック率を考えると25~30字がいいみたいです。
でもタイトルの文字数数えるの面倒だなぁって思っていたんです。
そんなところに、子テーマのfunctions.phpを変更するだけでエディタのタイトル右上に文字数を表示する機能を追加する方法を記事にしてくれた方がいました。
参考 ワードプレスで記事タイトルの文字数を表示するゆころぐショートコードを一括登録して楽ちん管理！
公式のカスタマイズガイドに、『AddQuicktagで簡単にショートコードを挿入しよう』があります。
自分の手でイチイチ登録するのは面倒でずっと放置していました。
ところが、SANGOの場合、SANGO用のショートコードを一括登録できることが発覚！
一手間で、記事作成が楽になります〜♪くわしくは以下の参考リンクを御覧ください。
参考 AddQuicktagで簡単にショートコードを挿入しよう SANGOカスタマイズガイド【便利！】外部リンク作成を楽ちんに！
外部リンクを作成するためには…
- URL
- 記事名
- サイト名
この３つをコピーしてくる必要があります。地味にめんどくさい！
それを解決してくれるブックマートレットをニシカワ アキヒロさんという方が記事にしてくださいました！
とっても便利なのでブラウザのブックマークに追加しとくといいですよ！
詳しくは以下のサイトに！
わたしが使ってるウィジェット（サイドメニュー&広告）
うちのサイトで使っている、サイドメニューのカスタマイズです。
ウィジェットの基本的な設定は以下のボタンリンクの先に書いてあります。
↑ 公式カスタマイズガイドにつながります。
残りは、サクッと参考にしたページへのリンク貼っときますね。
PORIPU導入しました！
SANGO専用の有料子テーマ『PORIPU』を購入しました。
親テーマは『SANGO』を使いつつ、子テーマに『PORIPU』を設置しています。
PORIPUはマサオカブログのまっさーさん(@iMassa07 )がSANGO公式に許可を得た上で、作ってくださった子テーマです。お値段はSANGOにちなんで、3,500円です。
初心者にとってハードルとなるphpやCSSを操作する必要のある追加カスタマイズ！
でも、ステキなデザイン追加や広告の設置など、魅力的なカスタマイズも多いんですよね…。
わたしも、あまりソースの修正得意ではないです。
難しそうだから諦めたり…
ドキドキしながら編集したり…
うまくいかなくて頭を抱えたり…
苦労しました！！
そんなカスタマイズの不安や苦労を減らしてくれるがPORIPUです！
わたしが心奪われたPORIPUのデザイン
細かい微調節も含めがSANGOユーザーの心をくすぐります。
あーコレが欲しかったんだって思える機能があります。
- 引用がSANGO標準より、スッキリと小さくなった
- 青文字・赤文字がやや見やすくなった
- ミニ吹き出し見出し
- ミニ吹き出し型見出し付きボックス
- フッダーにロゴ表示
- アイコン付き吹き出しのカラー変更
- トップページにおすすめ記事を表示
１つ１つは小さいことなんですが…
引用がコンパクトになって読みやすくなったのはわたしの中ではかなり嬉しかったです！
あと、ミニ吹き出しボックスは非常に使い勝手が良いです！
見出しを可愛くつけれますし、5色から選べます。
ピンクなら、読んでほしい文章が更に目立ちます。
灰色ならなら、ヒッソリと書き込めるボックスになります。
色によって使い分けもできて、形もチョコチョコ使わせてもらってます。
わたしが心奪われたPORIPUの広告カスタマイズ
デザインも嬉しいですが、ソレ以上に収益に直結する広告関連のカスタマイズが嬉しいです！
カスタマイズにも、検証も苦手なわたしは…ハードルが高かったんですよね。
広告1つ着けるにも。しかも広告位置にも色んな意見があり、何が正解なのやら…
難しかったんです！
PORIPUの作者はマサオカブログのオーナーです。
この方、アドセンスの広告に定評のある方です（わたしの中で）
なので個人的に信頼できるので…
PORIPUでマサオカブログと同じ設置に広告を簡単に設置できるのはすごくすごく魅力的でした。
- 記事一覧内に入れる、インフィールド広告
- 長い記事内に設置できる、見出し前の広告
- アドセンス自動広告の設置
子テーマ更新する際の注意
PORIPUは細かな不具合を修正しながらマイナーアプデを繰り返していく予定です。
【最新版の適用方法】
①最新版ダウンロード
②SANGOのアプデ用テーマに変更
③旧Verを削除
④新Verをインストール
style.cssはコピーして新Verに貼り付けてください。 pic.twitter.com/r9uBgNmAtm— PORIPU（ポリプ）公式アカウント (@Poripu_wp) April 16, 2018
基本的には、この手順で大丈夫です。
style.cssなどをカスタマイズしてる場合はコピーを忘れずに！
コレくらいは簡単なので楽勝なのですが…
加えて、phpなど他のファイルを触ってる方は地味にカスタマイズ後に忘れずにコピーしないといけません。
これが増えると…「どこに何をコピーすればよかったっけ？？」と…地味にわからなくなるんですよね＾＾；
子テーマ更新の度に迷うので、わたしは、phpで触ってた昨日をSANGOの標準機能に置き換えました。
子テーマ導入前に独自カスタマイズしてる方は何を編集してるかリスト化して整理するのをオススメします！
参考になる資料たち
カスタマイズやSANGOの情報収集にみているサイトを掲載しておきます。
SANGO公式サイト関連
SANGOの公式の説明書
テーマ更新情報
公式Twitter
先輩方のカスタマイズまとめ
まっさーさんのブログ
SANGOのカスタマイズ記事をたくさんもってるブロガーさんです。
ほんとうに丁寧にカスタマイズ方法をまとめてくださってます！
この記事は、必ず役に立つはず！ぜひ御覧ください。
さっちんさんのブログ
SANGOのカスタマイズに関するブログ記事をまとめてくださっています。
とりあえず、情報量がすごいです。ぜひ、覗いてみてください！
さいごに、だいじな言葉をメモしておきます
個人的な経験で言うと、デザイン崩れはじわじわとSEOにマイナスの影響を与える印象。
— CatNose (@catnose99) October 3, 2017
ちゃんとキレイにしよう！自分のブログ！！
はじめまして。Wordpressをはじめたばかりの初心者です。
サイト設営のため色々調べていてこのサイトにたどり着きました。色々参考になりました。ありがとうございます(^-^)
私もすっかりサルカワさんのファンになってしまい、テーマのSANGOも購入してしまいました。(アフィンガーにするつもりだったのですが…。)
これからも楽しみにしています(*^^*)
はじめまして！コメントありがとうございました。
サルワカさん、わかりやすいしキレイだしすてきですよね！
ブログ拝見しました。JINDOも癖が強いですよね。
初心者なりの記事を更新していきますので、これからもどうぞよろしくお願いいたします。