Instapaper、Read It Later に対応&管理画面がつきました。wp-hatena 拡張版 0.6 リリース

0.5 からの変更点

  • Instapaper に対応
  • Read It Later に対応
  • addNewHatena() 廃止、addHatena() に統合
  • はてブのブックマーク数をテキスト表示を追加(見た目は wp-hatena.css で整形してください)
  • 管理画面がつきました!※管理画面からの設定はしなくても動きます
  • 管理画面から、はてブ、Tweet、Facebook いいね!、それぞれの表示タイプを選べるように
  • 管理画面からの設定がその他にも少し
  • 使用する画像は wp-hatena/img に入れる仕様になりました

wp-hatena/img_sample にサンプルのアイコン画像を入れてあります。初回のみ、この中身を img 内にコピーしてください。

「自作でアイコン画像をアップしてあるのに、wp-hatena アップデート時に同梱ファイルで上書きされた!」ということがないよう、このような形にしました。:)

表示サンプル

img_sample 内の画像を利用した場合、このような見た目になります。

独自アイコン表示サンプル

サンプル画像を見てのとおり、Facebook いいね!ボタンだけは独自アイコンを利用できません。iframe で読み込んでいて、さらに状態により色々表示内容が変わってしまうため…

アイコンは、gif のものと png のものがあります。デフォルトのアイコンの形式によって変わっています。そのうち png に統一するかもしれません。(透過 png がデフォルトのものがあるので、gif への統一はあきらめました)

mixi チェックを独自アイコンで表示させる場合

だいぶゴリ押し手法ですが、以下のように wp-hatena.css に記述することで独自アイコンで表示することが可能です。

/* mixi check */
.wph.mixi-check-button {
	display: inline-block;
	/display: inline;
	width: 30px!important;/* 独自アイコンの横サイズ */
	height: 30px!important;/* 独自アイコンの縦サイズ */
	background: url(./img/mixi.png) 0 0 no-repeat!important;
	/zoom: 1;
}

.wph.mixi-check-button img {
	display: none;
}

iframe で表示されるのですが、iframe の中身が別ドメインのため外からいじれず。仕方がないので CSS で背景に画像をひいたうえで iframe 内の画像を非表示にしています。

表示させたい場所に記述するタグ内容

下記をそのまま記述すると、全部が表示されます。全部表示だと重複するものもあるので、適宜不要なものは削除かコメントアウトしてください。

addhatena();
	//はてブのブックマーク数をテキスト表示(独自アイコン利用時のブックマーク数表示などに)
	$wph->addHatenaCountTxt();
	//はてブのブックマーク数を画像で表示(よくあるタイプ)
	$wph->addHatenaCount();
	$wph->adddelicious();
	$wph->addLivedoor();
	$wph->addYahoo();
	$wph->addFC2();
	$wph->addNifty();
	$wph->addPOOKMARK();
	$wph->addBuzzurl();
	$wph->addChoix();
	$wph->addnewsing();
	$wph->addInstapaper();
	$wph->addReadItLater();
	//Tweet ボタン 管理画面から表示タイプ選択可能
	$wph->addTweetBtn();
	$wph->addEvernoteClip();
	//Facebook いいね!ボタン 管理画面から表示タイプ選択可能
	$wph->addFacebook();
	//mixi チェック ※ ディベロッパーセンターに登録が必要、分かる人向け
	$wph->addMixicheck();
}?>

ダウンロード

wp-hatena-0.6.zip

管理画面は初挑戦なので、おかしいところがあったらコッソリご指摘ください。

WordPress Plugins/JSeries » wp-hatena 拡張版」にも明日以降に…詳細を…。(ねむたいので…)