思いついたらふわっと書く雑記ブログ

VanBlog

Wordpress

【Stinger8】wpDiscuzのコメントを開閉式にして省スペース化する方法

投稿日:2017年10月18日 更新日:

別サイトにwpDiscuzというプラグインを導入してコメント欄をアップグレードしたのですが、相変わらずスペースをとっていました。じゃあコメントを開閉式にすればいいじゃないか、ということで他のサイト様で参考にしたスクリプトをwpDiscuzに適用しました。

まずは開閉式コメントの作成

こちらのサイト様を参考にして下さい。私はまるまるコピペです。

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

まずは上記の通り作成してみてください。通常のコメントであれば上記方法で素晴らしい省スペース化ができます。

 

このようになります(ちなみに画像はwpDiscuz)。素晴らしすぎる・・

 

しかしwpDiscuzを使用すると上記の方法だけでは開閉式にできません。それもそのはず。プラグインを適用するとcomments.phpではなくプラグインのファイルが使用されるからです。

 

WPDiscuzを開閉式にするには?

ではプラグインの方にスクリプトをまんま移せばいいじゃないか?ということで試してみた所、上手くいきました。どのファイルを修正すればいいのか、どこにスクリプトを挿入すればいいのかを書きます。

 

wpDiscuzのcomment-form.phpをいじる

wpDiscuzのプラグインが有効化されていることを確認し、comment-form.phpというファイルを探します。

/wp-content/plugins/wpdiscuz/templates/comment/comment-form.php

にあるはずです。

ダウンロードしてhtmlエディターで開きましょう。

 

スクリプトの挿入位置は一番上です。

初期状態:

<?php
if (!defined('ABSPATH')) {
exit();
}
global $wpdiscuz, $post;
if (!function_exists('wpdiscuz_close_divs')) {

となっているので、1行目にスクリプトを挿入します。

 

変更後:

<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>
<?php
if (!defined('ABSPATH')) {
exit();
}
global $wpdiscuz, $post;

1行目~18行目を挿入。このようになります。

 

以上、終了!

これでwpDiscuzのコメントが折り畳めるようになりました。確認する際はキャッシュクリアを忘れずに。見た目の調整はstyle.cssで行いましょう。

wpDiscuzをアップデートするとcomment-form.phpが元に戻ってしまうので、更新の度に編集する必要があります。ちょっと面倒。。

Disqus Comment Systemなどの他プラグインもファイルを探してスクリプトを挿入すれば問題なく適用できそうですね。

 

 

コメントを省スペース化することにより、その後に続く関連記事や人気記事などの視認性がよってPVの上昇が見込める!・・と思います。

お試しあれ。

新着記事

2018/7/18

Amazonプライムデーセールを終えて。安くなったデバイスの値段リスト

2018年のアマゾンプライムデーセールが終わりましたね。 毎回新しく傘を買い直しているのですが、今年も例にもれず買いました。この前の台風でバキバキにやられたので。折れない傘が欲しい。 アマゾンデバイスもかなり安くなっていました。次回のプライムデーに向けて、割引率や値段はどんなものだったのか備忘録的に置いておこうと思います。 もくじアマゾンプライムデーとは?プライムデーのお得ポイントプライム会員になるか迷っている方へ100%カートでも諦めるな!2018年アマゾンデバイスの値段リストAmazon EchoFi ...

続きを読む

tablet_thumbnail

2018/7/17

そこの目が悪い諸君。iPhoneで漫画読むのやめてタブレット買った方がいいよ

iPhoneのKindleでめちゃくちゃ漫画を買っています。昔から漫画は大量に買う方だったのですが、スペース的に厳しくて電子書籍に移行しました。 携帯1つに漫画本が全部入っているので最高に便利なのですが、iPhoneの小さい画面(iPhone7)で漫画読み続けたせいか、悪い目がさらに悪化した気がしますね。 漫画の文字自体小さいので、漫画を読むなら大きめのタブレット購入が絶対オススメです。 Kindle Fire なんでKindleFireを推すのかっていうと、単純に安いから。 Kindleにはサイズが3種 ...

続きを読む

2018/7/17

0.015BTCから始めるBTCFX PART2

  狩られました。笑 ショートエントリーしてたところ、ロングにはねましたね。$10くらい上のところでストップ成行かけてたんですが、発動せず。そのままゼロカットと相成りました。 ヒゲキャッチ作戦が結構あたっていたんで、調子にのってショートナンピンし続けてたのが良くなかった。全部イカれました。 $10幅で損切りかけてたんで大丈夫かと思ってたら、サーバーがふっとんだのか全然ストップかかりませんでしたねー。恐ろしい。普通にその時板は見てたので手動で成行損切り発動しておけばよかった・・ 資金管理大事よ。 ...

続きを読む

2018/7/16

iPhoneでRAW撮影した写真データをパソコンへ移動する方法を3つ紹介

こんにちは。 iPhoneってRAW撮影できるの?マジ!?ってなったのがつい最近という情弱の私です。 一眼レフではもっぱらRAW撮影が基本になっていたので、iPhoneでのjpeg画像にイライラしておりましたがそれもついに終わりになりそうです。   私はパソコンのPhotoshopで編集する派なので、データをパソコンに移そうと思ったらデータ量が10MBオーバーとな・・メールじゃ無理ですね。 そこで、ここではRAW撮影した写真データをパソコンに移動する方法を紹介します。 RAW写真はJPEGでなく ...

続きを読む

2018/7/12

結婚式でかけたい人気の洋楽を集めました70選!

結婚式で流す曲目って、実は結構膨大なリストになるんですよね。1から探すとぶっちゃけかなり大変。 洋楽好きだからなるべく洋楽流したい、でもそんなに思いつかないよ!っていう人達のために、自身が選んだ曲も含めてオススメの曲を70曲紹介します! 聞いたことあるなという曲から、初めて聞くけどスゴイ良いじゃん!っていう曲まで。自分の結婚式にピッタリな曲がきっと見つかるはず! それでは前置きはこれくらいで。シンプルに紹介していきます。 結婚式に流したい洋楽70選 曲名リンクをクリックするとYoutubeへ飛びます。 ノ ...

続きを読む

ピックアップ

1

オフィスで使うために電源タップを探していたのだが、まぁタップにも色々種類があるようで。Amazonなんかで迷ったときのためにちょっとしたまと ...

2

大事なファイルはセキュリティ機能付きのUSBメモリに保存しておくのがオススメ。私は仮想通貨のパスワードを記載したエクセルファイルやウォレット ...

3

Youtubeで配信用や作業用に垂れ流せるオススメの音楽チャンネルを5つ紹介。どれも登録者数が多い人気チャンネルだ。 ちなみにそのまま流すと ...

4

iQOSの掃除、皆さんどうしていますか? 私は購入した時にタバコ屋の店員さんから教えてもらった通りにしています。掃除するとやっぱり吸い心地が ...

Copyright© VanBlog , 2018 All Rights Reserved.