前回に引き続き、いつかまたどこかでWordPressを設置しなければならなくなった時に備えて、超初歩的な基礎から全くどうでもいいTIPSまで（つまり誰の参考にもならない）、しっかりとメモしていきます。さて冒頭から本題とずれてしまうのですが、これから頻繁にWordPressのテンプレート・タグをブログに掲載してゆく事になろうかと思います。そういった時、いつもスクリプトやソースコードの類を表示させるのに苦労するのだけれど、ここでほんの少しくらい便利になるよう仕込んでおこうと思いました。ただ、もう複雑な仕掛けは控えたいので、コチラの記事を参考にプラグイン無しで対応することにしました（ソースコード表示エリア内で、特殊文字のコードを表記する際は「＆ａｍｐ；ｇｔ；」って書くと良いんですね…初めて知った）。
WordPressの「function.php」に下記のショートコード設定を追加。スタイルシートには「div.post pre.sourcecode{ }」を追記（ちなみに↓コチラは画像にしています）。
ワードプレス(WP)でソースコード表示にプラグインはデメリット多いから中止（plusblog）
WordPressショートコードの書き方いろいろ（あわわうぇｂ）
[WP] 記事文中の特定の文字列を変換するメモ（phonokraft）
特殊文字を表示する（Webページ作りのお勉強）
しかし…残念なことに「html」だと、こちらの意図通りにうまく表示されない場合が多々あって、アレコレ調べたり修正を試みたりしたのですが、結局諦めることにしました。
結局SyntaxHighlighter Evolvedをインストール（仕様変更。下記の追記参照）
そんなワケで宣言して１時間もしないうちにプラグイン導入となりました。WordPressへのインストール・設定方法などは参考記事などを参照して下さい。ちなみに今回の僕の設定では、エリア内でテキストを折り返しさせたいので「Version 2.x」を選んだのですが、ツールバー内のクリップボードが表示されないので、コチラの記事を参考に修正を試みたものの、これもまたうまく行かなかったのでさっさと諦め、CSSの微調整に留めました。変更したファイルはコチラ。
wp-content/plugins/syntaxhighlighter/
syntaxhighlighter2/styles/shCore.css
（ちょっとメモ）SyntaxHighlighter 3.0.83 の使い方（ほんっとにはじめての HTML5）
shCore.cssの以下のclassを調整
.syntaxhighlighter
{
width: auto !important; /* !importantは必須 */
margin: 1em 0 1em 0 !important;
padding-top: 14px !important;
padding-right: 14px !important;
padding-bottom: 14px !important;
padding-left: 1px !important;
position: relative !important;
border: 1px solid #b4b4b4 !important;
}
以下、試作品のhtmlを表示した場合。別にソレがどうしたという感じだけれど、こうやって普段とは違う装飾を施して眺めると「あ、ソコ直したい」とか色々気付く事ができそうな気がします。ちなみに今回のインストールはローカルのMAMP内ではなく、flipflipflip.comのサーバーの方です。つづく。
htmlの表示例
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width "> <link rel="stylesheet" type="text/css" href="53.css" media="all"> <title>試作中モックアップ</title> </head> <body> <!-- ヘッダ＆ナビ --> <header> <nav> <ul> <li><a href="">music</a></li> <li><a href="">twitter</a></li> <li><a href="">about</a></li> <li><a href=""><b>FLFL</b></a></li> </ul> </nav> </header> <!-- 記事全体 --> <article> <!-- カテゴリ --> <section id="code_name"> <h1>Night Head</h1> </section> <!-- レイアウト調整用 --> <div id="wrap"> <div id="post"> <!-- 記事タイトル --> <section id="title"> <img id="ICON" src="ICON_s.png" alt="ICON_s" width="100" height="100" align="left" vertical-align="bottom"> <h5>Night <font color="#ff1e8a">H</font>ead ― 第01回</h5> <h2>Waldorf Microwaveは唯一無二のユニークなシンセ</h2> <h6>2014.5.7 更新</h6> </section> <!-- 記事本文 --> <div id="text"> <p>ここに本文記事が入ります。</p> <p>ここに本文記事が入ります。</p> <p>ここに本文記事が入ります。</p> <p>ここに本文記事が入ります。</p> </div> </div> </div> </article> <!-- 記事おわり --> <!-- フッター --> <footer> </footer> </body> </html>
WordPressでソースコードに色をつけるプラグインの使い方：SyntaxHighlighter Evolved（Creator note）
SyntaxHighlighter Evolved を使ってみる – WordPress plugin（ホームページ制作のサカエン）
SyntaxHighlighter Evolved – 記事にソースコードをきれいに表示する（さあ WordPress をはじめよう）
SyntaxHighlighter – ソースコードを見やすく表示させるJavaScript（道すがら講堂）
追記 2014/05/27：バージョン２から「３」に変更
プラグインをインストール後、数日使ってみたのだけれど、ウェブに掲載されたコードを参照する時、僕に限って言えばツールバーを介してひと手間かけたりせず、マウスで必要な箇所だけをササッとコピペ出来る方が都合良いと気付きました。そこで「長い行は折り返し出来無いので横スクロールバーが出てしまう」という大嫌いな仕様ではあるんだけれど、そこは手動でテキストを改行することにして「バージョン３」を使用することにしました。そこで、またCSSを少しだけ修正したのでメモ。
syntaxhighlighter3の方のstyles/shCore.css内のclassを調整
.syntaxhighlighter {
width: auto !important;
margin: 1em 0 1em 0 !important;
padding-top: 14px !important;
padding-right: 14px !important;
padding-bottom: 14px !important;
position: relative !important;
overflow: auto !important;
overflow-y: hidden !important;
font-size: 14px !important;
border: 1px solid #c5c4c4 !important;
}
WordPressのようにhtmlとphpが混在する “HTML & PHP” 混合コードの場合は、「html」ではなく、次のショートコード「php htmlscript=”true”」で括るみたいです（↓）。メモ。
“HTML & PHP” 混合コードの場合
[php htmlscript="true" highlight="4,6,8"] ↑ highlightには強調したい行番号を明記。 ちなみに、上記のように[]をウェブ上に表示させたい場合は、 [[html]]のように、２重に括ればＯＫ。 [/php]
まとめ：SyntaxHighlighter Evolved の使い方 (設定＆記述例)（attosoft.info）
WordPressプラグインSyntaxHighlighter Evolved 使い方（大八 戯れ問答）
エディタのように綺麗にソースコードを表示できるプラグイン – SyntaxHighlighter Evolved の使い方（WordPress College）
2014-05-23 ＞ VPS＆WordPress引っ越しメモ