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のブログパーツを復活させることができました。

Facebook Like Boxをプラグインを使わずレスポンシブに設置する

Facebook Like Boxは全然プラグインを使わなくても、あっさり設置できるんだなと思いました。

設置手順を、メモしておきます。HTML5の場合の方法です。
(以下は、2014年9月29日時点の情報です)

まだ、Facebookページを作っていない場合は、先に作っておきましょう。

Continue reading “Facebook Like Boxをプラグインを使わずレスポンシブに設置する”

いいね!ボタン上の余白を消しソーシャルボタンを横に綺麗に並べる

今すぐ使えるかんたんmini LINE&Twitter&Facebook基本&便利技

ソーシャルボタンを横に並べるCSSをようやくスマートに書けるようになってきたしまぷー(@Shimapoo_jp)です。

できあがったCSSは、

.social-buttons {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.social-buttons:after {
  overflow: hidden;
}
.social-buttons li {
  float: left;
  margin: 0 10px 10px 0;
  padding: 0;
}
iframe.twitter-share-button {
  width: 90px !important;
  margin-bottom: 0;
}
iframe.hatena-bookmark-button-frame {
  margin-bottom: 0;
}
div#___plusone_0 {
  width: 60px !important;
}
.fb-like {
  line-height: 1;
}

こんな感じです。

特にうれしかったのが、

.fb-like {
  line-height: 1;
}

の指定。
こうすることで、「いいね!」ボタンの上にできていた余白を無くすことができました。
分からなかったことが分かった瞬間って、うれしくてたまらないですね。

Continue reading “いいね!ボタン上の余白を消しソーシャルボタンを横に綺麗に並べる”

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

2016年9月8日追記
子テーマの作り方について最新情報は子テーマ – WordPress Codex 日本語版を要確認のこと。

本記事作成は、2014年9月のため情報が古い部分あり。CSSの読み込み方法が新しくなっています。


テーマをアップデートしても上書きされないという子テーマを試してみたしまぷー(@Shimapoo_jp)です。

テーマをアップデートするとファイルは更新されて、自分が編集した部分は消えてなくなります。
子テーマで編集していけば、消えてなくなることはないようです。(ただ、何が起こるか分かりませんから、自分のパソコンの中などへ定期的にバックアップすることはお忘れなく)

子テーマに自分で作ったテンプレートファイルなどを置いておけば、WordPressは優先して子テーマのファイルを使ってくれます。

では、さっそく試してみましょう。

themesフォルダの中に子テーマ用のフォルダを作る

まずは、themesフォルダの中に、childといった子テーマ用のフォルダを新たに作ります。
フォルダ名は、ご自身の管理しやすい名前にしましょう。

style.cssを新たに作成

childフォルダの中にstyle.cssというファイル名で

/*
    Theme Name: Twentyfourteen Child Theme
    Template: twentyfourteen
*/

@import url('../twentyfourteen/style.css');

と書いて文字コードをUTF-8(BOMなし)にして保存します。
(WordPressで使えるテキストエディタについては、用語集 – WordPress Codex 日本語版を確認しましょう)

親テーマとしてTwenty Fourteenを使ってみました。
style.cssには、最低Theme NameとTemplateが必要とのことなので入れておきます。(ご自身が利用しているテーマに応じてかえましょう)

@importで親のスタイルシートシートを読み込むようにします。

ここで、ダッシュボードの中のテーマへ行ってみると、Twentyfourteen Child Themeというのができていました。
新しくできた子テーマを、有効化しておきましょう。

参考ページ
子テーマ – WordPress Codex 日本語版
Child Themes « WordPress Codex(英語版)
参考書籍
基礎からのWordPress (BASIC LESSON For Web Engineers)の172ページ

スタイルシートの追加は、子テーマのstyle.cssを使う

試しに、childフォルダの中のstyle.cssに

p.teststyle {
 color: red;
}

と書いて、p要素にclass=”teststyle”を指定してみると、赤色になってくれました。

「idセレクタもちゃんと動くかな?」と思って、

p#idteststyle {
 font-size: small;
}

と書いてp要素にid=”idteststyle”と指定したのを作ってみると、文字が小さくなりました。

テンプレートファイルも子テーマで編集

テンプレートファイルの編集も、試してみます。

編集したいテンプレートファイルを、childフォルダの中へコピーします。
twentyfourteenのフォルダの中にあるテンプレートファイルsidebar.phpをchildのフォルダの中にコピーして、childのフォルダの中のsidebar.phpを編集してみました。

サイトを再表示してみると、おー、ちゃんと編集したsidebar.phpが反映しています。
親テーマに無いテンプレートファイルを子テーマの中で作っても、テンプレート階層の優先順位で子テーマのテンプレートファイルを読み込んでくれました。子テーマという仕組みはすごいですね。

新しい関数を追加する時には、子テーマにfunctions.phpを作る

childフォルダの中にfunctions.phpを新たに作れば、新しい関数を追加できます。

functions.phpをさわる時には、必ずテスト用サイトで動作確認を取りながら慎重に行いましょう。

functions.phpは、WordPressを動かす重要なファイルです。
関数の使い方を間違えると、WordPressが動かなくなります。

WordPressが動かなくなると怖いので、WordPressを始めた最初の頃は、functions.phpはおっかなくてさわれませんが、子テーマのfunctions.phpに自分で関数などを追加できるようになると、飛躍的にいろいろ細かなことをやっていけるようになります。

functions.phpが何のことだかさっぱりという方は、時間のある時にじっくり勉強してみてくださいね。

functions.phpの最初にphpの開始タグ<?phpを忘れずに

子テーマでfunctions.phpを使う場合は、functions.phpの最初の行にphpの開始タグ

<?php

を忘れずに入れましょう。

最初、単純にtwentyfourteenの中のfunctions.phpの自分で書いたコードをカットしてchildフォルダの中のfunctions.phpにペーストしたのですが、コードがそのままwebページに表示されて「あれ?」となりました。

あ、そうだそうだと思って<?phpをfunctions.phpの最初の行に書いたら正常に動いてくれました。

逆にphpの終了タグ?>はつけない方がいいみたいです。

参考書籍
本格ビジネスサイトを作りながら学ぶ WordPressの教科書の157ページ「コラム」(〜閉じなくても問題ありませんか?)
パーフェクトPHP (PERFECT SERIES 3)の37ページ:終了タグの省略

以前、テーマのアップデートでファイルが消えてしまった

2014年9月初旬に、Twenty Fourteenのテーマをアップデートしたら、今まで書いたファイルが全部消えてしまってショックでした。

アップデートボタンをポチッと押した時に「あ、そういえばファイルって全部上書きされるんじゃなかったっけ?」と頭をよぎったのですが、すでに手遅れ。

綺麗さっぱり、自分が編集した内容は消えて無くなりました。

子テーマというのは、以前から聞いたことはあったのですが難しそうだったのでスルーしていました。
今日、何気なく基礎からのWordPress (BASIC LESSON For Web Engineers)を読んでいたら、子テーマついて書いてあったので、試してみたら意外と簡単にできました。

せっかく書いたコードがテーマのアップデートで消えてしまわないよう、これからは子テーマを使っていこうと思うしまぷー(@Shimapoo_jp)でした。

特定の個別の記事ページのQuick Adsenseを任意に設定する

できる100ワザ Google AdSense 必ず結果が出る新・ネット広告運用術

特定の個別の記事ページのQuick Adsenseを調整したい場合

Quick Adsenseで設定している広告が、引用文の中に入ってしまったので、どうにかできないかなと思ったしまぷー(@Shimapoo_jp)です。

blockquote要素で引用文を表示したら、スポンサーリンクの文字も引用文の表示に。
ソースを見てみたら、blockquote要素の中に、Quick Adsenseが入り込んでいました。

何とかできないかなと悩んでいたら、Quick Adsenseの設定画面にヒントが書いてありました。

Continue reading “特定の個別の記事ページのQuick Adsenseを任意に設定する”