【WordPress】前の記事・次の記事

2012年も残りわずかですね。

今回はBlogで『次の記事』『前の記事』のコード。

アタシは文字ではなく、画像にしたかったので超調べました
その際にメモしておいた覚書です。

『次の記事』『前の記事』のコードです。

文字だけなら
<div class="navigation">
<div class="alignleft"><?php previous_post_link('&laquo; %link') ?></div>
<div class="alignright"><?php next_post_link('%link &raquo;') ?></div>
</div>

にして、CSSは外部に読み込みにしてOK。
分りやすく今回はclassをつけました。
%linkは記事のタイトルがでます。'&laquoは＜　&raquoは＞です。

もし、記事がなかったときは非表示にしたいので

<?php if(get_next_post() || get_previous_post()) : ?>
<div class="navigation">
<?php if(next_post_link('<div class="alignleft">次：%link｜</div>')) : ?><?php endif ; ?>
<?php if(previous_post_link('<div class="alignright">｜%link：前</div>')) : ?><?php endif ; ?> </div>
<?php endif; ?>

記事のタイトルが画像の場合、その画像と“←”“→”も画像に

<div class="navigation">
<?php
//(1,2,3)の3の部分でtrueなら前(prev)の記事、falseなら次(next)の記事
$prevpost = get_adjacent_post(true, '', true);
$nextpost = get_adjacent_post(true, '', false);
//前の記事→
if ( $prevpost ) {
echo '<span class="previous"><a href="' . get_permalink($prevpost->ID) . '">
<img class="symbol" src="'.get_bloginfo('template_directory').'/img/prev.png" />' . get_the_post_thumbnail( $prevpost->ID ) .'</a></span>';}

//←次の記事
if ( $nextpost ) {
echo '<span class="next"><a href="' . get_permalink($nextpost->ID) . '"> ' . get_the_post_thumbnail( $nextpost->ID ) .'
<img class="symbol" src="'.get_bloginfo('template_directory').'/img/next.png" /></a></span>';
}
?>
</div>

これで画像タイトルとそれぞれの矢印が画像で表示されます。

もし、画像が大きいときは縮小する必要があると思いますのでfunctions.phpに

<?php
// アイキャッチ画像
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size(150, 100 );
?>
と記載します。サイズは調整して下さい。
set_post_thumbnail_size(幅,高さ)です。

これが今年最後のBlogになると思うので・・・・

皆様、よいお年を～(◎´∀｀)ノ