こんにちは、かのです。
AFFINGER４からSANGOにWordPressのテーマを変更しました。
違うテーマに変えると、それをキッカケにいろいろなことを学んだ気がします。
わたしはあまり難しいことわかってないんですが・・・。
公式のカスタマイズガイドがとってもわかりやすくって、助かりました。
あとはSANGOの人たちはいろいろおしえてしてくださる方も多くてとても勉強になります！
得た知識と、カスタマイズしたものをメモしていきたいと思います。
なお随時、更新していきます。
他にも、わかりやすくカスタマイズ情報をまとめたブログがありますので…
参考にするブログの1つになれば幸いです。
SANGOについて
サルワカのCatNoseさんが作られたテーマです。
マテリアルデザインが使われ、たいへん美しいのが特徴です。
くわしくは以下のブログをご覧ください。
知っておきたい、SANGOのデザインのこと
SANGOはマテリアルデザインが使われています。
ちょっと勉強してみませんか？この機会に♪
SANGOの作者さんのサイト、サルワカにわかりやすい記事がありました。
デザインど素人のわたしも楽しく読める内容でした！
マテリアルデザインとは？作り方とガイドラインまとめサルワカ
AFFINGER4からSANGOへの移行
丸一日作業して、残りは記事修正だけ
くわしい移行の記録は上記をご覧ください。
ただし、移行した時点で気が付かずあとから、修正した部分も多いのでご参考程度に！
時間としては丸一日かかりました。
あと、細かい修正や見落としていた部分を順次修正していきました。
SANGOカスタマイズガイドを片手に
公式の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でも使っていたの設定を引き継いだままソコソコキレイだったので放置していました。
ただ、微妙にズレてるのが気になる。その原因は、設定を怠っていたから！
以下の参考ページから設定方法を参照できます。必ずやっておきましょう！
目次プラグイン「TOC+」の設定方法SANGOガイドマニュアル
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
- 記事名
- サイト名
この３つをコピーしてくる必要があります。地味にめんどくさい！
それを解決してくれるブックマートレットをニシカワ アキヒロさんという方が記事にしてくださいました！
とっても便利なのでブラウザのブックマークに追加しとくといいですよ！
詳しくは以下のサイトに！
【SANGO】他サイトへのリンクのブックマークレット | ブログ・デ・イコラブログ・デ・イコラ
わたしが使ってるウィジェット（サイドメニュー&広告）
うちのサイトで使っている、サイドメニューのカスタマイズです。
ウィジェットの基本的な設定は以下のボタンリンクの先に書いてあります。
↑ 公式カスタマイズガイドにつながります。
残りは、サクッと参考にしたページへのリンク貼っときますね。
参考になる資料たち
カスタマイズやSANGOの情報収集にみているサイトを掲載しておきます。
SANGO公式サイト関連
SANGOの公式の説明書
テーマ更新情報
公式Twitter
先輩方のカスタマイズまとめ
まっさーさんのブログ
SANGOのカスタマイズ記事をたくさんもってるブロガーさんです。
ほんとうに丁寧にカスタマイズ方法をまとめてくださってます！
この記事は、必ず役に立つはず！ぜひ御覧ください。
さっちんさんのブログ
SANGOのカスタマイズに関するブログ記事をまとめてくださっています。
とりあえず、情報量がすごいです。ぜひ、覗いてみてください！
さいごに、だいじな言葉をメモしておきます
個人的な経験で言うと、デザイン崩れはじわじわとSEOにマイナスの影響を与える印象。
— CatNose (@blogliterally) October 3, 2017
ちゃんとキレイにしよう！自分のブログ！！
はじめまして。Wordpressをはじめたばかりの初心者です。
サイト設営のため色々調べていてこのサイトにたどり着きました。色々参考になりました。ありがとうございます(^-^)
私もすっかりサルカワさんのファンになってしまい、テーマのSANGOも購入してしまいました。(アフィンガーにするつもりだったのですが…。)
これからも楽しみにしています(*^^*)
はじめまして！コメントありがとうございました。
サルワカさん、わかりやすいしキレイだしすてきですよね！
ブログ拝見しました。JINDOも癖が強いですよね。
初心者なりの記事を更新していきますので、これからもどうぞよろしくお願いいたします。