ブログシステムを MovableType から WordPress に移行したものの、写真の扱いが一部変わったので、その修正作業に追われた。

ひとつは MovableType で活用した Lightbox というプラグインの移行問題。Lightbox を導入すると、小さいサイズ(アイキャッチ画像)の写真を記事に埋め込み、そこをクリックすると写真が元サイズで大きく拡大表示される。記事の横幅が600ドットとか制限があるため、サイズがそれ以上の写真を見せるには、Lightbox が必要だったわけだ。

アイキャッチ画像の作成はLightboxによって自動的に作成される。縮小したいサイズを指示するだけでOK。

できあがったhtmlコードは一例として、以下のようになっている。

<a rel="lightbox" href="/hobby/img/
130525-8.png">
<img alt="130525-8.png"
src="/hobby/assets_c/2013/05/
130525-8-thumb-510x486-1487.png"
class="mt-image-center" style="text-align: center; display: block;
margin: 0 auto 20px;" height="486" width="510" /></a>

しかし、このままでは WP に移行しても画像は表示されない。代わりに、ファイル名の表示があって、そこをクリックしてはじめて画像が表示される。致命的エラーにはならないが、改善したい。

試しに、WP では以下のように直すと画像が難なく表示される。

<a href="/hobby/img/130525-8.png">
<img alt="130525-8.png"
src="/hobby/img/130525-8.png"
class="mt-image-center" style="text-align: center; display: block;
margin: 0 auto 20px;" height="486" width="510" /></a>

整理すると、修正箇所は以下の3点。

  1. rel=”lightbox” を削除
  2. assets_c/2013/05 を img に置き換え
  3. -thumb-510×486-1487 を削除

手動でやるのであれば、時間がかかるが、いつかは修正が終わる。ただ、記事の数が2500、一つの記事に画像が複数の場合も結構ある。ということで、自動修正を試みた。

wp での記事一括修正プラグインとして、Search Regex が有名。何しろ、正規表現が使えるから。しかし、ネットで調べても、earch Regex の正規表現をまともに説明するところはあまりにも少ない。ゴミ記事のオンパレードだからね、ネットは。

最終的に、トライアンドテストで以下のように使うことにした。結果オーケー。

  1. rel=”lightbox” の削除。
    正規表現は必要なく、ヌル文字で置き換えれば済む。
  2. assets_c/2013/05 の置換。
    正規表現
    Search pattern: #assets_c/\d+/\d+#
    Replace pattern; img
  3. -thumb-510×486-1487 の削除。
    正規表現
    Search pattern: #-thumb-\d+x\d+-\d+.#
    Replace pattern: .

また、上の例と関係ないが、Search pattern に ( ) をつけることによって、その部分を Replace pattern で再利用することもできる。

Search pattern: #daily/img/([\d]+)-([\d]+)-([\d]+).html#
Replace pattern: daily/img/$1-$2.jpg
Result: daily/img/12-3456-789.html → daily/img/12-3456.jpg

Search pattern: #hobby/img/([\d]+)-([\d]+).html#
Replace pattern: hobby/img/$1.jpg
Result: hobby/img/1234-789.html → hobby/img/1234.jpg