IE6-8 is Not Supported

WP SyntaxHighlighter のテーマを自作する方法

コードを書く際にハイライトしてくれる便利なプラグイン『WP SyntaxHighlighter』。 デフォルトでもいくつかテーマがあるのですが、サイトに色を合わせたいこともあると思います。
そこで今回は既存テーマの上書きで変える方法ではなく、新たにテーマを追加する方法を紹介します。

当然ですが、まだ導入していない場合はダウンロードしプラグインを有効にしておいてください。
すでに導入済みの方はバージョンだけチェックしましょう。
この記事を書いたときのバージョンは1.7.3です。

テーマを作る前に WP SyntaxHighlighter の設定画面で使用するライブラリ3.X (デフォルト) になってることを確認してください。 自分で 2.1 を選んでいなければ大丈夫なはずですので、確認ができたらさっそくテーマを作っていきます。

1. オリジナルテーマ CSS を作る

まず wp-syntaxhighlighter > syntaxhighlighter3 > styles を開きます。
次にそのフォルダ内にあるshCore.cssを同フォルダに複製します。
複製したらファイル名を変えましょう。 今回はブログ名を取ってshCoreWebrawl.cssとしました。
赤字の部分は好きな文字に変えて大丈夫です。

2. CSS を編集する

CSS に詳しい人なら Firebug などを使って自分で色を変えたりするのもいいかと思いますが、 めんどくさい人のために色を変えているプロパティを載せておきます。
以下のコードを先ほど作った CSS ファイルの最後にコピペしましょう。

/* Color Settings */
.syntaxhighlighter .plain {
  color: #ffffff !important;
}
.syntaxhighlighter .comments {
  color: #6d6a58 !important;
}
.syntaxhighlighter .string {
  color: #e6db74 !important;
}
.syntaxhighlighter .keyword {
  color: #f92672 !important;
}
.syntaxhighlighter .preprocessor {
  color: #f92672 !important;
}
.syntaxhighlighter .variable {
  color: #ae81ff !important;
}
.syntaxhighlighter .value {
  color: #66d9ef !important;
}
.syntaxhighlighter .functions {
  color: #66d9ef !important;
}
.syntaxhighlighter .constants {
  color: #66d9ef !important;
}
.syntaxhighlighter .scripts {
  color: #66d9ef !important;
}
.syntaxhighlighter .color1 {
  color: #a6e22e !important;
}
.syntaxhighlighter .color2 {
  color: #a6e22e !important;
}
.syntaxhighlighter .color3 {
  color: #f92672 !important;
}
.syntaxhighlighter .break {
  color: #fd971f !important;
}
.syntaxhighlighter a {
  color: #fd971f !important;
}

color を好きな値にすれば色が変わります。
これだけだと背景色は変わらないので背景を変えたい場合は55行目の.syntaxhighlighterの background プロパティを変更してください。ほかにもテーブルや見出しを好みで変えるのもいいかもしれません。
完成したらこのファイルを複製し shThemeWebrawl.css に変更。

3. 設定画面で選択できるようにする

せっかくテーマを作っても選択できなければ使用できないので、設定画面のドロップダウンリストに追加してあげましょう。
まずwp-syntaxhighlighter > wp-syntaxhighlighter-admin.php を開きます。276行目に select タグがあるのでそこに自作テーマを追加します。

<select name="theme">
	<option value="Webrawl" <?php if ($wp_sh_setting_opt['theme'] == "Webrawl") {echo 'selected="selected"';} ?>>Webrawl</option>
	<option value="Default" <?php if ($wp_sh_setting_opt['theme'] == "Default") {echo 'selected="selected"';} ?>>Default</option>
	<option value="Django" <?php if ($wp_sh_setting_opt['theme'] == "Django") {echo 'selected="selected"';} ?>>Django</option>
	<option value="Eclipse" <?php if ($wp_sh_setting_opt['theme'] == "Eclipse") {echo 'selected="selected"';} ?>>Eclipse</option>
	<option value="Emacs" <?php if ($wp_sh_setting_opt['theme'] == "Emacs") {echo 'selected="selected"';} ?>>Emacs</option>
	<option value="FadeToGrey" <?php if ($wp_sh_setting_opt['theme'] == "FadeToGrey") {echo 'selected="selected"';} ?>>FadeToGrey</option>
	<option value="MDUltra" <?php if ($wp_sh_setting_opt['theme'] == "MDUltra") {echo 'selected="selected"';} ?>>MDUltra</option>
	<option value="Midnight" <?php if ($wp_sh_setting_opt['theme'] == "Midnight") {echo 'selected="selected"';} ?>>Midnight</option>
	<option value="RDark" <?php if ($wp_sh_setting_opt['theme'] == "RDark") {echo 'selected="selected"';} ?>>RDark</option>
	<option value="None" <?php if ($wp_sh_setting_opt['theme'] == "None") {echo 'selected="selected"';} ?>><?php _e('None', 'wp_sh') ?></option>
	<option value="Random" <?php if ($wp_sh_setting_opt['theme'] == "Random") {echo 'selected="selected"';} ?>><?php _e('Random', 'wp_sh') ?></option>
</select>

4. 選択したテーマを反映させる

次に選択したテーマを反映させるために、wp-syntaxhighlighter > wp-syntaxhighlighter.phpを開きます。867行目にテーマの配列があるので、自作テーマを追加します。
今回は元から8つテーマがあるので9番目として登録し、テーマ名と CSS ファイル名を編集して追加。

$wp_sh_theme_list['Default'] = array('1', 'shCoreDefault.css', 'shThemeDefault.css');
$wp_sh_theme_list['Django'] = array('2', 'shCoreDjango.css', 'shThemeDjango.css');
$wp_sh_theme_list['Eclipse'] = array('3', 'shCoreEclipse.css', 'shThemeEclipse.css');
$wp_sh_theme_list['Emacs'] = array('4', 'shCoreEmacs.css', 'shThemeEmacs.css');
$wp_sh_theme_list['FadeToGrey'] = array('5', 'shCoreFadeToGrey.css', 'shThemeFadeToGrey.css');
$wp_sh_theme_list['MDUltra'] = array('8', 'shCoreMDUltra.css', 'shThemeMDUltra.css');
$wp_sh_theme_list['Midnight'] = array('6', 'shCoreMidnight.css', 'shThemeMidnight.css');
$wp_sh_theme_list['RDark'] = array('7', 'shCoreRDark.css', 'shThemeRDark.css');
$wp_sh_theme_list['Webrawl'] = array('9', 'shCoreWebrawl.css', 'shThemeWebrawl.css');

管理画面の WP SyntaxHighlighter から自作テーマを選択してテーマが反映されれば成功です。
ハイライトのデザインを少しこだわってみたい人は是非やってみてください!

ads by google