WordPressにSyntaxHighlighterを設置する
ブログの引っ越しを企んで、ネットオウルのWebcrowにWordPressを入れたのだが、いざ使おうと思って問題に突き当たった。
ずっとお世話になっていたSyntaxhighlighterを使う方法が分からなかったのだ。
プラグインを使う方法や、ライブラリを使うなどあったが、本家(?)を導入できるという事例が検索しても見つからなかった。
結局ライブラリ(highlight.js)を使う方法がヒントとなって導入できることが分かったので、それをこのブログの最初の記事としたい。
前提条件
WordPressを自分で設置できる環境にあること。つまり同じサーバー上にSyntaxhighlighterのコンテンツを置けることが必要だ。
手順
以下に順を追って述べる。
-
Syntaxhighlighterのコンテンツのダウンロード
こちらからダウンロード、解凍する。 -
Syntaxhighlighterのコンテンツのアップロード
解凍されたフォルダsyntaxhighlighter_3.0.83
の中から、scripts
、src
、styles
の3つをWordPressを設置したサーバーへFTPソフトでアップロードする。
筆者はwp(WordPressを入れた)ディレクトリと並列にこれらをアップロードした。 -
WordPressのfunctions.phpの編集テーマをカスタマイズするための子テーマの作成
highlight.jsの設置方法は、WordPressのheader.phpとfooter.phpを編集するものであった。だが、これはWordPressの流儀に反するらしい。
よって、こちらの記事を参考に、WordPressのfunctions.phpを編集することにする。WordPressのfunctions.phpを開くには、WordPressのダッシュボードで次のように操作する。
外観 > テーマの編集 > テーマのための関数(functions.php)(右側から選択)
テーマそのもののfunctions.phpを編集することも、流儀に反するらしい。よって、テーマをカスタマイズするための子テーマを作成し、そこに追加のfunctions.phpを置くことにする。
なお、筆者が使っているテーマはhabakiriである。その子テーマの作成方法は、本家で説明されているので、ここでは述べない。
-
子テーマのfunctions.phpの内容は、以下のとおりである。(ブラシは筆者が使うもののみ)
<?php /** * SyntaxHighlighter CSS */ function shCoreCSS() { wp_enqueue_style('shCoreCSS', '../../../../styles/shCore.css'); } add_action('wp_enqueue_scripts', 'shCoreCSS'); function shThemeCSS() { wp_enqueue_style('shThemeCSS', '../../../../styles/shCoreEclipse.css'); } add_action('wp_enqueue_scripts', 'shThemeCSS'); function shOptionsCSS() { wp_enqueue_style('shOptionsCSS', '../../../../styles/options.css'); } add_action('wp_enqueue_scripts', 'shOptionsCSS'); /** * SyntaxHighlighter JavaScript */ function shCoreScpt() { wp_enqueue_script('shCoreScpt', '../../../../scripts/shCore.js'); } add_action('wp_enqueue_scripts', 'shCoreScpt'); function shBrshScptAS() { wp_enqueue_script('shBrshScptAS', '../../../../scripts/shBrushAppleScript.js'); } add_action('wp_enqueue_scripts', 'shBrshScptAS'); function shBrshScptBS() { wp_enqueue_script('shBrshScptBS', '../../../../scripts/shBrushBash.js'); } add_action('wp_enqueue_scripts', 'shBrshScptBS'); function shBrshScptJV() { wp_enqueue_script('shBrshScptJV', '../../../../scripts/shBrushJava.js'); } add_action('wp_enqueue_scripts', 'shBrshScptJV'); function shBrshScptPL() { wp_enqueue_script('shBrshScptPL', '../../../../scripts/shBrushPlain.js'); } add_action('wp_enqueue_scripts', 'shBrshScptPL'); function shBrshScptRB() { wp_enqueue_script('shBrshScptRB', '../../../../scripts/shBrushRuby.js'); } add_action('wp_enqueue_scripts', 'shBrshScptRB'); function shBrshScptXML() { wp_enqueue_script('shBrshScptXML', '../../../../scripts/shBrushXml.js'); } add_action('wp_enqueue_scripts', 'shBrshScptXML'); function shBrshScptCSS() { wp_enqueue_script('shBrshScptCSS', '../../../../scripts/shBrushCss.js'); } add_action('wp_enqueue_scripts', 'shBrshScptCSS'); function shBrshScptOBJC() { wp_enqueue_script('shBrshScptOBJC', '../../../../scripts/shBrushObjectiveC.js'); } add_action('wp_enqueue_scripts', 'shBrshScptOBJC'); function shBrshScptJSC() { wp_enqueue_script('shBrshScptJSC', '../../../../scripts/shBrushJScript.js'); } add_action('wp_enqueue_scripts', 'shBrshScptJSC'); function shBrshScptJSN() { wp_enqueue_script('shBrshScptJSN', '../../../../scripts/shBrushJson.js'); } add_action('wp_enqueue_scripts', 'shBrshScptJSN'); function shBrshScptPHP() { wp_enqueue_script('shBrshScptPHP', '../../../../scripts/shBrushPhp.js'); } add_action('wp_enqueue_scripts', 'shBrshScptPHP'); function shEnd() { wp_enqueue_script('shEnd', '../../../../scripts/shEnd.js', array(), false, true); } add_action('wp_enqueue_scripts', 'shEnd'); ?>
以上、長くなったが、これでこのページの通り、SyntaxhighlighterがWordPress上で機能している。
この投稿へのトラックバック
トラックバックはありません。
- トラックバック URL
この投稿へのコメント