[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のソースコードを見やすく紹介できますね。

 
 

最後に

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

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



 
 

コメント

タイトルとURLをコピーしました