今までWordpressの設定をほとんど触らずに使ってきました。ここ最近になって何処に記事があるのか分かりにくい状態になってきたのでトップページをカスタマイズしてみました。
その内容を忘備録して残しておきます。
やってみたこと
最新の記事が分かりやすく、カテゴリ毎の記事が辿りやすいというトップページにしたかったので、以下のようなページを作成しました。
- 新着記事のダイジェストが表示される
- カテゴリ毎の新着記事が5件分表示する
- カテゴリ毎にアイコン(画像)を表示する

プラグイン
カスタマイズにあたり、便利なプラグインがあったので使わせて貰いました。Wordpressは多彩なプラグインがあるのでちょっとカスタマイズするだけでもとても便利です。
カテゴリの画像追加には以下のプラグインを使用しました。プラグイン有効後、カテゴリ追加/編集画面に画像の追加フォームで表示されます。
- Categories Images
参考:http://www.dafuku.com/2014/04/wordpress-category-image.html
テンプレートのカスタマイズ
トップページは現在使用しているテーマ付属のテンプレートをベースに修正を加えたものを作成しました。以下のページを参考にさせて頂きました。
- ちょいちょい忘れる『WP_Query』の使い方
http://notebook.yamamotohiroyuki.com/wordpress/2012/08/15/%E3%81%A1%E3%82%87%E3%81%84%E3%81%A1%E3%82%87%E3%81%84%E5%BF%98%E3%82%8C%E3%82%8B%E3%80%8Ewp_query%E3%80%8F%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9/ - WordPressで様々な値の取得する
http://morilog.com/wordpress/template/get_values/ - CSSで2カラムを作ってみる
http://kojika17.com/2014/07/two-column-css-layout.html
トップページ用テンプレートは以下のようになりました。
<?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; }