B級システムエンジニアの備忘録

インフラ・プログラミングなんでもやるぞ雑用エンジニアブログ

wordpress システム・技術情報

ワードプレスにWP Code Highlight.jsを入れてみた

投稿日:

前回紹介したgist+oEmbed gist のご紹介をしましたが、

外部にコードを置くのが嫌な方やコンテンツ内のHTML上でコードも認識させたい(SEO対策??)場合、

ワードプレスプラグインのWP Code Highlight.jsがおすすめです。

実はコード表示に関して、いくつかプラグインがあるのですが、

結構遅いという評判を見かけます。

実際にWp Code Highlight.jsを使ってみていいと思いましたので、

ご紹介したいと思います。

導入方法をプラグインなので、すごく簡単です!

ワードプレスの管理画面にログインし、以下順番で進んでください。

 

プラグイン導入

プラグイン>新規追加

 

プラグインの設定

有効ボタンクリック後、設定へ

以下項目を設定する

CDN(content delivery network)設定

localを選択する場合以外はすべて外部のCDNへ取りに行きます。

CDNについて簡単に説明すると、

トラフィックが増加する傾向のある昨今(高画質画像・動画、JSファイル等)

コンテンツ配信に特化したサーバーから高速にユーザーへデータを送ると同時に自サイトのトラフィックを減らすことができる、

便利なサービスです。

正直使わない手はないです。

複数のCDNが出てきますので、いずれかの好きなものでいいと思いますが、

気になる方は実際に1つずつつないでレスポンスが早いものに変えてみましょう。

CDNサーバーの場所によって速度に差がでるかもしれません。

コード表示ツールを使用している場合 引き継ぎ設定

既に他のコード表示プラグイン、js等をしようしている場合は以下の3つについて

コードを書き直さずに適用が可能です。

投稿時の[code][/code]によるコード表示を可能にする

これは便利なので、必ずチェックを入れておきましょう。

使い方

実際には以下のように記述できます。

[code]
echo "hoge";
[/code]


echo "hogeg";

いかがでしょうか?

ワードプレスを使ってコード表示を簡単にできちゃいました!!

ただ、GitHubが運用するgistのほうが安定して表示できるので、

その点ではおすすめです。

 

336

336

-wordpress, システム・技術情報
-,

Copyright© B級システムエンジニアの備忘録 , 2021 All Rights Reserved.