こんにちは、かのです。
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のバーションアップでプルダウンメニューが追加され、かなり満足しました。
Ver.1.3以降、多くの『スタイル』から使えるようになったのですが…
一部、公式機能ではショートコードでしか使えないものも残っています。
が・・・！
SANGOだけではエディタから使えないショートコードも『All ShortCode of SANGO 』（無料プラグイン）を追加すればエディタから使えます。
それでも無理なものは『AddQuicktag』という任意のコードを登録できるプラグインがあるのでソレを使っています。
かの
カスタマイズ手段のちがい
機能差も、慣れとバージョンアップのおかげでかなり気にならなくなりました。
バージョンアップに連れて、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は相性が悪いので停止させておきましょう。
※使うと、トップへ戻るボタンが表示されなくなります。
エディタをより使いやすく！
タイトルの文字数が知りたい！（PORIPU搭載機能）
25字〜30字程度のタイトルの長さであれば、パソコンでも、スマホでも検索結果に途中で切れることなく表示されるでしょう。長くとも35字をこえるタイトルはやめましょう。ユーザーが瞬時にタイトルを読み切ることができなくなり、クリック率が下がります。
引用：https://saruwakakun.com/it/seo/blog-article
クリック率を考えると25~30字がいいみたいです。
でもタイトルの文字数数えるの面倒だなぁって思っていたんです。
そんなところに、子テーマのfunctions.phpを変更するだけでエディタのタイトル右上に文字数を表示する機能を追加する方法を記事にしてくれた方がいました。
参考 ワードプレスで記事タイトルの文字数を表示するゆころぐ必要なショートコードはAddQuicktagに登録！
かの
多くのショートコードこのプラグインでカバーできるます！
※『All ShortCode of SANGO 』については、後述します。
それでも使いたいショートコードがエディターからつかえない時は『AddQuicktag』を使いましょう！
参考 AddQuickTagの設定方法＆使い方｜便利なタグも紹介！ひつじアフィリエイト【便利！】参考資料の外部リンク作成を楽ちんに！
外部リンクを作成するためには…
- URL
- 記事名
- サイト名
この３つをコピーしてくる必要があります。地味にめんどくさい！
それを解決してくれるブックマートレットをニシカワ アキヒロさんという方が記事にしてくださいました！
とっても便利なのでブラウザのブックマークに追加しとくといいですよ！
詳しくは以下のサイトに！
わたしが使ってるウィジェット（サイドメニュー&広告）
うちのサイトで使っている、サイドメニューのカスタマイズです。
ウィジェットの基本的な設定は以下のボタンリンクの先に書いてあります。
↑ 公式カスタマイズガイドにつながります。
残りは、サクッと参考にしたページへのリンク貼っときますね。
SANGOユーザーを助ける追加機能たち！
子テーマPORIPUをキッカケに、拡張プラグインがいくつか増えてきました。
ただ、有料のもの、無料のものありますが…
一式揃えると、SANGO・PORIPUも含めて合計15,000円！そいつは初期投資には高い！
以下のスリーステップで買うのが個人的にオススメです！
- STEP.1『SANGO』と同時に『All ShortCode of SANGO 』を手に入れようSANGOを購入したら、同時に『All ShortCode of SANGO 』をダウンロードしちゃいましょう。無料なので即導入！
これだけで充分使えるテーマなので、まずはここまでが揃えてSANGOに慣れるのがオススメ！
- STEP.2子テーマ『PORIPU』を買おう！ブログで収益が貯まったら、4,000円でまずはPORIPUを買っちゃいましょう。より色んな機能が使えます。
- STEP.3『SANGOサポーター』を買おう！1,000円で『SANGOサポーター』をかってPORIPUをより活用しちゃましょう！
All ShortCode of SANGO （無料プラグイン）
このプラグインでマネタイズしようとは一切考えていないので、ご理解頂けると幸いです。
開発者は紹介記事を書いて頂けることでピョンピョン喜びます！ https://t.co/5S9qXWQ4SW— Fwww⚡️ふうや (@fwww0707) June 23, 2018
ということで…なんと無料です!!
つまりどういうプラグインかというと…。
『スタイル』からの挿入にサポートしていないSANGOのショートコードをエディタから簡単に挿入できるんです。
使ってみたらこんな感じでした。SANGOユーザー、作業効率大幅アップですね！！
SANGOのショートコードを簡単に挿入できるプラグイン「All ShortCode of SANGO」を開発したよ｜WeBlog Geek https://t.co/DlGuq7lffD @fwww0707さんから pic.twitter.com/u6T0ZfXcPI
— かの@のほほん考えるブロガー (@kanoblog) June 23, 2018
画面イメージはこんな感じです。
わたしは、プラグインのQuicktagsもあまり使いこなせず、公式のカスタマイズガイドからイチイチコピペ、コピペしながら作業していました。
かの
- アコーディオン：『＋』を押すと隠れた文字が出てくる
- タイムライン：Step１〜順に手順を説明する際に使う。
- 関連記事：『関連リンク』のボタンを作成する
- 他サイトへのリンク：『参考リンク』のボタンを設置できます。
- 線、点線を引く
- 補足説明：鉛筆アイコン付きのボックスを設置します。
- 注意書き：ビックリマークアイコン付きのボックスを設置します。
- 吹き出し
- 横並び2列
- 横並び3列
- 表示分岐：PC or スマホのみで表示する部分を設置します。
- 指定カテゴリ記事表示
- 指定タグの記事表示
- 画像上に文字をのせる
- 新着記事を好きな数だけ出力
- レビューボックス：☆1〜5で評価する昨日を設置します。
もっと詳しく『All ShortCode of SANGO』知る
子テーマ 『PORIPU』（有料4,000円）
SANGO専用の有料子テーマ『PORIPU』を購入しました。
親テーマは『SANGO』を使いつつ、子テーマに『PORIPU』を設置しています。
PORIPUはマサオカブログのまっさーさん(@iMassa07 )がSANGO公式に許可を得た上で、作ってくださった子テーマです。PORIPUは有料で、4,000円です。
初心者にとってハードルとなるphpやCSSを操作する必要のある追加カスタマイズ！
でも、ステキなデザイン追加や広告の設置など、魅力的なカスタマイズも多いんですよね…。
わたしも、あまりソースの修正得意ではないです。
難しそうだから諦めたり…
ドキドキしながら編集したり…
うまくいかなくて頭を抱えたり…
苦労しました！！
そんなカスタマイズの不安や苦労を減らしてくれるがPORIPUです！
わたしが心奪われたPORIPUのデザイン
細かい微調節も含めがSANGOユーザーの心をくすぐります。
あーコレが欲しかったんだって思える機能があります。
- 引用がSANGO標準より、スッキリと小さくなった
- 青文字・赤文字がやや見やすくなった
- ミニ吹き出し見出し
- ミニ吹き出し型見出し付きボックス
- フッダーにロゴ表示
- アイコン付き吹き出しのカラー変更
- トップページにおすすめ記事を表示
- 『Rinker』・『WPアソシエイトポスト』・『カエレバ』・『ポチれば』のデザイン調整
１つ１つは小さいことなんですが…
引用がコンパクトになって読みやすくなったのはわたしの中ではかなり嬉しかったです！
あと、ミニ吹き出しボックスは非常に使い勝手が良いです！
見出しを可愛くつけれますし、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サポーター （有料プラグイン：1,000円）
製作者は、はるしかさん@HAL_Gatherer です。
このプラグインは現状、SANGOサポーターはPORIPU(有料 SANGO用子テーマ）ユーザーにメリットの大きいプラグインです。
PORIPUの追加ショートコードを追加に対応しています！
SANGOサポーターをアップデートしたら…
なんぞコレ！？
PORIPUを使い倒せそうです！！
嬉しい〜〜〜！ pic.twitter.com/52J6ooNmOf— かの@のほほん考えるブロガー (@kanoblog) June 22, 2018
かの
- SANGO【関連リンク】
- SANGO【参考リンク】
- 注釈用ふきだし
- 関連リンク用吹き出し
- 文字を変更する吹き出し
- メモボックス1
- メモボックス2
SANGO【関連リンク】とSANGO【参考リンク】は上記の無料プラグイン『All ShortCode of SANGO 』にもある機能です。
なので、SANGOのみのユーザーが焦って買う必要はないかもしれません。
SANGO＋PORIPUを使ってるユーザーにこそ価値がある気がします。
参考になる資料たち
カスタマイズやSANGOの情報収集にみているサイトを掲載しておきます。
SANGO公式サイト関連
SANGOの公式の説明書
テーマ更新情報
公式Twitter
先輩方のカスタマイズまとめ
まっさーさんのブログ
SANGOのカスタマイズ記事をたくさんもってるブロガーさんです。
ほんとうに丁寧にカスタマイズ方法をまとめてくださってます！
この記事は、必ず役に立つはず！ぜひ御覧ください。
さっちんさんのブログ
SANGOのカスタマイズに関するブログ記事をまとめてくださっています。
とりあえず、情報量がすごいです。ぜひ、覗いてみてください！
さいごに、だいじな言葉をメモしておきます
個人的な経験で言うと、デザイン崩れはじわじわとSEOにマイナスの影響を与える印象。
— CatNose (@catnose99) October 3, 2017
ちゃんとキレイにしよう！自分のブログ！！
はじめまして。Wordpressをはじめたばかりの初心者です。
サイト設営のため色々調べていてこのサイトにたどり着きました。色々参考になりました。ありがとうございます(^-^)
私もすっかりサルカワさんのファンになってしまい、テーマのSANGOも購入してしまいました。(アフィンガーにするつもりだったのですが…。)
これからも楽しみにしています(*^^*)
はじめまして！コメントありがとうございました。
サルワカさん、わかりやすいしキレイだしすてきですよね！
ブログ拝見しました。JINDOも癖が強いですよね。
初心者なりの記事を更新していきますので、これからもどうぞよろしくお願いいたします。