たなブログ WordPress入門講座

記事一覧を見やすく改良

WordPress入門

Tweet

　現在のテーマのままだと、記事一覧にすべての記事の情報が書かれていますので表示しているページが長くなりすぎてしまいちょっと不便です。

ですので、記事一覧には、1つの記事につき1枚のサムネイル画像と記事の内容の抜粋のみの最低限を表示することで、一覧自体を見やすいように改良します。

記事の一覧のデザインを整える

　まずは、記事一覧のデザインを整えます。記事ごとにサムネイル画像を設定するには、WordPressの「アイキャッチ画像」という機能が適しています。

まずは、functions.phpで、「アイキャッチ画像」の機能を有効にします。以下の記述を追記してください。
functions.php //アイキャッチ画像 add_theme_support('post-thumbnails'); set_post_thumbnail_size(150, 150, true); // 自動生成する画像サイズ add_image_size('mini50', 50, 50, true); add_image_size('mini100', 100, 100, true); //概要（抜粋）の省略記号 function my_excerpt_more($more) { return '…'; } add_filter('excerpt_more', 'my_excerpt_more'); //概要（抜粋）の文字数 function my_excerpt_mblength($length) { return 90; } add_filter('excerpt_mblength', 'my_excerpt_mblength');

 　コレでアイキャッチ画像が使えるようになります。ついでにオプションでサムネイル画像のサイズも
 50×50、100×100、150×150を利用できるようにしています。
それと概要（抜粋）についての文字数などのオプションも追加しています。 

続いて記事リストのデザインを整えます。一覧リスト用に新しいcontent.phpを作ります。
content.phpをコピーして、content-itiran.phpと名前を変更しましょう。そして、作ったファイルを
FTPでテーマの中にアップしてください。 

続いて、作った content-itiran.phpの内容をhome.phpで使うようにhome.phpの内容を修正します。

home.php <?php if(have_posts()): while(have_posts()): the_post(); ?> <?php get_template_part('content','itiran'); ?> <?php endwhile; endif; ?>

上のように＜？php get_template_part(‘content’)；？＞の部分を
＜？php get_template_part(‘content’,”itiran”)；？＞ という風に変更します。

このようにすることで、home.phpで読み込まれるファイルがcontent.phpからcontent-itiran.phpに
変更されます。 

そして、content-itiran.phpを修正します。以下の記述をにすべて書き換えてください。

content-itiran.php <div class="post"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p class="postcat"><?php the_category(' '); ?></p> <p class="thumb"> <?php if(has_post_thumbnail()): ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a> <?php else: ?> <a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/image/no_image.jpg" alt="No Image" width="150" height="150" /></a> <?php endif; ?> </p> <?php the_excerpt(); ?> <p class="more"><a href="<?php the_permalink(); ?>">続きを読む</a></p> <p class="postinfo"> <?php echo get_the_date(); ?> </p> </div>​

このようにサムネイルと概要のみ表示するような記述に変更します。
 

 後は、style.cssでデザインを整えれば完了です。cssに以下の記述を追記してください。

style.css /* サムネイル画像 */ div.post p.thumb {float: left; margin: 0 10px 10px 0} /* 続きを読む */ div.post p.more {margin: 0; font-size: 0.625em} div.post p.more a {border: solid 1px #aaaaaa; color: #333333; padding: 3px} div.post p.more a:hover {background: #f7e29e} ul.post {list-style-type: none; margin: 0; padding: 0; border-top: dotted 1px #aaaaaa} ul.post li {border-bottom: dotted 1px #aaaaaa; background-image: url(image/chip.png); background-repeat: no-repeat; background-position: left center; padding: 15px 0 15px 20px} ul.post li a {color: #000000} ul.post li span {font-size: smaller; color: #888888}

これで完了です。

 アイキャッチ画像と概要（抜粋）の設定をする

　以上で、記事一覧を見やすく改良できました。更新してトップページを見てみてください。
 　現在は、まだアイキャッチ画像を設定していませんので、サンプルファイルのno_image.jpgが
表示されています。概要も、記事の内容がそのまま表示されています。

記事ごとに設定してみましょう。「投稿の編集」ページで、以下のように表示オプションを選択して
「アイキャッチ画像」と「抜粋」にチェックを入れてください。

　チェックを入れることで、投稿の編集に「抜粋」と「アイキャッチ画像」の項目が表示されます。

　アイキャッチ画像は、画像の挿入と同じような要領で登録してます。
アイキャッチ画像と抜粋を登録したら、確認してみましょう。

このように変更することができます。すべての記事に登録していきましょう。

カテゴリー一覧と過去ログ一覧も改良する

　カテゴリー一覧と過去ログ一覧も同じように修正していきましょう。
 まずは、カテゴリーからです。category.phpを修正します。以下の記述のように修正してください。 

category.php <?php if(have_posts()): while(have_posts()): the_post(); ?> <?php get_template_part('content','cate'); ?> <?php endwhile; endif; ?>

上のように＜？php get_template_part(‘content’)；？＞の部分を
＜？php get_template_part(‘content’,”cate”)；？＞ という風に変更します。

このようにすることで、category.phpで読み込まれるファイルがcontent.phpからcontent-cate.phpに
変更されます。 

そして、content-cate.phpを追加します。以下の記述のファイルを作ってFTPでアップしてください。 

content-cate.php <div class="post"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p class="postcat"><?php the_category(' '); ?></p> <p class="thumb"> <?php if(has_post_thumbnail()): ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a> <?php else: ?> <a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/image/no_image.jpg" alt="No Image" width="150" height="150" /></a> <?php endif; ?> </p> <?php the_excerpt(); ?> <p class="more"><a href="<?php the_permalink(); ?>">続きを読む</a></p> <p class="postinfo"> <?php echo get_the_date(); ?> </p> </div>

　続いて過去ログ一覧です。date.phpを修正します。以下の記述のように修正してください。  

date.php <ul class="post"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <?php get_template_part('content','kako'); ?> <?php endwhile; endif; ?> </ul>

上のように＜？php get_template_part(‘content’)；？＞の部分を
＜？php get_template_part(‘content’,”kako”)；？＞ という風に変更します。

このようにすることで、date.phpで読み込まれるファイルがcontent.phpからcontent-kako.phpに
変更されます。 

そして、content-kako.phpを追加します。以下の記述のファイルを作ってFTPでアップしてください。 

content-kako.php <li> <?php if(has_post_thumbnail()): ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('mini50'); ?></a> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/image/no_image.jpg" alt="No Image" width="50" height="50" /> <?php endif; ?> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span>（<?php echo get_the_date(); ?>）</span> </li>

 これで完了です。記事一覧を見やすく改良しました。

 コレで基礎の入門講座は終了です。続いてWordPressのカスタマイズの方法を勉強していきましょう。
 

登録タグ: wordpress　・ WordPress入門講座　・ アイキャッチ　・ サムネイル　・ 抜粋　 | 2012年4月27日