先日メインのブログのテーマをWordPressテーマ「ストーク」
からWordPressテーマ「Bloom」に一瞬変えました。
結局メインのブログテーマはWordPressテーマ 「WING（AFFINGER5）」を使うことにしました。なぜAFFINGERを使うことにしたのかは次の記事に書きます。
現在はサブサイトでWordPressテーマ「Bloom」を使ってます。おしゃれでかわいいのがいいです。
ブログテーマを「ストーク（STORK）」から「Bloom」に変更する前にやったこと、変更した後にやったことをまとめておきます。「Bloom」をすでに購入した後の手順です。
ブログテーマの変更はやっぱり結構大変！
Bloom変更前にやったこと
「ストーク」から「Bloom」に変更する前に行ったことです。
不要なプラグインの削除
これはテーマ変更に限ったことではないですが、定期的にプラグインを見直して不要なものは削除した方が良いと思います。
「Popular Posts」など使っていなかったプラグインを停止して消しました。
画像の用意
Bloomを開発環境でインストールしてみて、Bloomテーマに必要な画像やそのサイズを確認しました。
テーマによってヘッダー画像やプロフィール画像などで指定のサイズがあると思うので、そのサイズの画像を用意しておきました。
子テーマの作成
Bloomはあまりカスタマイズしない想定で作られているテーマのようで、子テーマがありません。
カスタマイズしない想定と言ってもCSSカスタマイズはやはり必要なので、子テーマを作りました。子テーマの作り方はブログで検索すると結構ヒットします。
Macのメモ帳を使って「functions.php」と「style.css」を作るだけなので、簡単にできました。
ショートコードを変更
ブログテーマの変更が思っていた以上に大変だと思った点。
それはテーマのショートコードを使っていると、他のテーマに変えた時にそのショートコードは使えないので、全て記述しなおす必要があることです。
これはかなりの大作業。
手作業で一つ一つ書き換えるのは不可能なので（数ヶ月かけてやるならできるかもしれませんが）、「Search Regex」というプラグインを使います。
「Search Regex」を使うと、投稿や固定ページ、タイトルなどの文字を指定して検索し、他の文字に置き換えることができます。このプラグインを使って一括変換しました。
私はストークのショートコードの中で、補足やブログカード、吹き出しを使っていました。
まずは補足をシンプルなボックスにするためのCSSを記述します。そして「Search Regex」を使って
補足のショートコード
[aside type="normal"]xxx[/aside]
を
<div class="box1（例）">xxx</div>
に書き換えました。間に入ってるxxxは文章によって異なると思うので、前半部分と後半部分を別々に変換します。
個別CSS+HTMLの記述の形式はどのテーマでも適用できるので、テーマ変更前に補足のショートコードを置き換えしておくことができます。
吹き出しショートコードも変更できる
吹き出しのショートコードも、個別CSS+HTMLの形にすることができます。吹き出しはテーマによってショートコードが異なるので、個別CSSにしておくとテーマ変更時も影響を受けることがありません。
会話形式の吹き出し用のCSSを公開しているブログがいくつかあるので、それを参考にすれば吹き出しCSSは作れます。
CSSを記述したら、吹き出しショートコードを普通のHTMLに変更するために「Search Regex」を使って、[voice icon= と [/voice] の部分を記述したCSSを反映するHTMLに置き換えます。
私は事前に吹き出しショートコードを個別CSSに変更せず、テーマ変更後に「Search Regex」を使って吹き出しショートコードを一括で置き換えしようと考えていました。
結局その作業をする前に別の理由で「Bloom」ではブログが運用できないことがわかり、WordPressテーマ 「WING（AFFINGER5）」に変えちゃいました。
なお、「Bloom」は吹き出しのショートコードがありませんが、TCDのテーマの中には吹き出しのショートコードがあるものがあります。旧ブログテーマのショートコードから新しいテーマのショートコードに置き換えすればいいので、ショートコードがあるブログテーマならテーマの変更はもう少し簡単になると思います。
事前変更できなかったショートコード：ブログカード
事前に変更することができなかったショートコードは、ブログカードです。
ストークのブログカードは [kanren postid =""] というHTMLの記述です。
対してBloomのHTMLは [clink url=""] で、""の中には記事IDではなくURLを入れる必要があります。
これは参った！
実はBloomも""の中はIDだと思い込んでいたので、テーマを変更した後に「Search Regex」で一括置き換えしようと思ってました。テーマを変更してから""の中はURLでなくてはいけないことを知りました。
このままだと手作業で全てのIDをURLに変更しなくてはいけない。
オーマイガー。そんな膨大な時間がかかることできません。
このように記事IDのブログカードから、URLタイプのブログカードに変更する場合の問題点と対処法は次の記事に書きます。
写真のキャプションは変更不要
写真にキャプションを入れて表示させていましたが、写真のキャプションのコード はwordpressで共通のようで変更しなくても各テーマできちんと表示されます。
これは良かった！写真のキャプションも変更となると、気が遠くなるような作業になるので。
不要なCSSの削除
ブログテーマを変更するにあたって、個別CSSの記述を極力減らそうと思いました。
あまり画面をごちゃごちゃさせないようシンプルするため、CSSの記述を半分くらいにしたと思います。
ショートコードや個別CSSの記述を最小限にしておくと、今後別のテーマに変更する時も乗り換えやすいです。
Bloom変更後にやったこと
事前準備はバッチリではなくて、移行した後になんとかしようと思っていた私。「ストーク」から「Bloom」に変更した後にやったことです。
各種設定
TCDをダウンロードすると、TCD用カスタマイズの説明が書いてあるページにアクセスする権限がもらえます。それを見ながらTCDオプションで各種設定をしていけば、お好みの外観にカスタマイズできます。
カラーなどの一般的な設定は外観>カスタマイズで。
CSS記述
必要最低限残した個別CSSを記述します。
TCDオプションでたくさんの項目を設定することができるので、例えば「Bloom」の見た目が気に入らなくて個別CSSに記述することなどはほとんどないのではないかと思います。「Bloom」は見た目のデザインが美しいので。
アナリティクスのコードを記入
TCDテーマオプション>基本設定内>カスタムスクリプトの項目に、Googleアナリティクスのグローバルサイトタグを記入します。
Google自動広告のコードを記入→実施せず
Google自動広告を導入する場合は、自動広告のコードをheader.phpのの直前に記入するのですが、これは実施していません。
Bloomの良い点
私がブログテーマを「ストーク」から「Bloom」に変更しようと思った理由は、ズバリ見た目が気に入ったからです。
切り替えタブ
最近主流になってる切り替えタブが標準装備されていて、見た目がシンプルでいいです。
例えば最初の切り替えタブは、新着記事一覧にしてページャーを表示させることができます。注目記事だけを載せるやり方ではなく、トップページでは新着記事へのアクセスを容易にしたい場合に適していました。
メニューのメガ表示
メガ表示とは、メニューホバー時に文字だけでなく写真付きでカテゴリの表示ができるものです。
旅行ブログや食べ物のブログなど、写真を目立たせたいブログの場合は、文字でなく写真で興味を引くことができます。
いつかBloomは使いたい
最終的にメインのブログで運用するには致命的なNGがあって「Bloom」を使うことができませんでした。理由は次の記事で書きます。
でも「Bloom」の洗練された見た目や、メニューのメガ表示はとっても気に入ったので、いつか別の形で「Bloom」を使いたいなと思いました。
その時まで「Bloom」はしばし封印。
→Googleアドセンスの問題解消されたので、今はサブサイトでWordPressテーマ「Bloom」使ってます！
