Luxeritas WordPressテーマに変えてからカスタマイズしたことまとめ

2017年3月8日ブログ運営

http://thk.kanzae.net/wp/

※18年6月:Luxeritas 2系からLuxeritas 3系に内容アップデートしました。Luxeritasアップデートに伴い記事の削除・追加を行っています。

開発者るな様が速度やSEOの最適化を考えて作ってくださっているので余計なことはしない方針。

.htaccessの修正

Luxeritasにはサーバー設定を行うための.htaccessが同梱されています。

これを利用して、キャッシュを利用する設定を行います。

Luxeritasのカスタマイザーから行ったこと – 速度面のみ

デフォルトでできることが非常に多い為、速度に関する設定のみ記載します。

知識が無い方にはやや難解な記述かもしれないので適宜読み飛ばしてください。

圧縮・最適化、CSS、javascript

以下、るな様のページを参考に関係あるものをピックアップ。

高速化に関する取り組み

私は以下を行いました。

  • HTMLの圧縮:圧縮率を高
  • CSSの最適化:親と子のCSSを結合して圧縮する
  • JS最適化:圧縮する
    ※ 追加圧縮でシンタックスハイライトのprism.jsを読み込み
  • アイコンフォントのCSS:非同期で読み込み
  • 使っていないウィジェット用のCSSをオフ
  • jQueryの読み込み方法:Google CDN – jQuery v3
  • bootstrap.js:読み込まない
  • WordPressの絵文字スクリプトを読み込まない
  • WordPressのEmbed機能をオフ

以下については、高速化の観点で有効だと思うものの、副作用を考えて設定しておりません。

  • AMP有効化
  • jQueryを非同期で読み込む(jQueryにasync, プラグインにdefer)

ちなみに、上述したシンタックスハイライトのPrism.jsはコレのことを指しています。

Prismを利用するには、”prism.js”と”prism.css”を読み込ませる必要があるのですが、Luxeritasの機能を利用してprism.jsを圧縮&自動読み込みさせています。その為、Luxeritasを利用しているユーザーの場合、functions.phpにはprism.cssを読み込む設定のみ書けば十分。

こんなことまでできるテーマはなかなか無いのではないでしょうか。

デザインテンプレートの反映

Luxeritas 3の新機能、デザインテンプレートを利用してみました。他の人が用意してくれたデザインを反映させることができる機能です。

これは搭載されて本当に良かった点ですね。他の優れた有料テーマ(例えばGenesisとか)と比較してLuxeritasの弱点はデザインだと思っていましたので。

ひとまずmusica-in-silvaを反映させました。

他にも作者様のサイト(デザインファイル | Luxeritas Themeにある程度デザインファイルが用意されているので、気に入ったものがあれば利用してみると簡単です。

子テーマの編集

Google Analyticsの設定

「子テーマの編集」の「アクセス解析(head)」にGoogle Analyticsの解析用スクリプトを埋め込めばおしまいです。簡単…!

カエレバ・ヨメレバのCSSカスタマイズ

私はカエレバ・ヨメレバという商品紹介用のブログパーツを利用しています。

このブログパーツのCSSの設定を行いました。『第0版』様のCSSを拝借(丸パクリ)させていただきました。なんとこの方もLuxeritasテーマを使用しているみたい…!!

リンク先のCSSをstyle.cssにコピペすれば、

カエレバリンクがこんな感じに表示されます。

キャプション付の図の周りに線を引く

WordPressで図を貼り付けたとき、”本文”と”キャプションの説明文”の境界がわかりにくかった為、周りに細い線を引くようにしました。

.wp-caption { 
    border-style: solid; 
    border-width: thin; 
    border-color: rgb(200,200,200); 
    padding: 0.5em 0.5em 0 0.5em; 
}
キャプション付の図。境界がわかりやすいようにこんな感じで周りに線を引きます。豚の貯金箱かわいい。でも、このデザインだとちょっとブログカードっぽく見えちゃって紛らわしいかも…?

他にも方法は色々あると思いますが(キャプションの文字を小さくして色を薄くしてみるとか、marginを確保するとか)、境界線が手っ取り早いかなという安直な方法。

図にキャプションがついている場合はfigureタグのクラスに.wp-captionが指定されているみたいでしたので、.wp-captionをターゲットにしています。

又、キャプションの説明文が左に寄りすぎていたので、paddingを設定してみました。本来であれば、キャプションの説明文(figcaption)に設定されている.wp-caption-textというクラスのpaddingをいじった方が良いと思うのですが、どうやらあえて左右のpaddingを0に設定しているっぽいので、figure毎いじってみた。

記述リストのCSS設定

/* Description List */

.post dl {
        margin: 20px 0px;
        padding-left: 30px;
}

.post dt {
        font-weight: bold;
        border-bottom: dotted 1px rgba(0,0,0,0.3);
        margin-top: 10px;
}

.post dd {
        margin-bottom: 10px;
        padding-left: 20px;
        
}

HTML5で使い勝手がよくなったdl dt dd要素を使用したいので、CSSでデザインを適用します。

このような表示に変更しています。

見出し2(h2)
h2要素は他の見出しとはっきりと区別したいので、上部のマージン(margin-top)を多めにとりたいよね。
あああてすとおおおおおおお
見出し3(h3)
見出し2程は目立たせたくないけど同じデザインなのもわかりにくいよね。。ジャンプ率を上げるため文字色のコントラストを強めにするのもありか。

デフォルトで見た目が何も設定されていなかったので、せめてdt要素のfont-weightを濃くしようかなと思いました。

ついでにdt要素の下に線を引いてみた。本当は、最低限の見た目以外は、classを設定して作っていくのが良いと思うのですが、個人ブログですし、メンテ性より利便性ということで、コレで問題でたらその時考えます。

見出しの変更

/* Header */

.post h2 {
	background-color: #288c66;
	color: white;
	border-radius: 0.5em;
}

.post h2:after {
	content: none;
}

.post h3:after {
	left: 0px;
}

もともとのデザインはこんな感じです。

h2とh3のデザインが似ており区別がつきにくかった為、デザインを以下のように変更しました。

H2タグのデザインを変更。又、H2とH3タグの左端を揃えています。

Webフォントの設定

Luxeritasのデフォルトの機能を使用して、Noto Sans Japaneseにフォントを変更しています。

デフォルトではメイリオが指定されているのですが、私はメイリオが好きではありません。メイリオってセンターラインよりも字が上の方に寄っているので気持ち悪くて…。

Webフォントなのでサイト表示が重くなるのですが、致し方なし。Noto Sansは日本語早期アクセスの方ではなく、Google FontsのCDNから持ってくると割と早いらしいです。

もうフォント周りをいじりだすと疲れるのでLuxeritasのフォント設定におまかせします。。

プラグインで行ったこと

超基本プラグイン (製作者おすすめのプラグイン)

製作者るな様のページにお勧めプラグインが挙げられているので、参照してください。

お勧めのプラグインとお勧めしないプラグイン | Luxeritas Theme

  • EWWW Image Optimizer
  • PubSubHubbub
  • Google XML Sitemaps
  • WordPress Ping Optimizer
  • WP-Optimize
  • IP Geo Block
  • Cache Enabler

WordPress Popular Posts

人気記事を生成する為に継続使用します。

しかし、このプラグインはサーバーに負荷を与えるらしいので、本当は使わないほうが良いのかもしれません。

ちなみに、新着記事とサイトマップについてはLuxeritasオリジナルで機能が用意されている為、プラグイン不要です。

Paste Raw HTML

野良プラグイン。HTMLコードをビジュアルエディタから貼り付ける。地味に便利です。

WordPressのビジュアルエディタでHTMLを直挿入するプラグイン「Paste Raw HTML」を作った | NaeNote

functions.phpでの記載方法も載っているので、そちらを使っても良いと思いますん。

やりたいけどできてないこと

私のサイトでは、目次生成機能を、スクロール追従型のサイドバーウィジェットに載せています。

便利なのですが、目次のないページにアクセスした際にゴミが生成されてしまいます…笑

Qiitaのような感じになると便利なんですけどね。。

カテゴリ階層への対応

第一階層がドリルダウンのボタンになっている為、第一階層をクリックすることができなくなってしまっています。

海外のGenesisというテーマは第一階層をクリックできるのですが、個人的にはそちらの仕様のほうが好きなのでなんとかしたいなぁと思いつつ、とりあえず保留。