展開式コメント欄にコメント数を表示

投稿日:

ページナビゲーションのカスタマイズが概ね自分の理想通りの形になったので、今回からは再びコメント欄のカスタマイズに戻ります。

元々ページナビのカスタマイズは、ページナビをコメ欄より上にしたい、つまりコメ欄を一番下に移動させたいというコメント欄カスタマイズの一環だったのですが、ついつい凝ってしまいましたね。

 
今回やるのは、以前作った展開式のコメント欄よりも、格好良くてより機能的な展開式コメント欄のカスタマイズ法をたまたまネットで見かけたので、そっちに変えてみようと思います。

 

現時点での展開式コメント欄は、single.phpのコメント欄のコードを挟み込むような形で書き加えたもので、個別投稿用の「single-type1.php」と、固定ページ用の「page.php」にそれぞれ同じコードを追記しています。

CSSでのデザイン調整を行っていないため、クリックできる領域が端まで及んでしまっているので、何も無い空間を押したはずなのにコメ欄が展開されてしまう、という事態が起こってしまっています。

 
これに対し、今回のカスタマイズ法では、手を加えるのは「comments.php」と「style.css」の2箇所。
書き加えるコードの量は増えてしまいますが、こちらの完成形では、クリック可能領域は端までと変わらないものの、その領域が色分けされているため、一目でクリック範囲が判別できるようになっています。

また、コメ欄を表示させるためのボタン上に、コメント数を表示させるためのコードも組み込まれています。この機能が私は欲しかったので、今回コメ欄カスタマイズをやり直す事に決めました。

 
まずはcomments.phpに展開式ボタンの元となるコードを追記。
…の前に、FTPからcomments.phpを子テーマにコピーしておかねばなりませんね。

表示を確認してみると、特に問題無く表示されていました。
まだ前のコードを残したままなので、一度コメ欄を展開しないと確認できなくなってしまってますが、古いのを削除するのは今回の新しいのが成功した後で。

ちなみに今回のカスタマイズ法は、元はSTINGER用のものなんですが、色んな人に広く使われているようで、私が今使用しているAFFINGER4でもそのまま使用できるという確かな情報がありました。なので今回はイケイケですね(死語)

 
続いてstyle.cssへの追記。
私は以前悩んだんですが、結局『Simple Custom CSS』プラグインは入れなかったため、子テーマへ直に書き込みます。

書き込む場所がたぶん重要な気がするのですが、よく分からないので、とりあえず以前CSSへ手を加えた時の、ページナビ部の100行コードの下に挿し込んでみました。

結果は無事先のテキストがボタン風になっていました。
クリック範囲に色も付いちゃってまぁオシャレ。

 
これだけではまだボタンが機能していないので、最後のコードを再びcomments.phpへ追記。
挿し込む場所が丁寧に解説されていたので、特に迷うことなく完了しました。
どうやらcomments.phpの中身はSTINGERとAFFINGER4で変わっていないようです。まぁWordPressのデフォルトのまんまですしね。

そしてドキドキの表示確認タイム。
結果は見事、完成形の通りとなっておりました!

コメント欄が非表示の状態ではコメント数が表示され(もちろん0だよ!)、コメ欄を開くとボタン上の文字が閉じるための表記に変わるという嬉しい気配りまで!

 
今回の新展開式コメント欄が実装できた事により、以前カスタマイズした展開式コメ欄のコードを削除し、今回のカスタマイズはこれにて完了。ネット上の情報まんまの手順で上手くいったので、とてもスムーズにいきました(^^)

表示されているボタン上の文字(表示時・非表示時)や、ボタンの色、形状まで変更できるようですが、新機能が増えたというだけで今は充分。細かい部分は例によって後回し。

 

さて、では次回のカスタマイズなんですが…
コメント欄にもう少しだけ手を加えようかなと思っています。

現在ではコメント欄を展開すると、投稿コメントがまず表示され、その下にコメント入力フォームが現れるという風になっていますが、私はこれを逆にしたい。
まず入力フォームがあり、その下からが投稿コメントが続いていくという形。

コメントを書き込む為には、その時点で投稿されているコメントを全てスクロールして送ってからでないと自分が書き込めない、というのは不便に感じる。

…まぁそこまでコメントが付くほどの人気ブログにならないと気にするほどのもんじゃーないとは思うんですけどね(^^;

できなかったらできなかったで、現時点では諦めのつく部分である事も確かなので、あまり時間をかけずにいきたいですね。

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.