スポンサーリンク

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

最終更新日:

plug-in



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


スポンサーリンク



SyntaxHighlighter Evolved

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



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



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



SyntaxHighlighter Evolved」です。



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



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

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


インストールしてみよう

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



WordPressの管理画面から

  • プラグイン > 新規追加 >「SyntaxHighlighter Evolved」で検索 > インストール > 有効化



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



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


使ってみよう

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



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



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



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



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



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



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



下図では、phpの例です。



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

syntax_edit_1



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

syntax_edit_2



実際にはこうなります。

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



見やすいですね!



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



最後に

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

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