ブログシステムを 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点。
- rel=”lightbox” を削除
- assets_c/2013/05 を img に置き換え
- -thumb-510×486-1487 を削除
手動でやるのであれば、時間がかかるが、いつかは修正が終わる。ただ、記事の数が2500、一つの記事に画像が複数の場合も結構ある。ということで、自動修正を試みた。
ｗｐ での記事一括修正プラグインとして、Search Regex が有名。何しろ、正規表現が使えるから。しかし、ネットで調べても、earch Regex の正規表現をまともに説明するところはあまりにも少ない。ゴミ記事のオンパレードだからね、ネットは。
最終的に、トライアンドテストで以下のように使うことにした。結果オーケー。
- rel=”lightbox” の削除。
正規表現は必要なく、ヌル文字で置き換えれば済む。 - assets_c/2013/05 の置換。
正規表現
Search pattern: #assets_c/\d+/\d+#
Replace pattern; img - -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