今までWordpressの設定をほとんど触らずに使ってきました。ここ最近になって何処に記事があるのか分かりにくい状態になってきたのでトップページをカスタマイズしてみました。
その内容を忘備録して残しておきます。
やってみたこと
最新の記事が分かりやすく、カテゴリ毎の記事が辿りやすいというトップページにしたかったので、以下のようなページを作成しました。
- 新着記事のダイジェストが表示される
- カテゴリ毎の新着記事が5件分表示する
- カテゴリ毎にアイコン(画像)を表示する
さてどうしようか・・・
プラグイン
カスタマイズにあたり、便利なプラグインがあったので使わせて貰いました。Wordpressは多彩なプラグインがあるのでちょっとカスタマイズするだけでもとても便利です。
カテゴリの画像追加には以下のプラグインを使用しました。プラグイン有効後、カテゴリ追加/編集画面に画像の追加フォームで表示されます。
テンプレートのカスタマイズ
トップページは現在使用しているテーマ付属のテンプレートをベースに修正を加えたものを作成しました。以下のページを参考にさせて頂きました。
トップページ用テンプレートは以下のようになりました。
<?php
/**
* Template Name: TopPage
*
* トップページ表示用
*
* @package WordPress
* @subpackage Adventure_Journal
*/
get_header();
?>
<div class="content" id="col-1">
<div id="col-main">
<div id="main-content" <?php //ctx_aj_crinkled_paper(); ?>>
<!-- BEGIN Main Content-->
<h1>■最新記事</h1>
<?php
$query = new WP_Query('posts_per_page=1');
if($query->have_posts()) :
$query->the_post();
?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
$myclasses=join(' ',get_post_class('',$id));
if( preg_match('/sticky/',$myclasses) > 0 ){
echo '<div class="tape tr">&nbsp;</div><div class="tape bl">&nbsp;</div>';
}
?>
<?php edit_post_link( __( 'Edit', 'adventurejournal' ), '<span class="edit-link">', '</span>' ); ?>
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'adventurejournal' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<?php if(is_home() && has_post_thumbnail() && $themeOpts['featured-header']!='true' ) the_post_thumbnail(); ?>
<div class="entry-meta">
<?php ctx_aj_posted_on(); ?>
</div><!-- .entry-meta -->
<div class="entry-summary">
<?php
if ( has_post_thumbnail() ) { // 投稿にアイキャッチ画像が割り当てられているかチェックします。
the_post_thumbnail();
}
the_excerpt();
?>
</div><!-- .entry-summary -->
<div class="entry-utility">
<?php if ( count( get_the_category() ) ) : ?>
<span class="cat-links">
<?php printf( __( '<span class="%1$s">Categories: </span> %2$s', 'adventurejournal' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?>
</span>
<span class="meta-sep">|</span>
<?php endif; ?>
<?php
$tags_list = get_the_tag_list( '', ', ' );
if ( $tags_list ):
?>
<span class="tag-links">
<?php printf( __( '<span class="%1$s">Tags:</span> %2$s', 'adventurejournal' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
</span>
<span class="meta-sep">|</span>
<?php endif; ?>
<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'adventurejournal' ), __( '1 Comment', 'adventurejournal' ), __( '% Comments', 'adventurejournal' ) ); ?></span>
</div><!-- .entry-utility -->
</div><!-- #post-## -->
<?php
endif;
//最新記事のスナップ表示ここまで
?>
<h1>■すけログの記事(カテゴリ毎の最近の更新)</h1>
<?php
//カテゴリ一覧を取得
$layout_css = array("boxA", "boxB");
$count = 0;
$categories = get_categories();
foreach($categories as $category) :
if( $category->term_id == 1) continue; //CategoryID=1(未分類)は表示しない
echo '<div id="' . $layout_css[$count % 2] . '">';
?>
<img src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url( $category->term_id ); ?>" />
<?php
echo '<h5><a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a></h5>';
echo '<p>' . $category->description . '</p><ul>';
//最新投稿5件を取得
$query = new WP_Query('posts_per_page=5&cat=' . $category->cat_ID);
while($query->have_posts()) :
$query->the_post();
echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a> - ' . get_the_date();
echo '</li>';
endwhile;
echo '</ul></div>';
wp_reset_postdata();
$count++;
endforeach; ?>
<?php posts_nav_link(' &#8212; ', __('&laquo; Newer Posts'), __('Older Posts &raquo;')); ?>
<!-- END Main Content-->
</div>
</div>
<div class="clear"></div>
</div>
<?php get_footer(); ?>
同じくカラム表示用のCSSです。
/**
* Adventure Jounal Custom CSS
* 2015/08/16
**/
#boxA {
width:450px;
float:left;
}
#boxB {
width:450px;
float:left;
}
![IMG_1191[1]](http://www.suke-blog.com/wp-content/uploads/2015/01/IMG_11911.jpg)
