新着サイトマップはこちら!

「Luxeritas」→「SANGO」に変えて行ったカスタマイズと参考サイト

WordPressのことを何も知らないまま使い始めてはや2年。

デザインは素敵にしたくて、知識0の状態から分からないなりに検索して、 HTMLやCSSは分かりやすかったから、なんとなーく出来た気になってたけど、 凝り始めたらPHPだのプラグインを編集しなくちゃいけなかったり、、、

もはや記事更新よりもそっちを調べたり試すのに時間がかかっちゃってました。

そんなん時間がもったいない!!!

ということでデザインが美しい有料テーマ『SANGO』をついに導入しちゃいました!  

今回は『SANGO』導入に当たって行ったカスタマイズと参考サイトの備忘録です。

このページは随時更新予定
カスタマイズが終わったら備忘録として更新していく予定です!

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

人気記事一覧のウィジェットの見た目カスタマイズ

SANGOにも人気記事のオリジナルウィジェットがあったけど、累計閲覧数しか確認出来なかったので。。。こちらを導入!

  • WordPressPopulerPostsを使って人気記事をランキングでウィジェットに表示
  • デザインをSANGOと揃える
  • 1位2位3位などの番号の表示
  • アイコンを付ける
参考 SANGOに週間人気記事のランキングをスマートに表示する方法マサオカブログ

現在開いているページと同じカテゴリーでランキング表示する

結構更新したいカテゴリーの内容がバラバラだったのもあったし、 同じカテゴリーを表示して特化ブログ風にしたいなぁと思って導入!

  • WordPressPopulerPostsを使って人気記事を現在表示のページと同じカテゴリーのランキングで表示
  • タイトルに同じカテゴリーという文言を加える
  • プラグイン「PHP Code Widget」を導入
参考 メニューボックスをウィジェットやページに表示する方法マサオカブログ

メニューボックスを設置する

スマホで押したくなるようなメニューボックスを導入しました。

参考 AddQuicktagで簡単にショートコードを挿入しようSANGOカスタマイズガイド

プロフィールを作成

プロフィールを作成し、記事下にこのページを書いた人を掲載しました。

【SANGO】プロフィールにボタンが表示されない!HTMLを有効にするための方法

記事内用CSSをカスタマイズ

Amazon js用の見た目をカスタマイズ

現在はAmazonjsからRinkerに変更

SANGO関係ないけど、amazonjsの見た目が、SANGOのおしゃれテーマの前にはごつく感じたので、ボタンを設置して、価格表示をオフにしました!

ついでに4月から、楽天とYahooショッピングも自動表示に!これで比較が楽になるかと(*´∀`*)

 ↓ こんな感じです※画像

PC表示の時のボタンが上2個、下1個になっているけど、後々もう1種類足して、上下2個ずつにしようと思う!

あと、精度もあげようかと、、、これは5月以降からかな。

新しく導入したRinkerにて解決しました(*´∀`*)

Rinker導入&自分好みにカスタム

Rinkerというプラグインを導入!Amazonjsよりも表示速度がとんでもなく速いので入れ替えることにしました。

テーマ「Poripu」での表示をベースにしつつ、自分なりに細かく調整\(^o^)/

任意でURLとリンクテキストを変更出来るカスタムフィールドを作りました。

 ↓ こんな感じです※画像

このプラグインを知った時は感動しました(´;ω;`)

とにかく便利でおすすめ出来るプラグインです(*´∀`*)

  • キーワード指定が出来るため、Amazon以外の楽天、Yahooの検索精度が高い
  • 表示速度がとにかく速い
  • リンク毎に管理が出来る
  • リンクの生成が簡単
  • 表示が美しい

↓ 制作者さんのページになります!

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

見出しのデザインをカスタマイズ

SANGOではh2などは最初から特にデザイン設定されていないので、 『.post h2〜』などで記事のみに反映出来る形でカスタマイズしました!

アイキャッチに自動でキャプションを入れる

著作権表示が必要な画像にはキャプションを入れなくてはならない!ということで、SANGOに合うデザインでキャプションを導入しました(*´∀`*)

参考 商用画像にはキャプションを!SANGOのアイキャッチに表示する方法マサオカブログ

目次を自動で入れる

Luxeritasでは目次がテーマ内で設定出来ましたが、SANGOではその機能は無いので、 プラグイン『TOC+』を導入 記事の最初のH2前と、PC用のサイドバー追尾に設置しました。

各記事のアイキャッチ画像を消す

SANGOではアイキャッチ画像を記事の最初に表示出来るので、 Luxeritasで書いてきた過去記事の被ってしまう画像を消しました。

便利な機能をカスタマイズ

SANGOにあるショートコードを呼び出せるようにする

SANGOを使用している人は、便利でかわいいデザインのコードを一発呼び出し可能になります!

  • 記事作成画面でSANGO専用のショートコードがすぐに呼び出せる
  • いちいちCSSやHTMLを考えなくていいのでとても便利
  • プラグイン「AddQuicktag」のインストールが必要
参考 AddQuicktagで簡単にショートコードを挿入しようSANGOカスタマイズガイド

その他のカスタマイズ

サイトマップを作る

Luxeritasでは固定ページ用サイトマップのテンプレートがあったが、 SANGOでは無いので作りました!