サイトマップ(全記事一覧)はこちらから。

WordPress中級者がSANGOを徹底カスタマイズ。プラグイン紹介。

今回はSANGOのカスタマイズについて紹介したいと思います。

はてなブログからWordpressに移行するときの注意点はこの記事をご覧ください。

はてなブログからmixhost&wordpressへ移行で困ったこと、大発表!

また今回の記事ではFTPソフトを使ってphpファイルを編集することができる人を対象としています。

詳しくはこの記事をご覧ください。

WordPress初心者から中級者へ!FTPを使ってphpを編集しよう。

タイトルの通り、このブログではSANGOという有料テーマを利用しています。

リリース後、数多くのブログがこのテーマを利用しています。
利用者が多いことは、カスタマイズのしやすさにも繋がります。

多くの人がカスタマイズの仕方を公開していますので、それを参考にコピー&ペーストで簡単にカスタマイズすることができます。

私のブログを見て、このテーマいいな!と思ったらぜひ導入を。

このブログで利用しているプラグイン一覧

カスタマイズの前提として、私が使っているプラグインを紹介します。

なるべく増やさないようにしましたが、20プラグインあります。

必要に応じて、減らしましょう。少なければ少ないほどいいと思います。

Accelerated Mobile Pages

モバイルでの表示速度を上げてくれるプラグイン

参考 Accelerated Mobile PagesWordpress.org

AddQuicktag

テーマSANGOを利用するならマストなプラグイン。
ショートコードを簡単に利用できるようにするプラグインです。
SANGO用のショートコードセットはSANGOオフィシャルページからダウンロードできます。

参考 AddQuicktagWordpress.org

Akismet Anti-Spam

WordPressにデフォルトで入っているスパム対策プラグイン

参考 Akismet Anti-SpamWordpress.org

Autoptimize

CSSやJavaScriptコードを連結し、ウェブサイトの表示速度を上げてくれるプラグイン。

参考 AutoptimizeWordpress.org

Avatar Manager

テーマSANGOを利用するならあったほうがいいプラグイン。
この記事を書いた人、などに自画像を表示させるためのプラグイン。

参考 Avatar ManagerWordpress.org

Contact Form 7

問い合わせページを作るならあったほうがいいプラグイン。

Googleフォームで代用可。

参考 Contact Form 7Wordpress.org

Enhanced Custom Permalinks

パーマリンクにスラッシュ(/)を書き込めるようにするプラグイン。

参考 Enhanced Custom PermalinksWordpress.org

EWWW Image Optimizer

画像を圧縮して、ウェブサイトの表示を早くするプラグイン。

参考 EWWW Image OptimizerWordpress.org

Google XML Sitemaps

Googleにサイトマップを送るプラグイン。SEO対策のため、マスト。

参考 Google XML SitemapsWordpress.org

PHP Code Widget

ウィジェットにphpを書き込むプラグイン。

なにに使うかは追って説明します。

参考 PHP Code WidgetWordpress.org

Really Simple SSL

SSL化(https)対応にあったほうがいいプラグイン。

参考 Really Simple SSLWordpress.org

Redirection

404エラーが出た時に対応するプラグイン

参考 RedirectionWordpress.org

Rinker

カエレバ・ヨメレバの代わりにRinkerを導入。

参考 商品リンク管理プラグインRinker(リンカー)の公式サイトおやこそだて

Scripts-To-Footer

スクリプトをフッターに移動させることで、ウェブサイトの表示を早くするプラグイン

参考 Scripts-To-FooterWordpress.org

Search Regex

ウェブサイト内の表記を一発総変換、書き換えをしてくれるプラグイン

参考 Search RegexWordpress.org

Simple GA Ranking

Google アナリティクスで人気ページなどを抽出するプラグイン

参考 Simple GA RankingWordpress.org

Table of Contents Plus

目次作成用プラグイン

参考 Table of Contents PlusWordpress.org

TinyMCE Advanced

記事を書く際に便利にしてくれるプラグイン

参考 TinyMCE AdvancedWordpress.org

WooSidebars

ページごとにサイドバーの表示を変えるために使うプラグイン

参考 WooSidebarsWordpress.org

WP Fastest Cache

キャッシュを消してウェブサイトの表示を早くしてくれるプラグイン

参考 WP Fastest CacheWordpress.org

WordPressのテーマSANGOのカスタマイズ

ヘッダー部分のカスタマイズ

ヘッダー画像作成

このブログのヘッダーはCanvaで作成しました。
画像サイズを指定から、2400pixel × 500pixel。そして利用したい画像のアップロード、文字列を入力します。

注意
色使いはとても難しいです。
デザイナーではない一般人はあまりド派手な色は避けたほうがいいです。
注意
あとで説明しますが、ヘッダー画像の背景は単色にしましょう。

ヘッダー幅指定

今の状態で、ウェブサイトを確認すると中央に小さく画像が設置されている状態です。
しかし横幅いっぱいにすると画像が粗く表示されてしまいます。

ヘッダー画像をメインコンテンツに合わせるコードを参考に好きなサイズを指定しましょう。
ヘッダーのデザインによると思いますが、私のデザインでは750pixelが良さげ。ということでコードはこちら。

12行目の750pxというところをご調整ください。

なお、18行目のbackground: #FFFFFFというのが背景色。ヘッダー画像の両脇の色です。
ヘッダー画像とその両脇の色が異なると違和感しかありませんので、同じ色を指定しましょう。

先ほどの注意点にも記載しましたが、ヘッダー画像の背景を単色以外、例えばグラデーションカラーで作っているとヘッダーはグラデーションなのに、両脇が単色になってしまいます。

もしグラデで作るなら、ヘッダー画像を大きい画素数で拡大してもにじまないヘッダーを作成し、横幅いっぱいに貼るコード設定しましょう。

グローバルメニューの作成

グローバルメニューはヘッダー下のメニューです。
ここはほぼデフォルトのまま。

色は外観→カスタマイズ→色の設定→ヘッダーの背景色から設定をしています。
色の統一感を持たせるために、ヘッダー画像のフォントと同じ色を指定。

合わせて、メインカラーやウィジェットタイトルの背景色も同じ色にしています。

ヘッダーお知らせ欄の利用法は様々あると思いますが、私は回遊率をあげたいのでプーケット観光のまとめページのリンクを貼り付けています。

どのページからも1クリックでたどり着くことができるので、いわゆるLPのような情報まとめページが適していると思います。

なお、グラデーションの色はこのサイトからカラーコードを参考にしています。

https://webgradients.com

参考 Fresh Background GradientsWebGradients.com

サイトアイコン&自画像の作成

続いてはサイトアイコンと自画像の作成です。必ずしも一緒にする必要はないと思いますが、今回は同じ画像を使っています。Adobe Illustratorで作成しました。

注意
twitterで利用する場合は、丸く切り取られることに注意。中心寄りのデザインにしましょう。

ウィジェットのカスタマイズ

人気記事の出力

一般的にWordpress Popular Postsが人気ですが、なるべくプラグインを軽量化したかったので、GoogleAnalyticsの統計を利用して人気記事を調べて出力するようにしています。

まずはプラグインのSimple GA Rankingをインストールしてください。

その後の手順は『はるしか』さんのページをご参照ください。

参考 GoogleAnalyticsの統計で人気記事が生成できる超軽量WPプラグイン雑食こじかの知識箱

カテゴリ別のランキング出力

(うまく表示されないので、現在作業中。)

Simple GA Rankingが利用できるようになったら、カテゴリ別のランキングを作成しましょう。
私のような雑記ブログであれば、ブログ全般のランキングより、今見ているカテゴリのランキングの方が読者の導線を考えると適していると思います。

海外移住を調べたくて来ている読者にゴルフ情報へ誘導しても回遊率は上がりません。

PHP Widgetというプラグインをインストール。
そして、phpが記入できるウィジェットを設置。
そしてphpコードを入力します。

これでカテゴリ別のランキングが設置できます。

(うまく表示されないので、現在作業中。)

サイドバーにメニューボックスを作成する

カテゴリを羅列してもいいのですが、せっかく可愛らしいテーマなので、メニューボックスを作成しました。
ちょっと一手間かかりますが、カテゴリがシンプルに分けられるので、ぜひご利用ください。

参考 メニューボックスをウィジェットやページに表示する方法サルワカ

ページごとに表示するサイドバーの変更

次の項目で説明しますが、フロントページをカスタマイズし、メインのエリアに最近の投稿や人気の記事を並べます。
ですので、フロントページではサイドバーに最近の投稿や人気の記事を出したくないのです。

フロントページのサイドバーと投稿ページや固定ページのサイドバーを変更したいのでプラグインWooSidebarを利用しています。

フロントページのカスタマイズ

私のフロントページをご覧いただくと、最近の記事以外にも人気記事やカテゴリ別の記事が表示されています。

これはもともとのフロントページをカスタマイズするのではなく新たなphpファイルを作成し、置き換えることで作ってあります。

その作成の仕方、置き換え方は『はるしか』さんの手法をそのまま従えば簡単にできます。

参考 SANGOのフロントページをシンプル&スタイリッシュにカスタマイズ雑食こじかの知識箱
MEMO
カテゴリは偶数にしましょう。
MEMO
もし、サイドバーを表示したい場合は、コメント欄に補足があります。

投稿ページのカスタマイズ

見出しの設定

h2やh3、h4の変更です。

これが私の設定です。お好みに合わせて色や背景などを変更してみてください。

内部リンクの設定

内部リンクのカスタマイズは『あずさん』の方法を参考にさせていただきました。

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

フッター部分のカスタマイズ

フッターがおろそかになっているブログやウェブサイトが数多く存在します。
ここをしっかり作っておくと『お、やるな』という気がします。

ですので、しっかりとフッターも作り込んでおきましょう。

フッターメニューも忘れずに。

まとめ

これらが、私が行ったカスタマイズです。

これからカスタマイズを行う人の参考になれば幸いです。

でも自戒を込めていいますと、ブログのデザインは大事ですが、最も重要なのはコンテンツ(中身)です。
カスタマイズは楽しいのでついつい夢中になってやってしまいますが、価値あるコンテンツを提供するのがブログの主眼です。
リニューアルして気分良くなったので、これからはコンテンツの充実を目指します!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です