「Twenty Thirteenのページ固有の表示をカスタマイズ」タグアーカイブ

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

Twenty Thirteenの検索結果表示をカスタマイズ

「Twenty Thirteen」の検索結果表示は、個人的にはタイトル表示が強調されすぎていると感じます。検索結果表示について、タイトル表示を調整します。記事の表示が全文ではなく抜粋であるのは、そのままにしておきます。

はじめに

「Twenty Thirteen」の検索結果表示をカスタマイズします。
・タイトル表示を調整

使用環境

WordPress :WordPress 4.2.3
テーマ  :Twenty Thirteen 1.5

タイトル表示を調整

タイトル表示は、スタイルシート「style.css」で変更します。以下、背景をなくして上下に境界線を追加し、文字サイズを調整した変更例です。

<変更前>

/**
 * 5.10 Search Results/No posts
 * ----------------------------------------------------------------------------
 */

.page-header {
	background-color: #e8e5ce;
}

.page-title {
	font: 300 italic 30px "Source Sans Pro", Helvetica, sans-serif;
	margin: 0 auto;
	max-width: 1040px;
	padding: 30px 0;
	width: 100%;
}

<変更後>

/**
 * 5.10 Search Results/No posts
 * ----------------------------------------------------------------------------
 */

.page-header {
	border-top   : 2px solid #a0a0a0;
	border-bottom: 2px solid #a0a0a0;
}

.page-title {
	font: 300 normal 24px  Osaka-mono, "MS Gothic", monospace;
	margin: 0 auto;
	max-width: 1040px;
	padding: 30px 0;
	width: 100%;
}

おわりに

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

Twenty Thirteenのアーカイブ表示をカスタマイズ

「Twenty Thirteen」のアーカイブ表示は、個人的にはタイトル表示が強調されすぎていて、記事の表示が全文で長いと感じます。アーカイブ表示について、タイトル表示の調整と、記事の全文表示を抜粋表示に変更します。アーカイブ表示には、カテゴリ別とタグ別があり、どちらも同じデザインにカスタマイズします。

はじめに

「Twenty Thirteen」のアーカイブ表示をカスタマイズします。
・タイトル表示を調整
・記事の全文表示を抜粋表示に変更

使用環境

WordPress 4.2.3
Twenty Thirteen 1.5

タイトル表示を調整

タイトル表示は、スタイルシート「style.css」で変更します。以下、背景をなくして上下に境界線を追加し、文字サイズを調整した変更例です。

<変更前>

/**
 * 5.9 Archives
 * ----------------------------------------------------------------------------
 */

.archive-header {
	background-color: #e8e5ce;
}

.archive-title,
.archive-meta {
	font: 300 italic 30px "Source Sans Pro", Helvetica, sans-serif;
	margin: 0 auto;
	max-width: 1040px;
	padding: 30px 0;
	width: 100%;
}

<変更後>

/**
 * 5.9 Archives
 * ----------------------------------------------------------------------------
 */

.archive-header {
	border-top   : 2px solid #a0a0a0;
	border-bottom: 2px solid #a0a0a0;
}

.archive-title,
.archive-meta {
	font: 300 normal 24px  Osaka-mono, "MS Gothic", monospace;
	margin: 0 auto;
	max-width: 1040px;
	padding: 30px 0;
	width: 100%;
}

記事の全文表示を抜粋表示に変更

テンプレート「content.php」の記述を変更します。デフォルトでは、検索結果表示のみ抜粋表示となっていますが、カテゴリ別のアーカイブ表示とタグ別のアーカイブ表示も抜粋表示に変更します。

<変更前>
1行目はページの種類の判定で、3行目で抜粋表示しています。

	<?php if ( is_search() ) : // Only display Excerpts for Search ?>
	<div class="entry-summary">
		<?php the_excerpt(); ?>
	</div><!-- .entry-summary -->
	<?php else : ?>
	<div class="entry-content">
		<?php
			/* translators: %s: Name of current post */
			the_content( sprintf(
				__( 'Continue reading %s <span class="meta-nav">&rarr;</span>', 'twentythirteen' ),
				the_title( '<span class="screen-reader-text">', '</span>', false )
			) );

			wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) );
		?>
	</div><!-- .entry-content -->
	<?php endif; ?>

<変更後>
1行目のページの種類の判定に、カテゴリ別とタグ別のアーカイブ表示を追加します。

	<?php if ( is_search() || is_category() || is_tag() ) : // Display Excerpts for Search, Category Archive, and Tag Archive ?>
	<div class="entry-summary">
		<?php the_excerpt(); ?>
	</div><!-- .entry-summary -->
	<?php else : ?>
	<div class="entry-content">
		<?php
			/* translators: %s: Name of current post */
			the_content( sprintf(
				__( 'Continue reading %s <span class="meta-nav">&rarr;</span>', 'twentythirteen' ),
				the_title( '<span class="screen-reader-text">', '</span>', false )
			) );

			wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) );
		?>
	</div><!-- .entry-content -->
	<?php endif; ?>

おわりに

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

Twenty Thirteenの投稿ページのコメント欄をカスタマイズ

「Twenty Thirteen」のコメント欄をカスタマイズします。

はじめに

「Twenty Thirteen」のコメント欄をカスタマイズします。
・Wordpressの設定(ディスカッション)を変更
・スタイルシート(style.css)を変更
・テンプレート(comments.php)を変更

WordPressの設定(ディスカッション)を変更

ディスカッションの設定で、「名前とメールアドレスの入力を必須にする」のチェックをはずします。customize_wp_discussion_001

コメント欄全体の背景色と高さを変更

「style.css」でコメント欄全体の背景色と高さを変更します。

<変更後>

.comment-respond {
	background-color: #ffffff;
	padding: 21px 0 15px;
}

.comment .comment-respond {
	margin-bottom: 20px;
	padding: 20px;
}

コメント欄のタイトル文字を変更

「style.css」でコメント欄のタイトル文字を変更します。

<変更後>

.comment-reply-title {
	font: 700 normal 14px Osaka-mono, "MS Gothic", monospace;
	text-decoration: underline;
}

コメント欄の各入力エリアの幅を変更

「style.css」でコメント欄の各入力エリアの幅を変更します。max-widthとwidthをそろえると美しく見えるかも?

<変更後>

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	max-width: 320px;
	width: 100%;
}

.comment-form textarea {
	max-width: 320px;
	width: 100%;
}

コメント欄のテキスト入力エリアの高さを変更)

「style.css」でコメント欄のテキスト入力エリアの高さを変更します。

<変更後>※追記

textarea#comment {
    height: 45px;
}

ボタンの配色を変更

「style.css」でボタンの配色を変更します。

<変更後>

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	background: #80E080; /* Old browsers */
	background: -webkit-linear-gradient(top, #80E080 0%, #40A040 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #80E080 0%, #40A040 100%); /* W3C */
	border: none;
	border-bottom: 2px solid #108010;
	border-radius: 2px;
	color: #fff;
	display: inline-block;
	padding: 5px 10px 4px;
	text-decoration: none;
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus {
	background: #90F090; /* Old browsers */
	background: -webkit-linear-gradient(top, #90F090 0%, #50B050 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #90F090 0%, #50B050 100%); /* W3C */
	outline: none;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	background: #70D070; /* Old browsers */
	background: -webkit-linear-gradient(top, #40A040 0%, #80E080 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #40A040 0%, #80E080 100%); /* W3C */
	border: none;
	border-top: 2px solid #108010;
	padding: 4px 10px 5px;
}

ボタンのサイズを変更

「style.css」でボタンのサイズを変更します。
<変更後>

/* Buttons */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	background: #80E080; /* Old browsers */
	background: -webkit-linear-gradient(top, #80E080 0%, #40A040 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #80E080 0%, #40A040 100%); /* W3C */
	border: none;
	border-bottom: 2px solid #108010;
	border-radius: 2px;
	color: #fff;
	display: inline-block;
	padding: 5px 10px 4px;
	text-decoration: none;
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus {
	background: #90F090; /* Old browsers */
	background: -webkit-linear-gradient(top, #90F090 0%, #50B050 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #90F090 0%, #50B050 100%); /* W3C */
	outline: none;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	background: #70D070; /* Old browsers */
	background: -webkit-linear-gradient(top, #40A040 0%, #80E080 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #40A040 0%, #80E080 100%); /* W3C */
	border: none;
	border-top: 2px solid #108010;
	padding: 4px 10px 5px;
}

テンプレート(comments.php)を変更

テンプレートで以下の変更を行います。
・タイトルを変更
・ウェブサイトのURL欄を非表示
・上部表示のテキストを変更
・下部表示のテキストを変更
・送信ボタンのテキストを変更

<変更前>

  <?php comment_form(); ?>

<変更後>

	<?php
	$comments_args = array(
		'fields' => array(
			'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
		    	        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
			'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
		                '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
			'url'    => '',
		),
		'title_reply'          => 'コメント記入欄',
		'comment_notes_before' => '<p class="comment-notes">※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!</p>',
		'comment_notes_after'  => '<p class="form-allowed-tags">内容を確認して、「コメント送信」ボタンを押してください。</p>',
		'label_submit'         => 'コメント送信'	);

	comment_form($comments_args);
	?>

おわりに

コメント欄を思い通りにカスタマイズするためには、スタイルシートだけでは難しく、テンプレートのカスタマイズも必要になりました。

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

Twenty Thirteenの投稿ページの日付表示等を移動

本文を見やすくするため、投稿ページの日付表示等をページの下部に移動します。

はじめに

「Twenty Thirteen」の投稿ページの日付表示等を移動します。

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

content.phpの以下の記述をdivタグをはずして、headerタグ内からfooterタグ内の先頭 に移動します。
<変更前>

<div class="entry-meta">
	<?php twentythirteen_entry_meta(); ?>
	<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-meta -->

<変更後>

	<footer class="entry-meta">
		<?php twentythirteen_entry_meta(); ?>
		<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>

おわりに

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

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

Twenty Thirteenの固定ページのコメント欄を削除

固定ページで作成しているトップページや記事の一覧に対しては、コメントをする必要性がほとんどないので、固定ページのコメント欄を削除します。

はじめに

「Twenty Thirteen」の固定ページのコメント欄を削除します。

テンプレートの変更(page.php)

page.phpの以下の記述をコメントアウトします。

<変更前>

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages and that other
 * 'pages' on your WordPress site will use a different template.
 *
 * @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(); ?>

				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<header class="entry-header">
						<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
						<div class="entry-thumbnail">
							<?php the_post_thumbnail(); ?>
						</div>
						<?php endif; ?>

						<h1 class="entry-title"><?php the_title(); ?></h1>
					</header><!-- .entry-header -->

					<div class="entry-content">
						<?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
					</div><!-- .entry-content -->

					<footer class="entry-meta">
						<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
					</footer><!-- .entry-meta -->
				</article><!-- #post -->

				<?php comments_template(); ?>
			<?php endwhile; ?>

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

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

<変更後>

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages and that other
 * 'pages' on your WordPress site will use a different template.
 *
 * @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(); ?>

				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<header class="entry-header">
						<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
						<div class="entry-thumbnail">
							<?php the_post_thumbnail(); ?>
						</div>
						<?php endif; ?>

						<h1 class="entry-title"><?php the_title(); ?></h1>
					</header><!-- .entry-header -->

					<div class="entry-content">
						<?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
					</div><!-- .entry-content -->

					<footer class="entry-meta">
						<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
					</footer><!-- .entry-meta -->
				</article><!-- #post -->

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

Twenty Thirteenでトップページだけ表示を変更

トップページだけ、他のページと異なるレイアウトにしたくなることがあります。Twenty Thirteenでトップページだけ表示を変更します。

はじめに

Twenty Thirteenでトップページだけ表示を変更します。
・is_front_page関数を使用

is_front_page関数を使用

is_front_page関数を使用して、トップページかを判定して、HTMLの出力を制御します。

<使用例>
header.phpで使用して、トップページだけは、パンくずリストを表示しないようにしています。

			<?php if ( !is_front_page() ) { ?>
				<div class="breadcrumbs entry-meta">
				<?php if( function_exists( 'bcn_display' ) ){ bcn_display(); } ?>
				</div>
			<?php } ?>

おわりに

is_front_page関数を使用して、トップページだけ表示を変更しました。

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