【WordPress】SimplicityからSANGOに変更して最初にやったこと(その1)

【WordPress】SimplicityからSANGOに変えて最初にやったこと

どうも、夏蜜柑です。
引き続き、WordPressのテーマ変更について。

前回の記事で、SimplicityからSANGOへの移行を決めたこと、導入前にテスト環境で練習したことを書きました(詳しくは前回の記事▼を見てね)

【WordPress】わたしがSimplicityからSANGOに変えた理由&導入前に行ったこと

今回は、SANGO(テスト環境)で行った設定や、カスタマイズの手順について詳しく書きたいと思います。

SANGOをダウンロードする

テスト環境を準備したら、以下のページからSANGOを購入、テスト環境にダウンロードします。

参考 SANGO購入ページサルワカ

忘れずに子テーマもダウンロードします。
子テーマのダウンロードについては、以下の【SANGOカスタマイズガイド】で詳しく説明していますのでご参考に。

参考 WordPressで子テーマを活用して安全にカスタマイズを行う方法SANGOカスタマイズガイド

テスト環境の子テーマを有効化したら、いよいよ設定開始です。

わたしはSimplicityから移行したので、デフォルトのままだとデザインが崩れている所が何か所かありました。そういうのをひとつずつ、テスト環境で見ていきながら調整しました。

カスタマイザーで設定する

難しいところは後回しにして、まずは簡単なカスタマイザーの設定から。

カスタマイザーの設定は、あくまで「どんな感じになるか見る」のが目的。
本番でまたイチから設定しなきゃいけないので、あんまり時間をかけると疲れます。

設定の操作自体は、とっても簡単。
【SANGOカスタマイズガイド】を見ながらひとつずつ設定していけば、誰でもできると思います。

参考 カスタマイザーでデザインや細かな設定をしようSANGOカスタマイズガイド

ただ、デザインとか配色とかにこだわると、ものすごーく悩むので要注意^^;

わたしは二度手間覚悟で、テスト環境で設定をいじりながら、時間をかけてデザインを決めました。

子テーマのstyle.cssを編集する

次に、WordPressの[外観]→[Theme Editor]で子テーマのstyle.cssを編集します。
これは、まるっとコピペして本番で使えるので、できるだけテスト環境で作り込みました。

見出しを変える

デフォルトのままだと少し淋しいので、【SANGOカスタマイズガイド】を参考にh2、h3、h4をカスタマイズしました。

参考 SANGOでデフォルトの見出しを変える方法SANGOカスタマイズガイド

内部リンクボックスを変える

SANGOでは、ショートコードを使って内部リンクをブログカード風に表示することができます。

デフォルトでは少し淋しい感じがしたので、以下のページを参考にさせていただき、カスタマイズしました。

参考 SANGOの内部リンクボックスにラベルをつけたりするカスタマイズあずさんち

気になった部分のデザイン調整をする

そのほか、デザインで気になった部分を調整するため、以下のコードを子テーマのstyle.cssに追加しました。

タイトル下のギザギザを消す

.nothumb .entry-meta:after, .nothumb .page-title:after {
content: none;
}

ヘッダーの影を消す

.header {
box-shadow:none;
}

ヨメレバの画像の空白を消す

.booklink-image > img {
    display: none;
}

記事タイトル下の余白を消す

#main .entry-content {
padding-top: 10px;
}
#main .article-header {
margin-bottom: 10px;
}

プロフィールのアイコンを大きくする

.yourprofile .profile-img {
width: 100px;
height: 100px;
}
.yourprofile .profile-img img {
border-radius: 50%;
}

ロゴ画像のサイズ変更

#logo, #logo img, .desktop-nav li a,#drawer__open {
height: 80px;
line-height:80px;
}

ウィジェットの設定をする

【WordPress】SimplicityからSANGOに変更して最初にやったこと

これはけっこう面倒くさいので、ぶっつけ本番でもいいと思います。
わたしは練習も兼ねて、テスト環境でいろいろ試してみました(広告の挿入方法など)。

ウィジェットの設定の仕方については、【SANGOカスタマイズガイド】を参考に。

参考 ウィジェットの設定をしようSANGOカスタマイズガイド

ウィジェットにランキングを表示させる

Simplicityでは「WordpressPopularPost」というプラグインを使って、サイドバーにその日の人気ランキングを表示させていました。

SANGOにはもとから人気ランキング機能がついているのですが、累計ランキングのみなんですね。そこで、以下のページを参考にさせていただき、「WordpressPopularPost」を使ってランキング表示させるようにしました。

参考 SANGOに週間人気記事のランキングをスマートに表示する方法マサオカブログ

サイドバーにプロフィールを設置する

ウィジェット設定で、サイドバーにプロフィールボックスを表示させました。
カスタムHTMLに専用のHTMLコードをコピペするだけ。簡単です。

プロフィールボックスの設置方法は、【SANGOカスタマイズガイド】に載っています。

参考 サイドバーや記事下にプロフィールを設置するSANGOカスタマイズガイド

ひとこと

だいたいこんな感じで、テスト環境で試行錯誤しておりました^^;
基本的には、SANGOは完成されたテーマなので、あんまりいじらないほうがいいのかなと思ったり。

なので、カスタマイズはできるだけ最小限に留めておこうと思っています。

慣れている人は、事前の準備は「子テーマのstyle.cssを編集する」だけで、あとはぶっつけ本番でカスタマイズしてるんですかね~。わたしにはとてもそんな度胸はなかったけれど。

次回は、本番でのカスタマイズや、導入したプラグイン、ショートコードについて書きたいと思います。

SimplicityからSANGOに変更して最初にやったこと(その2)【WordPress】SimplicityからSANGOに変更して最初にやったこと(その2)