WP コメント欄をカスタマイズしよう!

デフォルトで設定されているコメント欄のカスタマイズ方法をご紹介します!

コメントフォームのカスタマイズ

コメントフォームの「名前」「メールアドレス」「ウェブサイト」の削除方法

以下CSSをスタイルシートに貼り付けて使用ください。

.comment-form-author{display:none;}/* 「名前」を非表示 */
.comment-notes,.comment-form-email{display:none;}/* 「メールアドレス」を非表示 */
.comment-form-url{display:none;}/* 「ウェブサイト」を非表示 */

※上記を削除した場合、コメント入力時に送信ボタンを押すと、名前やメールアドレスの入力を求める警告文が表示されることがあります。この場合は、WP管理画面から「設定」→「ディスカッション」にある「名前とメールアドレスの入力を必須にする」のチェックを外してください。

コメントフォーム下部に記載されている「使用タグ」の非表示方法

以下CSSをスタイルシートに貼り付けて使用ください。

.form-allowed-tags{
display: none; /* 「使用タグ」を非表示 */
}

コメント欄へのHTML入力を禁止にする方法

function.phpを修正しよう!

デフォルトテーマ内にある functions.php を開きます。
次に、以下コードをfunctions.phpに追記します。

function html_to_text($comment_content) {
if ( get_comment_type() == ‘comment’ ) {
$comment_content = htmlspecialchars($comment_content, ENT_QUOTES);
}
return $comment_content;
}
add_filter(‘comment_text’, ‘html_to_text’, 9);

これで完了です。
※PHPにあまり詳しくない方は、必ずバックアップを取りましょう!

コメント欄の英語表記を日本語に修正しよう!

comment-template.phpを修正しよう!

WPの設定で日本に設定しているのに、コメント欄の送信ボタンやコメント件数の文字が英語の時があります。
そんな時は、comment-template.phpを修正しよう!
編集場所は→ wp-includes → comment-template.php
管理画面からはアクセスできないので、まずはwp-includesをフォルダごとローカルにダウンロードし、編集後アップロードしてください。
comment-template.phpを開いたら、変更した英語表記の文字をF検索し、変えたい文字に変更します。テーマ内にある「comments.php」に記載されている場合もある。
※PHPにあまり詳しくない方は、必ずバックアップを取りましょう!

固定ページコメント欄を丸ごと削除

function.phpを修正しよう!

function.php内のコード comments_open の 次に出てくる「 } 」の後に以下のコードをコピペするだけでOK!

/** 固定ページコメント欄 */
function close_page_comment( $open, $post_id ) {
$post = get_post( $post_id );
if ( $post && $post->post_type == ‘page’ ) {
return false;
}
return $open;
}
add_filter( ‘comments_open’, ‘close_page_comment’, 10, 2 );
/** 固定ページコメント欄 */

※PHPにあまり詳しくない方は、必ずバックアップを取りましょう!

CSS 角丸を表現

CSSで角丸を表現してみよう。

まとめて角丸指定

.クラス名 {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

webkitは、chromeやSafari向け
mozは、Firefox(Mozzila)向け

特定部分だけを角丸指定

.クラス名 {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 25px;
}

要素を加える場合は以下のようにします。

dashedが要素になります。
.クラス名 {
border: 3px dashed #000;/* 細かい点線 */
}

▼その他の要素▼
dashed /* 細かい点線 */
solid /* 線 */
double /* 二重線 */
groove /* 立体線 */
ridge /* 立体線(反転) */
inset /* 立体べた線 */
outset /* 立体べた線(反転) */

CSS 透過の小技、背景だけを透過

CSSで背景やボタンなどを透過させよう。

opacityを使用したよく使われる透過CSS

filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;

filterは、IE向け
-moz-opacityは、chromeやFirefox(Mozzila)向け
opacityは、SafariやOpera向け
となります。

背景だけを透過させたい時は?

よくありがちなケースとして、背景に透過をかけたら、その中の文章や画像が全部透過してしまったというケースです。
そんな時は以下を使用↓0.15の数字を自分好みの透過レベルに修正ください。255は色になります、要素を検証で指定すると早いですね。

background-color: rgba(255,0,0,0.15);