Affinger5で、コメント欄を表示すると、そのスペースエリアが大きく特にスマホでは邪魔なため、Affinger5管理からコメント欄を非表示設定にしていました。
今回、Simplycity2テーマで以前に実施していたコメント欄のON/OFF表示をAffinger5にも取り入れてコメント欄を復活させました。 更にコメント欄を移動させる方法も紹介します。
コメント欄をON/OFFトグル・表示させる方法
step
1コメント欄の表示
Affinger5管理 > 投稿・固定記事設定 >コメント へ行き以下の様に設定し「コメント欄」を表示させます。 コメントのテキストにタイトルを「コメント欄 ▼(表示 ON/OFF)」等にして設定しておきます。
step
2コメント欄のタイトル部分のCSS
CSSコード
|
<style type="text/css"> #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> |
コメントを表示する要素は<form〜>タグす。 このタグに要素ID”commentform”が含まれていますのでこれを jQueryの実行目印(要素)に使います。
最初、コメント欄は非表示(表示OFF)にしたいので、$('#commentform').toggle();を1行挿入しています。
そして、コメントのタイトル(”reply-title”)がクリックされたら、$("#commentform").toggle('slow')が実行され、<form〜>要素がゆっくりと開閉動作します。
step
4Affinger5のヘッダーにCSSとjQueryを配置
Affinger5管理 > 「その他」 へ行き、「headに出力するコード※wp_head()にエスケープせずにそのまま出力されます」の入力欄に上記のCSSとjQueryコードをコピペすれば完成です。 簡単ですね!

コメント欄の位置をページ送りの下に移動させる方法
コメント欄の位置を変更する必要に迫られた理由は、Affinger5で「おすすめ記事」を表示させると、コメント欄が「おすすめ記事」と「関連記事」の間にサンドイッチされて見にくくなりましたので、コメント欄を「ページ送り」の下へ移動させました。(2019/9/14追記)
注意ポイント
- 現状のままのコメント欄の位置で良ければ、以下の操作は不要です。
- コメント欄を移動移動させる場合は、single-type1.php、single-type2.php、single.phpのコードを一部変更する必要がありますので、安全のために事前バックアップしておきます。
step
13つのファイルを子テーマへコピー
3つのファイル(single-type1.php、single-type2.php、single.php)をFileZillaなどのFTPソフトで親テーマからコピーして子テーマフォルダーへ貼り付けておきます。 wordpressの外観>テーマの編集で、右サイドバーに3つのファイル名が表示されると思います。
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>の手前へ)させます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?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--> |
以上のように、「コメント欄」コードを移動させたら、「ファイルを更新」で完了です。
結果はこのページの「コメント欄」をご参照ください。(「ページ送り」の下位置に「コメント欄」が移動されています。)
以上、Affinger5でコメント欄をトグルON/OFF表示させる方法でした。 実際の動きは、このページ下部の「コメント欄 ▼(表示 ON/OFF)」をご参照ください。
Affinger5について
広告 Affinger・改善
wordpressテーマ・Affinger5でコメント欄をトグルON/OFF表示させるには
スポンサーリンク
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
4Affinger5のヘッダーにCSSとjQueryを配置
Affinger5管理 > 「その他」 へ行き、「headに出力するコード※wp_head()にエスケープせずにそのまま出力されます」の入力欄に上記のCSSとjQueryコードをコピペすれば完成です。 簡単ですね!
コメント欄の位置をページ送りの下に移動させる方法
コメント欄の位置を変更する必要に迫られた理由は、Affinger5で「おすすめ記事」を表示させると、コメント欄が「おすすめ記事」と「関連記事」の間にサンドイッチされて見にくくなりましたので、コメント欄を「ページ送り」の下へ移動させました。(2019/9/14追記)
注意ポイント
step
13つのファイルを子テーマへコピー
3つのファイル(single-type1.php、single-type2.php、single.php)をFileZillaなどのFTPソフトで親テーマからコピーして子テーマフォルダーへ貼り付けておきます。 wordpressの外観>テーマの編集で、右サイドバーに3つのファイル名が表示されると思います。
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>の手前へ)させます。
以上のように、「コメント欄」コードを移動させたら、「ファイルを更新」で完了です。
結果はこのページの「コメント欄」をご参照ください。(「ページ送り」の下位置に「コメント欄」が移動されています。)
以上、Affinger5でコメント欄をトグルON/OFF表示させる方法でした。 実際の動きは、このページ下部の「コメント欄 ▼(表示 ON/OFF)」をご参照ください。
参考にさせて頂いたURL
http://travelnavi.blog.jp/archives/1051153817.html
https://itsakura.com/jquery-toggle
Affinger5について
Affinger5
詳しくはコチラ
スポンサーリンク
関連記事 (Tag related)
2021年7月21日
タグ(Tag)一覧を表示させるショートコードをPostSnippetsプラグインで作成する
2020年3月24日
WordPressテーマ・AFFINGER5 の「REIWA」からVer20200206へアップデートしました。
2020年6月8日
WordPress5.4.1・Gutenbergトラブル顛末記
2020年4月18日
WordPress(AFFINGER5)で「いいねボタン」を設置してみました。
2021年2月1日
WordPress プラグイン・WP Fastest Cache Premium(有料版)の設定方法(導入 顛末記)
Hi-Reco Blog オススメ
当ブログの4つのジャンルから「おすすめ記事」を選びました。
( をクリック(タップ)してご覧ください。)
おすすめ記事一覧( 開/閉 )
レコード音質とハイレゾ化
CD音質と圧縮音源 AAC等
WordpressやiPhone・PC
ツールと閑話ブログ
レコード音質とハイレゾ化
【レコード音質】記事
レコードプレヤーの性能を調べる。
テストレコード(AD-1)で出来ること
年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...
MCカートリッジとMMカートリッジの音質比較
eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...
アナログ・レコードのここがダメ「CD音質と比較して」
これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあまり言いたくは ...
【ハイレゾ化】記事
レコードをハイレゾ化するときのノウハウ集
LPレコードのハイレゾ化のススメ(ハイレゾ録音のヒント集)
ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご参照ください。 あくまで、B級オーディオとして ...
クラシックレコードをハイレゾ録音したサンプル音源を聴く
記事で使用した音源を掲載! LPレコードから録音したハイレゾのダウンロードやMP3(AAC)で直接試聴もできるコーナーです。 サンプル音源・DLコーナーについて ハイレゾ音質や、LPレコ ...
レコードをハイレゾ化するならDSDかPCMか?
ことの 発 端 ことの発端は、あるハイレゾDLサイトから、チャイコのバイオリンコンチェルトをPCM(Flacファイル 192Khz、24Bit)で購入しました。WAVファイルも平行販売されています。 ...
CD音質と圧縮音源 AAC等
【CD音質】記事
CD音質とは? 音質レビュー
CD音質のここがダメ「ハイレゾ(24bit)と比較して」
CDフォーマットのサンプリング周波数は44.1khzでビット深度は16bitです。 特にビット深度は録音レベルが低下するに伴い音質に問題が生じます。 CDの開発時点では先端技術で市場を席巻しましたが昨 ...
ハイレゾ音源からCDフォーマットへ変換する時のディザリングについて(Audacityの場合)
通常ディザリングを行うケースとしては、ビット深度が24bit以上のハイレゾ音源をCDフォーマット(16bit)に落とす時に量子化ノイズを改善するためにディザリングを行うものです。 以下の3つのケースで ...
CDで再生されるストリングスの音は何故、違和感を覚えるか? (推定編)
CDで再生されるストリングスの音は何故、違和感を覚えるか? この原因は何処から来るのか? 先ず、CDフォーマットについて整理した後、 考察を進めて行きたいと思います。 ご存知の通り、CDフォーマットの ...
【圧縮音源 (AAC & MP3)】記事
ハイレゾ音源からAACに高音質で変換するには?。
ハイレゾ音源をAAC(MP3)に変換する時の「5つのヒント」
ハイレゾ音源を出来るだけ音質を落とさない様にAAC(又はMP3)変換するためのヒント(手掛かり)です。 出来れば、変換されたサウンドがCDを凌ぐ様な音質にできればと、今まで当ブログで実験やデータ評価を ...
24bit対応AACエンコーダ(アプリ)の「5つの視点」評価ランキング
今迄、レコードからハイレゾ録音した音源をAACに変換する時に極力音質を劣化させず、CD音質を凌ぐにはどうしたら良いか?自分流で試してきた結果を投稿しました。 ただ、評価に統一性がないとこ ...
XLDコマンドラインを組込んだOSXのAutomatorを使ってハイレゾ音源をAAC変換
前回記事で「サウンドアプリ『XLD』でコマンドラインからハイレゾ音源をAAC変換する」を紹介しました。 前回記事のXLDコマンドラインによるAAC変換は音質的に優れているものの使い勝手が非常に悪いの ...
WordpressやPCなど
【Wordpress】記事
Wordpressの小技集です。
Post Snippets Pluginで出来ること(小技・事例集)
WordPressで記事を書いているビジュアルエディタ派の方でPost Snippets Plugin(以下PSPに略します)を使わずにいませんか? または、PSPをインストールしてい ...
Rapidweaver7からWordPressへの移行(完了編)
前回ブログの準備編から引き続き、Rapidweaver7(以下RW)による投稿記事をWordPress(以下WP)へ移植作業を進め、ようやく、WPへ移転が完了しました。 WPのテーマはSimplici ...
Affingerを使い易く、機能を高めるアイテム集(category)
【iPhone・PC】記事
iPhone・PCのレビューです。
iPhone6SからiPhoneSE2(第2世代)に移行(顛末記)
iPhone6s(64Gモデル)を4年ほど使用しています。 この所、バッテリーの持ち時間が悪くなり持ち時間を改善するために色々手を尽くしましたが半日も持たない状況になってきました。 もはや機種変更しか ...
M1-MacBook Airを購入。old MacBookからの引越し
ハイ・コスパのM1チップ搭載 MacBook Air 512GB(スペースグレイ)をAmazonで11/27に購入し12/5土曜に到着しました。 256GBモデル 512GBモデル 古いM ...
iPhoneのハイレゾ化アプリ「パイオニア・Stellanova」の実力は?
2020年10月27日にパイオニアのMSR機能(マスターサウンドリバイブの略)を搭載したiPhone/iPad/iPod touch専用音楽アプリケーション・パイオニアの「Wireless Hi-Re ...
ツールと閑話ブログ
【ツール】紹介
当ブログで作成したオススメ・ツールの紹介です。
パブリック・ドメインか否かを調べる 目安チェッカー
保有しているレコード(音源)がパブリック・ドメインに該当するか?知りたくなる時が希にあります。 「TPP整備法」の発効により、著作権法が改正され、2018年12月30日より著作権の保護期間が50年から ...
Automatorを使って高音質でAAC変換しメディア情報も表示するツール
以前の記事で、XLDコマンドラインでハイレゾ24bit音源を高域減衰無く最適化したAAC変換を行うためにAppleのAutomatorを利用したワークフローアプリを作成しました。(詳細はここをクリック ...
自分のIPアドレスを調べるツール
ブログのアクセス状況を調べるために、Googleアナリティクスを使用されていると思います。 この中で自分のブログをアクセスするとPV数が加算されてしまいますので、これを避けるためにGoogleアナリテ ...
【閑話ブログ】記事
閑話の紹介です。
高級魚といわれる「アコウ」のしゃぶしゃぶ 閑話ブログ
ちょと見た目は、グロテスクですけど、高級魚といわれる、「アコウ」を初めて頂きました。 お刺身用の切り身は「しゃぶしゃぶ」として、更に、お頭は、味噌汁にしました。 その食感は、フグとタイの中間くらいの歯 ...
π多桁計算のBasicプログラムをPHP言語に移殖してみました。
WordPressを始めてから1年以上たちますが、WordPressを構成しているPHP言語の理解を深めるために、「N88-BASICによるはじめてのアルゴリズム入門」を引用して、以前Visual B ...
M1-MAC対応の仮想オーディオ・ドライバ「BlackHole」で「らじる★らじる」を収録する
以前の記事で、仮想オーディオ・ドライバのSoundFlowerを使った「radiko を収録する方法」を紹介しました。 Apple SiliconのM1-MACになったことでSoundFlowerが使 ...
オススメを「閉じる」