GeneratePress テーマコメントセクションレイアウトを変更する

GeneratePress テーマのコメントセクションでは、他のテーマと同様の方法でカスタムが可能です。 この記事では、このブログに設置されている WordPress テーマである GeneratePressのコメントセクションを変更する方法について簡単に説明します。

[この記事は2022年7月21日に最終更新されました。 ]

GeneratePress テーマコメントセクションレイアウトを変更する

WordPress GeneratePress テーマ コメントフォームをカスタムするいくつかの方法について説明します。

コメント入力フォームからのメールフィールドとウェブサイトのフィールドを削除する

コメント入力時、最小限の情報を入力するようにすると、理論上、訪問者がコメントをする可能性が高くなります。 しかし、実際には大きな影響を及ぼさないようです。 コメントフォームを簡潔に作成したい場合コメントフォームからメールフィールドとウェブサイトのフィールドの削除を考慮してみることができます。

GeneratePress テーマでメールフィールドをなくすためには、まずメールフィールドが必須フィールドに設定されことを解除する必要があります。 設定>ディスカッションで「コメントを書いた人の名前と電子メールを必ず残す必要があります」オプションのチェックを外します。

次に FTPで（Webホスティング）サーバに接続して チャイルドテーマ 内の関数ファイル（functions.php）に次のコードを追加します。

// 이메일 필드와 웹사이트 필드 제거하기
add_action( 'after_setup_theme', 'tu_add_comment_url_filter' );
function tu_add_comment_url_filter() {
    add_filter( 'comment_form_default_fields', 'tu_disable_comment_url', 20 );
}

function tu_disable_comment_url($fields) {
    unset($fields['url']);
    unset($fields['email']);
    return $fields;
}

ちなみに、この方法を使用すると、訪問者が名前を入力しなくてもコメントが登録されています。 これを防止するために、次のコードスニペットをテーマ関数ファイルに追加するようにします。 （次のコードは、 GeneratePress テーマでテストをしていなかったが、うまく動作しています。）

// 이름 필드를 필수로 만들기
// To make the Name field a required field
function require_comment_name($fields) {
 
if ($fields['comment_author'] == '')
wp_die('Error: please enter a valid name.');
 
return $fields;
}
add_filter('preprocess_comment', 'require_comment_name');

[名前]ボックスとメール欄にしたラインに表示されるようにする

コメントの名前フィールドと電子メールフィールドがPC画面でXNUMX行に表示されるようにしたい場合は、次のコードスニペットをチャイルドテーマのスタイルシートファイル（style.cssの）に追加するようにします。

// GeneratePress 테마에서 이름 필드와 이메일 필드를 같은 라인에 표시되도록 하기
// To make the Name and email box appear on the same line
@media (min-width: 769px) {
    .comment-form #author, 
    .comment-form #email {
        width: 48%;
        float: left;
    }

    .comment-form #email {
        float: right;
    }

    .comment-form #url {
        width: 100%;
    }
}

その後、デスクトップで接続時にこのブログのようにコメントセクションの名前（Name）]フィールドと電子メール（E-mail）フィールドが同じ行に表示されます。

Name、E-mail、Website Placeholder変更する

コメント欄にデフォルトで表示されるName、Email、Websiteプレースホルダテキストを変更したい場合は、次のようなコードスニペットをテーマ関数ファイルに入力することができます。

// 이름, 이메일, 웹사이트 Placeholder 변경하기
// Change the Name, Email and Website placehodlers in GeneratePress
add_filter( 'comment_form_default_fields', 'tu_filter_comment_fields', 20 );
function tu_filter_comment_fields( $fields ) {
    $commenter = wp_get_current_commenter();

    $fields['author'] = '<label for="author" class="screen-reader-text">' . esc_html__( 'Name', 'generatepress' ) . '</label><input placeholder="NEW NAME HERE *" id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" />';

    $fields['email'] = '<label for="email" class="screen-reader-text">' . esc_html__( 'Email', 'generatepress' ) . '</label><input placeholder="NEW EMAIL HERE *" id="email" name="email" type="email" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30" />';

    $fields['url'] = '<label for="url" class="screen-reader-text">' . esc_html__( 'Website', 'generatepress' ) . '</label><input placeholder="NEW WEBSITE HERE" id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" />';


    return $fields;
}

ウェブサイトの部分はうまく動作するかどうか分かりません。 もしかしたら正常に動作しない場合url部分の代わりに次の行に置き換えると、Webサイトのフィールドが削除されます。

unset( $fields['url'] );

他の方法でテーマファイルを直接編集することも可能ですが、テーマが更新されると修正が消えるので好ましくありません。 / WP-コンテンツ/themes/generatepress/inc/structure/comments.php ファイルから直接フレーズを変更することができます。

「ポストコメント」のフレーズを変更する

コメントの内容を入力した後、コメントを提出する際に使用される送信ボタンが GeneratePress テーマでは「Post Comment」になっています。 このフレーズを変更するには、次のコードをテーマ関数ファイルに追加します。

// Change Default Post Comment Text
// 기본 "Post Comment" 텍스트 변경하기
add_filter( 'generate_post_comment', 'mj_generate_post_comment' );
function mj_generate_post_comment() {
    return 'Send Comment ⟶';
}

Send Comment... 部分を適切に変更するようにします（例：「コメントの登録」）。

コメントCookie（「次回のコメントを作成するためにこのブラウザに名前、電子メール、およびウェブサイトを保存します」）を削除または変更する

上記の方法で名前フィールドと電子メールフィールドをXNUMX行に表示するように変更すると、「次回のコメントを作成するためにこのブラウザに名前、電子メール、およびウェブサイトを保存します」(Save my name, email, and website in this browser for the next time I comment) フィールドが縦に表示される現象が発生します。

そのような場合は、次のCSSコードを追加すると正しく表示されます。

/* 댓글 쿠키 필드 너비 조정하기 */
.comment-form-cookies-consent {
    width: 100%;
}

コメントCookieを完全に削除したい場合は、ディスカッション設定でコメントフォームCookie同意フィールドを無効にできます。

設定 » ディスカッション » その他のコメント設定の "コメントクッキー選択チェックボックスを表示し、コメント作成者のクギ設定を許可する"オプションをオフにします。

コメントクッキーのフレーズを変更したい場合は、次のコードを使用できます。

// 댓글 쿠키 문구 변경하기
add_filter( 'comment_form_default_fields', 'tu_filter_comment_fields', 20 );
function tu_filter_comment_fields( $fields ) {
    $commenter = wp_get_current_commenter();

    $consent   = empty( $commenter['comment_author_email'] ) ? '' : ' checked="checked"';

    $fields['cookies'] = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $consent . ' />' . '<label for="wp-comment-cookies-consent">이름과 이메일을 기억합니다.</label></p>';

    return $fields;
}

「名前とメールを覚えています」の部分を適切なフレーズに置き換えてください。

ウェブサイトのフィールドを削除する

コメントからURLフィールドを削除したい場合は、上記の方法で削除できます。 削除できない場合は、次のコードをテーマ関数ファイルに追加すると、Webサイトのフィールドが削除されます。

// 웹사이트 필드 제거, Remove Website field
add_action( 'after_setup_theme', 'tu_add_comment_url_filter' );
function tu_add_comment_url_filter() {
    add_filter( 'comment_form_default_fields', 'tu_disable_comment_url', 20 );
}

function tu_disable_comment_url($fields) {
    unset($fields['url']);
    return $fields;
}

クリアフィなどの一部の最適化プラグインでは、コメントからURLフィールドを削除するオプションを提供することがあります。 しかし、そのようなプラグインからコメントURLフィールドを削除するように設定しても GeneratePress テーマから削除されないことがあります。 そのような場合は、上記の方法を削除することができます。 また、CSSで隠すことも可能ですが、CSSで隠す方法は実際のURLフィールドが削除されるのではなく、ブラウザ上でのみユーザーに表示されないようにします。

最後に、

以上で GeneratePress テーマでコメントセクションを変更するいくつかの例を見てみました。 コメントフォームをより精巧に修正したい場合、テーマフォルダ内の comments.php ファイルを変更することができます。 このファイルを修正するには、まず、チャイルドテーマを作成作業してください。

1. チャイルドテーマを作成します。
2. FTPを介して親テーマフォルダの下の comments.php ファイルをPCにダウンロードし、ダウンロードしたファイルを（Webホスティングサーバーの）チャイルドテーマのフォルダにアップロードします。
3. チャイルドテーマのフォルダの下の comments.php ファイルを必要に応じて変更します。

そしてCSSを使用してコメントセクション内のフィールドやテキストサイズ、色、背景色などを変更することができます。

付録：CSSコードとPHPコードを追加する方法

CSSコードを追加する方法

CSSコードはいくつかの方法で追加できます。

1. WordPress 管理者ページ内で ルックス>ユーザー定義>追加CSS セクションに追加することができます。
2. または、 Avada, Enfold, Newspaper, ディビ など一部の有料テーマでは、独自のテーマオプション内でカスタムCSSを追加するためのスペースを提供することもあります。 例えば、 Newspaper テーマの場合 Newspape > Theme Panel > Custom Code > Custom CSS セクションにカスタムCSSコードを追加できます。
3. または、FTPに接続してテーマフォルダ内のスタイルシート（style.css）ファイルにカスタムCSSを追加することもできます。 この方法を使用する場合は、必ずチャイルドテーマをインストールしてチャイルドテーマ内のスタイルシートファイルに追加してください。

カスタムコードを追加する

この記事に記載されているPHPコードは、テーマフォルダ内の関数ファイル（functions.php）に追加してください。 同様に チャイルドテーマを作成して子テーマ内の関数ファイルに追加します。 それ以外の場合は、テーマが更新され、追加したコードがすべて消えます。

PHPコードスニペットを追加できるプラグインを使用すると、 WordPress 通知パネルから直接追加することもできますが、可能な限りチャイルドテーマ内の関数ファイルに追加することをお勧めします。

参照

• WordPress コメントフォームを簡潔に作成する方法