2010/1/16に行ったWordPress初心者向けの勉強会プレゼンテーションです。

1. WordPressカスタマイズ同一カテゴリの投稿を一覧表示する 2010/1/16 フリーランスシステムエンジニア 上村 崇

2. プレゼンの主旨

3. 単一記事の投稿 before

4. after カテゴリが同じ投稿の タイトルを表示する！

5. さらに

6. 投稿の中に使われている画像を アイコンとして表示する！

7. after before

8. Step2: 画像サムネイルを追加 Step1: 同一カテゴリの投稿一覧を 表示する

9. Step1: 同一カテゴリの投稿一覧を表示する

10. default 単一投稿のテンプレート

11. single.php どこにコードを入れる？ <?phpget_header();?> <?phpif ( have_posts() ) : ?> <?phpwhile (have_posts()) : the_post(); ?> <?phpprevious_post_link();?> <?phpnext_post_link();?> <h2><?phpthe_title(); ?></h2> <?phpthe_content(); ?> <?phpwp_link_pages(); ?> <?phpthe_tags(); ?> <?phpcomments_template();?> <?phpendwhile;?> <?phpendif; ?> <?phpget_footer();?>

12. single.php どこにコードを入れる？ <?phpget_header();?> <?phpif ( have_posts() ) : ?> <?phpwhile (have_posts()) : the_post(); ?> <?phpprevious_post_link();?> <?phpnext_post_link();?> <h2><?phpthe_title(); ?></h2> <?phpthe_content(); ?> <?phpwp_link_pages(); ?> <?phpthe_tags(); ?> <?phpcomments_template();?> <?phpendwhile;?> <?phpendif; ?> <?phpget_footer();?>

13. 仕様 投稿記事と同じカテゴリの記事を 新しい投稿から順に5件分のタイトルを リスト表示する

14. 仕様 投稿記事と同じカテゴリの記事を 新しい投稿から順に5件分のタイトルを リスト表示する 実装 ・同一カテゴリ(ドラゴンボール)のポストを取り出す (最新5件分を日付降順で取ってくる) ・5件分ループする ・リンク先URLも必要

15. しかし、ドラゴンボールにもAKB48にも分類される記事が存在する！ (1つの記事にカテゴリは複数設定できる)

16. ということはこうでなければならない！

17. 仕様 投稿記事と同じカテゴリの記事を 新しい投稿から順に5件分のタイトルを リスト表示する 実装 ・同一カテゴリ(複数の場合あり)のポストを取り出す (カテゴリ毎に最新5件分を日付降順で取ってくる) ・1カテゴリにつき5件分ループする ・リンク先URLも必要

18. single.php 完成図(抜粋) <h2>同じカテゴリーの一覧</h2> <?php $cats= get_the_category(); foreach($cats as $cat) : ?> <h2> <ahref="<?php echo get_category_link($cat->cat_ID); ?>"> <?phpecho $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=post_date&order=DESC"); foreach($cposts as $cpost) : ?> <li> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> <?phpendforeach; ?> </ul> <?phpendforeach; ?> 細かく見ていきます->

19. single.php <h2>同じカテゴリーの一覧</h2> <?php $cats= get_the_category(); foreach($cats as $cat) : ?> <h2> <ahref="<?php echo get_category_link($cat->cat_ID); ?>"> <?phpecho $cat->name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=date&order=DESC"); foreach($cposts as $cpost) : ?> <li> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> <?phpendforeach; ?> </ul> <?phpendforeach; ?> カテゴリ情報を取得する

20. single.php <h2>同じカテゴリーの一覧</h2> <?php $cats= get_the_category(); foreach($cats as $cat) : ?> <h2> <ahref="<?php echo get_category_link($cat->cat_ID); ?>"> <?phpecho $cat->name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=date&order=DESC"); foreach($cposts as $cpost) : ?> <li> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> <?phpendforeach; ?> </ul> <?phpendforeach; ?> 1行ずつ処理する $cats ← $cat ← $cat

21. single.php <h2>同じカテゴリーの一覧</h2> <?php $cats= get_the_category(); foreach($cats as $cat) : ?> <h2> <ahref="<?php echo get_category_link($cat->cat_ID); ?>"> <?phpecho $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=date&order=DESC"); foreach($cposts as $cpost) : ?> <li> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> <?phpendforeach; ?> </ul> <?phpendforeach; ?> $cat->cat_ID $cat->cat_name

22. single.php <h2>同じカテゴリーの一覧</h2> <?php $cats= get_the_category(); foreach($cats as $cat) : ?> <h2> <ahref="<?php echo get_category_link($cat->cat_ID); ?>"> <?phpecho $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=date&order=DESC"); foreach($cposts as $cpost) : ?> <li> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> <?phpendforeach; ?> </ul> <?phpendforeach; ?>

23. single.php <h2>同じカテゴリーの一覧</h2> <?php $cats= get_the_category(); foreach($cats as $cat) : ?> <h2> <ahref="<?php echo get_category_link($cat->cat_ID); ?>"> <?phpecho $cat->name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=post_date&order=DESC"); foreach($cposts as $cpost) : ?> <li> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> <?phpendforeach; ?> </ul> <?phpendforeach; ?> 条件に合う記事を取得 category = $cat->cat_IDカテゴリID numberposts = 55件 orderby = post_date日付順 order = DESC 降順

24. single.php <h2>同じカテゴリーの一覧</h2> <?php $cats= get_the_category(); foreach($cats as $cat) : ?> <h2> <ahref="<?php echo get_category_link($cat->cat_ID); ?>"> <?phpecho $cat->name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=post_date&order=DESC"); foreach($cposts as $cpost) : ?> <li> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> <?phpendforeach; ?> </ul> <?phpendforeach; ?> get_posts関数によりpostsテーブルのデータを取得できる $cposts

25. single.php <h2>同じカテゴリーの一覧</h2> <?php $cats= get_the_category(); foreach($cats as $cat) : ?> <h2> <ahref="<?php echo get_category_link($cat->cat_ID); ?>"> <?phpecho $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=date&order=DESC"); foreach($cposts as $cpost) : ?> <li> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> <?phpendforeach; ?> </ul> <?phpendforeach; ?>

26. single.php 完成図 <h2>同じカテゴリーの一覧</h2> <?php $cats= get_the_category(); foreach($cats as $cat) : ?> <h2> <ahref="<?php echo get_category_link($cat->cat_ID); ?>"> <?phpecho $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=post_date&order=DESC"); foreach($cposts as $cpost) : ?> <li> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> <?phpendforeach; ?> </ul> <?phpendforeach; ?>

27. Step2: 画像サムネイルを表示する

28. single.php どこにコードを追加する？ <h2>同じカテゴリーの一覧</h2> <?php $cats= get_the_category(); foreach($cats as $cat) : ?> <h2> <ahref="<?php echo get_category_link($cat->cat_ID); ?>"> <?phpecho $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=post_date&order=DESC"); foreach($cposts as $cpost) : ?> <li> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> <?phpendforeach; ?> </ul> <?phpendforeach; ?>

29. single.php <h2>同じカテゴリーの一覧</h2> <?php $cats= get_the_category(); foreach($cats as $cat) : ?> <h2> <ahref="<?php echo get_category_link($cat->cat_ID); ?>"> <?phpecho $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=post_date&order=DESC"); foreach($cposts as $cpost) : ?> <li> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> <?phpendforeach; ?> </ul> <?phpendforeach; ?>

30. やること１ ・各記事に埋め込まれた画像を取ってくる (ただし1つずつ) 1記事に複数の画像がある場合は、 ”最初に投稿された画像” (=登録日付がもっとも古い画像) を取ってくることにする。

31. やること２ ・画像をリサイズしてサムネイルサイズ にする 簡単のため、 サムネイル画像を新規作成するのではなく、 元画像の表示サイズを小さくして表示するだけにする。

32. やること３ ・記事の中に画像が無かった場合は？

33. single.php <h2>同じカテゴリーの一覧</h2> <?php $cats= get_the_category(); foreach($cats as $cat) : ?> <h2> <ahref="<?php echo get_category_link($cat->cat_ID); ?>"> <?phpecho $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=post_date&order=DESC"); foreach($cposts as $cpost) : ?> <li> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> <?phpendforeach; ?> </ul> <?phpendforeach; ?> 抜粋

34. single.php <li> <?php $img=get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?phpif($img): ?> <?php $meta=wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width= 100; $height=$meta['height'] * ( 100 /$meta['width'] ); }else{ $width =$meta['width'] * ( 100 /$meta['height'] ); $height= 100; } ?> <imgsrc="<?phpecho $img[0]->guid?>" width="<?php echo $width?>“ height="<?php echo $height ?>"> <?phpelse:?> <imgsrc="http://toyao.net/wordpress2/noimage.jpg"> <?phpendif;?> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li>

35. single.php <li> <?php $img=get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?phpif($img): ?> <?php $meta=wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width= 100; $height=$meta['height'] * ( 100 /$meta['width'] ); }else{ $width =$meta['width'] * ( 100 /$meta['height'] ); $height= 100; } ?> <imgsrc="<?phpecho $img[0]->guid?>" width="<?php echo $width?>“ height="<?php echo $height ?>"> <?phpelse:?> <imgsrc="http://toyao.net/wordpress2/noimage.jpg"> <?phpendif;?> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> 画像情報を取ってくる サムネイルサイズの計算 をして画像表示 画像が無いとき

36. single.php <li> <?php $img=get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?phpif($img): ?> <?php $meta=wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width= 100; $height=$meta['height'] * ( 100 /$meta['width'] ); }else{ $width =$meta['width'] * ( 100 /$meta['height'] ); $height= 100; } ?> <imgsrc="<?phpecho $img[0]->guid?>" width="<?php echo $width?>“ height="<?php echo $height ?>"> <?phpelse:?> <imgsrc="http://toyao.net/wordpress2/noimage.jpg"> <?phpendif;?> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> 画像情報もget_posts関数で取ってこれる post_parent = $cpost->ID親投稿ID post_type = attachment添付 numberposts = 1 1件 orderby = post_date日付順 order = ASC 昇順 サムネイルサイズの計算 $img ← $img[0] 画像が無いとき

37. single.php <li> <?php $img=get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?phpif($img): ?> <?php $meta=wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width= 100; $height=$meta['height'] * ( 100 /$meta['width'] ); }else{ $width =$meta['width'] * ( 100 /$meta['height'] ); $height= 100; } ?> <imgsrc="<?phpecho $img[0]->guid?>" width="<?php echo $width?>“ height="<?php echo $height ?>"> <?phpelse:?> <imgsrc="http://toyao.net/wordpress2/noimage.jpg"> <?phpendif;?> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> サムネイルサイズの計算 をして画像表示 画像が無いとき

38. single.php 画像のメタ情報を取得 $meta <li> <?php $img=get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?phpif($img): ?> <?php $meta=wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width= 100; $height=$meta['height'] * ( 100 /$meta['width'] ); }else{ $width =$meta['width'] * ( 100 /$meta['height'] ); $height= 100; } ?> <imgsrc="<?phpecho $img[0]->guid?>" width="<?php echo $width?>“ height="<?php echo $height ?>"> <?phpelse:?> <imgsrc="http://toyao.net/wordpress2/noimage.jpg"> <?phpendif;?> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> $meta[‘width’] $meta[‘height’] 画像が無いとき

39. single.php 画像のメタ情報を取得 $meta <li> <?php $img=get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?phpif($img): ?> <?php $meta=wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width= 100; $height=$meta['height'] * ( 100 /$meta['width'] ); }else{ $width =$meta['width'] * ( 100 /$meta['height'] ); $height= 100; } ?> <imgsrc="<?phpecho $img[0]->guid?>" width="<?php echo $width?>“ height="<?php echo $height ?>"> <?phpelse:?> <imgsrc="http://toyao.net/wordpress2/noimage.jpg"> <?phpendif;?> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> $meta[‘width’] $meta[‘height’] 最大100pxになるように縦横のサイズを決める。 横長画像のとき ->横サイズが100pxの サムネイル 縦長画像のとき ->縦サイズが100pxの サムネイル 画像が無いとき

40. single.php 画像のメタ情報を取得 $meta <li> <?php $img=get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?phpif($img): ?> <?php $meta=wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width= 100; $height=$meta['height'] * ( 100 /$meta['width'] ); }else{ $width =$meta['width'] * ( 100 /$meta['height'] ); $height= 100; } ?> <imgsrc="<?phpecho $img[0]->guid?>" width="<?php echo $width?>“ height="<?php echo $height ?>"> <?phpelse:?> <imgsrc="http://toyao.net/wordpress2/noimage.jpg"> <?phpendif;?> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> $meta[‘width’] $meta[‘height’] 最大100pxになるように縦横のサイズを決める。 横長画像のとき ->横サイズが100pxの サムネイル 縦長画像のとき ->縦サイズが100pxの サムネイル 画像が無いとき

41. single.php <li> <?php $img=get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?phpif($img): ?> <?php $meta=wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width= 100; $height=$meta['height'] * ( 100 /$meta['width'] ); }else{ $width =$meta['width'] * ( 100 /$meta['height'] ); $height= 100; } ?> <imgsrc="<?phpecho $img[0]->guid?>" width="<?php echo $width?>“ height="<?php echo $height ?>"> <?phpelse:?> <imgsrc="http://toyao.net/wordpress2/noimage.jpg"> <?phpendif;?> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> 画像が無いとき

42. single.php <li> <?php $img=get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?phpif($img): ?> <?php $meta=wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width= 100; $height=$meta['height'] * ( 100 /$meta['width'] ); }else{ $width =$meta['width'] * ( 100 /$meta['height'] ); $height= 100; } ?> <imgsrc="<?phpecho $img[0]->guid?>" width="<?php echo $width?>px“ height="<?php echo $height ?>px"> <?phpelse:?> <imgsrc="http://xxx.xxx/noimage.jpg"> <?phpendif;?> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li> 代替画像を表示する

43. single.php 完成！ <li> <?php $img=get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?phpif($img): ?> <?php $meta=wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width= 100; $height=$meta['height'] * ( 100 /$meta['width'] ); }else{ $width =$meta['width'] * ( 100 /$meta['height'] ); $height= 100; } ?> <imgsrc="<?phpecho $img[0]->guid?>" width="<?php echo $width?>px“ height="<?php echo $height ?>px "> <?phpelse:?> <imgsrc="http://xxx.xxx/noimage.jpg"> <?phpendif;?> <ahref="<?php echo get_page_link($cpost->ID); ?>"> <?phpecho $cpost->post_title; ?> </a> </li>

44. あとはCSSを調整してインデントとかセンタリングとかしてください。 完