「コメント欄」タグアーカイブ

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」の固定ページのコメント欄を削除します。

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