WordPressへのZenbackの導入

WordPressを使って作成したブログへZenbackのコードを設置する方法について解説します。記事下及びサイドバーへ設置する方法となります。なおWordPressの使い方全般に関しては「WordPressの使い方」をご参照下さい。

WordPressのブログの記事下へ設置

事前に「新規ブログを追加」及び「コードの確認方法」を参考にあらかじめWordPressで作成したブログをZenbackに追加して使用するコードを取得しておいて下さい。

WordPressにログインしてダッシュボードを表示して下さい。

「外観」メニューの中の「テーマ編集」メニューをクリックして下さい。

「テーマの編集」画面が表示されます。

今回メインページではなく個々の記事が表示された時に記事下やサイドバーにZenbackが表示されるように設定します。そこで個別ページ用の「single.php」ファイルにコードを追加します。画面右側に表示されているテンプレート一覧の中から「単一記事の投稿(single.php)」をクリックして下さい。

「single.php」ファイルの編集画面が表示されます。

今回は記事下のコメントの下にZenbackを表示させてみます。使用されているテーマによっても異なりますが「<?php comments_template( '', true ); ?>」のような記述がある個所を探して下さい。

※ クリックして頂くと画像が拡大表示されます。

この行の下にZenbackのコードを追加して下さい。

※ クリックして頂くと画像が拡大表示されます。

記述が終わりましたら編集画面のすぐ下にある「ファイルを更新」ボタンをクリックして下さい。

これでコードの設定は完了です。

ではブログを見てみます。メインページではZenbackは表示されていませんが、個々の記事を見てみると一番下にZenbackが表示されています。

WordPressのブログのサイドバーへ設置

次にサイドバーに設置する方法です。記事下にZenbackを表示する場合はPHPファイルを直接編集しましたが、サイドバーへZenbackを表示する場合にはウィジェットを使って表示します。

ダッシュボードから「外観」メニューの中の「テーマ編集」メニューをクリックして下さい。

「ウィジェット」画面が表示されます。

「テキスト」ウィジェットを使います。「テキスト」ウィジェットをドラッグして「メインサイドバー」の一番下へ持って行ってください。

ウィジェットに表示するコンテンツが入力できるように自動的に拡張表示されます。コンテンツの部分にZenbackのコードをそのまま入力して下さい。入力が終わりましたら「保存」ボタンをクリックして下さい。

保存しても自動的に小さくはならないので、保存ボタンをクリックした後で「閉じる」と書かれたリンクをクリックして下さい。

これでコードの設定は完了です。

ではブログを見てみます。サイドバーにウィジェットを使って設置した場合はメインページでも個々の記事でもZenbackはサイドバーに表示されています。

WordPressを使ったブログにZenbackを導入する方法について解説しました。テンプレートファイルに直接コードを追加する場合はよりカスタマイズが行いやすくなりますが、テーマの更新などをした場合に再度コードを追加しなおさないといけませんのでご注意下さい。