WordPressのプラグイン、ウィジットなしで追加できる機能いろいろ:ソーシャルボタン多め

Posted under - WordPress

16

WordPress には便利なプラグインがたくさんあるので、わざわざテーマをカスタマイズすることに疑問を持つ人もいるかもしれませんねー。プラグインは便利な半面、いろんなファイルを読み込んだり、PHPのプログラムがサーバ内で仕事をしています。当然その分ページの表示速度が遅くなったりもします。その予防策として、プラグインなしでも付けれる機能はカスタマイズしてしまおう!という記事です。

WordPress Customize
WordPress には本当にたくさんのプラグインが用意されていて、それらを使えば簡単にいろんな機能を付けることができますよね!でも、プラグインをたくさんインストールすると毎回ページが表示される度にプラグインが動作(プラグインもプログラムですもんね!)し、サイトの表示自体が遅くなってしまったります。

なので私は、できるだけプラグインを使わずに済むならその方がいいと思っています。そこでプラグインやウィジットと使わずに WordPressに、いろいろな機能をつけてみます。ソーシャルボタンなどは、プラグインを使わなくっても簡単に設置できますしね!このブログに設置してあるいくつかの機能もプラグイン、ウィジットを使わずに実装しています。

1. サイドバーなどにタグクラウドを表示する

WordPress のウィジットにもタグクラウドはありますが、テンプレートタグを使ってタグクラウドを表示させることもできます。sidebar.php など、タグクラウドを表示させたい部分に以下のコードを追加するだけです。

sidebar.php

<?php wp_tag_cloud('smallest=8&largest=22&number=30&orderby=count'); ?>

上記の例は、いちばん小さい文字を 8pt、いちばん大きい文字を 22pt、最大で 30個、使用数の多い順で並べています。

出力される HTMLは以下のようになります。tagcloud というクラスのついた <p>タグ内に <a>タグが並ぶだけです。<li>ではありません。

HTML

<p class="tagcloud">
    <a href="example.com?tag=CSS" class='tag-link-4' title='5件のトピック' style='font-size: 18px;'>CSS</a>
    <a href="example.com?tag=design" class='tag-link-5' title='4件のトピック' style='font-size: 16px;'>design</a>
    <a href="example.com?tag=PHP" class='tag-link-6' title='3件のトピック' style='font-size: 13px;'>PHP</a>
    <a href="example.com?tag=WordPress" class='tag-link-3' title='1件のトピック' style='font-size: 10px;'>WordPress</a>
</p>

2. サイドバーなどに最近の記事を表示する

サイドバーなどで最近の記事を表示するコードです。以下のコードでは最新の記事 5件を表示します。件数を変更する場合は、3行目の 'posts_per_page'=>5 を、好きな件数に変更してくさい。

sidebar.php

<ul class="recent-post">
<?php
$args=array( 'posts_per_page'=>5 );
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
  while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <li>
    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent link to'); ?> <?php the_title(); ?>"><?php the_title(); ?></a><br />
    <span class="date"><?php the_time("j M,Y") ?></span>
    <span class="comments_number"><?php comments_number('0', '1', '%' ); ?></span>
  </li>
<?php endwhile; wp_reset_postdata(); ?>
<?php } ?>
</ul>

3. サイドバーなどに最近のコメントを表示する

最近のコメントを表示するテンプレートタグはないので、テンプレートファイルを用意します。最近のコメントを表示するテンプレートファイル、simple_recent_comments.php は、G-Loaded Journal からダウンロードできるので利用させてもらいましょう。

ページの真ん中辺りにダウンロードリンクがありますが、分かりにくければ コチラ からダウンロードできます。

ダウンロードした simple_recent_comments.phpplugins ディレクトリではなく、テーマの中(テンプレートディレクトリ)に置きます。そしたらサイドバーなどの最近のコメントを表示したい部分に以下を追加します。

sidebar.php

<div class="recent-comments">
	<?php include (TEMPLATEPATH . '/simple_recent_comments.php'); /* recent comments plugin by: www.g-loaded.eu */?>
	<?php if (function_exists('src_simple_recent_comments')) { src_simple_recent_comments(5, 60, '<h3>Recent Comments</h3>', ''); } ?>
</div>

上記は最新のコメント5件、半角60文字まで表示する例です。見出しは<h3>タグでマークアップしています。

3. 記事の下などに関連記事を表示する

single.php でブログ記事を表示して、その記事の下に関連する記事を表示します。関連記事ということで、同じタグを付けてある記事(複数ある場合は最初のタグ)タイトルを表示させます。

single.php

<?php
//for use in the loop, list 5 post titles related to first tag on current post
$tags = wp_get_post_tags($post->ID);
if ($tags) {
    echo 'Related Posts';
    $first_tag = $tags[0]->term_id;
    $args=array(
    'tag__in' => array($first_tag),
    'post__not_in' => array($post->ID),
    'showposts'=>5,
    'caller_get_posts'=>1
);
$my_query = new WP_Query($args);
	if( $my_query->have_posts() ) {
		while ($my_query->have_posts()) : $my_query->the_post(); ?>
			<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<?php endwhile;} wp_reset_postdata();} ?>

5. Twitter関連

Twitter

私も大好きなツイッター。ここでは自分の最新ツイートを表示したり、みんなにツイートしてもらえるように、ツイートボタンを設置してみましょう。

まずは Twitter API を利用して、最新のツイートを表示してみます。

5.1. 自分の最新ツイートを表示する

このブログでも、フッターでこの機能を使っています。設置はとっても簡単です。ツイッターが公開している blogger.js を読み込んだ上で、json で最新ツイートを取得します。表示したい部分に、以下を追加します。

HTML
<!-- ulタグ間にツイートが表示されます -->
<ul id="twitter_update_list">
<li>Loading ...</li>
</ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/webdesignrecipe.json?callback=twitterCallback2&amp;count=3"></script>

webdesignrecipe のところはあなたのTwitterアカウントに変更してくださいね!また、上記のコード内に count=3 とありますが、これは表示するツイート数です。お好きな数に変更してください。

5.2. 公式のツイートボタンを設置する

公式のツイートボタンを設置してみます。とはいっても、公式ボタンの場合は公式ページでコードを作成してくれるサービスがあるので、それを利用してコピペするだけですね!下記リンク先では、ツイートボタンの他、フォローボタンなどいろいろなボタンを作成できます。

5.3. オリジナルデザインのツイートボタンを設置する

さっきは公式のツイートボタンを設置してみましたけど、ツイッターのツイートボタンはオリジナルなデザインにすることもできます。というのも、下記の様にリンクとして記述するだけで、ツイッターにツイートすることができるんです!

  • 1. <a href="https://twitter.com/share?text=(ここにツイート)" target="_blank">tweet</a>

これに WordPress のテンプレートタグを加えて行くと、以下のようになります!single.php など、ツイートボタンを設置したい部分にコピペしてください。

single.php
<a href="https://twitter.com/share?text=<?php the_title(); ?>&nbsp;via @WebDesignRecipe" target="_blank">tweet</a>

上記のツイートの中には、ツイートするページの URL を含んでいませんが、2012年 3月現在のツイッターの仕様では、自動的に URL を取得してくれます。その上短縮までしてくれるので、らくちんですね!

5.3. ちょっと寄り道 – jQueryを使ってツイートボタンを設置してみる

上記では WordPress のテンプレートタグを使って、記事のタイトルや URL を取得していました。ここでは WordPress じゃないサイトのとき用に、jQuery を使ったツイートボタンを設置してみます。

HTML
  • 1. <p id="tweet-button"></p>

まず、ツイッターボタンを設置したい場所に上記を記述します。次に jQuery のコードです。

jQuery
var title = encodeURIComponent($("title").text());

$("#tweet-button").html('<a href="https://twitter.com/share?text='+title+'&nbsp;via @アカウント名" target="_blank">tweet</a>');

1行目でページタイトルを取得し、パラメータとして渡す為にエンコードしています。あとは 2行目で a要素を作り、#tweet-button の中に書き出すだけです!

ツイッターの仕様上、URLを自分でツイートに含めなくても、ページ上で上記のようなリンクをクリックすると、自動的に URL をツイートに含めるようです。なので、上記のコードにはツイートするページの URL は含めていませんが、下記のコードでエンコードしたURLを取得できます。

  • 1. var encURL = encodeURIComponent(document.URL);

6. 短縮 URL サービス bitly を利用してみる

WordPress には、いつの頃からか短縮 URL 機能が備わったし、ツイッターも長い URL は自動で短縮してくれるようになりました。なので今更あんまり需要はないような気もしますが、bitly の URL 短縮サービスを使った、WordPress での短縮 URL の作り方をメモしておきます。

  • 利用するサービス

    bitly

まずは bitly にサインインしてアカウントを取得しますが、最近では ツイッターアカウントや Facebookアカウントでもサインインできるようになってるみたいですね。必要なのは bitly の APIキーなので、サインインしたらページ上部のアカウントのメニューの中から、Setting を表示します。

bitly アカウント - Setting

すると APIキーが表示されると思います。この APIキーをコピーしておいてください。

次に functions.php に以下を書き加えます。

functions.php

function this_page_short_url() {
  $long_url = get_permalink();
  $req = "http://api.bit.ly/shorten?login=/*Account*/&apiKey=/*ApiKey*/&version=2.0.1&longUrl=".$long_url;
    $contents = file_get_contents($req);
    if(isset($contents)) {
      $url = json_decode($contents, true);
    }
  echo $url['results'][$long_url]['shortUrl'];
}

これで準備ができました。あとは短縮 URL を表示したいところで、this_page_short_url() と記述すれば OKです。

7. Facebook 関連

Facebook にもいいね!ボタンや投稿ボタンがあるので、これを設置することも多いです。でも Facebook は仕様変更が激しいので、コードをメモしておいてもちょこちょこ変わる …。なのでまず、公式サイトを参照します。

2012年 3月現在、XHTML用、iframe、HTML5用の3種類のコードが取得できますが、コードの中身もちょこちょこ変わっています。ここではメモ書き程度に、このブログで使っているコードを貼っておきます。

いいね!ボタン – HTML5

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=258199824193650&amp;xfbml=1"></script><fb:like href="<?php the_permalink(); ?>" send="false" layout="box_count" width="50" show_faces="false" font=""></fb:like>

最近では、いいね!ボタンを押すと、そこからコメントを投稿できる用になってるみたいですねー。今度はもうひとつ、Facebookへの投稿ボタンを付けてみます。

6.1. オリジナルデザインのFacebook投稿ボタン

Facebookへの投稿ボタンも、ツイッターのときのようにリンクを貼るだけで OKなので、リンクを CSS で装飾すれば、オリジナルデザインの Facebook ボタンを作ることができますねー。下記コードは、WordPress のテンプレートタグを書き加えてあるので、コピペで使えます。

single.php など
  • 1. <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" target="_blank">facebook</a>

でもこれではただのリンクで、クリックすると別ウインドウ(タブ)が開きます。なのでちょっと Javascript を使って、小さなウインドウで開くようにカスタマイズしてみます。URL も そのまま Javascript で取得しています。ページタイトルは含めていませんが、Facebook の仕様では自動で取得してくれるみたいですねー。

single.php など
<a href="javascript:void window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(location.href),'_blank', 'width=550, height=360, left=100, top=50, scrollbars=1, resizable=1', 0);">facebook</a>

これで小さなウインドウが開くようになります。

8. AddThisボタンを付ける

AddThis

200以上のソーシャルサイトへのブックマークができる AddThis ボタン。AddThis ボタンを WordPress に設置しようとすると、公式プラグインのインストールを勧めてきますが、プラグインをインストールしなくても以下のコードで設置できます。あ、AddThis もアカウントの取得が必要ですが、最近ではツイッターや Facebookアカウントでサインインできます。

single.phpなど

<!-- ADDTHIS BUTTON BEGIN -->
<script type="text/javascript">
var addthis_config = {
     username: "webdesignrecipe"
}
</script>
<a href="http://www.addthis.com/bookmark.php"
      class="addthis_button"
      addthis:url="<?php the_permalink(); ?>"
      addthis:title="<?php the_title(); ?>">
        <img src="http://s7.addthis.com/static/btn/sm-plus.gif"
    width="16" height="16" border="0" alt="Share" /> Share</a>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- ADDTHIS BUTTON END -->

username の webdesignrecipe の部分はあなたの AddThis アカウントに変更してください。ボタン画像は自分で用意したものでもOKなので、好きにカスタマイズできますね!

また、公式のボタン画像は 公式サイトで配布されています …。Facebook とかツイッターのアイコンも配布されてますね …。

また、AddThis ボタンはいろいろカスタマイズすることもできます。詳しくはかちびと.netさんに掲載されています。

9. ソーシャルブックマークボタンを付ける

ここから一気にソーシャルブックマーク系のボタンのコードを並べていきます。WordPress用です。

9.1. Delicious

<a href="http://delicious.com/post?url=<?php the_permalink();?>&title=<?php the_title();?>" target="_blank">Delicious</a>

9.2. Digg

<a href="http://www.digg.com/submit?phase=2&url=<?php the_permalink();?>" target="_blank">Digg</a>

9.3. StumbleUpon

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">StumbleUpon</a>

9.4. MySpace

<a href="http://www.myspace.com/Modules/PostTo/Pages/?u=<?php the_permalink(); ?>" target="_blank">
MySpace</a>

9.5. reddit

<a href="http://reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>">reddit</a>

9.6. Google ブックマーク

<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank"><img alt="" src="http://www.google.co.jp/favicon.ico" border="0" width="16" height="16" />このページを Google Bookmarks に追加
</a>

9.7. はてなブックマーク

<a href="http://b.hatena.ne.jp/append?<?php the_permalink(); ?>" title="はてなブックマーク" target="_blank">はてなブックマーク</a>

はてなブックマークには、公式ボタンもあります。

9.8. はてなブックマークしてくれた人数を表示

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>">
    <img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>" alt="<?php the_title();?>" title="<?php the_title();?>" /></a>

9.9. ライブドアクリップ

<a href="http://clip.livedoor.com/redirect?link=<?php the_permalink(); ?>&amp;title=<?php the_permalink(); ?>" target="_blank">
<img src="livedoor-clip.gif" alt="ライブドアClipにクリップ" />
ライブドア Clip
</a>

WordPress のカスタマイズには、プラグインを使わなくてもできることがたくさんあります。ここで紹介したのはほんのひと握りですし、ソーシャルブックマーク系が多かったですね w 次に書く機会があったら、もっと実用的なのにしたいと思います X(

Comments

Thank you for the comment.