Onecosブログ

WordPress/Webサービス/ライフスタイルを紹介する個人ブログ

WordPressのコメント欄を消しFacebookのコメント欄を実装する方法

time 2015/07/03

WordPressのコメント欄を消しFacebookのコメント欄を実装する方法

相変わらず、弊社のお客様から要望があったWordPressの機能追加のやり方をブログに更新しています。今回はプラグイン無しでFacebookのコメント欄を実装する方法です。非常に簡単ですが元のコメント欄を消す、もしくは非表示にし追加するようにします。
プラグインばっかり入れると干渉して表示がおかしくなったりする場合もあります。
簡単な事でしたら直接ファイルを編集しましょう。もちろんバックアップは取ってね!!

sponsored link

Facebookコメント欄の実装について

WordPressのテーマにはほとんど標準でコメント欄が付いています。酷いところだとスパムだらけだし、コメントを認証しなければ表示しないようにできるけど、いちいち消していくのも面倒臭い。

Facebookの場合だとほとんど実名登録しているのでコメントも荒れにくいし、なにより書いた人のタイムラインに乗ることでアクセスも期待出来ます。

Facebookコメント欄実装の事前準備

こちらにアクセスします。

このページに最初にアクセスすると、もし自分のFacebookにログインしていると、開発者登録しますか?みたいな画面が出るのでそのまま済ませて下さい。

Facebook登録
URLはそのまま。「Width」は自分のブログサイズに合わせて下さい。分からない場合は後でも変更出来ます。
Number of Postsは表示するコメント数です。5件ならそれ以上表示出来ないのではなくコメントが隠れ「さらに10件表示する」となるのでそのままでもいいでしょう。
そして「Get Code」を押す

Facebookコメント実装
すると上記の画面が出てくるのでこちらを上下両方をテキストエディタなどにコピーしておいて下さい。

header.phpに取得したコードを追加する

先ほどコピーしておいた上の①をheader.phpに貼り付けます。
外観→テーマ編集→右側のメニューからheader.phpを開きます。
Macの場合はcommand+Fキー、Windowsの場合はControl+Fキーで検索ウィンドウを表示。

「body」を検索。
通常だと<body <?php body_class(); ?>>となっています。
Facebook埋め込み
その次の行に先ほどの①を貼り付けて下さい。

②のURLを変更する

②のコードの内容を変更します。先ほど取得したコードはこちら

このまま貼り付けると先ほどURLを取得した時にページのコメント欄がそのまま表示されるので、URLを変更します。

data-href=””の中を変更します。

<?php the_permalink(); ?>に変更

Single.php(単一記事の投稿)に②を追加

URLを変更した②をSingle.phpに追加します。
外観→テーマ編集→Single.phpを開く。

を探す。
※テーマに寄って違う場合がありますが、ほとんどが、comments_templateとなっているはずです。
先ほど②で取得したURLをを消し、②に差し替えます。
元々を完全に消す前に、どこかにコピーしておくか、もしくは残して②を追加してみて下さい。
うまく行けば元々のコードを消します。

完成!!
このブログの「書いている人」のちょうど下のようにFacebookのコメント欄が出ていれば完成です!!

sponsored link

音楽

管理人

Yuki

Yuki

本業はWeb制作やWebコンテンツの運営をしています。最近は動画制作も。日常やWordPress等の役に立つ情報を皆さんにお届けします

LikeBoxを表示するには、テーマカスタマイザーSNS設定FacebookページURLを入力してください

sponsored link