その1: search結果の出力修正

素のWordPressだと、検索結果のexcerptが全文表示になってしまう。これはwell known issueのようで、ぐぐるとすぐにいろいろ対処法が見つかる。mb_excerpt() とかWP Multibyte Patch とかのpluginを使えばよいようだ。これらはphpのmultibyte extensionに依存しているので、FreeBSD portsからphp5-extensionsをインストールした上でenableする必要がある。どちらでも動くようだったが、試した順序の流れでとりあえず後者を利用中。

これが直ったら今度は別な問題が発覚。google maps用に以下のようなコードを埋め込んだ記事があるのだが、

<script type="text/javascript">
//<![CDATA[
        gmapinit();
//]]>
</script>

この部分がWP Multibyte Patchのwp_trim_excerpt()から呼ばれるstrip_tags()できれいにはがされず、//の部分が残ってしまう(これはたぶんもとのthe_excerpt()でも同じ)。2行目の冒頭部分がtagの一部ではないということで残ってしまうのがいけないようだ。ということで、超ad-hocながらwp_trim_excerpt()内でstrip_tags()を呼んでいるところの直後に以下を足していい加減に解決させた。

$text = str_replace('//', '', $text);

Ad-hocかつこれだと困る場面もあるのはわかってはいるが、実用上大きく困ることが起きるまではこれで見て見ぬふりをしよう…

その2: 写真のthumbnailのレイアウト

thumbnailは横に並べたかったので当初はこれまたad-hocにtableを使ってごまかしていたのだが、仮にもv2.0を名乗るからにはやはりレイアウトの問題はCSSで解決しないといかんだろうということで対処した。

具体的には、display propertyを”inline”にしたul要素を導入して対応。以下のようなCSSを自前で用意して、

ul.thumbnail {
    margin-top: 0.5ex;
    margin-bottom: 0.5ex;
    margin-right: 0.5ex;
    margin-left: 0.5ex;
    padding: 0;
}
ul.thumbnail li {
    display: inline;
    list-style-type: none;
    margin-left: 1px;
    margin-right: 1px;
    padding: 0;
}

WPのtemplate側のheader.phpをいじってそれを読むようにし、本文中ではこんな感じで使用:

<ul class="thumbnail">
  <li><a href="f1.jpg"><img src=... /></a></li>
  <li><a href="f2.jpg"><img src=... /></a></li>
  ...
</ul>

ついでにborderまわりも少しカスタマイズして、望み通りのスタイルになった。google readerとかで見るとスタイルが消えてしまってぽっち付きの箇条書き風になるのがかえってダサい感じなのはいまいちではあるが。

6/11追記: idとclassの使い方が不適切だった(対象要素は複数になることの方が多いのでclassの方がbetter)に気がついたので後者に統一。例も書き換えた。