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

2017年7月3日ブログ運営

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

ここに徐々にまとめていこうと思います。

備忘録として”できていないこと”も記載していこうと思います…(;´∀`)

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

Luxeritasのデフォルト機能で行ったこと(速度面のみ)

デフォルトでできることが非常に多い為、速度に関する設定のみ記載します。知識が無い方にはやや難解かもしれないので適宜読み飛ばしてください。

.htaccessの修正

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

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

LuxeritasはカスタマイザーでWebフォントの設定もできるのですが、Webフォントのキャッシュ設定等も記載されているので、Luxeritasを使用する方は同梱されている.htaccessを利用したほうが良いと思います。

圧縮・最適化、CSS、javascript

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

高速化に関する取り組み

私は以下を行いました。

  • HTML圧縮:圧縮率を低
  • CSS最適化:親子テーマのCSSを結合して圧縮
  • JS最適化:子テーマのjavascriptを結合・圧縮 (追加圧縮でシンタックスハイライトのprism.jsを読み込み)
  • アイコンフォントのCSS:非同期で読み込み(ただし、FontAwesomeオリジナルCSSを利用)
  • jquery.js と jquery-migrate.min.js の結合
  • WordPressの絵文字スクリプトを読み込まない
  • WordPressのEmbed機能をオフ
  • 使っていないウィジェット用のCSSをオフ

私はFontAwesomeオリジナルCSSを利用していますが、これが不要な方は使わない方が良いです(そのほうが早いので)。

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

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

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

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

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

グローバルナビゲーションにカテゴリを指定し固定表示する

これは速度設定とは関係ないのですが、せっかく画像をキャプチャしたので掲載。

グローバルナビゲーションというのは上部に表示されているバーのことです(赤で囲んだところ)。

Luxeritasでは、このバーにカテゴリを表示させることもできますし、このバーをスクロールに追従させることも可能です。

 

子テーマの編集

Google Analyticsの設定

アクセス解析用のスクリプトを埋め込むファイルが用意されています(add-analytics.php)ので、そこにAnalyticsのコードを記載するだけです。

ちなみに、Analyticsの計測対象からログインユーザーを除外したい場合は、phpの記述を

<?php if(!is_user_logged_in()): ?>

とすれば良いらしい(私はブラウザのアドオンを用いて、自信をカウントしないようにしているので、Wordpressには何も書いていませんが…!)

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

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

このブログパーツのCSSの設定を行います。

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

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

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

ちなみに、カエレバのCSS設定を調べてみると、検索上位にヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ! – Yukihy Lifeというサイトさんが出てきました。

これも控えめデザインですが、レスポンシブ版の方にimgタグの処理が入っていない(Luxeritasを使ってる人はレスポンシブ版を使うと思う)ので、表示がズレてしまっているようでした。

imgタグをinlineスタイルにするか、imgタグを消すか…ですが、こちらを使いたい人は

.kaerebalink-link1 img, .booklink-link2 img {
   display:none;
}

みたいなことをCSSに追加しないと表示が崩れると思います(本当は消すよりinlineにしたほうが良いとは思うのですが)。

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

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毎いじってみた。

フォントを設定

Webフォントを利用しようかと思ったのですが、フォントが汚く表示されるのって基本的にWindowsだけなんですよね。Windowsの為だけに他の人にフォントをDLさせるのも微妙なのでデフォルトで頑張ってみることにしました。

Luxeritasのカスタマイザーからフォント設定の画面にいき、フォントを「指定しない」にしました。その上で2020年まで使えるfont-familyおすすめゴシック体 – Qiitaを参考に、以下の通りフォントを設定しました(CSSセレクタだけ少し変えています)。

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}

body, body.mceContentBody {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

/* IE10以上 */
@media all and (-ms-high-contrast: none) {
  body, body.mceContentBody {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

Windowsでは、Windows 8.1以降に採用されたYu Gothicを利用していますが、Chromeで文字がカスれる等の問題があるので、その対策をしています。

見出しの設定

/* Heading */
.post h2 {
    border-left:none; /* デフォルトの設定を取る */
    color: rgba(255,128,171 ,1);
    text-align: center;
    margin-top: 45px; /* デフォルト:35px */
    padding: 8.5px; /* デフォルト:上下8px, 左右20px */
    border-top: solid 2px rgba(255,128,171 ,1);
    background: -webkit-repeating-linear-gradient(45deg, rgba(255,128,171,0.15), rgba(255,128,171,0.05) 4px, rgba(255,128,171,0.1) 4px, rgba(255,128,171,0.05) 7px);
    background: -o-repeating-linear-gradient(45deg, rgba(255,128,171,0.15), rgba(255,128,171,0.05) 4px, rgba(255,128,171,0.1) 4px, rgba(255,128,171,0.05) 7px);
    background: -moz-repeating-linear-gradient(45deg, rgba(255,128,171,0.15), rgba(255,128,171,0.05) 4px, rgba(255,128,171,0.1) 4px, rgba(255,128,171,0.05) 7px);
    background: repeating-linear-gradient(45deg, rgba(255,128,171,0.15), rgba(255,128,171,0.05) 4px, rgba(255,128,171,0.1) 4px, rgba(255,128,171,0.05) 7px);
}

.post h3 {
    border-style: none;     /* デフォルトの設定を取る */
    margin-left: 0px; 
    padding: 0;
    color: rgb(10,10,10);
}

.post h3:before { 
    font-family: FontAwesome;
    content: "\f292";
    margin-right: 10px;
    color: rgba(255,64,129 ,1);
}

main {
    color: rgba(90, 90, 90, 1);
}

デフォルトよりも本文と見出しのジャンプ率を上げたかったので、カスタマイザーから見出しのフォントサイズを上げました。それに加えて本設定をしてみた。

見出し2(h2)
h2要素は他の見出しとはっきりと区別したいので、上部のマージン(margin-top)を多めにとった。
より目立たせる為、文字中央揃えで、repeating-linear-gradientを使って背景をストライプにしてみた。まだ”勧告候補”の文法の為プレフィクスがカオスになってる。
見出し3(h3)
見出し2程は目立たせたくない。ジャンプ率を上げるため文字色のコントラストを強めにした(本文はよりグレーに近い色を使い、見出しはより黒に近い色を使う)。

記述リストの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要素。

さっきのコレで使ってます。

見出し2(h2)
h2要素は他の見出しとはっきりと区別したいので、上部のマージン(margin-top)を多めにとった。
より目立たせる為、文字中央揃えで、repeating-linear-gradientを使って背景をストライプにしてみた。まだ”勧告候補”の文法の為プレフィクスがカオスになってる。
見出し3(h3)
見出し2程は目立たせたくない。ジャンプ率を上げるため文字色のコントラストを強めにした(本文はよりグレーに近い色を使い、見出しはより黒に近い色を使う)。

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

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

プラグインで行ったこと

以下るな様のページを多いに参照してください。

超基本プラグイン

以下るな様のページを参照してください。

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

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

Table of Contents Plus

目次を生成する為に使用します。継続使用。

WordPress Popular Posts

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

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

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

plugin load filter

読み込むプラグインを設定できるプラグイン。

該当ページのみにプラグインを有効化したい場合なんかに超便利。

AddQucktag

html入力の際の定形タグを登録しておくと便利

Paste Raw HTML

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

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

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

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

技術力の関係や時間の関係でできてないことを、とりあえず備忘的に残しておきます。

対処できたら更新していきます!

構造化データの「authorがありません」エラー

Google Search Consoleでめっちゃエラーが発生していました。hentryに「authorがありません」というエラーらしい。

※Luxeritas 2.0.0で対策されました

 

投稿ページ、一覧ページでcontainerサイズを切り替えたい

  • 一覧ページは2カラムレイアウト
  • 投稿ページは1カラムレイアウト

でレイアウトを作ろうと思ったのですが、カスタマイザーから行えるwidthの調整がcontainerに対してでした。

2カラムレイアウトに合わせてwidth 1280pxにすると、1カラムレイアウトでは大きすぎるんですよね(;´∀`)

1カラムレイアウトの横幅だけがとっても横長になってしまっています笑

たぶんなんとかできるんだと思いますが、とりあえず保留。

Qiita風の見出しを作りたい

Qiitaじゃなくても良いんですが、右側に出てくる見出しあるじゃないですか。例えば、↑こーゆーヤツ(Qiita の記事の見出しに Font-Awesome を利用して見栄えを良くする)。

スクロールに追従して、該当の見出しにきたら色がつく…という例のアレ。

あれウィジェットでなんとかなるのかなぁ(;´∀`)

これができたら、投稿ページも2カラムレイアウトでもよいかも。

ちなみにtoc+プラグインはサイドバーにウィジェットとして貼り付けできました。

やりたいことは近いのですが、目次のないページにアクセスした際にゴミが生成されてしまいました…笑

1カラムの時はSidebarを選択できないようにする

1カラムを使用していても、スマホ表示にした際、Sidebarが有効化されてしまっているようなので、これを無効化したい。

欲を言えば、私のような雑記ブログだと、Prev/Nextのボタンがほぼ意味をなさないので、”人気記事”とか”新着記事”みたいなものを配置できないかなぁと思案中。

※追記:Sidebarの件はVer 1.53で修正が入り、1カラムでは表示されなくなりました
機能追加と仕様変更とその他ちょこちょこ Luxeritas 1.53 | Thought is free

カテゴリ階層への対応

子階層があると、第一階層をクリックできないんですよね(ドリルダウンのボタンになっている為)。例えばGenesisというテーマのようにクリックできるようにしたいのですが技術力不足につき保留。