まぐれヒットと秋の空

WordPressでブログを書きながら気付いたことや困ったことや乗り越えたことなど

WordPressテーマ「マテリアル」でJetpackのコメント機能の有効化にチャレンジ【トライ編】

calendar

reload

このブログはWordPressテーマ「simplicity」を使わせてもらっていますが、別のブログではWordPressテーマ「マテリアル」を使わせてもらっています。

WordPressテーマ「マテリアル」のいいところ

  • おしゃれ
  • 多機能
  • カスタマイズ性がいい
  • AdSenseクリック率も高い
  • そして無料

と、マテリアルはいいところだらけです。

 

しかしそのおしゃれなデザインが障害となり、一部のプラグインと干渉してしまうことがあります。

マテリアルに限らず、テーマが多機能になればなるほど何れかのプラグインとは干渉しやすくなりますよね。

特に「Jetpack by WordPress.com」や「All In One SEO Pack」、「Celtispack」のようにプラグイン側も多機能になればなおさら。

 

その一端として、マテリアルをテーマに使っているブログでJetpackの機能の1つ「コメント」がうまく動かなかった症状と、それを解消した方法を残しておきます。

もし真似してみようって方がいたらくれぐれもバックアップを取った後に自己責任でお願いします。

 

Jetpackのコメント機能

Jetpackのコメント機能については下の記事に目を通していただければどんなものかわかると思います。

簡単に言うと

  • コメント投稿者の名前の部分にその人のSNSページへのリンクを貼る
  • コメントの承認を設定している場合SNSアカウントでコメントした人は承認が必要なくなる

などの機能がついているコメント欄を、使用中のテーマのコメント欄と差し替える機能です。

 

スポンサーリンク

Jetpackのコメント機能と
マテリアルのコメント欄とは干渉する

しかしテーマにマテリアルを使用していると干渉してしまい、そのままでは使えません。

マテリアルのデフォルトのコメント欄

まずはマテリアルのデフォルトの状態。

CapD20160503_5

このように下向きのボタンが表示されています。

ここをクリックすると…。

CapD20160503_6

このようにコメント欄が出てくるようになっています。

これがマテリアルのデフォルトの状態、問題なくコメントできます。

Jetpackのコメント機能を有効にすると

しかし「Jetpack>設定」からコメントを有効化しただけの状態がこちら。

CapD20160503_7

あららら…。

先程まであった下向きのボタンがなくなり、さらにコメントできる欄もありません。

これは困った。

実は私、マテリアルを使わせてもらっている別のブログでこの状態のまま1ヶ月以上気づかずに過ごしておりました。

別のテーマからマテリアルに変えた際、この状態になっていることに気づかなかったんですね。

それまではチラホラはコメントをもらえていたブログだったのですが、恐らくこの1ヶ月以上の間にコメントしてくれようとした方の心をくじいてしまい、今では全くコメントの貰えないブログになってしまいました。

あまりの寂しさに妻にコメントちょうだいと頼もうか迷っています。

 

Jetpackのコメント機能と
WordPressテーマ「マテリアル」
が干渉する問題の解決方法

さあやっと本題です。

まずJetpackのコメント機能が何をしているかというと

  1. テーマのコメント欄に当たる部分を削りとる
  2. Jetpackのコメント欄を挿入する

ってことをしてるわけです。

そこでなぜコメントできなくなっちゃうかというと、

に当たる部分、つまり下向きの矢印も一緒に削り取っちゃっているからなんですね。

ここの出力はマテリアルテーマのcomments.phpから命令されています。

これによってマテリアルの「下向きボタンを押すとコメント欄が出てくる」というかっこいい機能が裏目となって、コメント欄を表示できなくなってしまっているのです。

コメント欄を隠す機能をオフにする

そこでまず私がやったのはマテリアルのコメント欄のかっこいいポイント

コメント欄が最初は隠れていてボタンを押すと現れる

という機能をなくすこと。

つまり最初から全見せ状態にしちゃおうってわけですね。

そこで、まずはこの命令がどこから出されているかを調べます。

私はchromeを使っていますのでchromeのデベロッパーツールで手っ取り早く。

  1. 一度Jetpackのコメント機能は無効にして、デフォルトのコメント欄を表示
  2. コメント欄を右クリックして「検証」
  3. コメント欄が書いてある部分はここだ!

none

ここまでわかったら次は問題の下向きボタンを押してみます。

こいつが何かヒントを持ってるに違いない。

going

ソースの一部が紫色に変わり何やらピロピロ動き始めて…。

block

「display: none;」の部分がdisplay: block;」に変わった!

つまりCSSで指定してるということですね。

style.cssを少し書き換える

てことで次はスタイルシートの編集です。

「外観>テーマの編集>スタイル>スタイルシート(style.css)」でマテリアル本体のスタイルシートを書き換えてもいいのですが、後々の安全と利便性を考えると編集するのは別の場所のほうがいいと思います。

マテリアル子テーマのスタイルシートか、または今回の場合もれなくJetpackがインストールされていますのでJetpackの機能の1つ、「カスタムCSS」でもOKです。

今回はJetpackの「カスタムCSS」を使うことにします。

このカスタムCSSは子テーマとやってることはあまり変わらないのですが、テーマ本体のCSSより優先されます。

まずは「Jetpack>設定」で「カスタムCSS」を有効化し、「外観>CSS編集」を開きます。

/*
カスタム CSS 機能へようこそ。

使い方についてはこちらをご覧ください
(英語ドキュメンテーション)。http://wp.me/PEmnE-Bt
*/

最初は上のような文章が書き込まれていますが、これは消しちゃってOKです。

そしてそこに次のコードをそのままコピペ。

これでブログを確認してみると、コメント欄が最初から開いている状態になっているはずです。

Jetpackのコメント機能を有効化すると

これでJetpackのコメント欄も表示されるはず。

「Jetpack>設定」でコメント機能を有効化します。

さあこれでいいだろう!と思ったらなんだこれ…。

CapD20160503_10

ビローンと意味不明の空白が。

てことでまたもやchromeのデベロッパーツール。謎の空白を右クリックして「検証」。

CapD20160503_11

Jetpackから呼び出したフォームが表示されているiframeの高さが430pxに指定されています。空白の原因はここですね。

Jetpackプラグインの編集

さあここからは完全に自己満足です。

でもブログを見に来てくれた方がムダな空白にイラッとするかもしれない。

ユーザビリティ向上として修正!

メニューから「プラグイン>インストール済みのプラグイン」を開いたら「Jetpack by WordPress.com」の下にある「Jetpack | 設定 | サポート | 停止 | 編集」から編集をクリック。

CapD20160503_12

超多機能プラグインだけあって恐ろしい数のファイルが出てきます。

その中から「jetpack/modules/comments/comments.php」を選択。

コードの中盤辺りに下記の記述があります。

この中の「430」の部分がコメント欄として表示されるiframeの高さを指定しているんですね。

そこで「430」の部分を「80」に書き換えて、忘れずに「ファイルを更新」

ブログを確認してみると…。

CapD20160503_13

すっきりちょうどいい間隔に!

さらにこだわるなら

もう本当にどうでもいい部分。

まだ隙間が気になる場合はこの部分を調整。

divspace

ここに隙間を取るためのスペースがあります。

ソースはこんな感じ。

ずばりそのまんまの”space”のクラスで指定されています。

テーマのスタイルシートだと「height: 2.5em;」に指定されていますが、少し小さくします。

てことでこれも「カスタムCSS」に追記。

これで程よい隙間になりました。

これで全ての修正完了です。

 

まとめ

今回はWordPressテーマ「マテリアル」でJetpackのコメント機能を使う方法として、私がやってみたことを書いてみました。

しかしJetpackのプラグイン編集は、プラグインのアップデートがあった場合デフォルトに戻ってしまう可能性が高いので本当にその場しのぎの自己満足にしかならないかもしれません。

あともし真似する方がいらっしゃいましたら変更前のバックアップは忘れずに。

少しでも誰かの参考になれば、まぐれヒット。

この記事をシェアする

コメント

  • 私の突然の質問に素早く、そしてこんなに丁寧でわかりやすい解説記事を書いてくださり、ありがとうございます!
    参考にさせていただきます!

    by レシル 2016年5月3日 11:30 AM

    • コメントありがとうございます!
      コメント機能、もっと掘り下げてみたいですよねー。
      引き続き色々テストしてみます。

      by 管理人コウスケ 2016年5月3日 3:38 PM

down コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)