山と映画を愛する男の『趣味』と『実益』を兼ねたブログです。

そこに山と金があるから

WordPressで記事本文にHTMLやCSSなどのソースコードをテキストエディタのように表示する方法。

更新日:


WordPressをしようしている方で、分からないことがあればネットで検索して調べますよね。
調べた先で必ずといっていいほど本文に表示されているコレ⇩

『どうやって記事本文にHTMLやCSSを表示しているんだろう?』と思った方も多いはずです。
何故なら記事本文にHTMLやCSSなどのソースコードを入力してしまうと、入力した個所で本来の仕事をして変換しまうからです。

本来の仕事をさせずに説明の為にソースコードを表示させるにはどうすればいいのか。

その方法はWordpressのプラグイン『Crayon Syntax Highlighter』を使用します。

 

 

『Crayon Syntax Highlighter』とは

エディタなどで表示されているHTMLやCSSなどのソースコードをWordPressの記事上に行番号つきで表示させることができるプラグインです。技術ブログなどソースコードを載せているサイトを運営している人に重宝されているプラグインです。

 

 

『Crayon Syntax Highlighter』をインストールしよう。

管理画面から『プラグイン』▷『新規追加』で検索ボックス内に『Crayon Syntax Highlighter』を入力します。
『Crayon Syntax Highlighter』が表示されたら『今すぐインストール』をクリックしましょう。
インストールが終了すると右上に『有効化』と出るのでクリックして有効化しましょう。青い『有効化』が白い『有効』にかわれば完了です。以上でインストールは完了です。

現在『Crayon Syntax Highlighter』をインストールすると、今まで日本語化されていたCrayonですが、英語のまま表示されます。日本語化の方法もあるのですが、不具合は生じる場合があるのでおすすめしません。英語表記でも、デフォルトのまま使用すれば問題は一切ないので大丈夫です。

一応日本語化の方法を。

必ずバックアップを取ってから行ってください。

example.com/wp-content/languages/plugins
あるいは
example.com/public_html/wp-content/languages/plugins
フォルダにある
crayon-syntax-highlighter-ja.mo
crayon-syntax-highlighter-ja.po
を削除することで日本語化できます。

私は怖いのでやっていません(´・ω・)

 

『Crayon Syntax Highlighter』を設定しよう。

ダッシュボードの管理画面から『設定』▷『Crayon』をクリックすると『Crayon Syntax Highlighter』の設定画面へいきます。 設定出来る項目は全部で12あります。
ここから表示する内容やデザインを自由にカスタマイズできます。表記は英語になっておりますが、説明に従って進んで頂ければ、簡単にカスタマイズすることが出来るのでご安心を!
正直な話、ただソースコードを本文に表示するだけのことなので、そこまでカスタマイズするほどのものでは無いと思います笑
全てデフォルト(最初の状態)で問題ないと思います。

 

Theme
既存のテーマの中から好みの1つを選ぶか、カスタマイズによって自由なデザインを施せます。 既存テーマの中に自分が納得できるデザインがなければ、納得できるデザインを自分で作りだすことも可能です。

Font
ソースコードの字体やフォントサイズ、そして行間を設定できます。

 

Metrics
ソースコードを表示するボックスのサイズや、上下左右の余白を設定できます。特にこだわりがなければデフォルトのままで大丈夫です。

Toolbar
ソースコードの上部に表示されるツールバーの表示・非表示を設定できます。 ツールバーで設定できる項目は6つ。

•Toggle Line Numbers:行数の表示・非表示
•Toggle Plain Code:コードの装飾有無
•Toggle Line Wrap:長いコードを折り返す
•Expand Code:表示ボックスを最長コードの幅に合わせる
•Copy:コピー
•Open Code New Window:コードを新ウィンドウで表示

 

デフォルトでは『 マウスオーバー時(マウスカーソルを合わせた時) 』にスクロールバーが表示されるよう設定されていますが、
記述にマウスを合わせる度にコードの上にスクロールバーが上下にピョコピョコ動かれるとうっとおしいので、Always display scrollbars(常にスクロールバーを表示する)にチェックを入れておくといいと思います。

ツールバー(コードの上の項目)も同じで、上下ピョコピョコがうっとおしい場合は常に表示させる=Display the Toolbarの項目で『Always』を選択しましょう。

Lines
ソースコードの各行におけるデザインが設定できます。

Code
コードの表示切り替えについて設定できます。

 

Tags
ソースコードのハイライトをショートコードや< pre>や< code>といったタグを用いた方法で実現しています。「Tag」ではこうした複数のパターンの中から自由に選ぶことでタグによるハイライトを設定できます。

Languages
『Crayon』で用意されていないソースコードを表示する際の代替えデザインを設定できます。

Files
デフォルトでOK。

 

Posts
デフォルトでOK。

Tag Editor
デフォルトでOK。

Misc
デフォルトでOK。

 

Errors
デフォルトでOK。

Log
デフォルトでOK。

基本的に変更するならTheme(デザイン)とFont(見やすさ)のみで大丈夫だと思います。

 

『Crayon Syntax Highlighter』を使ってみよう!

投稿画面から記入方法を『テキスト』にし、『Crayon』をクリックすると記事へ挿入するソースコードを設定する画面が表示されます。

Title
ソースコード上部に表示するタイトル(見出し)が設定できます。

Language
使用するプログラミング言語が設定可能です。これによりコードのハイライトされる箇所が決まります。

Code
表示するソースコードを記述します。

URL
表示するソースコードのファイルパスが指定できます。
『Setting』以降の項目は前述した『Crayon』の設定画面で設定できる項目と同じです。 ソースコード毎に個別に指定したい場合のみここで設定しましょう。 設定が完了したら、編集画面の右上にある『add』ボタンが『決定』なのでクリック。 カーソルの位置にソースコードが挿入されれば成功です。簡単ですね!

表示例

 

 

 

テーマをオリジナルにカスタマイズしよう

テーマは「設定」→「Crayon」の画面から自由にデザインを変更できます。

 

テーマの色をオリジナルにカスタマイズしたいときは、元にしたい『Theme』を選択した状態で『Duplicate』ボタンを押し、複製します。 複製ができたら『Edit』ボタンを押し、編集画面へGO。

 

右側のメニューからカスタマイズする項目を選べます。 設定できる項目は6つあります。

 

Information

Theme に関する設定が可能です。デフォルトで問題はないと思います。

 

Highlighting
文字色、太字・細字、字体、文字飾りがなどが変更可能です。

 

Flame
外枠と背景色などが変更可能。

 

Lines
行まわりのデザインが変更可能。

 

Line Numbers
行数まわりのデザインが変更可能。

 

Toolbar
ソースコードの右上に表示されている、ツールバーのデザインが変更可能。

カスタマイズできる項目は多くいのですが、正直デフォルトの『Classic』の状態が1番シンプルで、1番見やすいと思います。大事なのは『見やすさ』です。カッコよさではありません。

 

表示速度が遅くなったときの対処法

『Crayon Syntax Highlighter』 はコードを表示するプラグインのなかでは優秀で軽いほうですが、何も使っていないときと比べればやはり重くなってしまします。

ブログの体感表示速度が遅くなったと感じた時は、設定画面の『Misc』の項目の Attempt to load Crayon's CSS and JavaScript only when needed(必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる)にチェックを入れてみましょう。

 

最後に

設定を変更したら、必ず最後に左下の

をクリックして、変更を保存してください!

…最初に言っとかなきゃいけないけど忘れてました(´・ω・)

 

最後まで読んで頂きありがとうございました!

 



-WordPress
-, , ,

Copyright© そこに山と金があるから , 2017 All Rights Reserved Powered by AFFINGER4.