SyntaxHighlighter Evolvedにオリジナルのスタイルを追加する方法

このブログでは、ソースコードの表示に SyntaxHighlighter Evolved というプラグインを使用しています。このプラグインを使えば、ソースコードを簡単にきれいにスタイリングされた状態で表示することができます。デザインは複数用意されており、その中から好きなものを選んで適用できるのですが、どれもイマイチしっくりこないなぁと思っていました。

プラグインに含まれるCSSを直接触ればデザインを変更することができますが、プラグインのアップデートがあると上書きされて消えてしまいます。

syntaxhighlighter_themesフックを使う

調べてみると、SyntaxHighlighter Evolvedにはスタイルを追加するための「syntaxhighlighter_themes」というフィルターフックが用意されていました。functions.phpに下記のようなコードを追加することで、オリジナルのスタイルを追加できます。

function add_syntaxhighlighter_theme() {
    wp_register_style( 'syntaxhighlighter-theme-テーマ名(半角英数字)', 'オリジナルのcssへのパス', array( 'syntaxhighlighter-core' ) );
}
add_action( 'wp_print_styles', 'add_syntaxhighlighter_theme' );

function my_evolved_theme( $themes ) {
    $themes['テーマ名(半角英数字)'] = 'テーマの名称';
    return $themes;
}
add_filter( 'syntaxhighlighter_themes', 'my_evolved_theme' );

すると、下記のような感じで管理画面から選択できるようになります(My Evolved Themeという名前で登録しました)。

My Evolved Themeというオリジナルスタイルが追加されている

My Evolved Themeというオリジナルスタイルが追加されている

一からオリジナルのCSSを作るのは大変なので、もとから用意されているものから一番イメージに近いスタイルのCSSをコピーして書き換えるのが簡単です。デフォルトのCSSは/PATH/TO/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeXXX.cssとして保存されています。

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく