あまり書いてこなかったWordPressの記事です。
WordPressに掲載した記事はデフォルトでは掲載順に表示されていくけど、
トップページでカテゴリ単位での新着情報があったらいいなと思って色々調べながら作ってみた。
ようやく記事も増えてきて、自分でもみにくくなってきたのでなんとかしようと思う。
WordPressのアップデートとかで面倒なことにならないようにも考えていこうと思う。
それじゃ久しぶりにPHPいじってみよう。
やりたいこと
- 新着情報１０件を取得して表示する（アイキャッチ付きで）
- 各カテゴリの最新５件を取得して表示する
- トップページにする
- メンテしやすいように１ファイルで何とかする（バックアップとか戻しとか面倒なので）
手順
- page.phpをコピーして「custom_page.php」を作成する
- custom_page.phpをいじる（下記ソース参照）※＜、＞は全角になっているので注意
- 新規で固定ページを作成して、テンプレートに「custom_page」を指定する
- 「設定」→「表示設定」で固定ページを選択する
custom_page.phpをまるごと載せてとくよ！
メンテしやすいように「custom_page.php」だけで済むようにCSSとか、外部関数のファイルとかいじってないよ。
あと、テーマは「Modern Style」を元にしているよ。
＜?php /* Template Name: custom_page */ ?＞ ＜?php get_header(); ?＞ ＜div id="content"＞ ＜?php include_once(TEMPLATEPATH . '/topbanner.php'); ?＞ ＜?php if (have_posts()) : while (have_posts()) : the_post(); ?＞ ＜div class="post clearfix" id="post-＜?php the_ID(); ?＞"＞ ＜h2 class="title"＞＜?php the_title(); ?＞＜/h2＞ ＜div class="entry"＞ ＜?php //------------------------------------ 最新の投稿 10件 ------------------------------------開始 ?＞ ＜table＞＜tr＞＜td＞ ＜h2 class="pagetitle"＞新着 10件＜/h2＞ ＜?php query_posts('showposts=10&posts_per_page=-1&cat=-7'); ?＞ ＜?php while (have_posts()) : the_post(); ?＞ ＜?php // アイキャッチ画像取得 開始 $thumb = get_the_post_thumbnail($post-＞ID,'thumbnail'); $pattern= "/(?＜=src=['|\"])[^'|\"]*?(?=['|\"])/i"; preg_match($pattern, $thumb, $thePath); $theSrc = $thePath[0]; // アイキャッチ画像取得 終了 ?＞ ＜?php // このカテゴリーへのリンクを取得 Start // このカテゴリーの URL を取得 $category_link = get_category_link( $category_id ); // このカテゴリーへのリンクを取得 End ?＞ ＜ul＞ ＜div class="entry"＞ ＜img src="＜?php echo $theSrc; ?＞" class="alignleft post_thumbnail wp-post-image" width="10%" alt="アイキャッチ" /＞ ＜h1 class="title"＞ ＜a href="＜?php the_permalink() ?＞"＞＜?php the_title(); ?＞＜/a＞＜/h1＞ ＜?php //記事の本文を指定文字数取得する ?＞ ＜p＞＜?php echo strip_tags(mb_substr($post-＞post_content, 0, 120)); ?＞....＜/p＞ ＜!-- このカテゴリーへのリンクを出力 続きを見る --＞ ＜div class="readmorecontent"＞ ＜a class="readmore" href="＜?php the_permalink(); ?＞" rel="bookmark" title="＜?php the_title(); ?＞"＞Read More »＜/a＞ ＜/div＞ ＜hr＞ ＜/div＞ ＜/ul＞ ＜?php endwhile;?＞ ＜?php wp_reset_query(); ?＞ ＜/td＞＜/tr＞＜/table＞ ＜?php //------------------------------------ 最新の投稿 10件 ------------------------------------終了 ?＞ ＜?php //------------------------------------ カテゴリ最新の投稿 表示 ----------------------------------------------開始 ?＞ ＜?php //------------------------------------ テーブル2つ横揃え 上 ------------------------------------ ?＞ ＜table＞ ＜tr valign="top"＞ ＜td width="50%"＞ ＜?php //------------------------------------ Debianの投稿 ------------------------------------ ?＞ ＜?php //------------------------------------ テーブル2つ横揃え 上の左側 ------------------------------------ ?＞ ＜table ＞ ＜tr＞ ＜th＞ ＜h2 class="pagetitle"＞Debian さくらVPSの設定＜/h2＞ ＜/th＞ ＜/tr＞ ＜?php $category_id = 6; ?＞ ＜?php $outputCnt = 5; ?＞ ＜?php query_posts('showposts='.$outputCnt.'&posts_per_page=-1&cat='.$category_id."'"); ?＞ ＜?php while (have_posts()) : the_post(); ?＞ ＜?php // アイキャッチ画像の取得 開始 $thumb = get_the_post_thumbnail($post-＞ID,'thumbnail'); $pattern= "/(?＜=src=['|\"])[^'|\"]*?(?=['|\"])/i"; preg_match($pattern, $thumb, $thePath); $theSrc = $thePath[0]; // アイキャッチ画像の取得 終了 ?＞ ＜?php // このカテゴリーへのリンクを取得 Start // このカテゴリーの URL を取得 $category_link = get_category_link( $category_id ); // このカテゴリーへのリンクを取得 End ?＞ ＜tr height="130"＞ ＜td width="50%"＞ ＜img src="＜?php echo $theSrc; ?＞" class="alignleft post_thumbnail wp-post-image" width="10%" alt="アイキャッチ" /＞ ＜a href="＜?php the_permalink() ?＞"＞＜?php the_title(); ?＞＜/a＞ ＜?php //記事の本文を指定文字数取得する ?＞ ＜p＞＜?php echo strip_tags(mb_substr($post-＞post_content, 0, 60)); ?＞....＜/p＞ ＜!-- このカテゴリーへのリンクを出力 続きを見る --＞ ＜div class="readmorecontent"＞ ＜a class="readmore" href="＜?php the_permalink(); ?＞" rel="bookmark" title="＜?php the_title(); ?＞"＞Read More »＜/a＞ ＜/div＞ ＜/td＞ ＜/tr＞ ＜?php endwhile;?＞ ＜tr＞ ＜td width="50%" align="right"＞ ＜div class="readmorecontent"＞ ＜!-- このカテゴリーへのリンクを出力 --＞ ＜a href="＜?php echo $category_link; ?＞" title="カテゴリー名"＞ 続きを見る ＜/a＞ ＜/div＞ ＜/td＞ ＜/tr＞ ＜/table＞ ＜?php wp_reset_query(); ?＞ ＜/td＞＜td width="50%"＞ ＜?php //------------------------------------ Uubntuの投稿 ------------------------------------ ?＞ ＜?php //------------------------------------ テーブル2つ横揃え 上の右側 ------------------------------------ ?＞ ＜table ＞ ＜tr＞ ＜th＞ ＜h2 class="pagetitle"＞Ubuntu関連＜/h2＞ ＜/th＞ ＜/tr＞ ＜?php $category_id = 10; ?＞ ＜?php $outputCnt = 5; ?＞ ＜?php query_posts('showposts='.$outputCnt.'&posts_per_page=-1&cat='.$category_id."'"); ?＞ ＜?php while (have_posts()) : the_post(); ?＞ ＜?php // アイキャッチ画像の取得 開始 $thumb = get_the_post_thumbnail($post-＞ID,'thumbnail'); $pattern= "/(?＜=src=['|\"])[^'|\"]*?(?=['|\"])/i"; preg_match($pattern, $thumb, $thePath); $theSrc = $thePath[0]; // アイキャッチ画像の取得 終了 ?＞ ＜?php // このカテゴリーへのリンクを取得 Start // このカテゴリーの URL を取得 $category_link = get_category_link( $category_id ); // このカテゴリーへのリンクを取得 End ?＞ ＜tr height="130"＞ ＜td width="50%"＞ ＜img src="＜?php echo $theSrc; ?＞" class="alignleft post_thumbnail wp-post-image" width="10%" alt="アイキャッチ" /＞ ＜a href="＜?php the_permalink() ?＞"＞＜?php the_title(); ?＞＜/a＞ ＜?php //記事の本文を指定文字数取得する ?＞ ＜p＞＜?php echo strip_tags(mb_substr($post-＞post_content, 0, 60)); ?＞....＜/p＞ ＜!-- このカテゴリーへのリンクを出力 続きを見る --＞ ＜div class="readmorecontent"＞ ＜a class="readmore" href="＜?php the_permalink(); ?＞" rel="bookmark" title="＜?php the_title(); ?＞"＞Read More »＜/a＞ ＜/div＞ ＜/td＞ ＜/tr＞ ＜?php endwhile;?＞ ＜tr＞ ＜td width="50%" align="right"＞ ＜div class="readmorecontent"＞ ＜!-- このカテゴリーへのリンクを出力 --＞ ＜a href="＜?php echo $category_link; ?＞" title="カテゴリー名"＞ 続きを見る ＜/a＞ ＜/div＞ ＜/td＞ ＜/tr＞ ＜/table＞ ＜?php wp_reset_query(); ?＞ ＜/td＞ ＜/tr＞＜/table＞ ＜?php //------------------------------------ テーブル2つ横揃え 下 ------------------------------------ ?＞ ＜table＞ ＜tr valign="top"＞ ＜td width="50%"＞ ＜?php //------------------------------------ Blogの投稿 ------------------------------------ ?＞ ＜?php //------------------------------------ テーブル2つ横揃え 下の左側 ------------------------------------ ?＞ ＜table ＞ ＜tr＞ ＜th＞ ＜h2 class="pagetitle"＞Blog＜/h2＞ ＜/th＞ ＜/tr＞ ＜?php $category_id = 11; ?＞ ＜?php $outputCnt = 5; ?＞ ＜?php query_posts('showposts='.$outputCnt.'&posts_per_page=-1&cat='.$category_id."'"); ?＞ ＜?php while (have_posts()) : the_post(); ?＞ ＜?php // アイキャッチ画像の取得 開始 $thumb = get_the_post_thumbnail($post-＞ID,'thumbnail'); $pattern= "/(?＜=src=['|\"])[^'|\"]*?(?=['|\"])/i"; preg_match($pattern, $thumb, $thePath); $theSrc = $thePath[0]; // アイキャッチ画像の取得 終了 ?＞ ＜?php // このカテゴリーへのリンクを取得 Start // このカテゴリーの URL を取得 $category_link = get_category_link( $category_id ); // このカテゴリーへのリンクを取得 End ?＞ ＜tr height="130"＞ ＜td width="50%"＞ ＜img src="＜?php echo $theSrc; ?＞" class="alignleft post_thumbnail wp-post-image" width="10%" alt="アイキャッチ" /＞ ＜a href="＜?php the_permalink() ?＞"＞＜?php the_title(); ?＞＜/a＞ ＜?php //記事の本文を指定文字数取得する ?＞ ＜p＞＜?php echo strip_tags(mb_substr($post-＞post_content, 0, 60)); ?＞....＜/p＞ ＜!-- このカテゴリーへのリンクを出力 続きを見る --＞ ＜div class="readmorecontent"＞ ＜a class="readmore" href="＜?php the_permalink(); ?＞" rel="bookmark" title="＜?php the_title(); ?＞"＞Read More »＜/a＞ ＜/div＞ ＜/td＞ ＜/tr＞ ＜?php endwhile;?＞ ＜tr＞ ＜td width="50%" align="right"＞ ＜div class="readmorecontent"＞ ＜!-- このカテゴリーへのリンクを出力 --＞ ＜a href="＜?php echo $category_link; ?＞" title="カテゴリー名"＞ 続きを見る ＜/a＞ ＜/div＞ ＜/td＞ ＜/tr＞ ＜/table＞ ＜?php wp_reset_query(); ?＞ ＜/td＞＜td width="50%"＞ ＜?php //------------------------------------ Wordpress関連の投稿 ------------------------------------ ?＞ ＜?php //------------------------------------ テーブル2つ横揃え 下の右側 ------------------------------------ ?＞ ＜table ＞ ＜tr＞ ＜th＞ ＜h2 class="pagetitle"＞Wordpress関連＜/h2＞ ＜/th＞ ＜/tr＞ ＜?php $category_id = 9; ?＞ ＜?php $outputCnt = 5; ?＞ ＜?php query_posts('showposts='.$outputCnt.'&posts_per_page=-1&cat='.$category_id."'"); ?＞ ＜?php while (have_posts()) : the_post(); ?＞ ＜?php // アイキャッチ画像の取得 開始 $thumb = get_the_post_thumbnail($post-＞ID,'thumbnail'); $pattern= "/(?＜=src=['|\"])[^'|\"]*?(?=['|\"])/i"; preg_match($pattern, $thumb, $thePath); $theSrc = $thePath[0]; // アイキャッチ画像の取得 終了 ?＞ ＜?php // このカテゴリーへのリンクを取得 Start // このカテゴリーの URL を取得 $category_link = get_category_link( $category_id ); // このカテゴリーへのリンクを取得 End ?＞ ＜tr height="130"＞ ＜td width="50%"＞ ＜img src="＜?php echo $theSrc; ?＞" class="alignleft post_thumbnail wp-post-image" width="10%" alt="アイキャッチ" /＞ ＜a href="＜?php the_permalink() ?＞"＞＜?php the_title(); ?＞＜/a＞ ＜?php //記事の本文を指定文字数取得する ?＞ ＜p＞＜?php echo strip_tags(mb_substr($post-＞post_content, 0, 60)); ?＞....＜/p＞ ＜!-- このカテゴリーへのリンクを出力 続きを見る --＞ ＜div class="readmorecontent"＞ ＜a class="readmore" href="＜?php the_permalink(); ?＞" rel="bookmark" title="＜?php the_title(); ?＞"＞Read More »＜/a＞ ＜/div＞ ＜/td＞ ＜/tr＞ ＜?php endwhile;?＞ ＜tr＞ ＜td width="50%" align="right"＞ ＜div class="readmorecontent"＞ ＜!-- このカテゴリーへのリンクを出力 --＞ ＜a href="＜?php echo $category_link; ?＞" title="カテゴリー名"＞ 続きを見る ＜/a＞ ＜/div＞ ＜/td＞ ＜/tr＞ ＜/table＞ ＜?php wp_reset_query(); ?＞ ＜/td＞ ＜/tr＞＜/table＞ ＜?php //------------------------------------ カテゴリ最新の投稿 表示 ----------------------------------------------終了 ?＞ ＜?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(300,225), array("class" =＞ "alignleft post_thumbnail")); } ?＞ ＜?php the_content('＜p class="serif"＞Read the rest of this page »＜/p＞'); ?＞ ＜?php wp_link_pages(array('before' =＞ '＜p＞＜strong＞Pages:＜/strong＞ ', 'after' =＞ '＜/p＞', 'next_or_number' =＞ 'number')); ?＞ ＜/div＞ ＜/div＞ ＜?php endwhile; endif; ?＞ ＜/div＞ ＜/div＞ ＜?php get_sidebar(); ?＞ ＜?php get_footer(); ?＞ |
こんな感じになる
