wordpressテーマ・Affinger５でコメント欄をトグルON／OFF表示させるには

2019年9月14日

Affinger５で、コメント欄を表示すると、そのスペースエリアが大きく特にスマホでは邪魔なため、Affinger５管理からコメント欄を非表示設定にしていました。　

今回、Simplycity２テーマで以前に実施していたコメント欄のON／OFF表示をAffinger５にも取り入れてコメント欄を復活させました。　更にコメント欄を移動させる方法も紹介します。

　ー目次ー　

1 コメント欄をON／OFFトグル・表示させる方法
2 コメント欄の位置をページ送りの下に移動させる方法
3 Affinger5について

コメント欄をON／OFFトグル・表示させる方法

step
1コメント欄の表示

Affinger５管理＞投稿・固定記事設定＞コメント　へ行き以下の様に設定し「コメント欄」を表示させます。　コメントのテキストにタイトルを「コメント欄 ▼（表示 ON／OFF）」等にして設定しておきます。

step
2コメント欄のタイトル部分のCSS

CSSコード

<style type="text/css">
#reply-title:hover{
opacity:0.7;
cursor:pointer;
color: red;
}
</style>

#reply-title:hover{

opacity:0.7;

cursor:pointer;

color: red;

}

</style>

このCSSについて

コメント欄のタイトル（要素IDは”reply-title”）にカーソルポインターを当てた時にタイトルを赤文字にして目立たせています。

＜コメント欄タイトル＞
コメント欄 ▼（表示 ON／OFF）

step
3コメント欄を表示・非表示させるjQueryコード

コメント欄（要素）を表示・非表示させるためにjQueryコードの「toggleメソッド」を使います。

このtoggleメソッドは、対象要素に対して、showメソッドとhideメソッドを交互に実行します。　また、表示・非表示の動作（振る舞いアニメーション）も指定できます。　以下のコードでは、ゆっくりした表示・非表示の動作を行わせるためにslowを指定しています。→toggle('slow')

jQueryコード

<script type="text/javascript">
$(function(){
 // 初期表示は非表示にする
$('#commentform').toggle();
$("#reply-title").click(function(){
$("#commentform").toggle('slow');
});
})
</script>

$(function(){

// 初期表示は非表示にする

$('#commentform').toggle();

$("#reply-title").click(function(){

$("#commentform").toggle('slow');

});

})

</script>

コメントを表示する要素は<form〜>タグす。　このタグに要素ID”commentform”が含まれていますのでこれを jQueryの実行目印（要素）に使います。

最初、コメント欄は非表示(表示OFF)にしたいので、$('#commentform').toggle();を１行挿入しています。

そして、コメントのタイトル（”reply-title”）がクリックされたら、$("#commentform").toggle('slow')が実行され、<form〜>要素がゆっくりと開閉動作します。

step
4Affinger5のヘッダーにCSSとjQueryを配置

Affinger５管理＞「その他」　へ行き、「headに出力するコード※wp_head()にエスケープせずにそのまま出力されます」の入力欄に上記のCSSとjQueryコードをコピペすれば完成です。　簡単ですね！

コメント欄の位置をページ送りの下に移動させる方法

コメント欄の位置を変更する必要に迫られた理由は、Affinger５で「おすすめ記事」を表示させると、コメント欄が「おすすめ記事」と「関連記事」の間にサンドイッチされて見にくくなりましたので、コメント欄を「ページ送り」の下へ移動させました。（2019/9/14追記）

注意ポイント

現状のままのコメント欄の位置で良ければ、以下の操作は不要です。

コメント欄を移動移動させる場合は、single-type1.php、single-type2.php、single.phpのコードを一部変更する必要がありますので、安全のために事前バックアップしておきます。

step
1３つのファイルを子テーマへコピー

３つのファイル（single-type1.php、single-type2.php、single.php）をFileZillaなどのFTPソフトで親テーマからコピーして子テーマフォルダーへ貼り付けておきます。　wordpressの外観＞テーマの編集で、右サイドバーに３つのファイル名が表示されると思います。

step
2single.phpの一部変更

子テーマフォルダーに入れたsingle-type1.php、single-type2.phpに変更を行いますが、この変更を反映させるためには、予めsingle.phpのコードをTEMPLATEPATHからSTYLESHEETPATHに変更しておきます。

step
3single-type1.php及びsingle-type2.php内の’コメント’位置を変更

薄黄色でハイライトされている、6行目の位置に「コメント欄のコード（22行〜28行）」が書かれていて、このコードをハイライトされている22行目以降へ移動（</aside>の手前へ）させます。　

<?php st_author(); //著者リンク ?>
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
<!--ループ終了-->
<!--元のコメント位置-->
<!--関連記事-->
<?php get_template_part( 'kanren' ); ?>
<!--ページナビ-->
<div class="p-navi clearfix">
<dl>
<?php
$prev_post = get_previous_post();
if ( !empty( $prev_post ) ): ?>
〜〜中略〜〜
<?php endif; ?>
</dl>
</div>
<!--コメント 移動先-->
<?php
//コメント
if ( ( $GLOBALS["stdata6"] ) === '' ) { ?>
<?php if ( comments_open() || get_comments_number() ) {
comments_template();
} ?>
<?php } ?>						
</aside>
</div>
<!--/post-->