コメント欄を展開式に

投稿日:

今回も前回から引き続き、コメント欄のカスタマイズといきたいところなのですが、ちょいと前回の記事が長ったるくなってしまったので、前回は途中で切っておきました。
なのでまずは前回書ききれなかった事から記していきます。

 

前回コメント欄のデザイン変更の為に導入したプラグイン『Jetpack』。
こちらは多機能プラグインとなっており、私が使用したコメ欄カスタマイズの他にも様々な事が行えます。

機能は30以上にも及び、到底私には把握できていませんし、多機能故にAFFINGER4との競合も起こってきてしまいます。
なので、最初に設定項目から変更可能な機能は全てオフにし、必要に応じてオンにしていくことにしました。

しかし、この設定項目からではオフにできない、常時オンとなっている機能もいくつかあるようです。
パッと見でメニュー画面に変更があった機能は、「サイト統計情報」、「フィードバック」、「CSS編集」、エディタ上には、「短縮URLを取得」、「お問合せフォームを追加」なんてのが増えてました。
ネットでJetpackの解説をしているサイトを見るに、この[設定]タブからオンオフができる機能の他にもまだまだ機能はあるようです。

ちょっと気になったのですが、なんか解説サイトに載っているJetpackの画像がいろんなパターンがあるように見えるんですよね…
しかし私が入れた物とはどれも画面が全然違う。バージョンの違いかなぁ?

そんでもうちょっと調べてみると、URLの末尾に"jetpack_modules"と入力する事により、WordPress上のJetpackの機能の一覧画面に直接飛べるらしいです。
なんでURL直打ちでしか行けないんでしょ? 分からないことだらけです。

まー今のところ管理画面が重いとかそういう事は無いので、常時オンの機能に関しては特に手を付けません。
今記しておきたいのはこれらの機能の内の、「サイト統計情報」。

 
この「サイト統計情報」とは所謂「アクセス解析」と呼ばれるヤツですね。
多分最も有名なのは「Googleアナリティクス」ですかね?
私はまだ登録?インストール?ともかく使用はしていないのですが、ネットによると「高性能すぎて初心者には分かりにくい」なんて言われていたりするようです。

その点このJetpackのサイト統計機能は、アクセス解析の性能としてはGoogleアナリティクスには劣るものの、初心者にも分かりやすい解析結果のみを表示してくれるとかで、この機能のためにJetpackを入れる人もいる程だとかなんとか。

私のこのサイトはまー見ての通りまだ準備中なんで、アクセス解析の導入なんぞ遠い未来の話だと思ってました。今そんなの見てもしょーがないしね。
が、自動で使えるようになってしまったというのであれば、怖い物見たさと言いますか、やっぱ気になっちゃいますよね。現時点でのアクセスがはたしてあるのかどうかとか。

…解析結果はまぁ…予想通り、「1人」でしたよ。えぇ、自分です。安定のオチですね。

ちょっとこれではあまりにもむなしいので、自分のアクセス(IPアドレス?)を除外する方法を調べたのですが、Jetpackではできないらしいです。アナリティクスはできるっぽい。

ただ、このサイト統計情報ってのはJetpackをインストールしてからのアクセス数のようなので、私が見たのは導入後数時間のみのアクセス数だったようです。
この記事を書いている時点で4日分ほどデータが取れていましたが、一応1日1人はアクセスがあるようです。あ、私以外でね。

いやー、さすがに申し訳がないですね、今ここタイトル詐欺もいいとこでしょ(苦笑)
早いとこ完成させたいとは思ってはいるんですが…
もう2ヶ月が経ってしまいましたね…
最初はホームページ開設なんてもっとカンタンだと思ってたんだけどなぁ。頑張らねば。

 

さて、ここからが今回の本題。コメント欄のカスタマイズ、第2回です。

Jetpackのコメント欄に変更したことで、コメントフォームを折り畳めるようになり、デフォルトのコメ欄よりも省スペース化できました。

しかし、ここで折り畳めたのはコメントの入力フォームのみ。
既に投稿されたコメントに関してはそのままでした。

今回はこの投コメも折り畳める、つまりクリックにより表示⇔非表示を切り替える事ができる様にしてみたいと思います。

 
ネットで調べてみたところ、同様のカスタマイズ法は多くはないものの、見つける事ができました。
これにはプラグインを使うのではなく、phpファイルへ手を加える方法しかありませんでした。

ところが、それぞれのサイトの情報が、single.phpやcomments.php、はてはfooter.phpなど、編集先のphpファイルが様々です。
しかも、スクリプトだのJavaだのjQuery?だの、コードの種類?も色々あるっぽい。
弱りましたね、これは…。

とりあえず、それぞれの作業量を見比べてみて、一番簡単そうなもの、そして失敗した時になるべくすぐに元に戻せそうなカスタマイズからやってみることにしました。

一番楽そうだったのは、「single.php」へのコードの追加。ここの中身自体は、過去のトップへの全文表示のカスタマイズで何度か手を出していますし。

ただ問題がありまして、この追加するコードは、single.phpに元々あるコメント部分のコードを上下挟み込むような形で追記するようになっているのですが、前回の記事で書いたように、AFFINGER4のsingle.phpは、single-type1とtype2を読み込んでいるだけで、この中にそういったコメント関連の記述はありません。

 
どのみちここをカスタマイズするのであれば、まずは子テーマへコピーしておく必要があったので、まずはsingleとtype1の2つのphpファイルをコピーしておきました。

AFFINGER4では、通常使用されているのはsingle-type1の方とのことだったので、この中身を見てみると、確かに"//コメント"と分かりやすく日本語で書かれている部分がありました。

そこで試しに、このコメントと書かれている付近を削除したら、コメント欄が非表示になるのかちょっとやってみました。
結果は変化無し。
他の部分のコードも消したりしてみましたが、特にサイト上に変化はありません。

single.phpでtype2の方も読み込んでいるっぽいので、両方子テーマに揃えておく必要があるのかもと思ったので、singele-type2もコピーしてきてみましたが、結果は変化無し。

 
やはりsingle.phpをいじらないと効果はないのか、でもAFFINGER4にはsingle.phpには中身ないし…なんて思いながら情報収集を再び始めてみると、ちょうど最近書かれたAFFINGER4のカスタマイズ記事の中に、コメント欄に関する物が見つかりました!

それによると、どうにもAFFINGER4の「single.php」のコードから、"TEMPLATE"を"STYLESHEET"に書き換えよ、とのこと。
軽く調べてみたところ、どうやら子テーマで使う場合は、テンプレートでなくスタイルシートを呼び出すパスが必要だとかなんとか。

よく分かりませんが、同じテーマでのカスタマイズ法というのであれば間違っているという事はないでしょう。
早速この通りにやって、再びsingle-type1からコメントのコードを消してみたところ、見事反映され、画面が真っ白になりました! (´ェ`)アレー?
予定ではコメント欄だけが消えるはずだったんですが…

そこで今度は試しに、コードの並び替えをやってみることにしました。
私がやりたいカスタマイズの中に、「ページナビ」をコメント欄より上に持ってきたい、というのがあったのです。

コメントに興味無い読み手はきっとコメ欄なり投コメが見えた時点で、それより下へは読み進めないと思うんですよね。
なので現在のコメ欄の下にページナビが付いているという現状は私としては非常によろしくない。
コメント欄を一番下に持っていきたい、とも言えますね。

ほんでテキトーにそれっぽい"関連記事"とか"ページナビ"とか書かれている部分のコードをコピペで並び替えてみたりしたんですが、やはり結果は画面真っ白。

ろくに調べずにほぼ感覚だけでいじっていたので、改めて先のAFFINGER4のコメ欄カスタマイズの記事に目を通すと、どうやらコメント部分のコードの切り取る部分を間違えていたようです。

私は"//コメント"と書かれている部分以下がコメントのコードだと思っていたのですが、その1行上の"<?php"の部分から必要だったみたいです。
コードが読めないので意味は分かりませんが、一番最後が"?php } ?>"で終わっていたので、たぶんタブだかなんだかが閉じていなかったんでしょうね。

以上を踏まえた上で再再挑戦したところ、無事ページナビをコメント欄より上に持っていけました
が、今やりたいのはこれではないので、いったん戻しまして…
いろいろ一度にやってしまうと私の頭がついていけなくなってしまうのでね(^^;

 
これで最初にネットで見つけたコードをsingle-type1.phpのコメント部のコードに挟み込みまして…
サイト上で表示確認してみたところ、ちゃんとコメント入力フォーム、投稿コメントが[▼ コメント表示]ボタンで折り畳まれてました!!

ちょっと残念だったのは、上記の展開ボタンとページナビの間隔が近すぎること。
といってもこれはさっきやったカスタマイズを導入すれば、ページナビを移動する事ができるので、なんとかなりそう。

もうひとつ気になったのは、展開された投コメ・コメ欄から、実際にコメントを書き込むためには、畳まれてる入力フォームをさらに展開しないといけないという点。
どうなんでしょうねーこれは?

私は他の人のブログとか、掲示板とかに書き込んだりする人間じゃないのでちょっと想像の範囲で語るしかないのですが…
たぶんこの手のタイプの展開式コメ欄を開く人は、他の人のコメントをただ「見るだけ」の人が圧倒的多数で、「書き込む」人はかなりの少数だと私は思うんですよね。

そうなると、書き込み欄が畳まれていたとしても、そこまで不都合に感じる人もそういないんじゃ…とか思いますが、そもそもこれはそういう人たちの為に付けたものなんだし…とも…
まぁここからは実際にサイトの本運営を開始して、コメントを貰えるようになってから、ですかね。
入力フォームが畳まれてるといっても、コメントを書こうとすれば勝手に開く仕組みなので、ひと手間増えている、ってわけではありませんからね。

 

よし、今回はこれで終わり!

実は今回やった展開式コメント欄、カスタマイズしたのはsingle.php、つまり個別投稿の画面のみなので、固定ページに設置してあるコメント欄には反映されてません。
現在のトップページ(暫定)も、コードいじった固定ページをフロントに設定しているのでここもまだ未反映。

次回はこの残りのカスタマイズをして、それからコメント欄の更なるカスタマイズをしていこうと考えています。
まずは今回一回できたので、ページナビの移動からかな?

-ウェブサイト作成

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