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

 

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

step
1コメント欄の表示

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

 

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

 

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

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

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

 

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

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

 

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

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

 

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>の手前へ）させます。　

以上のように、「コメント欄」コードを移動させたら、「ファイルを更新」で完了です。　

結果はこのページの「コメント欄」をご参照ください。（「ページ送り」の下位置に「コメント欄」が移動されています。）

 

以上、Affinger５でコメント欄をトグルON／OFF表示させる方法でした。　実際の動きは、このページ下部の「コメント欄 ▼（表示 ON／OFF）」をご参照ください。

 

 

Affinger5について