Crayon Syntax Highlighterを停止・削除すると記事が非表示になる!

表題のとおり、停止・削除する際に注意が必要な事について書きます。

このプラグインで起こる「ページ読み込み速度が遅くなる問題」について解消した事等も書いています。
「Crayon Syntax Highlighter」を使い続けていらっしゃる方で、
「ページが重くなる」といった問題で、お悩みの方は参考にして頂けると嬉しいです。

Crayon Syntax Highlighterとは

ソースコードを綺麗＆お洒落に表示する為に使えるプラグインで、
シンタックスハイライト系のプラグインの中では著名なもので使用している方も多いと思います。

「Crayon Syntax Highlighter」は運営し始めてから使っていたプラグインでした。

インストールする前から、「ページが重くなる」とか「他のプラグインとの相性の問題」だとか、
至るサイトで色々と問題視されているものでした。

それでも私の場合、サイトのイメージカラーに沿う様な表示設定していたので、
かなり気に入っていまして、「見栄え重視」で使っていました。

Crayon Syntax Highlighterの設定画面

こんな感じで設定画面でサイトイメージに沿った設定に出来るのはとても魅力。

綺麗な表示でお気に入りだった為、巷で云われている
「ページが重くなる」という問題を解消しつつ使用していました。

Crayon Syntax Highlighterの負荷が高い・ページ読み込み速度が遅くなる問題解消

本題に入る前に、これまで問題対策していた事についても書いてみます。

多くのブロガーさんが「Crayon Syntax Highlighter」がどれくらいページを重くしているか?という事を『WordPressに負荷を掛けてるプラグインを検知する
「P3 (Plugin Performance Profiler)」プラグインを使って検証しました。』等と、記事にされていて、
結果『重いから削除した。』と書いていらっしゃいます。

私もページが重くなる。という事について検証する為に、
諸先輩に習って「P3」を使い検証してみましたが「確かに!😬」と口に出してしまう程でした。

そして更に「Crayon Syntax Highlighter」が何故重いか?と言うと事を探ってみました。

結論を云うと「Crayon Syntax Highlighter」を使っていないページでも
「Crayon Syntax Highlighter」を読み込んでしまう為、重たくなってしまう様です。

「Crayon Syntax Highlighter」を使っていない頁で右クリックでソースを出してみてみると、
それは明らかな事でした。(どのページでもcrayonのCSSを読んでいた)

・・・という事は、「ページ読み込み速度が遅くなる」という問題点解消の為には、
「Crayon Syntax Highlighter」の読み込みをしなければ良い。必要なページで読む。という訳です。

“各ページでの読み込み阻止”を実現する為に「Celtispack プラグインパック」の開発者様が制作されている
「Plugin Load Filter(プラグインロードフィルター)」というプラグインで
「Crayon Syntax Highlighter」をフィルターにかけてみました。

Plugin Load Filter(設定画面)でフィルターにかける

その結果が以下です。「P3」にて再検証。

「Plugin Load Filter(プラグインロードフィルター)」でフィルタリング後の「P3」の再検証1

「Plugin Load Filter(プラグインロードフィルター)」でフィルタリング後の「P3」の再検証2

上記の2つのグラフをみてお分かり頂ける様に、
「Crayon Syntax Highlighter」が負荷を掛けているとは言えませんよね。

「Crayon Syntax Highlighter」を使い続けていらっしゃる方で、
「ページが重くなる」といった問題で、お悩みの方は
「Plugin Load Filter(プラグインロードフィルター)」で
「Crayon Syntax Highlighter」をフィルターにかけてみて下さい😉
「Contact Form 7」も全てのページでCSSを出してますので、フィルターにかけると良いと思います。

「Crayon Syntax Highlighter」の互換性未検証が長く続く・・・。

上記対策をした事で、難なく「Crayon Syntax Highlighter」を使用していました。

ところがWordPressとの互換性について検証されていない事が気になり始めました。

プラグイン本体自体の更新はされているものの、互換性未検証が長く続いている事に不安を感じたんです。

WordPress4.4.2で互換性未検証・・・。

WordPress4.5.2でも互換性未検証・・・。

使えてる。って事は問題無い。とは思うのですが、なんだかね・・・。
(ズボラなの?　検証なんて絶対必要無い。って思っているとか??)

不安は疑心に変わるもの。さらば「Crayon Syntax Highlighter」

あと、私が使用しているプラグイン達との相性は特に問題なかった様子なんですが、
「他のプラグインとの相性の問題」についても
何時、何時、問題を起こすんじゃないか??と思う様になってしまい、、、。

『Crayon･･･じゃなくて違うものにしようかなぁ～😩』
『Celtispackに、Google Code Prettifyが入っているからそっちに切り替えるかなぁ・・・。』

等と思っていると、、、、

このサイトで有難く使用させて頂いているWordPressのテーマ「Simplicity(ver.2.1.6)」にて、
シンタックスハイライト表示をするhighlight.jsが起用されました。
http://wp-simplicity.com/simplicity2-1-6/

この事がきっかけで「Crayon Syntax Highlighter」とは”さよなら”をする事にし、
一度停止して、Crayonを使用しているページを其々確認してみると、
幾つかの記事でアイキャッチ画像から下部の記事が、丸ごと真っ白なページになっていました。

うぎやーー!

「1文章として表示」を使っていた場合には、停止するとページが真っ白になる

真っ白ページをみて「うぎゃー」と焦りましたが、
よくよく考えるとCrayon独自のタグを使用している訳なので、
テキストエディター内に記述するタグがソースコードを表示させる為のタグ、
<pre></pre>で書かれていなければ、書き直さないと表示される筈がありません。

非表示になってしまった、ある頁を調べてみると、
“<span class=”lang:default decode:true crayon-inline ” > </span>“と記述したページは
エラーになる様でした。

このソースコードは、テキストエディターでコードを入力する際に表示されるポップアップウィンドウに
「1文章として表示」というチェック項目がありますが、その機能を使う事で挿入されるタグです。

Crayon Syntax Highlighter　1文章として表示

解決方法

この“<span class=”lang:default decode:true crayon-inline ” >“コードを使用してる場合は
Crayonを停止・削除する前に<pre></pre>で書き直しします。

私は、この「1文章として表示」を多用していた為、結構な作業になりまして、、、大変でした😅

因みに、Crayonで自動挿入される、その他のコードについてですが、
文頭に<pre>が入っていれば書き換えなくても大丈夫。ちゃんと表示されます。
(crayon-〇〇を、残しとくのはちょっと…、って時は消しちゃっても良いと思います、、、けど・・・手間ですよね。。。)

停止で、ショートコードが機能してしまう(実行されてしまう)

何かしらのレクチャーページ(使い方指南記事)を書いている時、ショートコードを記して
「こう書くと、こう表示されます」とサンプル的にコードを掲載したりしますよね。

みてみたでも、そうしたレクチャーページを幾頁か書いています。

貴方(貴女)のブログ内に、ショートコードのサンプル等を書いている場合、
Crayonを停止・削除すると、そのショートコードが機能してしまいます。

閲覧者に示す筈のものが実行されてしまうのであれば、そのページは死んでいるも同然・・・
なので、ページに表示したいショートコードを無効化する必要があります。
(これは、過去に何度も経験したいた事なので、「うぎゃー」ではなく「あちゃー、書き直さないと」で済みました(笑))

解決方法

先程は『Crayonを停止・削除する前に<pre></pre>で書き直しします。』と促しましたが、
ショートコードの場合は、<pre>タグを書いてしまうと、先ずそのページが真っ白になります。

ショートコードを無効化し機能させずに、ページに表示する場合は、コードを［角括弧］ [ ]で括ります。
[[ ]]の様に二重に書けばOKです。

【例1】[Shortcode] と表示したい場合　→　[[Shortcode]] と書く。

これで、記事にショートコードがそのまま表示されますし、[[ ]]の様に二重に書く事で、
角括弧の前後に<pre></pre>タグを付ければシンタックス表示も可能になります。

更に詳しく書いている記事も参考にしてやって下さい。
https://mitemita.com/syntax-highlighting-short-code/

注意点まとめ

この二点を抑えておけば、Crayon Syntax Highlighterから卒業できます。😏

ご閲覧頂き有難うございます。お役に立てば幸いです。