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

投稿日:2019年6月26日 更新日:

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

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

 

 

スポンサーリンク

 

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

step
1
コメント欄の表示

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

 

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

CSSコード


このCSSについて

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

<コメント欄タイトル>
コメント欄 ▼(表示 ON/OFF)

 

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

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

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

 

jQueryコード

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

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

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

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

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

 

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

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

 

注意ポイント

  • 現状のままのコメント欄の位置で良ければ、以下の操作は不要です。
  • コメント欄を移動移動させる場合は、single-type1.php、single-type2.php、single.phpのコードを一部変更する必要がありますので、安全のために事前バックアップしておきます。

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

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

 

step
2
single.phpの一部変更

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

 

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

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

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

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

 

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

 

参考にさせて頂いたURL

 

Affinger5について

 


スポンサーリンク

〜〜〜〜〜〜〜〜〜〜〜

 

おすすめ記事

1

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

2

  これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあ ...

3

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

4

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...

5

「HAP-Z1ESのDSEEとDSDリマスタリングエンジンの効果検証」(以前のブログ記事)は、 実際のLPレコードからハイレゾ化したリアルサウンドでDSEEを評価したものでした。 今回は、正弦波の組 ...

Copyright© ハイレコのブログ , 2019 All Rights Reserved Powered by AFFINGER5.