このブログはWordPressテーマ「simplicity」を使わせてもらっていますが、別のブログではWordPressテーマ「マテリアル」を使わせてもらっています。
WordPressテーマ「マテリアル」のいいところ
- おしゃれ
- 多機能
- カスタマイズ性がいい
- AdSenseクリック率も高い
- そして無料
と、マテリアルはいいところだらけです。
しかしそのおしゃれなデザインが障害となり、一部のプラグインと干渉してしまうことがあります。
マテリアルに限らず、テーマが多機能になればなるほど何れかのプラグインとは干渉しやすくなりますよね。
特に「Jetpack by WordPress.com」や「All In One SEO Pack」、「Celtispack」のようにプラグイン側も多機能になればなおさら。
その一端として、マテリアルをテーマに使っているブログでJetpackの機能の1つ「コメント」がうまく動かなかった症状と、それを解消した方法を残しておきます。
もし真似してみようって方がいたらくれぐれもバックアップを取った後に自己責任でお願いします。
Jetpackのコメント機能
Jetpackのコメント機能については下の記事に目を通していただければどんなものかわかると思います。
簡単に言うと
- コメント投稿者の名前の部分にその人のSNSページへのリンクを貼る
- コメントの承認を設定している場合SNSアカウントでコメントした人は承認が必要なくなる
などの機能がついているコメント欄を、使用中のテーマのコメント欄と差し替える機能です。
スポンサーリンク
Jetpackのコメント機能と
マテリアルのコメント欄とは干渉する
しかしテーマにマテリアルを使用していると干渉してしまい、そのままでは使えません。
マテリアルのデフォルトのコメント欄
まずはマテリアルのデフォルトの状態。
このように下向きのボタンが表示されています。
ここをクリックすると…。
このようにコメント欄が出てくるようになっています。
これがマテリアルのデフォルトの状態、問題なくコメントできます。
Jetpackのコメント機能を有効にすると
しかし「Jetpack＞設定」からコメントを有効化しただけの状態がこちら。
あららら…。
先程まであった下向きのボタンがなくなり、さらにコメントできる欄もありません。
これは困った。
実は私、マテリアルを使わせてもらっている別のブログでこの状態のまま1ヶ月以上気づかずに過ごしておりました。
別のテーマからマテリアルに変えた際、この状態になっていることに気づかなかったんですね。
それまではチラホラはコメントをもらえていたブログだったのですが、恐らくこの1ヶ月以上の間にコメントしてくれようとした方の心をくじいてしまい、今では全くコメントの貰えないブログになってしまいました。
あまりの寂しさに妻にコメントちょうだいと頼もうか迷っています。
Jetpackのコメント機能と
WordPressテーマ「マテリアル」
が干渉する問題の解決方法
さあやっと本題です。
まずJetpackのコメント機能が何をしているかというと
- テーマのコメント欄に当たる部分を削りとる
- Jetpackのコメント欄を挿入する
ってことをしてるわけです。
そこでなぜコメントできなくなっちゃうかというと、
|
1 |
<p class="go-comment-arrow lsf main-color-background">down</p> |
に当たる部分、つまり下向きの矢印も一緒に削り取っちゃっているからなんですね。
ここの出力はマテリアルテーマのcomments.phpから命令されています。
これによってマテリアルの「下向きボタンを押すとコメント欄が出てくる」というかっこいい機能が裏目となって、コメント欄を表示できなくなってしまっているのです。
コメント欄を隠す機能をオフにする
そこでまず私がやったのはマテリアルのコメント欄のかっこいいポイント
コメント欄が最初は隠れていてボタンを押すと現れる
という機能をなくすこと。
つまり最初から全見せ状態にしちゃおうってわけですね。
そこで、まずはこの命令がどこから出されているかを調べます。
私はchromeを使っていますのでchromeのデベロッパーツールで手っ取り早く。
- 一度Jetpackのコメント機能は無効にして、デフォルトのコメント欄を表示
- コメント欄を右クリックして「検証」
- コメント欄が書いてある部分はここだ！
ここまでわかったら次は問題の下向きボタンを押してみます。
こいつが何かヒントを持ってるに違いない。
ソースの一部が紫色に変わり何やらピロピロ動き始めて…。
「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です。
そしてそこに次のコードをそのままコピペ。
|
1 2 3 4 |
/* コメント欄を隠さないようにする */ .comment-form { display: block; } |
これでブログを確認してみると、コメント欄が最初から開いている状態になっているはずです。
Jetpackのコメント機能を有効化すると
これでJetpackのコメント欄も表示されるはず。
「Jetpack＞設定」でコメント機能を有効化します。
さあこれでいいだろう！と思ったらなんだこれ…。
ビローンと意味不明の空白が。
てことでまたもやchromeのデベロッパーツール。謎の空白を右クリックして「検証」。
Jetpackから呼び出したフォームが表示されているiframeの高さが430pxに指定されています。空白の原因はここですね。
Jetpackプラグインの編集
さあここからは完全に自己満足です。
でもブログを見に来てくれた方がムダな空白にイラッとするかもしれない。
ユーザビリティ向上として修正！
メニューから「プラグイン＞インストール済みのプラグイン」を開いたら「Jetpack by WordPress.com」の下にある「Jetpack | 設定 | サポート | 停止 | 編集」から編集をクリック。
超多機能プラグインだけあって恐ろしい数のファイルが出てきます。
その中から「jetpack/modules/comments/comments.php」を選択。
コードの中盤辺りに下記の記述があります。
|
1 2 3 |
$_SERVER['REQUEST_URI'] ) ); $this->signed_url = $url; $height = $params['comment_registration'] || is_user_logged_in() ? '315' : '430'; // Iframe can be shorter if we're not allowing guest commenting |
この中の「430」の部分がコメント欄として表示されるiframeの高さを指定しているんですね。
そこで「430」の部分を「80」に書き換えて、忘れずに「ファイルを更新」。
ブログを確認してみると…。
すっきりちょうどいい間隔に！
さらにこだわるなら
もう本当にどうでもいい部分。
まだ隙間が気になる場合はこの部分を調整。
ここに隙間を取るためのスペースがあります。
ソースはこんな感じ。
|
1 |
<div class="space"></div> |
ずばりそのまんまの”space”のクラスで指定されています。
テーマのスタイルシートだと「height: 2.5em;」に指定されていますが、少し小さくします。
てことでこれも「カスタムCSS」に追記。
|
1 2 3 4 5 |
/* コメント欄の下の空白調整 */ .space { clear: both; height: 1.5em; } |
これで程よい隙間になりました。
これで全ての修正完了です。
まとめ
今回はWordPressテーマ「マテリアル」でJetpackのコメント機能を使う方法として、私がやってみたことを書いてみました。
しかしJetpackのプラグイン編集は、プラグインのアップデートがあった場合デフォルトに戻ってしまう可能性が高いので本当にその場しのぎの自己満足にしかならないかもしれません。
あともし真似する方がいらっしゃいましたら変更前のバックアップは忘れずに。
少しでも誰かの参考になれば、まぐれヒット。
コメント
私の突然の質問に素早く、そしてこんなに丁寧でわかりやすい解説記事を書いてくださり、ありがとうございます！
参考にさせていただきます！
by レシル 2016年5月3日 11:30 AM
コメントありがとうございます！
コメント機能、もっと掘り下げてみたいですよねー。
引き続き色々テストしてみます。
by 管理人コウスケ 2016年5月3日 3:38 PM