企業サイトをWordPressで構築する場合、例えば
「TOPページにニュースを5件、製品情報を3件、導入事例記事を3件出力する」
というカスタマイズを頻繁に行うのではないでしょうか。
ニュースや製品情報、導入事例などの記事をカテゴリで管理している場合はカテゴリ別に記事を指定件数取得して出力するという処理を行いますが、これを「画像付き」で出力するとなると少し厄介ですね。
「そもそも記事に画像がアップロードされているかどうか？」などの諸条件を考慮した上で、しかもサイトに適したレイアウトや画像サイズで表示させる必要があります。
また、ニュースと製品情報で抜粋記事の見せ方が異なる（ニュースはタイトルや本文も要るけど、製品情報は画像だけ出してね！とか）…なんて要望になると…さらに複雑になりますので、今回はその辺りを網羅できるように画像を取得するためのソースコードに加えて、実際にカテゴリ別に出力する際のサンプルコードを合わせて紹介させていただきます。
（１）投稿画像を取得するための下準備
まずは下準備として、記事のタイトル、パーマリンクを取得する方法に加えて、投稿記事に画像があれば1枚目の画像を取得し、画像がなければNO IMAGEなどの固定画像を表示させるという振分処理を行います。※NO IMAGE などの画像は、あらかじめ作ってサーバにアップしておきます。
今回の画像取得処理は、WordPressで記事に含まれる1枚目の画像を抽出する の記事で紹介されていたソースコードを引用させていただき、テーマフォルダ内のfunctions.php に仕込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?php //記事内の画像の1枚目を抽出する function getPostImage($mypost){ if(empty($mypost)){ return(null); } if(ereg('<img([ ]+)([^>]*)src\=["|\']([^"|^\']+)["|\']([^>]*)>',$mypost->post_content,$img_array)){ // imgタグで直接画像にアクセスしているものがある $dummy=ereg('<img([ ]+)([^>]*)alt\=["|\']([^"|^\']+)["|\']([^>]*)>',$mypost->post_content,$alt_array); $resultArray["url"] = $img_array[3]; $resultArray["alt"] = $alt_array[3]; }else{ // 直接imgタグにてアクセスされていない場合は紐づけられた画像を取得 $files = get_children(array('post_parent' => $mypost->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image')); if(is_array($files) && count($files) != 0){ $files=array_reverse($files); $file=array_shift($files); $resultArray["url"] = wp_get_attachment_url($file->ID); $resultArray["alt"] = $file->post_title; }else{ return(null); } } return($resultArray); } ?> |
（２）投稿画像を出力するためのコード
続いてTOPページ用のテーマファイルに、以下の画像出力用のコードを挿入します。|
1 2 3 4 5 6 7 8 9 |
<?php $postImage = getPostImage($post); if($postImage == null){ // 画像が無い場合の処理：No Image画像をセットするなどを記述 echo '<img class="No Image画像のCLASS" src="No Image画像の場所" />'; }else{ // 画像がある場合の処理 echo '<img class="" alt="'.$postImage["alt"].'" src="'.$postImage["url"].'" />'; } ?> |
（３）出力コードサンプル
あとはTOPページ用のテーマファイル内で、カテゴリ別に（２）のソースコードを落とし込めば終了です。例えばカテゴリID1のニュース記事を画像付きで10件取得して出力する場合は、以下のようになります。
※記事のタイトルや本文、パーマリンクも取得しますので、カテゴリ別の記事取得の処理も合わせて行います。
また、本サンプルでは記事本文を150文字で文字制限して出力する形にしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php //カテゴリID 1のニュース記事 を 10件出力 query_posts($query_string); $posts = get_posts('numberposts=10&category=1'); global $post; if($posts): foreach($posts as $post): setup_postdata($post); ?> <h1><?php the_title(); ?></h1> <p><a href="<?php the_permalink() ?>" rel="bookmark"> <?php $postImage = getPostImage($post); if($postImage == null){ /// 画像が無い場合の処理：No Image画像をセットするなどを記述 echo '<img class="imgNoimage" src="No Image画像の場所" />'; }else{ // 画像がある場合の処理 echo '<img class="imgNews" alt="'.$postImage["alt"].'" src="'.$postImage["url"].'" />'; } ?> </a></p> <p><?php echo mb_substr(strip_tags($post-> post_content), 0, 150); ?>…</p> <?php endforeach; endif;?> |
次に、カテゴリID5の製品情報を画像付きで5件取得して出力する場合です。
こちらは、タイトルや記事本文は出力しないパターンです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php //カテゴリID 5の製品情報 を 5件出力 query_posts($query_string); $posts = get_posts('numberposts=5&category=5'); global $post; if($posts): foreach($posts as $post): setup_postdata($post); ?> <p><a href="<?php the_permalink() ?>" rel="bookmark"> <?php $postImage = getPostImage($post); if($postImage == null){ /// 画像が無い場合の処理：No Image画像をセットするなどを記述 echo '<img class="imgNoimage" src="No Image画像の場所" />'; }else{ // 画像がある場合の処理 echo '<img class="imgProduct" alt="'.$postImage["alt"].'" src="'.$postImage["url"].'" />'; } ?> </a></p> <?php endforeach; endif;?> |
記事に画像が無い場合に表示させるNO IMAGE 画像もカテゴリ別に用意することが可能です。
また、class=”imgNoimage”、class=”imgNews”、class=”imgProduct”…のように、画像にカテゴリ別のクラスを与えてあげることでCSSでのレイアウト制御も容易になります。
固定ページ以外のアーカイブ、カテゴリ、タグ別の記事一覧ページなどにも利用できますので、結構便利だと思います。
コメント