Twenty Thirteenの前後の記事へのリンクをカスタマイズ

「Twenty Thirteen」の「前後の記事へのリンク」をカスタマイズします。

はじめに

「Twenty Thirteen」の「前後の記事へのリンク」をカスタマイズします。
・テンプレートの修正(functions.php)
・スタイルシートの修正(style.css)
・記事の順序について
・前後の記事へのリンクを削除する場合

使用環境

WordPress 4.2.3
Twenty Thirteen 1.5

テンプレートの修正(functions.php)

テンプレート「functions.php」の以下の記述を変更します。

<変更前>

if ( ! function_exists( 'twentythirteen_post_nav' ) ) :
/**
 * Display navigation to next/previous post when applicable.
*
* @since Twenty Thirteen 1.0
*/
function twentythirteen_post_nav() {
	global $post;

	// Don't print empty markup if there's nowhere to navigate.
	$previous = ( is_attachment() ) ? get_post( $post->post_parent ) : get_adjacent_post( false, '', true );
	$next     = get_adjacent_post( false, '', false );

	if ( ! $next && ! $previous )
		return;
	?>
	<nav class="navigation post-navigation" role="navigation">
		<h1 class="screen-reader-text"><?php _e( 'Post navigation', 'twentythirteen' ); ?></h1>
		<div class="nav-links">

			<?php previous_post_link( '%link', _x( '<span class="meta-nav">&larr;</span> %title', 'Previous post link', 'twentythirteen' ) ); ?>
			<?php next_post_link( '%link', _x( '%title <span class="meta-nav">&rarr;</span>', 'Next post link', 'twentythirteen' ) ); ?>

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

<変更後>

if ( ! function_exists( 'twentythirteen_post_nav' ) ) :
/**
 * Display navigation to next/previous post when applicable.
*
* @since Twenty Thirteen 1.0
*/
function twentythirteen_post_nav() {
	global $post;

	// Don't print empty markup if there's nowhere to navigate.
	$previous = ( is_attachment() ) ? get_post( $post->post_parent ) : get_adjacent_post( false, '', true );
	$next     = get_adjacent_post( false, '', false );

	if ( ! $next && ! $previous )
		return;
	?>
	<nav class="navigation post-navigation" role="navigation">
		<h1 class="screen-reader-text"><?php _e( 'Post navigation', 'twentythirteen' ); ?></h1>
		<div class="nav-links">

			<?php previous_post_link( '%link', _x( '<span class="meta-nav"><i class="fa fa-hand-o-left"></i>【前の記事】</span>%title', 'Previous post link', 'twentythirteen' ), true ); ?>
			<br />
			<?php next_post_link( '%link', _x( '<span class="meta-nav"><i class="fa fa-hand-o-right"></i>【次の記事】</span>%title', 'Next post link', 'twentythirteen' ), true ); ?>

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

スタイルシートの修正(style.css)

テンプレート「style.css」の以下の記述を変更します。以下の例では、背景の画像を追加、フォントサイズの変更、表示位置の変更を行っています。

<変更前>

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

~省略(ページナビゲーションの指定)~

.post-navigation {
	background-color: #fff;
	color: #ca3c08;
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	padding: 20px 0;
}

.post-navigation .nav-links {
	margin: 0 auto;
	max-width: 1140px;
}

.sidebar .post-navigation .nav-links {
	padding: 0 426px 0 60px;
}

.post-navigation a[rel="next"] {
	float: right;
	text-align: right;
}

<変更後>

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

~省略(ページナビゲーションの指定)~

.post-navigation {
	background-image: url(images/ictlab101_background_004.png);
	background-color: #fff;
	color: #ca3c08;
	font-size: 14x;
	font-style: normal;
	font-weight: 300;
	padding: 20px 0;
}

.post-navigation .nav-links {
	margin: 0 auto;
	max-width: 1140px;
}

.sidebar .post-navigation .nav-links {
	padding: 0 426px 0 60px;
}

.post-navigation a[rel="next"] {
/*	float: right;*/
/*	text-align: right;*/
}

記事の順序について

記事の順序は、記事の作成日順になります。順序を入れ替える場合は、記事の作成日を変える必要があります。

前後の記事へのリンクを削除する場合

「前後の記事へのリンク」を削除したい場合は、テンプレート「single.php」で以下のように、twentythirteen_post_nav関数をコメントアウトします。

<変更前>

<?php
/**
 * The template for displaying all single posts
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

			<?php /* The loop */ ?>
			<?php while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'content', get_post_format() ); ?>
				<?php twentythirteen_post_nav(); ?>
				<?php comments_template(); ?>

			<?php endwhile; ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

<変更後>

<?php
/**
 * The template for displaying all single posts
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

			<?php /* The loop */ ?>
			<?php while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'content', get_post_format() ); ?>
				<?php /* twentythirteen_post_nav(); */ ?>
				<?php comments_template(); ?>

			<?php endwhile; ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

おわりに

「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. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

コメントを残す

メールアドレスが公開されることはありません。

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