会員制記事の購読をご希望されるお客様はコチラより
ログインまたは会員登録してください。

パスワードをお忘れの方はコチラ

新規登録はコチラ

 


wordpressのサイドバーにアイキャッチ画像一覧を表示する

2010 年 12 月 11 日 投稿者: 木村 健一
サムネイル画像(アイキャッチ画像)一覧をサイドバーに表示したいと思っている方へ 記事一覧、記事ページのサイドバーに貼り付ける方法をご紹介します。 プラグインではありませんので、自分でphpファイルをカスタマイズします。 wordpressのサイドバーにアイキャッチ画像一覧を表示する ※wordpressのアイキャッチ画像とは記事に、簡単にサムネイル画像を設定できる機能です。 アイキャッチ画像の設置・投稿方法については、当サイト記事の「wordpressにアイキャッチ(サムネイル)画像を設定する」をご覧ください。

アイキャッチ画像+ランダム記事一覧を実装する

以下、当サイトのサイドバー、「おススメ記事」として実際に実装した方法です。
ランダムで記事タイトルを表示する方法は、「22のWordPress カスタマイズ ハック」さんのサイトを参考にさせていただきました。

■sidebar.phpを編集する(記事一覧のサイドバー設定)
<?php
  query_posts(array('orderby' => 'rand' , 'showposts' => 5));//showpostsの数は表示する個数
  if( have_posts() ):
    while( have_posts() ): the_post(); ?>
    <a href="<?php the_permalink() ?>" title="<?php _e('Permanent link to'); <?php the_title(); ?>">
    <?php
     if( has_post_thumbnail() ){
        //アイキャッチ画像が存在する場合はアイキャッチ画像を表示
        the_post_thumbnail( array('280','9999')); //幅固定、高さ自動に設定
     }else{
        //アイキャッチ画像が存在しない場合、タイトルを表示
        the_title();
     }
    ?>
    </a><br /><br />
    <?php endwhile;
  endif;
?>
上で「the_post_thumbnail」で「array(’280′,’9999′)」と設定していますが、
わーどぷれすっ」さんのサイトより、
「この設定では縦か横か長いほうが設定されたサイズまで縮小されるので、もとの画像の縦横比が違えばサムネイルの幅や高さも違ってきます。そこで、例えば高さはばらばらでもかまわないが同じ幅でそろえたい場合は、希望のサイズで幅を設定し、高さに9999など絶対に超えないサイズを設定します。」とあったので高さを「9999」に指定し、wordpress側に自動リサイズしてもらうよう設定してます。

「sidebar-single.php」も「sidebar.php」と同様に処理を加えれば、記事詳細ページ内サイドバーでも表示できます。


無事設定が終わり、確認してみましたが、少し見づらいですね。見栄えが気になる方は、常に画像のデザインに統一性を持たせておくといいかもしれません。


今回の記事で参考にさせていただいたサイト:
22のWordPress カスタマイズ ハックさん
わーどぷれすっさん
トラベローグさん
実装するために探した方法:
■「wordpress アイキャッチ画像 サイド」でGoogle検索

※あくまで参考程度にお願い致します。上記修正により不具合が生じた場合、 当社は一切の責任を負いませんので予めご了承ください。



コメントフォーム

コメントを投稿するにはログインしてください。

現在、この記事へのトラックバックはありません。

トラックバック URL

おススメ記事