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

2017年3月27日

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

まだ何も手をつけられていませんが、ここに徐々にまとめていこうと思います。

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

作者様(るな様…!!!)が速度の最適化を考えて作ってくださっており、デフォルトのデザインも割と好きなので、あまり手を加えない方針。

Luxeritasのデフォルト機能で行ったこと(カラムレイアウト、速度面のみ)

デフォルトでできることが非常に多いです。

書いていたらきりがないので、カラムレイアウトと速度面で設定したところのみ記載します。レイアウトまでいじれるのは私みたいなド素人にはありがたい。

.htaccessを修正(ブラウザにキャッシュを使用する設定)

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

Webフォントの設定もカスタマイザーからできるのですが、Webフォントをキャッシュにする設定も.htaccessに記載されていました。

CSSやjavascriptの圧縮・結合

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

高速化に関する取り組み

私は以下を行いました。

  • 親子テーマのCSS圧縮
  • jquery.js と jquery-migrate.min.js の結合
  • WordPressの絵文字スクリプトを読み込まない
  • WordPressのEmbed機能をオフ
  • 使っていないウィジェット用のCSSをオフ

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

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

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

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

ここにカテゴリを設定した為、このバーをスクロールに追従させたいと考えていたのですが、ワンクリックで設定可能でした。

最近流行っている↑のサイトみたいな左にナビゲーションつけられると格好いいかもですが…!とりあえずデフォルトで簡単にできる上部ナビにしました!

投稿系ページは2カラムに、一覧系のページは1カラムに

トップページ、投稿ページ、固定ページ、カテゴリページに対して、それぞれカラムレイアウトを指定することができます。

サイドバーにごちゃごちゃ出てくるのは好きじゃないので、基本的に1カラムレイアウトを使い、投稿ページだけ2カラムに設定しました。

投稿ページで2カラムにした理由は、上のようにサイドバーに目次をつける為です。目次であればコンテンツの内容と関係が強い為、サイドに出てきても良いかなと考えています(むしろユーザーにとってはそちらのほうが良いんじゃないかなぁと思った)。

ちなみに、スクロール追従型のサイドバーウィジェットもデフォルトで用意されていますし、サイドバーを左にするか、右にするかも設定可です。

フッターを3カラムに

プロフィールや人気記事や新着記事をフッターに移動させました。こういったものはコンテンツには直接関係がないのでサイドバーに表示されてると邪魔かなぁと思まして…。(たぶん直帰率は上がると思いますが…w そんなの気にしません!!)

それに合わせてフッターを3カラムにしました。

又、

  • 新着記事のウィジェット
  • サイトマップの生成

はデフォルトでできましたので、PS Auto Sitemapというプラグインを消すことができました。

プラグインで行ったこと

コンテンツやサイトの見た目にかかわるもののみ。

目次の生成

前述のとおり、投稿記事ではスクロールに追従する目次を使用する方針。

この目次を生成する為、Table of Contents +というプラグインは継続使用。

人気記事の生成

新着記事はLuxeritasオリジナルのウィジェットが用意されていますが、人気記事は用意されていないようでした。

というわけで、WordPress Popular Postsというプラグインは引き続き継続使用。

読み込むプラグインを設定

plugin load filterというプラグインを利用し、読み込むプラグインを設定しました。

これは、見た目にかかわるプラグインではないのですが…

当サイトではTeX記法を用いたページがあるのですが、それを表示させるためにWP QuickLaTeXというプラグインを導入しています。これが重いのです。

そこでカスタムフィールドを利用して、該当ページのみMathJaxと当てようとしたのですが失敗。

苦肉の策として、plugin load filterで該当ページにだけWP QuickLaTeXを読み込ませています。

子テーマの編集

Google Analyticsの設定

Analyticsの設定をし忘れていました(;´∀`)

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

ちなみにログインユーザーをAnalyticsの対象から除外したい場合は、phpを
<?php if(!is_user_logged_in()): ?>
とすれば良さそうです(私はブラウザのアドオンで対応しているので、Wordpressの方には何もしていませんが…!)

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

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

子テーマのstyle.cssを編集すれば、CSSの設定を行うことが可能です。

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

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

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

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

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

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

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

をCSSに入れてやらないと表示が崩れると思います(本当は消すよりinlineにしたほうが良いとは思うのですが取り急ぎ)。

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

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

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

トップページ用&トップページ以外用のフッターウィジェットを用意

私はフッターに色々な情報を配置していますが、フッターのウィジェットがサイドバー程充実しておりませぬ。

「新着記事」のウィジェットってトップページには不要だと思っている(トップページにはそもそも新着記事が表示されている)ので、トップページの時のフッターとトップページ以外のフッターで表示する情報を変えたい。

サイドバーには用意されているので、たぶん頑張れば仕組みが解明できるんじゃないかと思っとりますが勉強が必要…(;´∀`)

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

既に記載の通り、私は一覧画面では1カラムを使用しています。

しかしスマホ表示にした際、Sidebarが有効化されてしまっているようなので、これを無効化したい。

欲を言えば、このブログでは”Menu”はCategoryを意味し、”Sidebar”は目次を意味しているので、この部分の名前を変えられるとわかりやすそう。

もっというと、私のような雑記ブログでは、ナビバーにあるPrev/Nextのボタンがほぼ意味をなさない為、もう少し意味の有りそうなコンテンツに変更できないかなと考え中。どうやらスマホ表示だとフッターが消えてしまうみたいなので、むしろフッターをここに入れられないかなぁ…と思案中(“人気記事”とか”新着記事”といった名前で)。

カテゴリの整理

私はグローバルナビゲーションの部分にカテゴリを用意したのですが、このようにカテゴリが階層構造を有している時、PCでは第一階層(ここでは”資産運用”)をクリックすることができます。

しかし、スマホでは第一階層はクリックできません(ドリルダウンのボタンになっている為)。

これは仕様上、如何ともしがたい部分かもしれないので、この動作に合わせてカテゴリ階層を設計しなおしたほうがいいのかなと考え中。

スマホユーザーによるアクセスが多いことを考えると、第一階層を押せなくても問題ないようなカテゴリ階層を考えたほうが良さそうですね~。

一覧画面の#main要素のサイズを変更

御覧の通り、一覧画面がとっても横長になってしまっています笑

一覧画面とはいえ、横に長すぎても文字って読みにくいですよね。

コンテナの横幅はカスタマイザーから変更できたのですが、一覧画面は1カラム/投稿記事は2カラムにしている私の場合、コンテナではなく、一覧画面の#main要素のみ横幅を変えた方が良さそうです。

構造さえわかればCSSいじれば簡単にできそうな気がするので時間のある時にやろうかなと思ってます…(ひょっとして、勝手に横幅変えちゃうとレスポンシブ崩れちゃうとかあるのかな… それだけちょっと不安

目次がないのにTable of Contensts+のサイドバーが表示されてしまう

雑記ブログなので、目次もなくダラダラとした記事を書くこともあります。

その時も、Table of Contents+を指定したサイドバーウィジェットだけ表示されてしまうのですが、さすがにコレは不自然なので何とかしたい。


PAGE TOP