理系ゆる女子の雑記ブログです!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スマホで押したくなるようなメニューボックス 参考 AddQuicktagで簡単にショートコードを挿入しようSANGOカスタマイズガイド

プロフィールを作成

プロフィールを作成し、記事下にこのページを書いた人を掲載。 【SANGO】プロフィールにボタンが表示されない!HTMLを有効にするための方法

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

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

SANGO関係ないけど、amazonjsの見た目が、

SANGOのおしゃれテーマの前にはごつく感じたので、

ボタンを設置して、価格表示をオフにした!

ついでに4月から、楽天とYahooショッピングも自動表示に!

これで比較が楽になるかと(*´∀`*)

↓こんな感じです

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

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

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

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

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

著作権表示が必要な画像にはキャプションを入れなくてはならないので、 参考 商用画像にはキャプションを!SANGOのアイキャッチに表示する方法マサオカブログ  

目次を自動で入れる

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

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

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

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

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

めちゃ便利で良いデザインのコードを一発呼び出し可能に!

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

その他のカスタマイズ

自分だけにPV数を表記する

PVを確認するのにアナリティクス開くのが面倒で。。。

  • 新着や人気記事にさりげなくPV数を表示させるカスタマイズ
  • 日、週、月、年と4パターンを全て表示してくれる
  • 管理者(ログインした人)しか見れないので、訪問者にPV数見られたくない人でも安心!
  • phpを編集しなくてはならない
参考 【SANGO】PV数チェックが簡単に!記事一覧カードにPV数を表示するカスタマイズgoma.me

サイトマップを作る

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