「Twenty Thirteen」タグアーカイブ

Twenty Thirteenで404ページを作成

Twenty Thirteenの404ページは、検索フォームもあり、デザイン性も悪いわけではないと思います。
display_404page_001
display_404page_002

ただ、いかにもエラーをイメージする画面なので、以下のようなオリジナルの404ページを作成してみたいと思います。
create_404page_v2_001

リンク切れのページの情報を提供していただけるようなフォームも作成します。
create_404page_v2_002

はじめに

Twenty Thirteenで404ページを作成します。以下の目的を果たす404ページにします。
・サイドバーが表示される通常のページとあまり変わらない印象にする。
・お詫びの気持ちを表す。
・記事検索を使用するか、サイトマップあるいはトップページから改めて記事を探してもらうように促す。
・表示されなかったページの情報提供を可能にする。

当初、404.phpで「ページが見つかりません。」のページにリダイレクトする方法を試しましたが、リダイレクトにより404エラーが発生していることが分かりにくくなってしまったので、リダイレクトの方法は廃止しました。以下の手順で作成します。
・記事検索を促す固定ページを作成
・記事情報の提供を促すフォームの作成(Contact Form 7)
・記事情報の提供を促すフォームを表示する固定ページを作成
・Twenty Thirteenの404ページ(404.php)を変更

記事検索を促す固定ページを作成

検索フォームは、固定ページに直接記載できないので、「404.php」で検索フォームを出力して、それ以外の内容をこれから作成する固定ページから出力するようにします。従って、検索フォーム以降の内容を記載した固定ページを作成ます。
create_404page_v2_011

固定ページは、「All in One SEO Pack」を使用してインデックスされないようにしました。サイトマップの作成も除外しました。
create_404page_013

記事情報の提供を促すフォームの作成(Contact Form 7)

まず、「Contact Form 7」を使用して、情報提供を促すフォームを作成します。
create_404page_001

日本語で作成します。
create_404page_002

オリジナルの404ページのタイトルを入力します。
create_404page_003

オリジナルの404ページの本文を入力します。
create_404page_004

URLのフィールドを設定します。
create_404page_005

特に変更は必要ありません。「タグを挿入」ボタンをクリックします。
create_404page_006

URLのフィールドを設定されたことを確認します。
create_404page_007

「保存」ボタンをクリックして、フォームを作成します。
create_404page_008

フォームのショートコードをコピーして控えます。
create_404page_011

記事情報の提供を促すフォームを表示する固定ページを作成

記事情報の提供を促すフォームを表示する固定ページを作成します。
create_404page_v2_031

Twenty Thirteenの404ページ(404.php)を変更

Twenty Thirteenの404ページ「404.php」の内容をすべて削除して、以下の内容に変更します。「404.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(); ?>

<?php $page_id = 3478; $page = get_post( $page_id ); ?>

<div id="primary" class="content-area">

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

<article id="post-<?php echo $page_id; ?>" <?php post_class(); ?>>

<header class="entry-header">

<h1 class="entry-title"><?php echo $page->post_title; ?></h1>

					</header>

<!-- .entry-header -->

<div class="entry-content">

<div style="padding: 0 32px 34px; border: 2px solid #209020; border-radius: 8px;">

<h2 class="h001">記事検索から記事を探す</h2>

恐れ入りますが、以下の記事検索をお試しください。 

							<?php get_search_form() ?>
							<?php echo $page->post_content ?>
						</div>

					</div>

<!-- .entry-content -->

				</article>

<!-- #post -->

		</div>

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

<!-- #primary -->

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

おわりに

Twenty Thirteenでオリジナルの404ページを作成しました。万が一、404エラーになっても、記事を再度探しなおしたり、サイトの管理者に404エラーとなった記事の情報を伝えることが可能となりました。

関連記事(目次)

  1. インターネットで情報発信!

ページのトップに戻るボタンを作成(jQuery)

ページのトップに戻るボタンを作成します。

はじめに

ページのトップに戻るボタンをjQueryを使用して作成します。

jQueryの有効化

functions.phpに以下の記述を追加して、jQueryを使用可能にします。

function my_scripts() {
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

ページトップボタンを作成

footer.phpにページトップボタンを作成するコードを追加します。

	<p id="page-top"><a href="#wrap"><i class="fa fa-chevron-up"></a></p>
	<script>
	jQuery(function( $ ) {
	    var topBtn = $('#page-top');
	    topBtn.hide();
	    $(window).scroll(function () {
	        if ($(this).scrollTop() > 100) {
	            topBtn.fadeIn();
	        } else {
	            topBtn.fadeOut();
	        }
	    });
	    topBtn.click(function () {
	        $('body,html').animate({
	            scrollTop: 0
	        }, 500);
	        return false;
	    });
	    $(document).click(function(event) {
	            topBtn.fadeOut();
        });
	});
	</script>

ボタン表示のカスタマイズ

CSSでボタン表示を整えます。

#page-top {
    position: fixed;
    bottom: 16px;
    right: 16px;
    font-size: 77%;
    z-index:999;
}

#page-top a {
    background: rgba(96,96,96,0.2);
    text-decoration: none;
    color: #ffffff;
    width: 60px;
    padding: 16px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
    border-color: rgba(144,144,144,0.2);
}

#page-top a:hover {
    text-decoration: none;
    background:  rgba(144,144,144,0.2);
    border-color: rgba(144,144,144,0.2);
}

おわりに

ページのトップに戻るボタンを作成しました。

関連記事(目次)

  1. インターネットで情報発信!

Twenty Thirteenのコメント欄の見出しのh3タグを変更

Twenty Thirteenでは、コメント欄の見出しが固定で「h3」タグになっています。記事の見出しのタグとの整合性が取りにくいのと、そもそも見出しのタグである必要がないと考えて、コメント欄の見出しの「h3」タグを「p」タグに変更します。

はじめに

Twenty Thirteenのコメント欄の見出しの「h3」タグを「p」タグに変更します。

テンプレート(comment-template.php)の変更

comment-template.phpを修正して、見出しの「h3」タグを「p」タグに変更します。

<変更前>

			<div id="respond" class="comment-respond">
				<h3 id="reply-title" class="comment-reply-title"><?php comment_form_title( $args['title_reply'], $args['title_reply_to'] ); ?> <small><?php cancel_comment_reply_link( $args['cancel_reply_link'] ); ?></small></h3>
				<?php if ( get_option( 'comment_registration' ) && !is_user_logged_in() ) : ?>

<変更後>

			<div id="respond" class="comment-respond">
				<p id="reply-title" class="comment-reply-title"><?php comment_form_title( $args['title_reply'], $args['title_reply_to'] ); ?> <small><?php cancel_comment_reply_link( $args['cancel_reply_link'] ); ?></small></p>
				<?php if ( get_option( 'comment_registration' ) && !is_user_logged_in() ) : ?>

おわりに

Twenty Thirteenのコメント欄の見出しの「h3」タグを「p」タグに変更しました。今回は、Twenty Thirteenのテーマではなく、WordPress本体をカスタマイズしています。他のテーマへの影響があることを補足します。

関連記事(Twenty Thirteenのタグをカスタマイズ)

  1. Twenty Thirteenの見出しのタグの変更を検討
  2. Twenty Thirteenのサイト名とサイト説明のタグを変更
  3. Twenty Thirteenのサイドバーの見出しのh3タグを変更
  4. Twenty Thirteenのコメント欄の見出しのh3タグを変更

関連記事(目次)

  1. インターネットで情報発信!

Twenty Thirteenのサイドバーの見出しのh3タグを変更

Twenty Thirteenでは、サイドバーの見出しが固定で「h3」タグになっています。記事の見出しのタグとの整合性が取りにくいのと、そもそも見出しのタグである必要がないと考えて、サイドバーの見出しの「h3」タグを「div」タグに変更します。

はじめに

Twenty Thirteenのサイドバーの見出しの「h3」タグを「div」タグに変更します。

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

functions.phpのtwentythirteen_widgets_init()関数を修正して、見出しの「h3」タグを「div」タグに変更します。

<変更前>

function twentythirteen_widgets_init() {
	register_sidebar( array(
		'name'          => __( 'Main Widget Area', 'twentythirteen' ),
		'id'            => 'sidebar-1',
		'description'   => __( 'Appears in the footer section of the site.', 'twentythirteen' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );

	register_sidebar( array(
		'name'          => __( 'Secondary Widget Area', 'twentythirteen' ),
		'id'            => 'sidebar-2',
		'description'   => __( 'Appears on posts and pages in the sidebar.', 'twentythirteen' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );
}

<変更後>

function twentythirteen_widgets_init() {
	register_sidebar( array(
		'name'          => __( 'Main Widget Area', 'twentythirteen' ),
		'id'            => 'sidebar-1',
		'description'   => __( 'Appears in the footer section of the site.', 'twentythirteen' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<div class="widget-title">',
		'after_title'   => '</div>',
	) );

	register_sidebar( array(
		'name'          => __( 'Secondary Widget Area', 'twentythirteen' ),
		'id'            => 'sidebar-2',
		'description'   => __( 'Appears on posts and pages in the sidebar.', 'twentythirteen' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<div class="widget-title">',
		'after_title'   => '</div>',
	) );
}

おわりに

Twenty Thirteenのサイドバーの見出しの「h3」タグを「div」タグに変更しました。

関連記事(Twenty Thirteenのタグをカスタマイズ)

  1. Twenty Thirteenの見出しのタグの変更を検討
  2. Twenty Thirteenのサイト名とサイト説明のタグを変更
  3. Twenty Thirteenのサイドバーの見出しのh3タグを変更
  4. Twenty Thirteenのコメント欄の見出しのh3タグを変更

関連記事(目次)

  1. インターネットで情報発信!

Twenty Thirteenの見出しのタグの変更を検討

Twenty Thirteenの見出しのタグの変更と使用方法の統一化を検討します。h1~h6は、個々の記事での見出しを表し、各ページで文章構造に合わせて正しい順序で使用することが大切です。

はじめに

ページの種類毎に、Twenty Thirteenの見出しのタグのと使用方法の統一化を検討します。
・トップページ
・固定ページ
・投稿ページ
・アーカイブページ(カテゴリ/タグ)

トップページ

トップページは以下の構造になっています。ICT実験室では、トップページの記事のタイトルを非表示にしています。
・h1:サイト名→divに変更
・h2:サイト説明→divに変更
・h1:サイトの目次(例:「ICT実験室の目次」)
※目次の内容は、h2から開始します。
・h3:サイドバーの見出し→divに変更
・h3:コメント欄の見出し→divに変更

固定ページ

固定ページ(トップページ以外)は以下の構造になっています。
・h1:サイト名→divに変更
・h2:サイト説明→divに変更
・h1:記事のタイトル
※記事の内容は、h2から開始します。
・h3:サイドバーの見出し→divに変更
・h3:コメント欄の見出し→divに変更

投稿ページ

投稿ページは以下の構造になっています。
・h1:サイト名→divに変更
・h2:サイト説明→divに変更
・h1:記事のタイトル
※記事の内容は、h2から開始します。
・h3:サイドバーの見出し→divに変更
・h3:コメント欄の見出し→divに変更

アーカイブページ

アーカイブページ(カテゴリ/タグ)は以下の構造になっています。
・h1:サイト名→divに変更
・h2:サイト説明→divに変更
・h1:アーカイブのタイトル(例:カテゴリー別アーカイブ: <記事のタイトル>)
・h1:記事のタイトル
※記事の内容は、h2から開始します。
・h3:サイドバーの見出し→divに変更
・h3:コメント欄の見出し→divに変更

おわりに

記事を作成する際の見出しのタグの使用方法をまとめます。

・記事を作成する際は、記事のタイトルがh1で固定のため、h2から順に使用します。従って、以下のようにh1~h6のタグの使用法が統一化できます。

 h1:記事のタイトル ※固定
 h2:記事の見出し(大見出し)
 h3:記事の見出し(中見出し)
 h4:記事の見出し(小見出し)
 h5:記事の見出し ※階層が深くなりすぎるので使用しない。
 h6:記事の見出し ※階層が深くなりすぎるので使用しない。

※階層を下るときに、h2→h4というように間を飛ばさないように記述します。

・サイト名がh1、サイト説明がh2で固定のところ、divタグに変更します。
・ウェジェットのタイトルとコメント欄のタイトルが、h3で固定のため、WordPressあるいはテーマのテンプレートをカスタマイズしてdivタグあるいはpタグに変更します。変更方法は、関連記事でまとめます。

Twenty Thirteenの見出しのタグの変更と使用方法の統一化について検討しました。

関連記事(Twenty Thirteenのタグをカスタマイズ)

  1. Twenty Thirteenの見出しのタグの変更を検討
  2. Twenty Thirteenのサイト名とサイト説明のタグを変更
  3. Twenty Thirteenのサイドバーの見出しのh3タグを変更
  4. Twenty Thirteenのコメント欄の見出しのh3タグを変更

関連記事(目次)

  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の設定(ディスカッション)を変更
・スタイルシート(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でトップページだけ表示を変更します。

はじめに

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