東京都練馬区。Wordpressはおまかせ。印刷・ホームページなど販売促進のためのデザインを提案します。

デザイン事務所ダウンアンダー

営業
10:00-
19:00

WordPressの画像付き記事だけをサムネイル画像付きで表示する。

     2012/11/11   技術ノート   ,  野村貞次

少々、力技なところがありますが、動きましたので公開します。

サンプルは画面右の「PickUp !」です。

考え方は以下の通りです。

  • 全記事からランダムに1つ抽出し、画像が含まれているかチェックする。
  • 画像が含まれていなければ、何回でもランダムに記事を選び直す。
  • 記事数が多く画像付きのものが少ないと、サーバに負担がかかります。
  • 画像付き記事が1つも無い場合、無限ループになります。
  • タイトルと画像をパーマリンク付きで出力する。
  • パーマリンクの代わりに元画像へのリンクを張ることもできます(改造してください)。

以下のコードを表示したいテンプレートに組み込めばOKです。

functions.phpに触ったり、プラグインを入れる必要はありません。

  • <div id=”todaysphoto” class=”sbox”>
  • <ul>
  • <li>PickUp !</li>
  • <?php
  • query_posts(‘orderby=rand&posts_per_page=1’); //ランダムに記事を1つ取得
  • while ( have_posts() ) : the_post(); //ループ開始
  • $args = “post_parent=”.$id.”&post_type=attachment&post_mime_type=image&numberposts=1″; //get_children()のパラメータをセット
  • $images = &get_children( $args ); //変数$imagesに参照渡し
  • if( empty($images) ) { //$imagesが空配列だった場合
  • query_posts(‘orderby=rand&posts_per_page=1’); //query_posts()を再実行してループに戻る
  • continue;
  • } else {
  • foreach ( $images as $attachment_id => $attachment ) { //配列用ループ
  • echo “<li>”;
  • echo “<a href='”;
  • the_permalink(); //パーマリンク
  • echo “‘>”;
  • the_title(); //タイトル出力
  • echo “</a>”;
  • echo “</li>”;
  • echo “<li style=’padding : 10px; text-align : center;’>”;
  • echo “<a href='”;
  • the_permalink(); //パーマリンク
  • echo “‘>”;
  • echo wp_get_attachment_image( $attachment_id, ‘thumbnail’ ); //サムネイル画像を出力
  • echo “</a>”;
  • echo “</li>”;
  • }
  • }
  • endwhile;
  • wp_reset_query(); //query_posts()をリセット
  • ?>
  • </ul>
  • </div>
     2012/11/11   技術ノート   ,  野村貞次

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

 こちらの記事も読んで見ましょう

WordPressの画像付き記事だけをサムネイル画像付きで表示する。 東京都練馬区。Wordpressはおまかせ。印刷・ホームページなど販売促進のためのデザインを提案します。

Copyright©デザイン事務所ダウンアンダー,2012 All Rights Reserved.

ページ先頭へ