【WordPress】PHPやjavascriptなどのソースコードを記事に載せる方法

公開日：2013/10/08

更新日：2017/04/22

カテゴリー: WordPress

インターネットでWordPressのカスタマイズ方法やPHP、javascriptなどのプログラミングについて調べていると、ソースコードを綺麗に表示しているサイト（ほとんどがWordPressサイト）が多々あります。

実際にどんなものかをお見せすると、こんなのです。

<?php
echo "おはようございます";
echo "こんにちは";
echo "こんばんは";
echo "ありがとう";
echo "すいません";
?>

当サイトでも利用しているのですが、その実装方法はとても簡単で、「SyntaxHighlighter Evolved」というプラグインを有効化するだけです。ここではその方法を紹介します。

１．「SyntaxHighlighter Evolved」をインストール

管理画面→プラグイン→新規追加→「SyntaxHighlighter Evolved」を検索→インストール・有効化

管理画面→設定→「SyntaxHighlighter Evolved」で各種設定できます。

設定画面を見て驚き！！なんと日本語化されているのです！しかも設定画面の下に詳細が書かれているので、説明不要と行ってもいいぐらい日本人に親切なプラグインです。なので必要最低限のみ説明します。

その他にも設定項目がありますが、初期設定のままでOKです。慣れてきたらいじれば良いと思います。

使用方法は、[表記する言語]と[/表記する言語]の間にソースコードを記載するだけ。それだけで「SyntaxHighlighter Evolved」がソースコードを整形して出力してくれます。

例

［php］
<?php
echo "おはようございます";
echo "こんにちは";
echo "こんばんは";
echo "ありがとう";
echo "すいません";
?>
［/php］

「[」と「]」は訳あって全角表記にしてますが、半角に直してください

が以下のようになります。

<?php
echo "おはようございます";
echo "こんにちは";
echo "こんばんは";
echo "ありがとう";
echo "すいません";
?>

［php］～［/php］の形を［php highlight="3,5"］～［/php］とするだけで、3行目と5行目がハイライトされます。

<?php
echo "おはようございます";
echo "こんにちは";
echo "こんばんは";
echo "ありがとう";
echo "すいません";
?>

通常、左端に表示される行番号は1,2,3・・・となりますが、この開始番号を［php firstline="38"］とするだけで38番から行を開始することができます。

<?php
echo "おはようございます";
echo "こんにちは";
echo "こんばんは";
echo "ありがとう";
echo "すいません";
?>

［php collapse="true"］とするだけで、折りたたんで表示できる。ユーザーが見たい時にクリックすれば通常表示となるため、ソースコードが長くなる場合や例示するソースコードが複数あるときなどに便利。

<?php 
echo "おはようございます";
echo "こんにちは";
echo "こんばんは";
echo "ありがとう";
echo "すいません";
?>

「SyntaxHighlighter Evolved」が対応しているコードは以下です。一般的なものは全て網羅されているので、ほんと万能です。

以上、PHPやHTML,javascriptなどのソースコードを綺麗に表示させるためのプラグイン「SyntaxHighlighter Evolved」の説明でした。

自分のサイトでソースコードを載せることが多くなってきたら、ぜひ導入を検討したい一物ですね！

なお、ビジュアルモードで「SyntaxHighlighter Evolved」を利用すると、特殊文字に変換されたり、表示がずれたり・・・などの不具合があったので、私はテキストモードを使用しています。

あわせて読んでほしい！

まだコメントはありません。

コメントフォーム