WordPress - Crayon Syntax Highlighterをやめた理由

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
wordpress image
イラストACの画像をもとに加工しています。

WordPressプラグインのCrayon Syntax Highlighterを使うのをやめました。代わりがあるのでプラグインを使う必要がないからです。

サイトのパフォーマンス上、SEOを考えるとプラグインは少ない方が良いです。代わりにPrism.js を使うことにしました。

シンタックスハイライトとは

シンタックスハイライトは、ソースコードを見やすくするため、シンタックス(文法)で決まっている文字列をハイライトする機能です。

ハイライトは太字や色をつけて文字が目立つようにします。

こんな感じです。

$text = true
if( $text ) {
    //シンタックスハイライトです
}

WordPressのプラグインやJavaScriptのプラグインで提供されています。

なぜ highlighter.js を選ばなかったのか?

シンタックスハイライトのJavaScriptプラグインに highlighter.js があります。おそらくもっとも使われている有名なプラグインでしょう。

今回、highlighter.jsは見送りました。一番の理由は行数表示がデフォルト機能にないからです。

highlighter.jsを見送ったわけ

highlighter.js は機能拡張のたびに、機能拡張用のJavaScriptを実装しなければいけません。

highlightjs-line-numbers.js で行数を表示することはできます。しかし、JavaScriptファイルの最適化(ファイル結合、圧縮)作業をするのがめんどうなのでやめました。

WordPressプラグインのAutoptimizeで最適化するからそんなことはないじゃないか?

という意見もあるかもしれません。

が、ぼくはサイトのファーストビューをできるだけ速く表示するように、JavaScript, CSSの最適化を自分でカスタマイズできる環境を作っています。

Autoptimizeプラグインはカスタマイズしないものに限定しています。そこで、同じような機能の Prism.js を選びました。

Prism.js は軽量で実装する機能を選べる

Prism.js では、jsファイルをダウンロードするときに、どの機能を使うかオプションで選べます。ダウンロードするJavaScript、CSSファイルはそれぞれひとつだけです。

JavaScript、CSSファイルはサイズが小さい方がよく、使わない機能は無駄にサイトのパフォーマンスに影響するので、できるだけ実装したくありません。

ということで、Prism.jsに決めました。

そんなに小さいことを気にしなくてもいいんじゃない?

それぐらい影響ないでしょ?

という意見もあると思います。

しかし、サイトのパフォーマンス改善の作業をすると、小さなことの積み重ねは無視できないとに改めて気づかされました。

いかに楽して目的を達成するのかも大事ですが、それで解決できないものは、手を動かすことも大事なんですね。

WordPressの本
post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本
  • Webサイト作成から運用まで全体的に学ぶ
  • ブログサイトの運営からサイトの収益化を学ぶ
  • サイト作成・運営 + 集客の方法を学ぶ
  • WordPressからPHPプログラミングを学ぶ
  • 最新のWordPress(バージョン5)に対応した本

の7冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。


WordPressの本7選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!