毎日モザイク

http://mainichi.jp/enta/art/news/20090503k0000m040102000c.html

さよなら、キヨシロー。

MD Comics Neoのページですが、やっつけ風味の仕様になっていた、画像のタグ入れ部分を、爆乳様（仮名）の負担を軽減するためと、ミスする隙を埋めるために、仕様変更しました。

取り合えず要求仕様を満たすために、それぞれのサイズのタグをカスタムフィールドに入れるという、非常に回りくどい手順になっていましたが、その部分をこちらとこちらを参考にして、勝手にやってくれるようにしました。もはや、「投稿に挿入」すら必要ありませんw。

/* functions.php*/
function get_the_post_image($postid,$size,$order=0,$max=null) {
    $attachments = get_children(array(
                                    'post_parent' => $postid,
                                    'post_type' => 'attachment',
                                    'post_mime_type' => 'image'
                                    ));
    if ( is_array($attachments) ){
        foreach ($attachments as $key => $row) {
            $mo[$key]  = $row->menu_order;
            $aid[$key] = $row->ID;
        }
        array_multisort($mo, SORT_ASC,$aid,SORT_ASC,$attachments);
        $max = empty($max)? $order+1 :$max;
        
        for($i=$order;$i<$max;$i++){
            $the_image = $attachments&#91;$i&#93;;
            $attachmenturl = wp_get_attachment_url($the_image->ID);
            $attachmentimage = wp_get_attachment_image($the_image->ID, $size );
            $img_title = $the_image->post_title;
            $img_desc = $the_image->post_excerpt;
            $img_alt = $the_image->post_name;
            
            if ($size == "thumbnail" || $size == "medium"){
                $attachmentimage = preg_replace('/class="attachment.*?"/','class="alignright size-'.$size.'"',$attachmentimage);//CSSに合わせるため
                 $attachmentimage = preg_replace('/alt=".*?"/','alt="'.attribute_escape($img_alt).'"',$attachmentimage);//altが直接拾えないので
                echo '<a href="'.clean_url($attachmenturl).'" rel="lightbox&#91;'.get_the_ID().'&#93;" title="'.attribute_escape($img_title).'">'.$attachmentimage.'</a>';
            } elseif($size == "large") {
                $attachmentimage = preg_replace('/class="attachment.*?"/','class="alignright size-'.$size.'"',$attachmentimage);
                 $attachmentimage = preg_replace('/alt=".*?"/','alt="'.attribute_escape($img_alt).'"',$attachmentimage);
                echo $attachmentimage;
            } else {
                echo '<img src="'.clean_url($attachmenturl).'">';
            }
            
        }
        
    }
    
}
/* index.phpなどでの呼び出し部分*/
<?php  get_the_post_image(get_the_ID(), 'thumbnail', 0, 1); ?>
/* get_the_post_image($post_id, $size, $order, $max)
$post_id= 記事ID
$size = 画像のサイズ（thumbnail,medium,large,full)
$order = ギャラリーでの順番
$max = $orderから何枚使うか
*WebTecNoteさんより拝借。*
*/

WebTecNoteさんから、記事に添付された画像をソートする部分を拝借して、Forumからデータを拾う部分をいただいて、くっつけただけのものですが……。

これで、扉ページと、個別ページと、リストページに、それぞれ、何もせずに予定どおりの画像が入るようにできました。

先人の皆さんに感謝。

MDComicxNeoのホームページが開店しました。

今後も、ちまちま、小変更をすると思いますが、なんとかかんとか。

ただ、旧世代環境はざっくり無視したので、古い環境だとほとんどどうにもなってません（OS9のIEとか悲惨）。

画像表示に非標準な方法を使っているので、プラグインで出しているケータイ向けでは、文字情報しか見られませんが、その辺は改造していく予定です。

本日夕方公開予定です。

昼間、バックナンバーを詰められるだけ詰めてから、営業のみなさんに内容の確認をしていただいて、校正が通ったらオープンです。

明日発売のエッチな感じのコミックスがあるので、是非、本日中に公開したいところです。

で、昨日から、機能の追加とか、要求どおりに詰め込んで、屋上屋を重ねた感じになってしまったCSSの整理とか、この期に及んで、もっともシェアがあるIEでの表示確認とかw。

で、FirefoxとOperaとSafariなんていう、意味不明な選択で表示を確認していたものですから（Lolifoxと、Caminoも試しましたけどw）、当然のように表示がグダグダw。

グダグダって言うより、どうにもならないグチョグチョなグデグデでした。

ただ、ひたすらに生成されたHTMLを追って、崩れているところが無いかとか確認しましたが、概ね良好。表示されないようなところはありませんでした。

んで、一番怪しいCSSを追ってみたんですが、一見、変なところは見つからない。

まぁ、HTML方面の方なら瞬殺でしょうが、スペースが一個足りなかったっていうオチでしたorz。

backgroundの指定で、Gecko系のブラウザは、

background: url('example/example.gif')repeat;
/* syntax highliterの高さが足りないのでコメント */
/* 最低4行くらいは必要 */
/* これは盲点だったw。ワンライナーが書けない（滅多に書かないけど） */

って書いても、何事も無かったかのように表示しますが、IEだと、)とrepeatの間にスペースが無いとダメみたいです。

それも、なんとか解消して、最後に残った敵はMac版Firefox。

CSSはハックしちゃあかんらしいので、どれで表示しても大きくは崩れない折衷案的なサイズにすることで逃げw。よくある環境では、なんとなく同じような感じに表示されるようになりました。

その後、更に追加したプラグインは、ページナビケーションを番号表示にするWP-PageNavi。これを入れて、テンプレートに、

<?php if(function_exists('wp_pagenavi')) : ?>
<?php wp_pagenavi(); ?> /* これがPageNavi* /
<?php else : ?> 
/*　ここにPageNaviを使わないときのナビゲーションを入れる */
<?php endif; ?>

を書いてできあがり。プラグインなんか、入れたら入れっぱなしなんですが、一応、無いときにも表示されるように転ばぬ先の石橋を叩いて壊す感じでw。

会社のMDComicsNEOシリーズのホームページを作ってます。まだやってんのかw。と笑われ風ですが、紙と違って、なかなか諦めがつかないのが人情というものです。

一応、形になったところで、データ入力を始めたんですが、中身が入ってくると、いろいろいじりたくなるのがCMS系の宿命。ダミーデータではいまいち伝わりきらないんですよね……。

で、色々要望を満たすために、プラグインを探して追加したり、テンプレートタグをいじったり、PHP書いたりして、なんとか要求仕様を満たしました。WordPressで遊んできた甲斐があったというものです。

画像は、制作中の画面です。権利的に塩梅が悪そうなところはGIMPでモザイクかけました。

見た目、どうってことない、ありきたりなものですが、トップページには、表紙画像をトリミングしたものがあって、これにはlightboxが仕込んであって、トリミングなしの大きな画像が出るようになっています。

このトリミングされたサムネールはScissorsを使って作っています。

間違いなく同じ大きさになるように、設定→メデイアで、サムネイルのサイズを指定して、下にある、「サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)」にチェック。普通の使い方では非常に鬱陶しい機能ですが、Scissorsと組み合わせて使うと、常に同じ形のサムネイルを好きなようにトリミングして作れるので、便利になります。

と、ここまでは簡単なんですが、「詳細ページへ」っていう地味なボタンをクリックした先は、ふつうに、<!–more–>タグで区切ったpermalinkに飛ぶだけなんですが、飛んだ先では、大きな表紙画像が出したい。他にも、既刊のリスト表示も作ったんですが、そちらは、トリミングなしの小さな表紙画像を並べたい。

これは、デフォルトの機能ではできません。プラグインも探しましたが、いい塩梅のが無くて……。

仕方ないので、画像のリンクをそれぞれ、カスタムフィールドに入れ、Get Custom Field Valuesを使ってイメージタグを生成という手口で、使うテンプレートごとに表示するサムネールを変更するようにしました。

この辺は標準状態で3種類のサムネールを勝手に作ってくれるので、便利です。

トップページは3〜5件だけ表示して、リスト表示は20〜50件ずつ表示したいってことになったので、デフォルトを40件出力（4行＊10列）にして、index.phpに、

<?php $paged = get_query_var('paged'); ?> /* これを忘れると正しく改ページしない */
<?php query_posts('&posts_per_page=5&paged='.$paged);?>
<?php if (have_posts()) :?>

を書いて終了。

ひとまず、動くようにはなっていますが、もちょっとテスト。さらに要求もあるだろうしw