WhiteBOX設定編/(14)Wordpress-2

Last-modified: 2008-06-30 (月) 15:50:20 (5799d)

Wordpressのカスタマイズ †

  • Wordpressを使い始めで、kurasanのwikiの投稿をブログに移植してみました。
    kurasan

  • 画像表示がやけに小さいことが気になります。写真なんか全然ないブログもありますし、とりあえず動きも軽くていいんでしょうが、クラさんのコンテンツに引き込まれるようにブログを立ち上げた者としては、これははなはだ不満でありました。
  • せっかくの画像が、あの大きさでは何とも小さくてよく分からない。クリックすれば大きくなるけど、これもうっとおしいです。詩と写真のサロンですから、両者の連携というかバランスが悪いと、一体的な味わいが損なわれてしまう。過激なようですが、これが私の第一印象でした。ということで、まずこの辺を何とかしたいというのが、カスタマイズの取っ掛かりでした。
  • 具体的には
    1. サムネール画像表示の改善　サイズの拡大がシステムエラーという新たな起問題を引き起こしましたが(^^;)　何とか解決。
    2. オリジナル画像のオーバーレイ表示　いちいち別ウィンドウを開閉しなくてもよくなり、これは重宝！　イメージ掲示板のカスタマイズにまで発展しちゃいました(^^)

こんな試行錯誤プロセスの記録です。(2006年7月18日記)

↑

サムネール画像の拡大 †

  • 画像アップは投稿時に簡単にできます。投稿記事への画像挿入の手順は公式サイトのドキュメントに詳しく紹介されています。 (チョット癖があって慣れるまで迷いますが、まぁ、よぉできてると思います。）
  • アップした画像から、小さなサイズ(128×96ピクセル)のサムネール画像が作成保存されます。保存先は　wp-contentというディレクトリーの配下で、年月ごとに管理されています。 
     /wordpress/wp-content/upload/2006/07/
 　　　　　|-- test.jpg　　　　　　　←オリジナル画像
 　　　　　|-- test.thumbnail.jpg　　 ←サムネール画像
  • また、投稿本文に、以下のような画像リンクを挿入したhtml文が生成されます。

    <a class="imagelink" title="テスト画像" href="http: //kurarinet.com/wordpress/wp-content/uploads/2006/07/test.jpg"> <img id="image27" height="96" alt="テスト画像" src="http: //kurarinet.com/wordpress/wp-content/uploads/2006/07/test.thumbnail.jpg" > </a> </p>|

  • この height="96" が、サムネールの縦サイズの指定です。横サイズは、オリジナルの縦横比に合わせて自動設定されます。これを、例えば height="240" と変更すれば、表示サイズは大きくできるのですが、サムネールの解像度がもともと小さいので、ここから直していかなければなりません。
  • 上記のガイドページに、こんなヒントがありました。

    記事中に表示されるサムネイルのサイズを変更するには wp_shrink_dimensions() 関数と inline-uploading.php を編集しなければならないようです。

  • どこに、この関数があるんじゃろと、ソースをひっくり返して調べました。エディタのグルーバル検索方法なるものを恐る恐る使ってみることになりますが、何とか見つけました。
    • wp-admin/admin-functions.php 
      function wp_shrink_dimensions($width, $height, $wmax = 128, $hmax = 96) {
	if ( $height <= $hmax && $width <= $wmax )
		return array($width, $height);
	elseif ( $width / $height > $wmax / $hmax )
		return array($wmax, (int) ($height / $width * $wmax));
	else
		return array((int) ($width / $height * $hmax), $hmax);
}
    • wp-admin/inline-uploading.php 
      // Save the data
$id = wp_insert_attachment($attachment, $file, $post);

if ( preg_match('!^image/!', $attachment['post_mime_type']) ) {
       // Generate the attachment's postmeta.
       $imagesize = getimagesize($file);
       $imagedata['width'] = $imagesize['0'];
       $imagedata['height'] = $imagesize['1'];
       list($uwidth, $uheight) = get_udims($imagedata['width'], $imagedata['height']);
       $imagedata['hwstring_small'] = "height='$uheight' width='$uwidth'";
       $imagedata['file'] = $file;

       add_post_meta($id, '_wp_attachment_metadata', $imagedata);

       if ( $imagedata['width'] * $imagedata['height'] < 3 * 1024 * 1024 ) {
               if ( $imagedata['width'] > 128 && $imagedata['width'] >= $imagedata['height'] * 4 / 3 )
                       $thumb = wp_create_thumbnail($file, 128);
               elseif ( $imagedata['height'] > 96 )
                       $thumb = wp_create_thumbnail($file, 96);

               if ( @file_exists($thumb) ) {
                       $newdata = $imagedata;
                       $newdata['thumb'] = basename($thumb);
                       update_post_meta($id, '_wp_attachment_metadata', $newdata, $imagedata);
               } else {
                       $error = $thumb;
               }
       }
} else {
       add_post_meta($id, '_wp_attachment_metadata', array());
}
  • 後者は少し長い引用ですが、サムネール画像を作成する条件は、アップした画像が1024×1024以下であり、128×96より大きい場合にサムネールを作成するのだ　と書いてあるように推察されます。
  • しからば、少し大きめだが、320×240くらいあれば画像も見やすくなるだろう、アップサイズも1600×1600程度まで大きくてもサーバのHDDは大丈夫だと勝手に決めて修正に入りました。なお、横縦比は基本的に3:2なので、これは安全のため崩さないでおきました。
  • この結果、修正個所は以下のようになりました。(該当部分のみ)
    • wp-admin/admin-functions.php 
      function wp_shrink_dimensions($width, $height, $wmax = 320, $hmax = 240) {
  • wp-admin/inline-uploading.php 
    if ( $imagedata['width'] * $imagedata['height'] < 3 * 1600 * 1600 ) {
      if ( $imagedata['width'] > 320 && $imagedata['width'] >= $imagedata['height'] * 4 / 3 )
             $thumb = wp_create_thumbnail($file, 320);
      elseif ( $imagedata['height'] > 240)
             $thumb = wp_create_thumbnail($file, 240);
↑

サムネール画像が大きくならない？ †

  • ためしに、何種類か画像をアップロードしてみました。問題なくアップできたのですが、サムネール表示が大きくなりません。保存されたサムネールのサイズをチェックしてみると、これは確かに大きくなっています。これは ？？？
  • ブラウザの「ソースを表示」をチェックすると、依然として、height="96" なる縦サイズ指定が付いている。これはどこで処理してるんだろ？？　の探索は後回しにして、とりあえずhtmlエディタで削除したら作成サイズの240×320で表示された。サイズをし直してもいいわけで、多少手間だが、まぁ一応解決ということに。
↑

致命的なエラーが発生。。。 †

  • サイズの大きな画像をアップしてみると、恐ろしいことにエラーが出た。当然、サムネールは生成されない。 
    Fatal error: Allowed memory size of 8388608 bytes exhausted  
(tried to allocate 3780 bytes)
in /var/www/html/wordpress/wp-admin/admin-functions.php on line 726
  • 何だ、これは？　どうしょう！！　というわけで3日ほど人知れず悩みました(^^;)
  • そのうち、kurasanがアップした画像でもサムネールができない事例が発生しました。同じ画像を 90％縮小してみるとアップOKになるので、この問題がまた出たかと青くなりました。
  • 気を取り直して、Googleでエラーメッセージをキーワードにして検索したら一発。レンタルサーバの会社のユーザ向けのFAQ記事ですが、そのものズバリでした。

    弊社がご提供させていただいているPHP のパッケージでは、標準で8MB (8byte*1024*104=8388608 bytes)までのメモリを割り当てられるようになっております。
    このエラーメッセージはこの制限値を超える割り当てを要求した場合に出されるエラーメッセージです。お客様による /etc/php.ini の書き換えによって割当量を変更させることが可能です。

    vi /etc/php.ini
-----------------------------------------------
最大実行時間を60秒、メモリ制限を12MBに変更する例:
◆変更前
max_execution_time = 30 ; Maximum execution time of each script, in seconds
memory_limit = 8M ; Maximum amount of memory a script may consume (8MB)

◆変更後
max_execution_time = 60
memory_limit = 12M
  • 皆さん同じように悩んでるんだというわけで、ほっとしながらメモリー割り当ては32Mとたっぷり割り当てて、無事解決(^^)
  • サイズ問題は一応解決しました。大きいサイズの画像もアップできますが、ディスプレイをはみ出すとスライドしないと見れなくなるので、一応、見易さという点では収まる程度の大きさがよろしいかなと思ったが、この課題はオーバレイ表示で解決できました。
↑

Lightboxでオーバレイ表示に †

  • さて、サイズが解決すると、また欲が出ます。別ウィンドウが開くのが気になりだしました。Wordpress系のブログをいろいろ巡回してみると、画像関係は結構関心事になっていて、種々のツールが紹介されてます。
  • 画像のアップ時にサムネールサイズを自由に指定できるようにする「IImage Browse」という本格ツールもありましたが、これはインストールがたいへんみたいであきらめて、お手軽ツールを試してみました。
  • 「Lightbox」というツールがあり、これは画像表示を同じオリジナル画面上で重ねて拡大表示するものです。多彩な機能追加やデザイン改良が行われて、どれがオリジナルなのかよくわからないほどの状況です。いろいろ試してみましたが、最終的に採用したのは、wp-lightbox0.5plus で、こちらからダウンロードしたものです。
  • 特長は、
    • デザインがシンプルであまりゴテゴテしていない
    • 操作性がよく、どこをクリックしても閉じるので、マウスを余分に動かさなくてよい
    • Wordpress用のプラグイン対応で、インストールが簡単至極！
  • さらにバージョンアップして、オリジナル画像が大きくてブラウザに収まらない場合も、表示サイズを自動調整する機能も付いたバージョンです。拡大縮小ボタンもあるので、必要ならアップで見てくださいというわけです。これで万全ですわ。

    　　　overlay

↑

Wordpressのプラグイン機能 †

  • Wordpressの特徴の一つにプラグイン機能があり、機能拡張が極めて簡単にできる仕掛けがあります。
  • 種々のアプリがプラグイン形式で提供されており、Wordpress配下の指定ディレクトリ内におくだけでよいのです。 
    wordpress/wp-content/plugins/
　　　|-- lightbox-plugin.php　　　 ← plugin対応PHP
　　　|-- lightbox-plugin/
　　　　　　｜--lightbox_plus.js    ← Javascript本体
　　　　　　｜--lightbox.css　　　　← スタイルシート
　　　　　　｜--*.gif、*.png　　　　← 各種ボタンイメージ
  • ダウンロードしたファイル一式をサーバにコピーするだけでOK。Wordpress本体が自動的に認識し、管理画面のプラグイン一覧に表示されます。右端の有効/無効のスイッチを押すだけです。

    　　　plugin

  • もともとはJavascriptで動いているもので、これだけhtmlにくっつけてやれば同じことができるんでないかなぁ。。と思いついてイメージ掲示板に応用してみたら、難なく成功！　その詳細は、また別項で。
  • 以上、駆け足でしたが、これで何とか使えってもらえるかなぁという思いであります。
トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   リンク元