// パンくずリスト

Home > Web > WordPress

// Google Adsense

WordPressにプラグイン使わずソーシャルボタン設置

今まではプラグインとしてWP Social Bookmarking Light(導入例)を使ってきましたが、そのままでは細かく設定できないので手動に切り替えました。

参考にさせていただいたのはこちらの記事です。
WordPressにプラグインを利用しないでソーシャルボタンを設置する方法(moonblack.net)

ただ、当ブログは3カラムですし、記事上部に設置したかったのでCSSとソースをいじってます。
テンプレートはwp.vicunaですので、参考にされる方はそれぞれに合わせた修正をしてください。

■ヘッダ(header.php)に以下を追加

<?php if ( is_single() ) : ?>
	<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<?php endif; ?>

■単一記事(single.php)の設置したい場所に以下を追加
			<div class="textBody">
				<!-- ソーシャルボックス -->
				<ul id="social_box">
					<!-- はてなブックマーク -->
					<li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
					<!-- Twitter -->
					<li><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="[<?php bloginfo('name'); ?>] <?php the_title(); ?>" data-count="horizon">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
					<!-- Facebook -->
					<li><iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:20px;" allowTransparency="true"></iframe></li>
					<!-- Google+ -->
					<li><g:plusone size="medium" href="<?php the_permalink(); ?>"></g:plusone></li>
			</ul>
			<br class="clearit" />

■CSS(core.css)に以下を追加
/* ソーシャルボタン
---------------*/

#social_box{
    background:none;
    width:370px;
	margin-left:auto;
	margin-right:0;
	list-style:none;
}
 
#social_box li {
	float:left;
    padding:0px 5px;
    background:none;
}

.clearit {
	margin: 0;
	padding: 0;
	height: 0;
	clear: both;
}


これで表示されているはずです。
ちょっと悩んだのが右寄せなのですが、何故か右に隙間が空いて、float使ったりposition使ったりでも解決せず、結局単純にwidth幅を広く取りすぎていただけというオチでした。
エディタで手打ちしてるとこのへんが弱点ですね・・・

ちなみに、最初に紹介したプラグインもそれなりに設定できますし、何より国内のサービスはほとんど対応しているので、ソースごちゃごちゃさせたくないとか楽な方がいいという方はプラグイン使った方がいいかと思います。

WP Social Bookmarking Light導入&カスタマイズ

ブックマークサービスやSNSボタンを設置する「WP Social Bookmarking Light」を導入してみました。
開発が日本の方ということで、国内サービスへの対応が多いのが特徴です。

私はとりあえず欲しかった
・はてなブックマーク
・Twitter
・Facebook
・Google+1
を設置しました。

ただ、利点である「簡単に設定&設置できる」ということが弱点にもなっています。
要するにカスタマイズできる範囲が少ない&わかりづらいということで、カスタマイズする場合モジュールをいじることになります。実際、表示の問題からCSSをいじってる人も多いようで、検索すると色々ヒットしますね。

私はTwitterへ送る時ブログタイトルも入れたかったので下記のようにservices.phpを修正しました。

    function twitter()
    {
        $options = wp_social_bookmarking_light_options();
        $twitter = $options['twitter'];
        $width = $twitter['width'] != '' ? $twitter['width'] : '120';
        $height = $twitter['height'] != '' ? $twitter['height'] : '20';
        return $this->link_raw('<iframe allowtransparency="true" frameborder="0" scrolling="no"'
                                .' src="http://platform.twitter.com/widgets/tweet_button.html'
                                .'?url='.$this->encode_url
                                .'&amp;text='.'&#91;'
								.$this->encode_blogname
								.'&#93;'
								.$this->encode_title
                                .($twitter['via'] != '' ? '&amp;via='.$twitter['via'] : '')
                                .'&amp;lang='.$twitter['lang']
                                .'&amp;count='.$twitter['count']
                                .'"'
                                .' style="width:'.$width.'px; height:'.$twitter['height'].'px;">'
                                .'</iframe>');
    }

CSSの内容はcontent.php真ん中へんにあります。
これHEAD内に直接記述されてあまり気分的によろしくないので、切り取って外部に出すのと修正を次の段階でやりたいと思います。

WordPress 3.2.1にアップデート

WordPress 3.1.4から3.2.1にやっとアップデートしました。
今まで保留していたのはプラグインの互換性検証をしていなかったからなのですが、特に問題となるような声も聞こえてこなかったのでした次第です。

ダッシュボードのデザインが結構変わっているのと、Firefox3.6.21だとバージョン古くてフル活用できないよ!と出てくるくらいですかね、見た目ではっきりわかるのは。
高速化は特に重い処理してないのとサーバの問題が大きいのであまり関係ないだろうか。

とりあえず色々試して様子見しましょう。

WordPress用人気プラグインにバックドアが仕込まれる

WordPressのプラグインに悪質なコードが混入 – ITmedia エンタープライズ

今回発見したのは
AddThis(SNSを含むWebサービスへの追加ボタンを追加するプラグイン)
WPtouch(iPhone,iPod touch用の表示を用意するプラグイン)
W3 Total Cache(キャッシュや最適化による高速化プラグイン)
上記のプラグインで、作者ではなく外部の何者かが混入させたらしいのですが、その経緯は不明。
その利便性から日本でも多く使われているプラグインでしょう。

もし利用しているユーザがいるならば、プラグインを無効化し、速やかにパスワードの変更をしましょう。

サムネイルサイズを増やすプラグイン「Additional Image Sizes (zui)」

WordPress(現在3.1.3)のデフォルトでは、サムネイルサイズを4種類しか選べません。
多様なサイズの画像を扱う場合、もっと小さく!とかもっと大きく!と思うことが多々あり、function.phpに追加する手段もありますが、できるだけ内部はいじりたくないので「Additional Image Sizes (zui)」というプラグインを導入しました。

私はプラグインページから検索して自動インストールしましたが、手動インストールの場合は他のプラグイン同様にディレクトリにファイルをコピーしてプラグインを有効にすればOKです。


左メニューのメディア→image sizesから設定画面に入ります。
Additional image sizes

名前、縦横サイズ、クロップするかを指定してさくさく作っていきます。
Additional image sizes

するとご覧の通り増えています。
Additional image sizes


他にも色々機能があるようですが、私はサイズを増やすのが目的なのでよくわかりません。
まぁ、基本的にはfunction.phpにadd_image_size()やset_post_thumbnail_size()を追加するのをプラグインで実現しているだけのようなので難しく考える必要はなさそうです。

コンテンツ
Information
「君の名は。」Blu-rayコレクターズ・エディション 4K Ultra HD Blu-ray同梱5枚組 (初回生産限定)(早期購入特典:特製フィルムしおり付き)
[君の名は。コレクターズ・エディション]

【Amazon.co.jp限定】劇場版 ソードアート・オンライン -オーディナル・スケール-(メーカー特典:「原作イラストレーターabec描き下ろし キャンバスイラストカード」付)(オリジナル特典:「描き下ろしイラストB1布ポスター(アスナ)」「描き下ろしイラストブックカバー(アスナ)」付)(完全生産限定版) [Blu-ray]
[劇場版 ソードアート・オンライン]

【Amazon.co.jp限定】「劇場版トリニティセブン -悠久図書館と錬金術少女-」(描き下ろしA3ポスター付)(メーカー特典:劇場告知B2告知ポスター付) [Blu-ray]
[劇場版トリニティセブン]

Newニンテンドー2DS LL ブラック×ターコイズ
[Newニンテンドー2DS LL]

この素晴らしい世界に祝福を! 2第1巻限定版 [Blu-ray]
[この素晴らしい世界に祝福を!2 第1巻]

きんいろモザイク Pretty Days( イベントチケット優先販売申込券 ) [Blu-ray]
[きんいろモザイク Pretty Days]

【Amazon.co.jp限定】未確認で進行形 Blu-ray BOX(B2布ポスター付き)
[Amazon限定 未確認で進行形BD-BOX]

RSS Reader
検索
Feeds