about

sogo  
fukidasi

  social

Count per Day

  • 747現在の記事:
  • 434今日の閲覧数:
  • 2現在オンライン中の人数:

WordPressにソースコードを綺麗に表示させるプラグイン SyntaxHighlighter Evolved 設置




WordPress で記事内に美しくソースコードを掲載されているのをよく見かけます。

このようにソースコードを表示させる為のプラグインがいくつかあるのですが、私的にお薦めなのは、SyntaxHighlighter Evolved という上記スクリーンショットのプラグインです。

使い易いか否かの判断は、人それぞれによりますが、綺麗に表示されますので私は入れています。
 

プラグイン配布元

SyntaxHighlighter Evolved(当方のWP2.9.2/3.0.1/3.0.2/3.0.3環境で検証済み)
 

導入方法

1. プラグイン配布元より『syntaxhighlighter.zip』を任意のフォルダにダウンロード

2. 解凍後、『syntaxhighlighter』をwp-content/ pluginsへフォルダごとアップロード。

3. 管理画面(Plugins(プラグイン))にて『syntaxhighlighter』を有効化する。
 

使用方法

基本的にはデフォルトのままあえて設定変更なしで大丈夫です(当サイトは完全デフォルト)が、
カスタマイズされる場合はテンプレートやパラメータの設定変更が可能です。

パラメータ設定
Bitmacroブログ』さんで図解説明されていますのでこちらを参考にされるとよいと思います。

テンプレートの設定
私的にはデフォルトが一番見易いと思うのですが、変更される場合は以下のように変更します。
[ダッシュボード内設定]⇒[SyntaxHighlighter Settings]⇒[Color Theme]
から8パターンが選択出来ますので、希望のテンプレを選択し、[変更保存]でプレビューされます。
 

使い方
[コード部分の記述はソースに合ったコードで囲みます]
例えば、(※「」の部分は[]に置き換えてください)
「php」 PHP用ソースコード 「/php」
「css」 CSS用ソースコード 「/css」
という感じで囲んで記述します。

コードの一部をハイライトにする例:
「php highlight="2"」  /*強調ライン番号を指定(ここでは2番を指定)*/
「php highlight="3,5"」  /*強調ライン番号を指定(ここでは3番と5番を指定)*/
 
 
プラグインを有効にしたが正しく表示されない?
 

このようなトラブルもよくあるようで、私の場合もそうでした。このプラグインを使用するは、
header.php』に
<?php wp_head(); ?>

footer.php』に
<?php wp_footer(); ?>

のタグが記述されていなければ動作しません、お使いのテーマによっては記述されていない場合も多いですので、無いようでしたら追加します。

タグ追加参考例: 
header.php』  ( /head直上に記述)
<link rel="shortcut icon" href="http://kantan.hp2.jp/favicon.ico">
<?php wp_head(); ?>
</head>
<body>
	<div id="wrapper">

footer.php』  ( /body直上に記述)
</script>
<?php wp_footer(); ?>
</body>
</html>

以上で動作すると思いますが、不明な点がございましたら遠慮なくご質問下さい。


Pocket

Trackback URL


この記事を共有していただければ嬉しく思います。コメントもお待ちしておりますのでお気軽にどうぞ!
※ドメインを移行しましたら共有数が0にリセットされてしまいましたので、ご協力お願い致します。