MENU
HOME
TOP
WhiteTiger Ver 1.2.1に更新しました。確認よろしくお願いします。

「WordPress」コメントフォームを開閉式にしたので やり方の紹介です。

どうも、相変わらずコメントもないのにコメントフォームを開閉式にカスタマイズしてる、あほのけんじです。

これもたいてい検索したら、参考になる記事が沢山ありました。なので、ちょいとメモがてら紹介させていただきます。

フォームを開閉式にする条件

まず、開閉式にする条件としてプレーンなコメントフォームであること、もしくはコメントフォームのセレクタ(全体のラップ部分)が分かることです。

参考にしたお二方はこちらです。参考というよりかほとんど同じです。(;^ω^)

僕の場合は違いますが、標準的なIDは#commentsなはずなので、このていで話を進めていきます。

jQueryの記述

ちょっと悩んだんですが、PHPファイル開けるのも面倒、というよりかは分からない人がいたり、子テーマに作らないといけなかったりが多いので、レンダリングが気になりますが、jQueryのべた書きでいきます。

jQuery

以下のコードをfooter.phpのbodyの閉じタグ手前が無難なのでそこに記述します。あと、$使ってるのでWordPress付属のjQueryだと動かないかもしれません。

$をjQueryに変えるか、外部のjQueryを読み込んでください。一応試しましたが、一系二系どれも動きました。

<script type="text/javascript" async="async" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
$('#comments').before('<div id="comments-toggle">コメントを閉じる</div>');
});
$(function() {
$("#comments-toggle").click(function() {
if ($("#comments").css("display") == "none") {
$("#comments").slideToggle();
$("#comments-toggle").text("コメントを閉じる");
} else {
$("#comments").slideToggle("fast");
$("#comments-toggle").html("この記事にコメントする");
}
});
if (location.hash.indexOf("comment-") == -1) {
$("#comments").hide();
$("#comments-toggle").html("この記事にコメントする");
}
});
</script>

jQueryのDOM操作になるのでお作法的には、初心者なやり方ですがすぐに装着出来るので私的にはスマートなやり方だと思います。

※指摘があったので追記です。HTML5からは、type=”text”/javascriptはいらないだそうです。こういう事らしいです失礼しました。

<script async="async" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

CSSの追加

これも参考にした【STINGER PLUS+】コメント欄を開閉式にして省スペース化!クリックで表示・非表示を切り替える – Life Jamで、色変えただけで ほぼ一緒です。

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

動作の確認

これでこのようになってれば正解です。動かないときはセレクタが違うか、読み込み順序のミスです。

ほぼパクリですが以上で完了です。あ、、そうだそうだ、スクリプトを追加するにいいプラグインがあります。

管理画面にオリジナルページ作ってもいいかと思います。

AnalyticsやSearch Console等のタグ管理をWordPressに追加する方法
AnalyticsやSearch Console等のタグ管理をWordPressに追加する方法
どうも!相変わらず管理とか整理整頓が苦手な私です('ω') AnalyticsやSearch Consoleのタグをheader.phpに直接ぺったんこしてると、タグが増えたり新しくなった時に、管理がやりにくい気がしませんか?(多分私だけ ということで、タグの管理設定ページを管理メニューの設定に追加してみました。という紹介です。 設定ページの追加 まずは管理画面に設定ページを追加します。functions.phpに追加します。 add_action('admin_menu', 'tag_menu');function tag_menu() { add_options_page('タグ管理', 'タグ管理', 8, 'tag_menu', 'tag_options_page'); add_action( 'admin_init', 'register_tag_settings' );}function tag_options_page() { get_template_part('tag_menu_temp');}function register_tag_settings() { register_setting( 'tag_settings_group', 'tag_settings1' ); register_setting( 'tag_settings_group', 'tag_settings1_1' ); register_setting( 'tag_settings_group', 'tag_settings01' ); register_setting( 'tag_settings_group', 'tag_settings02' ); register_setting( 'tag_settings_group', 'tag_settings03' );} テンプレート追加 ちょっと多くなるので、テンプレートに分けます。tag_menu_temp.phpという名前で保存して下さい。 <div class="postbox"> <h2 class="hndle">アクセス解析などタグの管理 </h2> <div class="inside"> <p>Googleアナリティクスやサーチコンソールの設定ができます。 </p> <form method="post" action="options.php"> <?php settings_fields( 'tag_settings_group' ); do_settings_sections( 'tag_settings_group' ); ?> <table class="form-table"> <tbody> <tr> <th class="tag_settings" scope="row"> <label for="tag_settings1">Google tagmanagerのIDを入力してください。 </label> </th> <td> <input name="tag_settings1" type="text" id="" value="<?php echo get_option('tag_settings1'); ?>" class="regular-text"> </td> </tr> <tr> <th class="tag_settings" scope="row"> <label for="tag_settings01">Google AnalyticsのトラッキングIDを入力してください。 </label> </th> <td> <input name="tag_settings01" type="text" id="" value="<?php echo get_option('tag_settings01'); ?>" class="regular-text"> </td> </tr> <tr> <th class="tag_settings" scope="row"> <label for="tag_settings02">Google Search Consoleのサイト認証IDを入力してください。 </label> </th> <td> <input name="tag_settings02" type="text" id="" value="<?php echo get_option('tag_settings02'); ?>" class="regular-text"> </td> </tr> <th class="tag_settings" scope="row"> <label for="tag_settings03">その他のアクセス解析など </label> </th> <td> <textarea class="medium-text code" name="tag_settings03" rows="10" cols="50" value="<?php echo get_option('tag_settings03'); ?>"> </textarea> </td> </tr> </tbody> </table> <?php submit_button('設定を保存します'); ?> </form></div></div> 出力コードの記述 データベースに保存された物を呼び出します。wp_headで出力してもいいんですが、コードが複雑になるので、今回はheader.phpに書いちゃいます。 ようするに先ほどのオプションを入れて、head内に追記するということ。 以下をhead内に追記 <?php $get_tag_manager = get_option('tag_settings1'); $get_analytics = get_option('tag_settings01'); $search_console = get_option('tag_settings02');?><?phpif ( $search_console ) : ?> <!--Search Console--> <meta name="google-site-verification" content="<?php echo get_option('tag_settings02'); ?>" /><?php endif; ?> <?phpif ( $get_analytics ) : ?> <!-- Google Analytics --> <script> window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; ga('create', '<?php echo get_option('tag_settings01'); ?>', 'auto'); ga('send', 'pageview'); </script> <script async src='https://www.google-analytics.com/analytics.js'></script> <!-- End Google Analytics --> <?php endif; ?><?phpif ( $get_tag_manager ) : ?> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','<?php echo get_option('tag_settings1'); ?>');</script> <!-- End Google Tag Manager --><?php endif; ?> で、noscriptの方はよくわからんけど、bodyのはじめに入れます。以下をbodyタグの直後に追記 <?php if ( $get_tag_manager ) : ?> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<?php echo get_option('tag_settings1'); ?>" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --><?php endif; ? 動作の確認 これで、管理メニューの設定からタグ管理を選択。 すると以下のようなページがあるはずです。ここでIDなものを入力してみます。 先ほど入力されたもの、オプションの保存が確認できます。 そんでもって、出力も大丈夫ですん。 あ、あと「その他のアクセス解析など」はおまけ。呼び出しは これです。 <?php echo get_option('tag_settings03'); ?> また、項目も増やしてやれば、OGPやTwitterカードなども管理が楽です。 長くなるので、その辺の項目の追加方法は次回にします。ではまた(`・ω・´)ゞ
ひとつ欠点があります。さっと導入するにはいいのですが、PHPの処理がうまくできません。コメント数を表示しない場合はこれでいいのですが

コメント数を表示したい場合は子テーマに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>

ではでは、またのお越しをお待ちしております。(@^^)/~~~

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメント一覧

6
  • SSL通信がしたいMARYです。

    プロフィール画像の件ありがとうございました。さっそく修正しました。
    けんじさんの知恵を借りるばかり(笑)

    ですがプロフィール画像をhttpsに変えてもサイト表記では「保護された通信」になりません。

    ダッシュボードは保護されてます。ogpタグが重複してるよっておしえてもらったので、simplisity側の設定をクリアしてみたのですが変化なしです。(All in one SEOpackが入っているため)

    お盆にこんなお願いするのも・・と思ったのですが思い切って「お知恵をかしてください」と言わせてください。お知恵をかしてください!!お願いします。

    • こんばんは!MARYねぇさん。

      解決してませんか?こちらから見た限りは完全に「保護された通信」なっています。ogpタグも重複してません。

      ところでsimplisityはAll in one SEOpack必要ないと思います。今は自分のテーマを使っていますが、simplisityは、私も使ったことがあります。有料テーマより強い、いわゆる優良テーマでした。

      ※追記:リダイレクトがなされてません。httpからのhttpsへのリダイレクトのことです。.htaccessに以下のコードを追記。

      <IfModule mod_rewrite.c>
      RewriteEngine on
      RewriteCond %{HTTPS} !=on [NC]
      RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
      </IfModule>
      

      分かりそうですか?一応MARYねぇさんの場合はエックスサーバーなので/home/サーバID/ドメイン/public_htmlにあります。

  • 今はSSL通信になってます。けんじさんが言ってたとおりプロフィール画像がhttpになってたので修正したらイケました!
    そしてなぜか記事ページのタイトル周辺が崩れてしまいました。
    今日は1日中その原因を探ってましたが完全にお手上げです。

    けんじさんからの返信をいただくまえに知恵袋で再度質問しましたが、「ワードプレスは個人で楽しみたい人向けだ」と言われてしまいまして????しかありません。
    リダイレクト用のコードを一度は追記していたのですが、そのやりかたがまずくてページが崩れたのか?と心配になり消してしまいました。

    出直します(泣)

    • リダイレクト用のコードは一番上にすれば問題ないです。

      ワードプレスは個人で楽しみたい人向けだ

      >これは気にしないでください。知恵袋の回答者はバカで暇人の集まりですから。

      なぜか記事ページのタイトル周辺が崩れてしまいました。

      >パンくずリストの合間に自動広告があるのは気にはなりますが、スタイルは問題ないようです。一般設定のURLはhttpsに変更していますか?

      もしパンくずの広告が邪魔でしたら、自動広告の設定で記事内の広告だったかな?あれをオフにする。もしくは広告掲載率を何パーセントか絞ってみるのが良いかもしれません。

      ※追記:パンくずの合間の自動広告だけCSSで消してしまったほうがいいかなっと思いましたので。以下を参考に。

      #breadcrumb .google-auto-placed {
          display: none !important;
      }

      これで見た目上は消えます。

  • できましたーーーーー!!
    やっとできましたーーーーー!!

    ありがとうありがとうありがとう×10000回。

    喜びすぎて対面だったらハグハグして〆てしまいそうです。

    それはまずいのでポチポチしてかえります。

    心から感謝です!

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください