コンテンツへスキップ

ブログトップページのカスタマイズ忘備録

今まで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"> </div><div class="tape bl"> </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(' — ', __('« Newer Posts'), __('Older Posts »')); ?>
<!-- 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;
}

公開日 カテゴリー 日常ネタ

sukeについて

自転車で日本一周旅行に出ようとー思い立ったエンジニア。 ガジェット類やセミナーに目がない。 将来は田舎でほっこりとしたいですねー

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください