Twenty Thirteenのページナビゲーションをカスタマイズ

「Twenty Thirteen」のページナビゲーションは、個人的にはページナビゲーションが強調されすぎていることと、前後の投稿への矢印を囲むの円のサイズが異なることに違和感を感じます。また、「古い投稿」というような文言もサイトに合わせて変更したいと思います。

はじめに

「Twenty Thirteen」のページナビゲーションをカスタマイズします。
・ページナビゲーションの文言をサイトに合わせて変更
・ページナビゲーションの表示を調整

使用環境

WordPress 4.2.3
Twenty Thirteen 1.5

ページナビゲーションの文言をサイトに合わせて変更

テンプレート「functions.php」の記述を変更します。「古い投稿」を「前の記事」というように変更します。矢印も「Font Awesome」の中からよさそうなものに変更してみました。

<変更前>

if ( ! function_exists( 'twentythirteen_paging_nav' ) ) :
/**
 * Display navigation to next/previous set of posts when applicable.
 *
 * @since Twenty Thirteen 1.0
 */
function twentythirteen_paging_nav() {
	global $wp_query;

	// Don't print empty markup if there's only one page.
	if ( $wp_query->max_num_pages < 2 )
		return;
	?>
	<nav class="navigation paging-navigation" role="navigation">
		<h1 class="screen-reader-text"><?php _e( 'Posts navigation', 'twentythirteen' ); ?></h1>
		<div class="nav-links">

			<?php if ( get_next_posts_link() ) : ?>
			<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentythirteen' ) ); ?></div>
			<?php endif; ?>

			<?php if ( get_previous_posts_link() ) : ?>
			<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentythirteen' ) ); ?></div>
			<?php endif; ?>

		</div><!-- .nav-links -->
	</nav><!-- .navigation -->
	<?php
}
endif;

<変更後>

if ( ! function_exists( 'twentythirteen_paging_nav' ) ) :
/**
 * Display navigation to next/previous set of posts when applicable.
 *
 * @since Twenty Thirteen 1.0
 */
function twentythirteen_paging_nav() {
	global $wp_query;

	// Don't print empty markup if there's only one page.
	if ( $wp_query->max_num_pages < 2 )
		return;
	?>
	<nav class="navigation paging-navigation" role="navigation">
		<h1 class="screen-reader-text"><?php _e( 'Posts navigation', 'twentythirteen' ); ?></h1>
		<div class="nav-links">

			<?php if ( get_next_posts_link() ) : ?>
			<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav"><i class="fa fa-chevron-left"></i></span> 前の記事', 'twentythirteen' ) ); ?></div>
			<?php endif; ?>

			<?php if ( get_previous_posts_link() ) : ?>
			<div class="nav-next"><?php previous_posts_link( __( '次の記事 <span class="meta-nav"><i class="fa fa-chevron-right"></i></span>', 'twentythirteen' ) ); ?></div>
			<?php endif; ?>

		</div><!-- .nav-links -->
	</nav><!-- .navigation -->
	<?php
}
endif;

ページナビゲーションの表示を調整

ページナビゲーションの表示は、スタイルシート「style.css」で変更します。

<変更前>

/**
 * 5.7 Post/Paging Navigation
 * ----------------------------------------------------------------------------
 */

.navigation .nav-previous {
	float: left;
}

.navigation .nav-next {
	float: right;
}

.navigation a {
	color: #bc360a;
}

.navigation a:hover {
	color: #ea9629;
	text-decoration: none;
}

.paging-navigation {
	background-color: #e8e5ce;
	padding: 40px 0;
}

.paging-navigation .nav-links {
	margin: 0 auto;
	max-width: 604px;
	width: 100%;
}

.sidebar .paging-navigation .nav-links {
	max-width: 1040px;
	padding: 0 376px 0 60px;
}

.paging-navigation .nav-next {
	padding: 13px 0;
}

.paging-navigation a {
	font-size: 22px;
	font-style: italic;
	font-weight: 300;
}

.paging-navigation .meta-nav {
	background-color: #e63f2a;
	border-radius: 50%;
	color: #fff;
	display: inline-block;
	font-size: 26px;
	padding: 3px 0 8px;
	text-align: center;
	width: 50px;
}

.paging-navigation .nav-previous .meta-nav {
	margin-right: 10px;
	padding: 17px 0 23px;
	width: 80px;
}

.paging-navigation .nav-next .meta-nav {
	margin-left: 10px;
}

.paging-navigation a:hover .meta-nav {
	background-color: #ea9629;
	text-decoration: none;
}

<変更後>

/**
 * 5.7 Post/Paging Navigation
 * ----------------------------------------------------------------------------
 */

.navigation .nav-previous {
	float: left;
}

.navigation .nav-next {
	float: right;
}

.navigation a {
	color: #40A040;
}

.navigation a:hover {
	color: #808080;
	text-decoration: none;
}

.paging-navigation {
/*	background-color: #c0c0b0;	*/
	padding: 40px 0;
}

.paging-navigation .nav-links {
	margin: 0 auto;
	max-width: 604px;
	width: 100%;
}

.sidebar .paging-navigation .nav-links {
	max-width: 1040px;
	padding: 0 376px 0 60px;
}

.paging-navigation .nav-next {
	padding: 13px 0;
}

.paging-navigation a {
	font-size: 22px;
	font-style: normal;
	font-weight: 300;
}

.paging-navigation .meta-nav {
	background-color: #66aa66;
	border-radius: 50%;
	color: #fff;
	display: inline-block;
	font-size: 22px;
	padding: 8px 0 8px;
	text-align: center;
	width: 55px;
}

.paging-navigation .nav-previous .meta-nav {
	margin-right: 10px;
	margin-top: 16px;
}

.paging-navigation .nav-next .meta-nav {
	margin-left: 10px;
}

.paging-navigation a:hover .meta-nav {
	background-color: #808080;
	text-decoration: none;
}

おわりに

「Twenty Thirteen」のページナビゲーションをカスタマイズしました。

関連記事(Twenty Thirteenのページ固有の表示をカスタマイズ)

  1. Twenty Thirteenでトップページだけ表示を変更
  2. Twenty Thirteenの固定ページのコメント欄を削除
  3. Twenty Thirteenの前後の記事へのリンクをカスタマイズ
  4. Twenty Thirteenの投稿ページの日付表示等を移動
  5. Twenty Thirteenの投稿ページのコメント欄をカスタマイズ
  6. Twenty Thirteenのアーカイブ表示をカスタマイズ
  7. Twenty Thirteenの検索結果表示をカスタマイズ
  8. Twenty Thirteenのページナビゲーションをカスタマイズ

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

コメント記入欄

※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!

内容を確認して、「コメント送信」ボタンを押してください。

post date*

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)