ZenbackのブログパーツをDisqusのコメント下に表示する

ブログパーツコレクション

Zenbackのブログパーツが表示されなくなったので、改めて設置し直してみました。

今まで、コメントの上に表示していたZenbackのブログパーツ。

いつの間にか消えているなと思ったら、コメント用のプラグインDisqus Comment Systemを入れたからでした。

ということで、今度はDisqusのコメントの下に、Zenbackのブログパーツを表示させてみます。

親テーマがTwenty Fourteenで、親テーマTwenty Fourteenの子テーマを使っている場合について書いています。

Zenbackブログパーツの設定

twentyfourteenのフォルダの中にあるsingle.phpを自分の子テーマのフォルダの中へコピーします。

ZenbackのサイトZenbackであなたのブログに全てのフィードバックを。へ行って、Zenbackのブログパーツのコードを取ってきます。

取ってきたZenbackのブログパーツのコードを、子テーマのフォルダの中にzenback.phpといったファイル名で保存します(ファイル名は任意です)。

子テーマの中のsingle.phpを開いて、</div><!– #content –>の上あたりの?>の上にget_template_part(‘zenback’);と書いて保存します。

こんな感じです。

				endwhile;
get_template_part('zenback');
			?>
		</div><!-- #content -->

これで、個別の記事ページを再読み込みすると、Disqusのコメントの下にZenbackのブログパーツが表示されるはずです。

テンプレートファイルの編集は子テーマを使う

直接twentyfourteenの中のsingle.phpを編集すると、twentyfourteenのアップデートがあった時にsingle.phpや他のテンプレートファイルも更新されて、今までカスタマイズした内容がすべて消えてしまいます。

既存のテーマを親テーマとして子テーマを作っておけば、親テーマのアップデートがあっても子テーマは影響を受けないらしいです。

というのは、私はまだ子テーマを使って親テーマのアップデートを経験したことがないので、本で読んだ内容です。

ですが、以前twentyfourteenのアップデートがあった時に、今までカスタマイズしてきた内容が全部消えてしまってショックだったので、今は子テーマを使うようにしています。

あと、忘れずに編集したファイルのバックアップもしておきましょう。

子テーマの作り方については、

子テーマでテーマを編集していけばアップデートの時も安心 | WordPress

に書きましたので、参考にしてみていただければ幸いです。

子テーマについて分かりやすかった書籍は

です。

この基礎からのWordPress (BASIC LESSON For Web Engineers)の中の172ページから180ページにかけて、子テーマについて書いてあります。

Zenbackブログパーツの左右の余白

Zenbackのブログパーツを入れただけだと、左右に余白がありません。

CSSを使って、Zenbackのブログパーツの左右に余白をつけましょう。

CSSの設定も、子テーマの中のstyle.cssを使います。

子テーマのstyle.cssの中に

/* Zenback */
#zenback-widget-loader {
  margin-left: 10px;
  margin-right: 10px;
}

と書いて保存します。

個別の記事ページを再読み込みすると、左右に余白ができているはずです。

これで、無事Zenbackのブログパーツを復活させることができました。