Stinger6,Stinger5,StingerPLUS+コメント欄を開閉式スライドにする方法

紹介先のサイトさんではテーマがStingerPLUS+でのカスタマイズ方法で、Stinger6では実装出来なかったのでStinger5とStinger6においてのコメント欄を開閉式にする方法です。

（もしかしたら、Stinger7でも可能かもしれません。未検証ですが…。）

完成形は以下のようになります。

ほとんどと言いますかコードは紹介先のサイト様と同じものになります。

StingerPLUS+においては、
comments.phpの2行目に以下のコードを追加するようですが、
Stinger6においては、一番上（はじめ）に追加・追記します。

以下のような感じです。

<div id="comments-toggle">コメントを閉じる</div>

上記コードを、

<div id="comments">

の上に追記します。

<div id="comments">

の下（2行目）に追記してcssにてボタン表示にしてもjQueryを記述するとコメント欄が消えてしまいます。

jQueryは以下のコードを上記したコードの真下に直下に追記します。

<script>
 $(function() {
 $("#comments-toggle").click(function() {
 if ($("#comments").css("display") == "none") {
 $("#comments").slideToggle();
 $("#comments-toggle").text("コメントを閉じる");
 } else {
 $("#comments").slideToggle("fast");
 $("#comments-toggle").html("この記事にコメントする（<i class=\"fa fa-commenting\"></i>&nbsp;<?php echo get_comments_number(); ?>）");
 }
 });
 if (location.hash.indexOf("comment-") == -1) {
 $("#comments").hide();
 $("#comments-toggle").html("この記事にコメントする（<i class=\"fa fa-commenting\"></i>&nbsp;<?php echo get_comments_number(); ?>）");
 }
 });
 </script>

comments.php内の全体としては以下のようになります。

 

<div id="comments-toggle">コメントを閉じる</div>
 <script>
 $(function() {
 $("#comments-toggle").click(function() {
 if ($("#comments").css("display") == "none") {
 $("#comments").slideToggle();
 $("#comments-toggle").text("コメントを閉じる");
 } else {
 $("#comments").slideToggle("fast");
 $("#comments-toggle").html("この記事にコメントする（<i class=\"fa fa-commenting\"></i>&nbsp;<?php echo get_comments_number(); ?>）");
 }
 });
 if (location.hash.indexOf("comment-") == -1) {
 $("#comments").hide();
 $("#comments-toggle").html("この記事にコメントする（<i class=\"fa fa-commenting\"></i>&nbsp;<?php echo get_comments_number(); ?>）");
 }
 });
 </script>

 

そして、CSSは以下のコードを記述します。

/* コメント欄の開閉ボタン */
 #comments-toggle {
 display: block;
 margin-top: 10px;
 padding: 3px 0px;
 background-color: gray;
 border-radius: 3px;
 color: #fff;
 font-size: 16px;
 font-weight: bold;
 text-align: center; 
 }
 #comments-toggle:hover {
 cursor: pointer;
 opacity: 0.8;
 }

 

私の場合は「この記事のコメントする」の背景色はグレー色にしてみました。

カラーコードですと#808080になります。

参考サイトと言いますかテーマが違うだけでほぼ同じ内容でかつ詳細な説明をされていらっしゃるブログです。

【STINGER PLUS+】コメント欄を開閉式にして省スペース化！クリックで表示・非表示を切り替える

記事下のコメント欄って結構スペースをとってしまうし、無くしてしまえばスッキリするかな…とも考えました。しかし、そうすると、せっかくコメントを送ってきてくれる読者のことを無視してしまうことになるし、読者との貴重なコミュニケーションの機会を失ってしまいます。コメント欄は残しつつ、もう少しコンパクトにできれば理想的なんじゃないの？

Life Jam

Stinger5でのカスタマイズ方法は上記サイトにも紹介されていますが、以下のサイトを拝見してStinger6において実装できました。

【WordPress】コメント入力フォームのカスタマイズ②jQueryのスライド機能で表示を切替える

コメントがまだ0件のうちは、表示するコメントが無いので「入力フォームを表示する」というボタンを配置する。そしてコメントが付いた状態ではコメントも表示されるので、「コメント・入力フォームを表示する」とテキストを変更する。コメントや入力フォームを表示させている間は、「表示する」ではなく「隠す」に変更する。

はぴすぷ

私の場合の完成形は以下のようになりました。

コメント欄が閉じている際には以下のようになります。

あなたにおすすめな関連記事

エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー

すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイ

バッテリー交換後の廃バッテリー処分方法3つ

バッテリー交換は、どの車においてもいずれは発生する事象です。新車で購入して3年で乗り換えなんて言う方は今ではそんなに多くはないと思います。（中に入ると思いますが、多くの方々はそれ

STINGER PLUS+, Stinger6, Stinger7, WordPress, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧

エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー

すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイ

バッテリー交換後の廃バッテリー処分方法3つ

バッテリー交換は、どの車においてもいずれは発生する事象です。新車で購入して3年で乗り換えなんて言う方は今ではそんなに多くはないと思います。（中に入ると思いますが、多くの方々はそれ

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

おすすめ！！

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう！！ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ！！

詳細ページへ

No.1シェアAmazon

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に！！楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

詳細ページへ

楽天市場

目次に戻る

-STINGER PLUS+, Stinger6, Stinger7, WordPress, カスタマイズ, 伝えたいこと, 備忘録

目次に戻る

目次に戻る

Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool. Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.

You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.

The tracking opt-out feature requires cookies to be enabled.