WordPress サイトでコメント入力フォームの場所を変更したい場合は、テーマファイルをカスタマイズすることを考えることができますが、簡単なCSSでもコメント入力フォームの場所を変更することができます。この記事では GeneratePress テーマとKadenceテーマでコメント入力フォームの場所をコメントの先頭に移動する方法を見てみましょう。
CSS Flexboxを使用して WordPress コメント入力フォームの場所を変更する
韓国のWeb従事者を悩ませてきたIEが、2022年6月にサポートが終了し、歴史的に消えました。 IEのせいで フレックスボックスが使えなくて大変不便でしたが、今はflexboxを気軽に使えてCSSの使用幅が広がったようです。
GeneratePress テーマのコメントフィールドの場所を変更する
WordPressのコメント欄は通常コメントリストの下部に表示されます。コメントフィールドをコメントリストの上部に移動するには、テーマファイルを編集する必要があります。 GeneratePress テーマがインストールされている WordPress ブログでは実際にcomments.phpファイルを変更してコメント入力フォームをコメントリストの上に移動しました。
カスタム制約があるかもしれませんが、 GeneratePress テーマでコメント入力ボックスの位置を上に移動したい場合は、テーマファイルを直接変更するのではなく、次の簡単なCSSコードを使用できます。
/* CSS style to move the comment form above the comment list in the WordPress GeneratePress theme */
/* 댓글 입력 폼 위치 */
#comments {
display: flex;
flex-direction: column;
}
#comments #respond {
order: 1;
margin-bottom: 40px;
}
#comments .comments-title {
order: 2;
}
#comments .comment-list {
order: 3;
}
.comment-form>.form-submit {
text-align: right;
}一番下のコードはコメント送信ボタンを右に揃えます。不要だと思えば削除してもいいです。
カスタムCSSコードは デザイン » カスタマイズ » 追加のCSS セクションに追加したり、 チャイルドテーマの関数ファイル（のfunctions.php）に追加することができます。
Kadenceテーマでコメント入力フォームを移動する
ケイデンステーマは、他のテーマと同様に、コメント入力ボックスが図のようにコメントリストの下に配置されます。
ケイデンスのテーマを使用している場合でも、上記のGPテーマに適用されたCSSと同じコードを追加して、コメント入力ボックスをコメントリストの上部に表示できます。
Kadenceテーマはテーマファイルをカスタマイズすることは容易ではありませんので、下記のコードを使用してコメントフォームの場所を変更してください。
/* This CSS snippet moves the comment submission form to appear above the list of existing comments in the WordPress Kadence theme. */
#comments {
display: flex;
flex-direction: column;
}
#comments .comments-title {
order: 2; /* this will be the second item */
}
#comments .comment-list {
order: 3; /* this will be the third item */
}
#comments .respond {
order: 1; /* this will be the first item */
}
#comments .form-submit #submit {
width: 100%;
}
#comments .form-submit {
margin-bottom: 60px;
}同様に、上記のカスタムCSSコードは デザイン » カスタマイズ » 追加のCSSに入力できます。
上記のコードを追加すると、次のようにコメント入力ボックスが上部に移動します。
コメントを残す