[WordPress]プラグイン～ソースコードの解説をしたいとき

plug-in

今回はブログの記事中にソースコードを見やすく表示する方法をお伝えします。

皆さんは、ブログの記事中にソースコードを表示して、説明したい時ってありますか？

私はたまにあるんです、良さそうなプログラムが見つかった時やHTMLを説明したいときなんかは、わかりやすく皆さんに広めたいと思っちゃうんです。

そんな希望を叶えてくれる便利なWordPressのプラグインがありました。

「SyntaxHighlighter Evolved」です。

綺麗にソースコードを表示してくれます。

こんな感じです、見やすいですね。

<?php
function showAdInBody() {
    return 'ここにGoogle Adsense等のコードを書く';
}
add_shortcode('adsense', 'showAdInBody');
?>

それではさっそくインストールしてみましょう。

WordPressの管理画面から

インストールできましたか？

できない方はこちらまで。

使い方はいたって簡単、ショートコードを使用して書きます。

ショートコードがわからない方もいると思います、次回以降で説明しますね。

今はおまじないみたいに考えてください。

記事投稿画面を開き、テキストモードにします。

では実際に挿入してみましょう。

やり方はいくつかありますが、今回はcodeというショートコードを使用して書く方法を説明します。

codeの中にlanguageで言語の種類を指定します。（下図の赤枠参照）

下図では、phpの例です。

codeでプログラムのソースコードを挟むイメージです。

syntax_edit_1

ここで注意点、このプラグインを使用するときはテキストモードで編集してくださいね。（下図の赤枠参照）

syntax_edit_2

実際にはこうなります。

<?php
function showAdInBody() {
    return 'ここにGoogle Adsense等のコードを書く';
}
add_shortcode('adsense', 'showAdInBody');
?>

見やすいですね！

これがあればプログラムのソースコードやHTMLのソースコードを見やすく紹介できますね。

ご意見や記事にして欲しいことなどありましたら、お気軽にここをクリックして、メッセージをくださいね。

今日はこの辺で。
最後までお読みいただきありがとうございます。