wordpressで見栄えをガラリと変える記事一覧抜粋ページ作成

wordpress-articlelist1

wordpressの初期設定ではカテゴリーページは少し見づらい。カテゴリーページを記事一覧抜粋ページに変更すると、とても見やすく、利用しやすくなる。

ここではTwenty Twelveで記事一覧抜粋ページを作成する方法を解説する。他のテーマを使用している場合も参考にして欲しい。

記事一覧抜粋ページを作成するためには、WP Multibyte Patchが有効になっている事、また、記事本文のアイキャッチ画像の位置が記事タイトルの下に位置づけされている事が必要だ。

下記のリンクを参考にして欲しい。

WP Multibyte Patchで日本語最適化しよう!

TwentyTwelve・記事部分のカスタマイズ

の”アイキャッチ画像の表示位置を変えよう!“の部分だ。

記事一覧抜粋ページを作成する

記事一覧抜粋ページの作成にはcontent.phpを操作する。content.phpを見るとこのようなコードがある。

<?php if ( is_search() ) : // Only display Excerpts for Search ?>

これを下記のコードに書き換えよう。

<?php if ( is_search() || is_home() || is_archive() ) : // Only display Excerpts for Search ?>
<div class="entry-post-thumbnail">
<?php the_post_thumbnail('thumbnail'); ?>
</div>

するとカテゴリーページがこのように表示されるようになる。

wordpressで記事一覧抜粋ページを作成する

アイキャッチ画像と記事の一部が表示されているのが確認できる。

次に、アイキャッチ画像の右側に記事の一部が表示されるように位置調整をする。位置調整にはstyle.cssを使用する。style.cssの下部にこのコードを追加しよう。

/* 記事抜粋ページ位置調整 */
div.entry-post-thumbnail {
float: left;
margin: 0 10px 10px 0;}

これで位置調整が完了した。

wordpressで記事一覧抜粋ページを作成する

赤枠で囲った部分”[・・・]“の部分を”続きを読む→“に変更する。そのためにはfunctions.phpを操作する。functions.phpに次のプログラムを書き足そう。

<?php
/**
* Sets the post excerpt length to 40 words.
*
* To override this length in a child theme, remove the filter and add your own
* function tied to the excerpt_length filter hook.
*/
function twentytwelve_excerpt_length( $length ) {
return 40;
}
add_filter( 'excerpt_length', 'twentytwelve_excerpt_length' );
if ( ! function_exists( 'twentytwelve_continue_reading_link' ) ) :
/**
* Returns a "Continue Reading" link for excerpts
*/
function twentytwelve_continue_reading_link() {
return ' <a href="'. esc_url( get_permalink() ) . '">' . __( '続きを読む <span class="meta-nav">→</span>', 'twentytwelve' ) . '</a>';
}
endif; // twentytwelve_continue_reading_link
/**
* Replaces "[...]" (appended to automatically generated excerpts) with an ellipsis and twentytwelve_continue_reading_link().
*
* To override this in a child theme, remove the filter and add your own
* function tied to the excerpt_more filter hook.
*/
function twentytwelve_auto_excerpt_more( $more ) {
return ' …' . twentytwelve_continue_reading_link();
}
add_filter( 'excerpt_more', 'twentytwelve_auto_excerpt_more' );
/**
* Adds a pretty "Continue Reading" link to custom post excerpts.
*
* To override this link in a child theme, remove the filter and add your own
* function tied to the get_the_excerpt filter hook.
*/
function twentytwelve_custom_excerpt_more( $output ) {
if ( has_excerpt() && ! is_attachment() ) {
$output .= twentytwelve_continue_reading_link();
}
return $output;
}
add_filter( 'get_the_excerpt', 'twentytwelve_custom_excerpt_more' );
?>

これで記事一覧抜粋ページの作成が完了した!このように表示される。

wordpressで記事一覧抜粋ページを作成する

注意:functions.phpの扱いは注意が必要だ。記入するプログラムを間違えると表示がおかしくなる事がある。気をつけよう。