『Google +1 ボタン』とか『いいね!』ボタンとかをつけてみた

せっかくブログを書いているので、気になったことは色々試したいと思います。

というわけで、『Google +1 』ボタンをつけてみます。
ついでに、『いいね!』ボタン(facebook)・『ツイートする』ボタン(twitter)・『B!』ボタン(はてなブックマーク)もつけちゃいます。

では、WordPressを例に説明していきます。


1・『Google +1』ボタン

まずは、『Google +1』ボタンから。

以下のリンクから簡単にソースコードを取得できます。

「Google +1 をウェブサイトに表示」

基本的には、ボタンのサイズや使用する言語を選択するとソースコードが変更されていきますので、指示にしたがって張り付けるだけです。
詳細オプションをクリックすると、コールバック関数や『+1』をつけるサイトのURLを指定したりすることができます。

▼『Google +1 』ボタンを記事一覧に設置

記事ごとに『Google +1』ボタンを設置したい時は、『+1』をつけるURLを変更します。
私の場合、記事一覧で記事ごとに『+1』をつけれるようにしたかったので、『content.php』に以下のコードを追加しました。

<!--▼Google+1 ここから-->
<g:plusone href="<?php the_permalink(); ?>" size="medium"></g:plusone>
<!--▲Google+1 ここまで-->

『the_permalink』テンプレートタグで記事のURLを取得しているだけです。
私は、『content-single.php(記事詳細)』にも同じコードを追加しました。

あとは、『header.php』に以下のコードを追加するだけです。
『head』要素の最後に貼り付ければオッケーです。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'ja'}</script>

これで、『Google +1』ボタンの設置は終了です。


2・『ツイートする』ボタン

次は、有名な『ツイートする』ボタンです。

これも以下のリンクから簡単にソースコードを取得できます。

「Twitter/ツイートボタン」

指示にしたがって、色々選択するとソースコードが変更されますのでコピペするだけです。

▼『ツイートする』ボタンを記事一覧に設置

記事ごとに『ツイートする』ボタンを設置したい時は、『a』要素の『data-url』の値を変更します。

ツイート内テキストを変更したい場合は、『a』要素の『data-text』の値を変更します。

私は、以下のようにしました。

<!--▼twitter ここから-->
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="『あなたのブログ名に変更』 <?php the_title(); ?>" data-count="none" data-lang="ja">Tweet</a>
<!--▲twitter ここまで-->

上記のコードを、『Google +1』ボタンのソースコードと同じ場所に追加します。

あとは、以下のコードを『header.php』に追加します。
これまた『head』要素の最後に貼り付ければオッケーです。

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

これで、『ツイートする』ボタンの設置は終了です。


3・『B!』ボタン

次は、『B!』ボタンです。

『B!』ボタンのソースコードは、以下のリンクから取得できます。

「はてなブックマークボタンの作成・設置について」

しつこいようですが、指示にしたがって色々選択するとソースコードが変更されますのでコピペするだけです。

▼『B!』ボタンを記事一覧に設置

記事ごとに『B!』ボタンを設置したい時は、『a』要素の『href』の値の『http://b.hatena.ne.jp/entry/』の後を変更します。

タイトルを変更したい場合は、『a』要素の『data-hatena-bookmark-title』の値を変更します。

私は、以下のようにしました。

<!--▼はてブ ここから-->
<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="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<!--▲はてブ ここまで-->

上記のコードを、『Google +1』ボタン、『ツイートする』ボタンのソースコードと同じ場所に追加します。

あとは、以下のコードを『header.php』に追加します。
これも『head』要素の最後に貼り付ければオッケーです。

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

これで、『B!』ボタンの設置は終了です。


4・『いいね!』ボタン

最後は、『いいね!』ボタンです。

『いいね!』ボタンのソースコードは、以下のリンクから取得できます。

「Like Buttom」

英語ですが、指示にしたがって色々選択していき、『Get Code』ボタンをクリックするとソースコードが表示されます。
ソースコードが表示されているウインドウの『実装』を変更すると、選択した実装方法のソースに変更されます。
私は、『iFrame』を選択しました。

▼『いいね!』ボタンを記事一覧に設置

私は、『iframe』を選択したので『iframe』にあわせて説明します。
記事ごとに『いいね!』ボタンを設置したい時は、『iframe』要素の『src』の『?href=』の値を変更します。
私は、以下のようにしました。

<!--▼facebook ここから-->
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>" scrolling="no" frameborder="0" style="border:none; overflow: hidden; width: 80px; height: 25px;" allowTransparency="true"></iframe>
<!--▲facebook ここまで-->

上記のコードを、『Google +1』ボタン、『ツイートする』ボタン、『B!』ボタンのソースコードと同じ場所に追加します。

『いいね!』ボタンはこれで終了です。


ほとんどコピペで、簡単に実装できるのがいいですよね><

私は、はてブの数やツイート数は表示しないアイコンを選択しましたが(数が増えなかったら寂しいから・・・)、色々なアイコンが用意されているので、ご自分にあったアイコンを選択して実装してください^^

WordPress <–!more–> を使った「続きを読む」をカスタマイズする方法

前回、自動的に記事を全文表示から抜粋表示にする方法を紹介したので、今回は<–!more–>を使った「続きを読む」のカスタマイズ方法を紹介しようと思います。

前回同様、『Twenty Eleven 1.2』に合わせて説明します。
『Twenty Eleven 1.2』は<–!more–>を入力すると「続きを読む」と表示するので、「続きを読む」以外のテキストが表示されるテーマを使用している方は、使用しているテーマに置き換えてお考えください。
また、WordPressバージョン 2.7.1以下を使用している方はここをご覧下さい。

▼『続きを読む』のリンク先を記事の先頭に変更する方法

『続きを読む』のリンク先は、<–!more–>を入力した場所になっています。それなので、記事の途中から表示されてしまいます。
記事の初めから表示したい場合は、使用しているテーマのディレクトリ内にある『functions.php』に以下のコードを追加します。

// <!--more-->のリンク先をページの先頭に移動に変更するコード
function remove_more_jump_link($link) {
    $offset = strpos($link, '#more-');

    if ($offset) $end = strpos($link, '"',$offset);

    if ($end) $link = substr_replace($link, '', $offset, $end-$offset);

    return $link;
}
add_filter('the_content_more_link', 'remove_more_jump_link');

これで、リンク先が記事の先頭になります。


▼『続きを読む』を好きなテキストに変更する方法

『続きを読む』を好きなテキストに変更したい場合は『the_content』タグを以下のように書き換えます。
色々な場所に書かれていますので、Devasを使用して探すと楽だと思います。

// 『続きを読む』を『もっと読む?』に変更する方法
<?php the_content( 'もっと読む?' ); ?>

『the_content』タグに好きなテキストを入力するだけで、入力したテキストが表示されるようになります。
(この方法だと、自動翻訳が適用されなくなります。適用されるようにする方法はまた今度ということで・・・)

また『the_content』タグには、HTMLタグやHTMLエンティティを書くこともできます。
それなので、画像を表示したり、CSSを適用したり、♥を表示したりすることができます。

// 『the_content』タグにHTMLタグやHTMLエンティティを書く
<?php the_content( '<span class="moreLink">もっと読む?&hearts;</span>' ); ?>

『the title』タグを使用すると、記事のタイトルを表示することだってできます。

// 『the_content』タグに『the title』タグを使用する
<?php the_content( '' . the_title('', '', false) . 'をもっと読む?' ); ?>

▼記事ごとに『続きを読む』を好きなテキストに変更する方法

上で紹介した方法だと、全ての『続きを読む』にカスタマイズが適用されます。
今回の記事だけは『続きが気になる?』と表示したい場合などは、記事の中に書かれている『<–!more–>』を以下のように書き換えます。

// 今回の記事だけ『続きが気になる?』に変更する方法
<--!more 続きが気になる?-->

『<–!more–>』のmoreのあとに好きなテキストを入力するだけで、記事ごとに好きなテキストを表示することができます。


以上が『<–!more–> を使った「続きを読む」をカスタマイズする』方法です。

WordPressバージョン 2.7.1以下を使用している方や、もっと詳しく知りたい方は、WordPress 日本語ローカルサイト 「続きを読む」のカスタマイズをご覧下さい。

WordPress 自動的に記事を全文表示から抜粋表示にする

使っているテーマによって違うとは思いますが、WordPressは『<!–more–>』を入力しない限り記事を全文表示します。
「<!–more–>を入力しなくても、抜粋で表示して『続きを読む』で個別記事を表示する」という要望はけっこうあると思います。
というわけで、記事一覧を抜粋表示に変更する方法を紹介したいと思います。

僕のテーマは、『Twenty Eleven 1.2』を元に作ったので『Twenty Eleven 1.2』に合わせて説明します。
他のテーマを使用している方は、使用しているテーマに置き換えてお考えください。
それでは、やってみましょ。


PHPの『subStr関数』や『mb_strimWidth関数』を使用する方法もありますが、WordPressには『the_excerpt』という便利なテンプレートタグが用意されているので、今回はテンプレートタグを使用したいと思います。
※日本語はマルチバイト文字なので、色々と不具合もでるみたいです。けど、『WP Multibyte Patch』プラグインを使用することで問題解決するらしいので、入ってない方はインストールしてくださいね!

まずは、テンプレートタグを書き込みます。
テーマのディレクトリ内にある『content.php』の41行目付近に『the_content』があると思います。
この部分を、

the_excerpt();

に、書き換えます。

これで、個別記事以外は抜粋表示に変更されます。
基本的にはたったこれだけです。
抜粋箇所にある画像などは自動的に表示されなくなります。
とっても簡単ですよね><
さすがWordPressって感じです。

ちなみにデフォルトでは、110文字を抜粋して表示されるので、変更したい方は『WP Multibyte Patch』プラグインを編集します。
プラグインを表示し、『WP Multibyte Patch』の下の編集をクリックすると、

'excerpt_mblength' => 110,

と書かれていると思います。
この『110』というのが文字数なので、これを変更します。
50文字を抜粋したいのなら、『110』を『50』に変更し保存すれば50文字抜粋になります。
これもすごい簡単ですね><

『…』という文字を変更したい場合もとても簡単です。
使用しているテーマのディレクトリ内にある『functions.php』に以下のコードを追加するだけです。

function new_excerpt_more($more) {
    return '...';
}
add_filter('excerpt_more', 'new_excerpt_more');

この『return』の後にあるシングルクオート(’)で囲まれた部分が表示されるようになります。
『続きを読む』を変更したい場合は、上記のコードに少し編集を加えます。

function new_excerpt_more($post) {
	return '<a href="'. get_permalink($post->ID) . '">' . '・・・全部見る' . '</a>';
}	
add_filter('excerpt_more', 'new_excerpt_more');

以上が『自動的に記事を全文表示から抜粋表示にする』方法です。
さすがWordPress。簡単に実装できちゃいます!!

WordCamp Kobeで「わぷー」のステッカーが貰えるらしい

WordCamp Kobe 2011 イベントで「わぷー」のステッカーが配布されるらしいです。
わぷーのステッカー。
欲しい・・・

まあ、わぷーは置いといて、「WordCamp」面白そうですね。
いろいろなセッションがあるみたいです。


【Central Cafe】
キースピーチをはじめ、最も大きなキャパシティで様々なバックグラウンドの方に広く興味を持っていただけるセッション


【User’s Cafe】
さまざまサイトでの運用例やノンプログラマーのセットアップ体験談など”使う”ことにフォーカスをあてたセッション


【Designer’s Cafe】
テーマのカスタマイズ、効率的なCSSの適用、デザイニングにかかわるWordpressのセッション


【Developer’s Cafe】
機能のカスタマイズ、プラグインの開発などWordpressの深部への冒険を体験できるセッション


【Genius Cafe】
ビギナーの質問コーナーから、ギークの情報交換まで、Genius cafeは”聞くWordcamp”ではなく”参加するWordcamp”


と、楽しそうなセッションがいっぱいですね。

特に、Developer’s Cafeの
「堀家隆宏さん(信頼出来るプラグインを作成運用するコツ)」
「増永玲さん(これからの PHP の話をしよう)」
Designer’s Cafeの
「瀬口理恵さん(WordPressで作るスマートフォンサイト)」
「村岡正和さん(HTML5から考えてみる。未来のCMS)」
が気になります。

さすがに行けそうにはないので、参加した人の記事を楽しみにしております・・・

それにしても「わぷー」のステッカー欲しいな~