今回はページ下によくあるナビゲーション(次の記事、前の記事)について。

どのサイトにもだいたいあるごく普通のものですがWordPressのテーマとして実装するにはそれなりに苦労しました。

実装したものは以下のようになっています。

blog014

まず一番上が通常の状態。前の記事と次の記事のURLをWordPressの関数で取得しリンクを張っています。

なお、ポイントとして記事のタイトルが長すぎると記事タイトルの表示が2行になってしまいレイアウトが崩れてしまうため、mb_substr関数で文字数を調整しています。(試してないもののcssのdisplay:noneでもいいかも)

 

そして2番目の次の記事がない状態、つまり最新記事の場合です(最初の記事も前の記事がない状態なので同様)。

この場合うまく処理をいれないとただの空白になってしまいます。そうすると見た目のバランスがいまいちよくないので、リンクなしのスタイルを変えたテキストと調整用のbrタグを入れました(brタグで調整とかいけてないかもしれませんが・・・簡単だったので)。

 

3番目のマウスのフォーカス処理についてはaタグでうまく全体を囲うことでhoverにより簡単に実装できました。

blog015

 

以下ソースです。

single.php

<?php
	$prev_post = get_previous_post();
	$next_post = get_next_post();
	if( $next_post || $prev_post ):
?>
<div class="navigation">
	<?php if( $prev_post ) : ?>
		<a href="&lt;?php echo get_permalink( $prev_post-&gt;ID ); ?&gt;">
			<div class="alignleft">
				≪ 前の記事<br>
				<?php echo mb_substr( $prev_post->post_title, 0, 20 ); ?>
			</div>
		</a>
	<?php else : ?>
		<div class="alignleft2">≪ 前の記事<br><br></div>
	<?php endif; ?>
 
	<?php if( $next_post ) : ?>
		<a href="&lt;?php echo get_permalink( $next_post-&gt;ID ); ?&gt;">
			<div class="alignright">
				次の記事 ≫<br>
				<?php echo mb_substr( $next_post->post_title, 0, 20 ); ?>
			</div>
		</a>
	<?php else : ?>
		<div class="alignright2">次の記事 ≫<br><br></div>
	<?php endif; ?>
</div><!-- div.navigation -->
<?php endif; ?>

 

style.css

.navigation{
	padding:30px 15px 30px 15px;
	font-size:90%;
}
	.navigation .alignleft{/*前の記事があるとき*/
		padding:5px;
		float:left;
		text-align:left;
		width:288px;
		border:#008FFF 1px solid;
		background:#9FE1FF;
	}
	.navigation .alignleft2{/*前の記事がないとき*/
		padding:5px;
		float:left;
		text-align:left;
		width:288px;
		border:#aaa 1px dotted;
		background:#fff;
		color:#aaa;
	}
	.navigation .alignright{/*次の記事があるとき*/
		padding:5px;
		float:right;
		text-align:right;
		width:288px;
		border:#008FFF 1px solid;
		background:#9FE1FF;
	}
	.navigation .alignright2{/*次の記事がないとき*/
		padding:5px;
		float:right;
		text-align:right;
		width:288px;
		border:#aaa 1px dotted;
		background:#fff;
		color:#aaa;
	}
	.navigation a:hover{
		background: #008FFF;
		color: #fff;
		text-decoration: none;
	}
	.navigation .alignleft {
		display: block;
	}
		.navigation .alignleft:hover{
			background: #008FFF;
			color: #fff;
			text-decoration: none;
		}
	.navigation .alignright {
		display: block;
	}
		.navigation .alignright:hover{
			background: #008FFF;
			color: #fff;
			text-decoration: none;
		}

トラックバック

コメントする

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