
WordPress で記事内に美しくソースコードを掲載されているのをよく見かけます。
このようにソースコードを表示させる為のプラグインがいくつかあるのですが、私的にお薦めなのは、『 SyntaxHighlighter Evolved 』という上記スクリーンショットのプラグインです。
使い易いか否かの判断は、人それぞれによりますが、綺麗に表示されますので私は入れています。
プラグイン配布元
SyntaxHighlighter Evolved(当方のWP2.9.2環境で検証済み)
導入方法
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>
以上で動作すると思いますが、不明な点はご質問下さい。
RSS Feed
Twitter
6月 14th, 2010
minaWP
Posted in
Tags: 




[...] http://kantan.hp2.jp/?p=647 tweetmeme_url = 'http://neverfound.jp/2010/07/dom%e3%83%88%e3%83%ac%e3%83%bc%e3%83%8b%e3%83%b3%e3%82%b0.html';tweetmeme_source = 'daisuke_kikuchi';tweetmeme_style = 'compact'; [...]