WordPressテーマ「Twenty Ten」のカスタマイズVol.2〜記事ごとにサムネイルをつける〜

デフォルトテーマ「Twenty Ten」を記事ごとにサムネイルを表示するようにカスタマイズしました。
使っていないphpファイルもありますが、見た目はお手本に近い形になりました。授業で習い次第、修正していきたいと思います。

プレビュー

全体像（↓クリックするとより大きい画像を見れます）

ナビゲーション部分（↓ホバーすると色が変わるように指定）

最新記事部分

↓サムネイルと「続きを読む」表示

↓最新2記事以前のものはタイトルと日付のみ

サイドバー

単一ページ

コード

CSS（元のテンプレートのCSSに追加記述しています）

@charset "utf-8";

/*
Theme Name: 2012年07月
Description: 記事ごとにサムネールをつけるテーマ
*/

/* basic */
body {
	font-family:
		"メイリオ",
		"Hiragino Kaku Gothic Pro", 
		sans-serif;
}
a {
	color:#0c8bcd;
	text-decoration:none;
}
a img {
	border:none;
}


/* #container */
#container {
	width:900px;
	margin:0 auto;
	
	float:none;
}

/* #header */
#header {
	font-family:
		'Trebuchet MS', 
		sans-serif;
	margin:0 0 20px;
}
#header h1 {
	
	margin:0;
	
}
#header h1 a {
	font-size:36px;
	color:#917b63;
	
	text-shadow:-1px -1px 1px #000;
}
#header p#desc {
	font-size:16px;
	font-weight:bold;
	color:#000;
	margin:10px 0 5px;
}
#subinfo {
	text-align:right;
	margin:-32px 0 5px;
}

/* #nav */
#nav {
	font-size:0.75em;
	width:100%;
	height:30px;
	background-color:#fff;
	border:1px solid #aaa;
	margin:0 0 8px;
}
#nav ul {
	margin:0;
	padding:0;
}

#nav li {
	list-style-type:none;
	float:left;
	font-size:14px;
}
#nav li a {
	display:block;
	width:100px;
	line-height:30px;
	border-right:1px solid #aaa;
	color:#000;
	text-align:center;
}
#nav li a:hover {
	background-color:#c4f254;
}

/* .post */
.post {
	margin:0 0 30px;
	overflow:auto;
	background-color:#fff;
	padding:10px;
}
.post h2 {
	background-image:url(icon.gif);
	background-repeat:no-repeat;
	background-position:left center;
	border-top:1px solid #aaa;
	border-bottom:1px solid #aaa;
	font-size:0.875em;
	padding:10px 20px;
	margin:0;
}
.post h2 a {
	color:#000;
}
.post p {
	font-size:0.875em;
	line-height:1.6;
	
}

.post .post-categories {
	list-style-type:none;
	padding:0 0 20px;
}
.post .post-categories li {
	padding:0 10px;
	float:right;
}


.post .post-categories li a {
	font-size:smaller;
	background-color:#a7d043;
	color:#fff;
	padding:1px 5px;
	
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	-ms-border-radius:2px;
	-o-border-radius:2px;
	border-radius:2px;
}
.post p.postinfo {
	color:#0c8bcd;
	text-align:right;
	margin:0;
}

.aligncenter {
	display:block;
	margin:0 auto;
}
.alignleft {
	float:left;
	margin:0 10px 10px 0;
}
.alignrifht {
	float:right;
	margin:0 0 10px 10px;
}
wp-caption {
	border:1px solid #aaa;
	text-align:center;
	padding:5px 0 0;
}
.date {
	color:#999;
}
.post_title {
	margin:0;
	padding:0;
}
.post_title h2 {
	padding:0 0 0 20px;
	margin:0;
}

.attachment-post-thumbnail{
	float:left;
	margin:0 10px 10px 0;
}
.toplist {
	margin:0;	
}



/* #content */
#content {
	float:left;
	width:550px;
	
	margin:0;
}
#content h2 {
	margin:0;
}


p.title {
	text-align:center;
	font-weight:bold;
	color:#fff;
	width:200px;
	margin:0 0 10px;
	padding:5px 0;
	background-image:url(bg.png);
	background-repeat:no-repeat;
	background-position:left center;
}
p.pagenation {
	font-size:0.75em;
	overflow:auto;
}
span.oldpage {
	float:left;
}
span.newpage {
	float:right;
}

/* #sidebar */
#sidebar {
	width:300px;
	float:right;
}
#sidebar ul {
	margin:0;
	padding:0;
	list-style-type:none;
}
#sidebar .widget {
	margin:0 0 20px;
	background-color:#fff;
	-moz-border-radius:10px 10px 0 0;
	-webkit-border-radius:10px 10px 0 0;
	-ms-border-radius:10px 10px 0 0;
	-o-border-radius:10px 10px 0 0;
	border-radius:10px 10px 0 0;
	
}
#sidebar h2 {
	font-size:14px;
	color:#fff;
	background-color:#aaa;
	padding:10px 10px;
	margin:0;
	
	-moz-border-radius:10px 10px 0 0;
	-webkit-border-radius:10px 10px 0 0;
	-ms-border-radius:10px 10px 0 0;
	-o-border-radius:10px 10px 0 0;
	border-radius:10px 10px 0 0;
}
#sidebar li li {
	font-size:12px;
	border-bottom:1px solid #aaa;
	margin:0;
	padding:10px;
}
#sidebar li li a {
	color:#000;
	display:block;
	padding:5px 10px;
}
#sidebar li li a:hover {
	background-color:#f7e29e;
}

/* #footer */
#footer {
	clear:both;
	border-top;1px solid #aaa;
	padding:6px 0;
	text-align:center;
}

#footer address {
	font-size:14px;
	font-style:normal;
	font-family:Verdana, sans-serif;
	margin:0;
	color:#000;
}

index.php

<?php get_header(); ?>

<!-- ▼#content -->
<div id="content" role="main">
<p class="title">最新記事</p>

<?php query_posts('posts_per_page=2'); ?>
<?php if(have_posts()): while(have_posts()):
the_post(); ?>

<?php get_template_part( 'excerpt' ); ?>
<style type="text/css">
.alignleft, .alignright, .aligncenter {
	display:none!important;	
}
</style>

<?php endwhile; endif; ?>

<ul class="toplist">
<?php query_posts('posts_per_page=8&offset=2'); ?>
<?php if(have_posts()): while(have_posts()):
the_post(); ?>

<?php get_template_part('title'); ?>

<?php endwhile; endif; ?>
</ul>

</div>
<!-- ▲#content -->

<?php get_template_part( 'pagenation' ); ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php bloginfo( 'name' ); ?><?php wp_title(); ?></title>

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<!-- ▼#container-->
<div id="container">

<!-- ▼#header-->
<div id="header">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<p id="desc"><?php bloginfo('description'); ?></p>

<!-- ▼#subinfo-->
<div id="subinfo">
<a href="<?php bloginfo(''); ?>"></a><img src="<?php bloginfo('template_url'); ?>/feed.png" alt="RSSフィード" width="28" height="28">
</div>
<!-- ▲#subinfo -->
<!-- ▼#nav-->
<div id="nav">
<?php wp_nav_menu(array(
'theme location' => 'navigation'
)); ?>
</div>
<!-- ▲#nav -->

<?php if(!is_single()): ?>
<?php if(get_header_image()): ?>
<div id="image">
<img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php HEADER_IMAGE_HEIGHT; ?>">
</div>
<?php endif; ?>
<?php endif; ?>
</div>
<!-- ▲#header -->

footer.php

<!-- ▼#footer -->
<div id="footer" role="contentinfo">
<address>Copyright &copy; <?php bloginfo('name'); ?>,All rights reserved.</address>
</div>
<!-- ▲#footer -->
  
</div>
<!-- ▲#container -->

<?php wp_footer(); ?>


</body>
</html>

single.php

<?php get_header(); ?>

<!-- ▼#content -->
<div id="content">
<?php if(have_posts()): while(have_posts()):
the_post(); ?>

<?php get_template_part('content'); ?>

<p class="pagenation">
<span class="oldpage"><?php previous_post_link(); ?></span>
<span class="newpage"><?php next_post_link(); ?></span>
</p>

<?php endwhile; endif; ?>

</div>
<!-- ▲#content -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

page.php

<?php get_header(); ?>

<!-- ▼#content -->
<div id="content">
<?php if(have_posts()): while(have_posts()):
the_post(); ?>

<!-- ▼.post -->
<div class="post">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</div>
<!-- ▲.post -->

<?php endwhile; endif; ?>

</div>
<!-- ▲#content -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

content.php

<div class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="postcat">
<?php the_category(''); ?>
</p>

<?php if(!is_single()): ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>

<?php the_content(); ?>

<p class="postinfo">
<?php echo get_the_date(); ?>
</p>
</div>

title.php

<ul class="post post_title">
<li><h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span class="date">(<?php echo get_the_date(); ?>)</span></h2></li>
</ul>

sidebar.php

<!-- ▼#sidebar-->
<div id="sidebar">

<ul>
<?php dynamic_sidebar(); ?>
</ul>

</div>
<!-- ▲#sidebar-->

pagenation.php

<p class="pagenation">
<span class="oldpage"><?php next_posts_link('&laquo; 古い記事'); ?></span>

<span class="newpage"><?php previous_posts_link('新しい記事 &raquo;'); ?></span>
</p>

image.php（使用しませんでした）

<?php get_header(); ?>

<!-- ▼#content -->
<div id="content" role="main">

<?php if(have_posts()): while(have_posts()):
the_post(); ?>

<div class="post">
<h2><?php the_title(); ?></h2>
<p class="photo">
<?php echo wp_get_attachment_image($post->ID,'full'); ?>
</p>
</div>

<p class="pagenation">
<span class="oldpage"><?php previous_post_link(); ?></span>
<span class="newpage"><?php next_post_link(); ?></span>
</p>

<?php endwhile; endif; ?>
</div>
<!-- ▲#content -->

<?php get_footer(); ?>

date.php（使用しませんでした）

<?php get_header(); ?>

<!-- ▼#content -->
<div id="content" role="main">
<p class="title"><?php single_month_title(); ?></p>

<ul class="post">
<?php if(have_posts()): while(have_posts()):
the_post(); ?>

<?php get_template_part( 'content'); ?>

<?php endwhile; endif; ?>
</ul>



<?php get_template_part( 'pagenation' ); ?>

</div>
<!-- ▲#content -->


<?php get_sidebar(); ?>
<?php get_footer(); ?>

category.php（使用しませんでした）

<?php get_header(); ?>

<!-- ▼#content -->
<div id="content" role="main">
<p class="title"><?php single_cat_title(); ?></p>

<?php query_posts('posts_per_page=-1&order=ASC&'.$query_string); ?>
<?php if(have_posts()): while(have_posts()):
the_post(); ?>

<?php get_template_part( 'content', 'excerpt' ); ?>

<?php endwhile; endif; ?>

<?php get_template_part('pagenation'); ?>

</div>
<!-- ▲#content -->


<?php get_sidebar(); ?>
<?php get_footer(); ?>

functions.php

<?php	

//カスタムメニュー
register_nav_menus(array(
		'navigation' => 'ナビゲーション'
		
));

//カスタムヘッダー
add_custom_image_header('','admin_header_style');
function admin_header_style() {}

define('NO_HEADER_TEXT',true);
define('HEADER_IMAGE','%s/default_header.jpg');
define('HEADER_IMAGE_WIDTH',900);
define('HEADER_IMAGE_HEIGHT',228);


//ウィジェット
register_sidebar();

//WordPressのバージョン情報の出力を停止
remove_action('wp_head','wp_generator');

//RSSフィードの情報を出力
add_theme_support('automatic-feed-links');

//jQueryの設定を出力
add_action('wp_head','myScript',1);
function myScript(){
	wp_enqueue_script('jquery');
}


//エディター・スタイルシート
add_editor_style();

//ギャラリーのスタイルシートの出力を停止
add_filter('use_default_gallery_style','__return_false');

//アイキャッチ画像
if ( function_exists('add_theme_support')){
add_theme_support('post-thumbnails');
set_post_thumbnail_size( 150, 9999);
}

//概要（抜粋）の省略記号
function my_excerpt_more($more){
	return '…';
}
add_filter('excerpt_more','my_excerpt_more');

//カスタム背景
add_custom_background();
?>