【WordPress】〔テーマ:Cocoon〕初めてのHighlighter(ハイライター)導入

初めてのHighlighter(ハイライター)導入

Highlighter使用の経緯

ブログ作成を始めてからすぐにサイトの外観をもっとこうしたいなぁ、ここはこうできたらなぁなどと思い始めました。ある程度外観が整わないと記事作成のモチベーションが・・・(-_-)

ということで、いろいろ調べてみると、ワードプレステーマ(私は「Cocoon」を使用☆)の設定項目で調整できない内容は、CSSコードなどを使うことにより、自分のイメージにどおりにサイトの外観を変更・調整できることが分かりました。

そこで、他の方のサイトなどを参考にCSSコードを調べているうちに、いつでも過去のコードを確認・再調整できるように、コードの「備忘録」をつくろうと考えました!
CSSなどのプログラミングコードに疎いので(少しずつ勉強中ですが・・(;^_^A)

備忘録として記事にコードを書くにあたって、他の方のサイトを見ているとキレイにコードが貼りつけられていて、どうやってるのかなぁと思い、調べてみるとHighlighter(ハイライター)という機能を使っていることを知りました。

こーいうのです⇩⇩⇩

結論としては、ワードプレステーマ「Cocoon」に搭載されているブロックエディターでソースコードを挿入する方法によりソースコードを表示しています☆

作成した備忘録的記事はこんな感じになっています⇩⇩⇩

Highlighterの種類・選別

Highlighter使用を考えいろいろ調べてみると、Highlighterはどれを使えば良いのか迷うほど多く開発されています。

少し古い記事ですが、Highlighteを多数紹介している記事を見つけましたので参考に掲載します。

これらのサイトを参考にさせてもらいつつ、私が実際に試験的に導入を検討したもの、試行錯誤の上、最終的に「Cocoon」搭載の機能の使用に至った流れなどを紹介します。

Crayon Syntax Highlighter

まず最初に、Highlighterの評判からこのプラグインをインストールしてみました。

Crayon Syntax Highlighterの口コミ

・無料プラグインとして配布されていて導入が非常に容易
・使用者が多く日本語の開設情報も豊富
・初心者でも簡単にフォントサイズ・強調表示などを変更・指定が可能
・最終更新が2015年以降停止

更新が停止してる・・・との懸念材料がありましたが、使用者も多く使いやすそうでしたので試しにインストールしてみました!

が、結果、使用できずでした。原因は不明でした。
更新が停止しているため最新バージョンのワードプレスに対応していないのか、私の導入方法に誤りがあったのか。
私には解明困難のため「Crayon Syntax Highlighter」はパスしました。

Enlighter

次に、使用者の多いこちらのプラグインをインストールしてみました。
「Crayon Syntax Highlighter」みたいに更新が停止していることもないし、評判も使い勝手もよさそう☆

上の記事などを参考に導入を試みましたが、なぜか機能しない・・・。
いろいろ試行錯誤してみましたが、結果、使用できずでした。原因は不明・・・。
(結構時間かけて調べてみましたが・・・)

このプラグインを紹介されているブログも多く、様々な記事を読み、自分でも早く使ってみたい!と思っていたので非常に残念でした(T_T)

「Cocoon」に搭載されている機能(Highlight.js)

「Enlighter」を使用できずに落ち込みつつ、他のHighlighterを求め、使用しているワードプレステーマ「Cocoon」で検索してみると・・・

Highlighter搭載されてるじゃないの!!!

なぜ最初に気づかなかったのか・・・。

搭載されているのは「Highlight.js」という機能。
調べてみると導入方法も使い方も使い勝手もすごくよさそう♪

「Highlight.js」を使えるようになるまで

いざ導入!!
・・・でも、また、いきなりつまずきました。

Cocoon公式ページの解説を見ても、「解説に掲載されてるワードプレスの画像」と「自分が使っているワードプレスの画面」が全然違う。

なぜ!?!?

ここで思いもよらぬ壁にぶちあたりました。

原因は・・・「ブロックエディター」でした。

2018年12月6日にワードプレスが公式に新しいエディターを導入。
新エディターは、「Gutenberg」というブロックエディターというもの。
(2020年4月の今となれば、今更感がすごいですが(;^_^A)
というのも、私はこの新エディター導入前に少しワードプレスを触ってすぐ放置しちゃってたんです・・・。(約2年越しにワードプレス再開・・・)

ですので、今では「クラシックエディター」と呼ばれる旧式のエディターのままになっていたために、Cocoon公式ページの解説画像と違ってたんですね。

ということで、さっそく「ブロックエディター」に更新!!
そしていざ、導入!!

・・・またしてもつまずく。なぜか「ブロックエディター」が出てこない。

いろいろ調べました。「ブロックエディター 出てこない」などでグーグル検索・・・でも分からない・・・もう嫌になりあきらめそうになっていたとき、たまたま確認したインストール済プラグインの「TinyMCE Advanced」

これはエディターを拡張・強化する有名なプラグインですが、このプラグインの設定画面を見てみると、

「ブロックエディターをクラシックエディターに置き換える」にチェックが入ってました。これにチェックが入っていると、ブロックエディターは完全に使えないみたい。
にしてもよく見つけたな私・・・。

結果、このチェックをはずすとブロックエディターが表示され、Cocoon公式ページのとおりに進めると、恐ろしく簡単に「Highlight.js」を使えるようになりました。
ちなみに、私が設定したハイライトスタイルは「Rainbow」というものです♪

一瞬でできるところですごく時間をかけてしまいましたが、最終的にHighlighterを導入できてほんとに良かった(>_<)

最後までご覧いただきありがとうございました!

タイトルとURLをコピーしました