記事の表示順、表示数を変更する – 補足
第１６回のカスタマイズ前に、連載記事中に無い変更を加えてしまったので、ここに掲載します。
1. 変更点まとめ
#1 投稿日表示関数を変更＠content.php
変更前
<?php the_date(); ?>
変更後
<?php echo get_the_date(); ?>
the_date()関数は、１ページに同じ投稿日の記事があると、２件目以降は表示されないというバグ（仕様？）があるので、それを回避するために修正。
#2 最終更新日を表示＠content.php
最終更新日を表示するために、次のコードを追加。
変更前
<p><?php echo get_the_date(); ?></p>
変更後
<p>投稿日：<?php echo get_the_date(); ?> 最終更新：<?php echo get_the_modified_date(); ?></p>
#3 カスタム投稿でアイキャッチ画像を使用する＠functions.php
オプション’supports’に、’thumbnail’を追加する。
'supports' => array(
'title',
'editor',
'author',
'custom-fields',
'thumbnail',
),
2. ソースコード
| ファイル名 | ファイルの説明 |
|---|---|
| breadcrumb.php | テンプレートパーツ（自作・パンくずリスト） |
| comments.php | テンプレートパーツ（コメント欄） |
| content.php | テンプレートパーツ（記事出力） |
| footer.php | テンプレートパーツ（フッター） |
| functions.php | 関数定義ファイル |
| footer.php | テンプレートパーツ（フッター） |
| header.php | テンプレートパーツ（ヘッダー） |
| index.php | テンプレート（メイン） |
| screenshot.png | スクリーンショット画像 |
| sidebar.php | テンプレートパーツ（サイドバー） |
| style.css | スタイルシート |
| websiteslist.php | テンプレートパーツ（自作・カスタム投稿リンクリスト） |
| img/no_image.png | サムネイルの代替画像 |
| img/wall-pic.png | サイトbody背景画像 |
| img/wordpress-logo-hoz-rgb_small.png | ヘッダー・デフォルト画像 |
breadcrumb.php
<?php
// クエリをリセットしておく
wp_reset_query();
// リンク作成用の無名関数を定義しておく
$get_link_html = function ($url, $title) {
return '<a href="'.$url.'">'.$title.'</a>';
};
// トップページへのリンクと、区切り文字を作成しておく
$del_str = " › ";
// パンくずリスト用変数
$out = $get_link_html(home_url(), 'ホーム') . $del_str;
if (is_home()) {
// そのまま出力
} elseif( is_singular('post') ) {
$cat_tree = get_categories_tree();
foreach($cat_tree as $cat_id) {
$out .= $get_link_html(get_category_link($cat_id), get_cat_name($cat_id)) . $del_str;
}
$out .= $get_link_html(get_permalink(), get_the_title())
. $del_str;
} elseif (is_singular('websites')) {
$posttype = 'websites';
$out .= $get_link_html(get_post_type_archive_link($posttype), get_post_type_object($posttype)->label)
. $del_str
. $get_link_html(get_permalink(), get_the_title())
. $del_str;
} elseif (is_singular()) {
$out .= $get_link_html(get_permalink(), get_the_title());
} elseif( is_category() ) {
$cat_obj = get_queried_object();
$out .= get_category_parents($cat_obj->term_id, false, $del_str);
} elseif( is_tag() ) {
$tag_obj = get_queried_object();
$out .= $get_link_html(get_tag_link($tag_obj->term_id), $tag_obj->name).$del_str;
} elseif( is_tax() ) {
$tax_obj = get_queried_object();
$out .= $get_link_html(get_term_link($tax_obj), $tax_obj->name).$del_str;
} elseif( is_post_type_archive() ) {
$posttype = get_post_type();
$out .= $get_link_html(get_post_type_archive_link($posttype), post_type_archive_title('None', false))
. $del_str;
} elseif( is_archive() ) {
$out .= 'アーカイブ';
} elseif( is_search() ) {
$out .= '検索結果';
} elseif( is_404() ) {
$out .= 'ページが見つかりません';
} else {
// そのまま出力
}
echo $out;
// クエリをリセットしておく
wp_reset_query();
comments.php
<?php
if (post_password_required()) {
return;
}
?>
<div id="comments">
<?php if (have_comments()): ?>
<h3 id="comments-count"><?php echo get_comments_number().' 件のコメント'; ?></h3>
<ul id="comments-list">
<?php wp_list_comments(array(
'avatar_size'=>48,
'style'=>'ul',
'type'=>'comment',
'callback'=>'mytheme_comments'
)); ?>
</ul>
<?php if (get_comment_pages_count() > 1) {
echo '<ul id="comments-pagination">';
$previous_comments_link = get_previous_comments_link('<< 前のコメント');
$next_comments_link = get_next_comments_link('次のコメント >>');
if ( isset($previous_comments_link) ) {
echo '<li id="prev-comments">' . $previous_comments_link . '</li>';
}
if ( isset($next_comments_link) ) {
echo '<li id="next-comments">' . $next_comments_link . '</li>';
}
echo '</ul>';
} ?>
<?php endif; ?>
<?php comment_form(); ?>
</div><!-- comments -->
content.php
<article class="post">
<header>
<h1 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<p class="post-meta">投稿日：<?php echo get_the_date(); ?> 最終更新：<?php echo get_the_modified_date(); ?></p>
</header>
<figure class="thumbnail">
<?php
if(is_home()) {
if(has_post_thumbnail()) {
the_post_thumbnail();
} else {
echo '<img src="'.get_template_directory_uri().'/img/no_image.png" width="160" height="120"/>';
}
} ?>
</figure>
<div class="post-content">
<?php
if(is_home()) {
the_excerpt();
} else {
the_content();
}
?>
</div>
</article>
footer.php
</div><!--main-->
<footer>
<p>©<?php bloginfo('name'); ?>, All rights reserved.</p>
</footer>
</div><!--container-->
</body>
</html>
functions.php
<?php
// カスタムヘッダー画像を設置する
$custom_header_defaults = array(
'default-image' => get_bloginfo('template_url').'/img/wordpress-logo-hoz-rgb_small.png',
'width' => 220,
'height' => 50,
);
add_theme_support( 'custom-header', $custom_header_defaults );
$custom_background_defaults = array(
'default-color' => 'eef5ee',
'default-image' => get_bloginfo('template_url').'/img/wall-pic.png',
);
add_theme_support( 'custom-background', $custom_background_defaults );
//カスタムメニューを1つ設置する
register_nav_menu('mainmenu', 'メインメニュー');
// サイドバーを1つ設置する
register_sidebar(array(
'name'=>'サイドバー',
'before_widget'=>'<div class="sidebar-wrapper">',
'after_widget'=>'</div>',
'before_title' => '<h4 class="sidebar-title">',
'after_title' => '</h4>'
));
// コメント表示用コールバック関数
function mytheme_comments($comment, $args, $depth)
{
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>" class="comment-wrapper">
<div class="comment-meta">
<?php echo get_avatar( $comment, $args['avatar_size']) ?>
<ul class="comment-meta-list">
<li class="comment-author-name">
<?php printf('<cite>%s</cite>', get_comment_author_link()) ?>
</li>
<li class="comment-title">
<?php
$commentID_parent = $comment->comment_parent;
if( $commentID_parent != 0 ):
?>
<a href="<?php echo htmlspecialchars( get_comment_link( $commentID_parent ) ) ?>"><?php echo get_comment_author($commentID_parent); ?>さんへの返信</a>
<?php else: ?>
<a href="#top">「<?php the_title(); ?>」へのコメント</a>
<?php endif; ?>
<?php
if ($comment->comment_approved == '0') {
echo '<span class="comment-approval">このコメントは承認待ちです。</span>';
}
?>
</li>
<li class="comment-date">
<a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>">
<?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?></a>
<span><?php edit_comment_link('(編集する)','','') ?></span>
</li>
</ul>
</div><!-- comment-meta -->
<div class="comment-content">
<?php comment_text() ?>
</div>
<div class="comment-reply">
<?php comment_reply_link(array_merge( $args, array(
'reply_text'=>'返信する',
'add_below' =>$add_below,
'depth' =>$depth,
'max_depth' =>$args['max_depth']))) ?>
</div>
</div><!-- comment-comment_ID -->
<?php
}
// カスタム投稿タイプを作成する
function add_websites_post_type() {
$params = array(
'labels' => array(
'name' => 'サイト',
'singular_name' => 'サイト',
'add_new' => '新規追加',
'add_new_item' => 'サイトを新規追加',
'edit_item' => 'サイトを編集する',
'new_item' => '新規サイト',
'all_items' => 'サイト一覧',
'view_item' => 'サイトの説明を見る',
'search_items' => '検索する',
'not_found' => 'サイトが見つかりませんでした。',
'not_found_in_trash' => 'ゴミ箱内にサイトが見つかりませんでした。'
),
'public' => true,
'has_archive'=>true,
'supports' => array(
'title',
'editor',
'author',
'custom-fields',
'thumbnail',
),
'taxonomies' => array('websites_category','websites_tag') // this is IMPORTANT
);
register_post_type('websites', $params);
}
add_action('init', 'add_websites_post_type');
// カスタム投稿タイプ（websites）用のカテゴリ＆タグを作成する
function create_websites_taxonomies() {
// カテゴリを作成
$labels = array(
'name' => 'Webカテゴリ', //複数系のときのカテゴリ名
'singular_name' => 'Webカテゴリ', //単数系のときのカテゴリ名
'search_items' => 'Webカテゴリを検索',
'all_items' => '全てのWebカテゴリ',
'parent_item' => '親カテゴリ',
'parent_item_colon' => '親カテゴリ:',
'edit_item' => 'Webカテゴリを編集',
'update_item' => 'Webカテゴリを更新',
'add_new_item' => '新規Webカテゴリを追加',
'new_item_name' => '新規Webカテゴリ',
'menu_name' => 'Webカテゴリ' //ダッシュボードの左サイドバーメニュー名
);
$args = array(
'hierarchical' => true,
'labels' => $labels,
'rewrite' => array( 'slug' => 'websites_cat' )
);
register_taxonomy( 'websites_category', 'websites', $args );
// タグを作成
$labels = array(
'name' => 'Webタグ', //複数系のときのカテゴリ名
'singular_name' => 'Webタグ', //単数系のときのカテゴリ名
'search_items' => 'Webタグを検索',
'all_items' => '全てのWebタグ',
'parent_item' => null,
'parent_item_colon' => null,
'edit_item' => 'Webタグを編集',
'update_item' => 'Webタグを更新',
'add_new_item' => '新規Webタグを追加',
'new_item_name' => '新規Webタグ',
'separate_items_with_commas'=> 'Webタグをコンマで区切る',
'add_or_remove_items' => 'Webタグを追加or削除する',
'choose_from_most_used' => 'よく使われているWebタグから選択',
'not_found' => 'アイテムは見つかりませんでした',
'menu_name' => 'Webタグ' //ダッシュボードの左サイドバーメニュー名
);
$args = array(
'hierarchical' => false,
'labels' => $labels,
'update_count_callback' => '_update_post_term_count', //タグの動作に必要なCallback設定
'rewrite' => array( 'slug' => 'websites_tag' )
);
register_taxonomy( 'websites_tag', 'websites', $args );
}
add_action('init', 'create_websites_taxonomies');
function get_categories_tree() {
$post_categories = get_the_category();
$cat_trees = array();
$cat_counts = array();
$cat_depth_max = 10; //最大カテゴリツリー深さ（無限ループ回避）
// 記事が属している各カテゴリについて、その親カテゴリを追加していく
foreach ( $post_categories as $post_category ) {
$depth = 0;
$cat_IDs = array($post_category->cat_ID);
$cat_obj = $post_category;
while ( $depth < $cat_depth_max ) {
if( $cat_obj->category_parent == 0 ) {
// 親カテゴリが無い場合はループ終了
break;
}
$cat_obj = get_category($cat_obj->category_parent);
array_unshift($cat_IDs, $cat_obj->cat_ID);
$depth++;
}
array_push($cat_trees, $cat_IDs);
array_push($cat_counts, count($cat_IDs));
}
// 最も多くの親カテゴリが連なっているカテゴリ配列の要素数を調べる
$cat_counts_max = max($cat_counts);
// ↑と一致する要素のKeyを調べる
$cat_key = array_search($cat_counts_max, $cat_counts);
// カテゴリID配列から、↑のKeyの要素をPick up
$cat_tree = $cat_trees[$cat_key];
return $cat_tree;
}
// 字数を100文字に指定する
function my_excerpt_mblength($length) {
return 100;
}
add_filter('excerpt_mblength', 'my_excerpt_mblength');
// 本文からの抜粋末尾の文字列を指定する
function my_auto_excerpt_more($more) {
return '・・・';
}
add_filter('excerpt_more', 'my_auto_excerpt_more');
// 抜粋末尾に個別投稿ページへのリンクを追加する
function my_custom_excerpt_more($excerpt) {
return $excerpt . '<a href="' . get_permalink($post->ID) . '"> >> 記事を表示する</a>';
}
add_filter('get_the_excerpt', 'my_custom_excerpt_more');
// アイキャッチ画像を有効にする
add_theme_support('post-thumbnails');
set_post_thumbnail_size(160, 120, true);
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="container">
<header id="header">
<hgroup>
<h1 id="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2 id="site-description">WordPress tips and lessons.</h2>
</hgroup>
<figure id="wplogo-image">
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
</figure>
<nav>
<?php wp_nav_menu(array(
'theme_location'=>'mainmenu',
'container' =>'',
'menu_class' =>'',
'items_wrap' =>'<ul id="main-nav">%3$s</ul>'));
?>
</nav>
</header>
<div id="main">
index.php
<?php get_header(); ?>
<div id="content">
<div id="breadcrumb">
<?php get_template_part('breadcrumb'); ?>
</div>
<?php
while(have_posts()) {
the_post();
get_template_part('content');
if (is_singular('post')) {
comments_template();
}
}
?>
</div>
<?php
get_sidebar();
get_footer();
screenshot.png
sidebar.php
<aside id="sidebar">
<?php dynamic_sidebar(); ?>
<?php get_template_part('websiteslist'); ?>
</aside>
style.css
/*
Theme Name: Hitsuji Sample
Theme URL: http://wordpress.hitsuji.me/
Description: This is training theme.
Author: Hitsuji
Version: 2.16
*/
/*---------------------------------------------------------*/
/* General */
/*---------------------------------------------------------*/
body {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 14px;
color: black;
padding: 0;
margin: 0;
background-color: #f5f5f5;
}
a {
color: #555555;
text-decoration: none;
}
a img {
border: none;
}
a:hover {
color: #aaaaaa;
}
p {
font-size: 1.0em;
line-height: 1.6em;
}
figure {
margin: 0;
padding: 0;
}
div#container {
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
width: 900px;
padding: 0;
}
header {
display: block;
}
div#main {
background-color: #fff;
margin-top: 10px;
border: solid 1px #ccc;
border-radius: 3px;
overflow: hidden;
}
div#content {
width: 670px;
float: left;
padding: 0;
margin: 8px 0;
}
aside#sidebar {
width: 200px;
float: right;
padding: 0;
margin: 8px 0;
}
/*---------------------------------------------------------*/
/* Header */
/*---------------------------------------------------------*/
#header hgroup { /*2.3*/
float: left;
}
figure#wplogo-image { /*2.3*/
float: right;
margin: 30px 10px 0;
}
h1#site-title {
font-size: 2.0em;
margin: 15px 0 5px 0;
color:#2ea7e0;
}
h1#site-title a {
color: #2ea7e0;
}
h2#site-description {
font-size: 1.2em;
font-weight: bold;
color: #555555;
margin: 0 0 10px 0;
}
ul#main-nav {
clear: both; /*2.3*/
margin: 0;
padding: 0;
height: 35px;
background-color: #777;
border-radius: 3px;
overflow: hidden;
}
ul#main-nav li {
list-style-type: none;
float: left;
}
ul#main-nav li a {
font-size: 1.1em;
display: block;
width: 150px;
line-height: 35px;
color: #fff;
text-align: center;
margin: 0;
border-right: groove 1px #aaa;
}
ul#main-nav li a:hover {
background-color: #555;
color: #fff;
}
/*---------------------------------------------------------*/
/* Article's Header */
/*---------------------------------------------------------*/
h1.post-title {
background-repeat: no-repeat;
background-position: left center;
border-left: solid 10px #99c348;
font-size: 1.6em;
padding: 10px 0 10px 20px;
margin: 8px 0 0 0;
color: #555;
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
}
h1.post-title a {
color: #555;
}
h1.post-title a:hover {
color: #99c348;
}
p.post-meta {
color: #555;
font-size: 1.0em;
padding: 5px 0 5px 20px;
margin: 0 0 3px 0;
border-left: solid 10px #aaa;
border-bottom: solid 1px #ccc;
}
/*---------------------------------------------------------*/
/* Article post */
/*---------------------------------------------------------*/
article.post {
overflow: hidden;
}
article.post figure.thumbnail {
margin: 10px;
float: left;
}
div.post-content {
padding: 10px 0 16px 10px;
}
/*---------------------------------------------------------*/
/* Comment form */
/*---------------------------------------------------------*/
#comments {
margin-left: 10px;
margin-bottom: 10px;
border-top: dashed 1px #aaa;
font-size: 0.9em;
}
#comments h3 {
color: #555;
font-weight: normal;
font-size: 1.2em;
}
#comments-list {
list-style-type: none;
margin: 0 10px;
padding-left: 0;
}
#comments-list ul.children {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
li.comment {
margin-top: 10px;
border: solid 1px;
border-radius: 5px;
}
#comments-list ul.children li.comment {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
margin-left: 10px;
margin-bottom: 10px;
}
li.comment div.comment-wrapper {
margin: 10px;
}
li.comment.thread-even,
li.comment.thread-even li.comment.depth-3,
li.comment.thread-even li.comment.depth-5,
li.comment.thread-odd li.comment.depth-2,
li.comment.thread-odd li.comment.depth-4
{
background-color: #f0fff0;
border-color: #88bb88;
}
li.comment.thread-odd,
li.comment.thread-odd li.comment.depth-3,
li.comment.thread-odd li.comment.depth-5,
li.comment.thread-even li.comment.depth-2,
li.comment.thread-even li.comment.depth-4
{
background-color: #f5f5f5;
border-color: #aaa;
}
div.comment-meta {
overflow: hidden;
}
#comments img.avatar {
padding: 8px;
background-color: #fff;
border-radius: 3px;
float: left;
}
ul.comment-meta-list {
float: left;
list-style-type: none;
}
li.comment-author-name {
font-size: 1.3em;
color: #2ea7e0;
}
li.comment-author-name cite {
font-style: normal;
}
li.comment-author-name a {
color: #2ea7e0;
}
li.comment-title {
font-size: 0.82em;
}
span.comment-approval {
color: #ff0000;
}
li.comment-date {
font-size: 0.82em;
}
div.comment-content {
padding: 0 10px;
margin-bottom: 0;
}
div.comment-reply {
margin-top: 0;
text-align: right;
}
/* pagination */
ul#comments-pagination {
list-style-type: none;
overflow: hidden;
padding: 0 10px;
margin: 15px 0;
}
ul#comments-pagination li {
padding: 3px 5px;
border: 1px solid #aaa;
border-radius: 3px;
background-color: #99c348;
color: #fff;
}
ul#comments-pagination li a {
color: #fff;
}
li#next-comments {
float: right;
}
li#prev-comments {
float: left;
}
/* reply */
#respond form {
margin-left: 20px;
}
#respond input {
display: block;
}
#respond textarea {
display: block;
width: 80%;
}
#respond p {
font-size: 0.95em;
}
#respond span.required {
color: #ff0000;
font-size: 1.2em;
}
#respond .form-allowed-tags {
font-size: 0.9em;
color: #555;
width: 85%;
}
/*---------------------------------------------------------*/
/* Sidebar */
/*---------------------------------------------------------*/
.sidebar-wrapper {
margin: 0 0 15px 0;
}
.sidebar-title {
border-left: solid 10px #99c348;
font-size: 1.2em;
padding: 10px 0 10px 20px;
margin: 8px 0;
color: #555;
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
}
.textwidget {
padding: 0 8px;
}
#calendar_wrap {
text-align: center;
}
#calendar_wrap table {
margin-left: auto;
margin-right: auto;
}
#calendar_wrap table a {
text-decoration: underline;
color: #2ea7e0;
}
#calendar_wrap table a:hover {
background-color: #2ea7e0;
color: #fff;
}
.sidebar-wrapper ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar-wrapper li {
border-bottom: dotted 1px #99c348;
}
.sidebar-wrapper li a {
display: block;
color: #555;
padding: 3px 0 3px 8px;
}
.sidebar-wrapper li a:hover {
background-color: #cfc;
}
/*---------------------------------------------------------*/
/* footer */
/*---------------------------------------------------------*/
footer {
font-size: 0.9em;
text-align: center;
}
/*---------------------------------------------------------*/
/* breadcrumb */
/*---------------------------------------------------------*/
#breadcrumb {
font-size: 12px;
margin-left: 1em;
}
websiteslist.php
<div class="sidebar-wrapper">
<h4 class="sidebar-title"><a href="<?php echo get_post_type_archive_link('websites') ?>">運営サイト</a></h4>
<ul>
<?php
query_posts(array('post_type' => 'websites' ,'showposts' => -1));
while(have_posts()) {
the_post();
$title = get_the_title();
$link = get_post_meta($post->ID, "url", true);
echo '<li><a href="'.$link.'">'.$title."</a></li>n";
}
wp_reset_query();
?>
</ul>
</div>
img/no_image.png
img/wall-pic.png
img/wordpress-logo-hoz-rgb_small.png
「index.phpをカスタマイズする」の記事
- 第20回 ギャラリー表示をカスタマイズする
- 第19回 ページ送りを設置する
- 第18回 カテゴリやタグを表示する
- 第17回 記事の表示順、表示数を変更する – 補足 << この記事です
- 第16回 記事の表示順、表示数を変更する
- 第15回 アイキャッチ画像を表示する
- 第14回 抜粋を表示する
- 第13回 パンくずリストを設置する
- 第12回 ページの種類で分岐処理する
- 第11回 カスタム投稿タイプを作成する
- 第10回 カスタム背景を設置する
- 第9回 カスタムヘッダーを設置する
- 第8回 カスタムメニューを設置する
- 第7回 コメントフォームをカスタマイズする
- 第6回 コメントフォームを設置する
- 第5回 サイドバーを設置する
- 第4回 functions.phpとは
- 第3回 テンプレートフォルダ内の画像を使用する
- 第2回 テンプレートパーツ化する
- 第1回 HTMLからWPテーマを作成する