日付の表示形式変更とアイキャッチ画像対応
日付の表示形式を "西暦/月/日" にしたのと、アイキャッチ画像を利用できるようにしたのでメモ。 アイキャッチ画像を使うことはあまりないかもしれないけど、たまに使いたいことがあったので設定してみた。
差分
index.php
index.phpは記事の一覧を表示する。 日付の表示形式の変更は "the_time('M j, Y')" を "the_time('Y/m/d')" に変更しただけ。 後半のdivタグがアイキャッチ画像の表示。アイキャッチ画像については末尾の参考ページ参照。.../wp-content/themes% diff -U 3 diary/index.php diary_eyecatch/index.php
--- diary/index.php 2012-04-26 23:40:29.999721337 +0900
+++ diary_eyecatch/index.php 2012-05-08 00:39:12.347890339 +0900
@@ -26,9 +26,14 @@
<!-- Begin Article -->
<article class="post">
<header class="postHeader">
- <div class="date"><?php the_time('M j, Y') ?> - <span><img src="<?php bloginfo('template_directory'); ?>/images/ico_file.png" alt=""> <?php the_category(', ') ?> <img src="<?php bloginfo('template_directory'); ?>/images/ico_comment.png" alt=""> <?php comments_popup_link('No Comments', '1 Comment ', '% Comments'); ?></span> </div>
+ <div class="date"><?php the_time('Y/m/d') ?> - <span><img src="<?php bloginfo('template_directory'); ?>/images/ico_file.png" alt=""> <?php the_category(', ') ?> <img src="<?php bloginfo('template_directory'); ?>/images/ico_comment.png" alt=""> <?php comments_popup_link('No Comments', '1 Comment ', '% Comments'); ?></span> </div>
<h2><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></h2>
</header>
+<div class="thumbnail"><!-- CSSでデザイン用クラスの追加 -->
+ <a href="<?php the_permalink(); ?>"><!-- 投稿のリンクを取得 -->
+ <?php the_post_thumbnail( 'single-post-thumbnail', array('title' => ''.get_the_title().'') ); ?><!-- サムネイルの画像タイトルを投稿タイトルへ変更 -->
+ </a>
+</div>
<section class="postText">
<?php the_content('Read more »'); ?>
</section>
@@ -48,4 +53,3 @@
<?php get_sidebar();?>
<?php get_footer();?>
-
single.php
single.phpは記事を表示する。 index.php同様、日付の表示形式の変更を "the_time('M j, Y')" を "the_time('Y/m/d')" に変更しただけ。 アイキャッチ画像についてあも、index.php同様、後半のdivタグが該当箇所。.../wp-content/themes% diff -U 3 diary/single.php diary_eyecatch/single.php
--- diary/single.php 2012-04-26 23:40:29.998721597 +0900
+++ diary_eyecatch/single.php 2012-05-06 19:12:23.955057962 +0900
@@ -6,9 +6,14 @@
<!-- Begin Article -->
<article class="post">
<header class="postHeader">
- <div class="date"><?php the_time('M j, Y') ?> - <span><img src="<?php bloginfo('template_directory'); ?>/images/ico_file.png" alt=""> <?php the_category(', ') ?> <img src="<?php bloginfo('template_directory'); ?>/images/ico_comment.png" alt=""> <?php comments_popup_link('No Comments', '1 Comment ', '% Comments'); ?></span> </div>
+ <div class="date"><?php the_time('Y/m/d') ?> - <span><img src="<?php bloginfo('template_directory'); ?>/images/ico_file.png" alt=""> <?php the_category(', ') ?> <img src="<?php bloginfo('template_directory'); ?>/images/ico_comment.png" alt=""> <?php comments_popup_link('No Comments', '1 Comment ', '% Comments'); ?></span> </div>
<h2><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></h2>
</header>
+<div class="thumbnail"><!-- CSSでデザイン用クラスの追加 -->
+ <a href="<?php the_permalink(); ?>"><!-- 投稿のリンクを取得 -->
+ <?php the_post_thumbnail( 'single-post-thumbnail', array('title' => ''.get_the_title().'') ); ?><!-- サムネイルの画像タイトルを投稿タイトルへ変更 -->
+ </a>
+</div>
<section class="postText">
<?php the_content(); ?>
</section>
functions.php
functions.phpではアイキャッチ画像を有効にする設定を記述する。.../wp-content/themes% diff -U 3 diary/functions.php diary_eyecatch/functions.php
--- diary/functions.php 2012-04-26 23:40:30.002722578 +0900
+++ diary_eyecatch/functions.php 2012-05-06 19:02:44.990890509 +0900
@@ -940,4 +940,7 @@
return array_shift($hexstr);
}
+// eyecatch
+add_theme_support( 'post-thumbnails' );
+add_image_size( 'single-post-thumbnail', 200, 160, true );
?>