WordPressでソースコードを記事に表示させたいとき、便利なのがSyntaxHighlighter。
もちろんこのブログにも入ってます。
disBlogで使用しているのは、SyntaxHighlighter Evolvedというバージョン。

これを入れると、こんな感じ↓になるんですが、

…

…なんか…

…このビビッドな緑のラインが微妙…
行間ももう少し空けた方が見やすい。

ということで、ちょっといじることにしました。

ところで、SyntaxHighlighterにはいくつかテーマがあります。
上の画像はデフォルトですが、ダッシュボード→設定→SyntaxHighlighter→Defaultから、テーマ以外にもいろいろと設定がいじれます。
「Miscellaneous」という項目から、ナンバリングを非表示にしたり、また、変更した状態をプレビューできたりするのでけっこう便利なんですが、あらかじめ設定された項目以外の変更は出来ない様子。
ということは、CSSを変更するしかない。

CSSは、wp-content→plugins→syntaxhighlighter→syntaxhighlighter→stylesというところに、テーマ別で入っています。
デフォルトの状態から変更したので、今回使ったcssは、

・shCore.css（基本css）
・shThemeDefault.css（デフォルトテーマcss)

の2つ。
この2つをダウンロードし、念のためバックアップをとる。

SyntaxHighlighterが表示されているページのキャプチャを取り、例の緑色をPhotoshopで抽出すると、「#6CE26C」っていう値をゲット。
このカラーコードを元にCSS内で検索をかけてみると、

.syntaxhighlighter .line .content

を発見。好きな色に変える。

次は行間を変更する。
shCore.cssの一番上の方に、

.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody

っていうところがあるので、そこのline-height値をいじる。

…このように、普通にcssをいじる感じで好きなようにカスタマイズします。
そして、完成したのがこれ↓

<?php
include_once(ABSPATH . WPINC . '/rss.php');
define('MAGPIE_OUTPUT_ENCODING' , 'UTF-8');
define('MAGPIE_CACHE_DIR' , './cache');
define('MAGPIE_FETCH_TIME_OUT', 30);
define('MAGPIE_CACHE_AGE', 60*60);
$rss = fetch_rss('http://waratsuyoshi.jp/feed');
$maxitems = 3;
$items = array_slice($rss->items, 0, $maxitems);
?>

ところで、このエントリを書き終わったあと、ふと気づくとプラグインがバージョンアップされて↑に書いた設定すべてが消されてました。
あわててローカルのcssをアップするも、バージョンアップに伴い仕様そのものが変わったもよう。
仕方なく、本サイトから最新バージョンのプラグインをダウンロードしてきて、もう一度cssを修正しなおしました。
というわけで、気合入れてカスタマイズしても、バージョンアップでふりだしに戻ることがあるので気をつけてください。

でも、cssそのものは不要な記述が減ってすっきりしていじりやすくなってていい感じでした。

nicholことデザイナーの勝田です。
デザインと構築が主な仕事で、このブログの作者です。
Wordpressの構築は素人なので、のめりこんで作ってたら、いつのまにかたかみーに初投稿を奪われていました。なんと。。

それはそうと、このブログのサイドに社長andチーフディレクターのブログがアーカイブされているのですが、ここでちょっとハマった問題について書きたいと思います。

RSSをアーカイブさせる方法は、大きく分けて

1.プラグインを使う
2.直接phpを書く

があると思うんですが、「余計なプラグインを入れるな」というチーフディレクターからの命令により今回は後者の方法を選びました。

phpはまったくわからないため、ググってソースを探してたら、WebTecNoteさんで

[WP]wordpressでRSSを取得して表示

という記事を発見。さっそくテンプレートに書き加えてみる。

これでRSS表示はOKなんですが、このままだと日付表示ができない。
ここでたかみー参戦。
PHPの知識があるたかみーに手伝ってもらいつつ、日付表示のためのソースを打ってみる。

でも、出ない。。

RSS側では日付はpudDateで囲まれてるから、素人考えでは、

<?php echo $item['pudDate']; ?>

でいけるんじゃないの？とやってみたけどひたすら表示されない。
あきらめかけたころ、

RSSフィードを取得して各ブログの新着記事を日付順にソートして表示する

という記事を発見。やってみる。

…出た！！！

でもなんで？とソースをよく見てみると、pudDateがpubdateになってることにたかみーが気づく。
まさか、こんなことで？？と思いながらはじめのソースに加えてみると、

いけました。

なんということでしょう・・

あまりに簡単なことに、脱力してしまいました。
これを機に、PHPも勉強せなあかんなあ、と思った一日でした。

ちなみに、完成したソースがこれ↓です。

<?php
include_once(ABSPATH . WPINC . '/rss.php');
define('MAGPIE_OUTPUT_ENCODING' , 'UTF-8');
define('MAGPIE_CACHE_DIR' , './cache');
define('MAGPIE_FETCH_TIME_OUT', 30);
define('MAGPIE_CACHE_AGE', 60*60);
$rss = fetch_rss('http://doors.co.jp/toblog/feed');
$maxitems = 3;
$items = array_slice($rss->items, 0, $maxitems);
?>
<ul>
<?php if (empty($items)) echo '<li>No items</li?>';
else
foreach ( $items as $item ) : ?>
<li>
<span>
<?php $item_date  = $item['pubdate'];
       $out_item_date  = date('Y.n.j', strtotime($item_date));
       echo $out_item_date; ?>
</span>
<a href='<?php echo $item['link']; ?>' target="_blank">
<?php echo $item['title']; ?>
</a></li>
<?php endforeach; ?>

WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !