プラグインを使わずWordPressに6の機能をつける

  • 2010年02月22日
  • Share

WordPressにはたくさんの便利なプラグインがあり、機能を手軽に追加することができます。しかし、コードが乱れたり、思い通りのデザインにならなかったり。。と四苦八苦することも。ここではプラグインを使わなくても追加できる機能を紹介します。

1. 人気の記事を表示する

コメントの数が多い記事が人気の記事となります。このサイトではトップ5が表示されています。

<ul>
    <?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 3");
    foreach ($result as $post) {
        setup_postdata($post);
        $postid = $post->ID;
        $title = $post->post_title;
        $commentcount = $post->comment_count;
        if ($commentcount != 0) { ?> 

        <li>
            <h4>
                <a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
                    <?php echo $title ?>
                </a>
           </h4> 
           <p><?php echo get_post_meta($post->ID,'short_desc',true); ?></p>
        </li>
    <?php } } ?>
</ul>

2. 関連する記事を表示する

同じタグのものを関連する記事として表示します。showposts の値で表示させる記事の数を設定します。このサイトでは4つの関連する記事を表示しています。

<ul>
    <?php $tags = wp_get_post_tags($post->ID);
        if ($tags) { $first_tag = $tags[0]->term_id;
        $args=array( 'tag__in' => array($first_tag), 'post__not_in' => array($post->ID), 'showposts'=>2, 'caller_get_posts'=>1 );
        $my_query = new WP_Query($args);

        if( $my_query->have_posts() ) {
            while ($my_query->have_posts()) : $my_query->the_post(); ?>

        <li>
            <h4>
            <a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
            </h4>
            <p><?php echo get_post_meta($post->ID,'short_desc',true); ?></p>
        </li>

        <?php endwhile; wp_reset_query(); ?>
        <?php } else { ?>
            <p>関連する記事は見当たりません…</p>
        <?php } } ?>
</ul>

3. 記事をランダムに表示する

今まで書いた記事をランダムに表示させます。過去の記事をユーザーに見てもらえるので名記事を眠らせずにすみます。showpostsの値で表示させる数、カテゴリーを指定する場合はcat=1など、カテゴリーIDを指定します。

<?php if (have_posts()) : query_posts('showposts=5&orderby=rand'); ?>
    <ul>
        <?php while (have_posts()) : the_post(); ?>
        <li>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </li>
    <?php endwhile; endif; ?>
</ul>

4. 最新のTwitter記事を表示する

いろんな方法がありますが、このサイトではJavaScriptを使ってTwitterの記事を表示させています。下記コードのwebcreatorboxのところを自分のTwitterIDに、count=5のところを表示させたい数に変えます。

<ul id="twitter_update_list"></ul><!-- ここにTwitterの記事が入ります -->

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/webcreatorbox.json?callback=twitterCallback2&amp;count=5"></script>

5. タグクラウドを表示する

タグを使った回数によって文字サイズを変更します。このサイトでは一番小さいサイズを120%、大きいサイズを170%、全てのタグを表示するよう設定しています。

<?php wp_tag_cloud('smallest=120&largest=170&unit=%&number=0'); ?>

その他並び替えや除外するタグの設定など、詳しくはこちらを参照してみてください。

6. ソーシャルブックマークアイコンを表示する

ソーシャルブックマークのアイコンを表示してユーザーにブックマークしてもらいやすくしましょう。

Twitter

RT @webcreatorbox の部分を自分のTwitterIDに変更します。

<a href="http://twitter.com/home?status=RT @webcreatorbox <?php the_title(); ?> <?php the_permalink(); ?>">Twitter</a>

はてなブックマーク

はてなブックマークへブックマークするアイコン

<a href="http://b.hatena.ne.jp/append?<?php the_permalink(); ?>" title="このエントリーを含むはてなブックマーク" target="_blank">はてなブックマーク</a>

はてなブックマークにブックマークしてくれたユーザーの数を表示

<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>

Delicious

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

Digg

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

StumbleUpon

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

FaceBook

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


お役にたてれば幸いです！




記事のトップへ。

関連する記事

コメント

コメントする

  1. Twitter記事意外と簡単に出せるんですね♪

    ちょっと取り入れてみようかな☆

  2. ぜひ試してみてください！

  3. ども。
    簡単に設置できるのですね～
    ぜひ活用させていただきます。

    また、楽しい記事楽しみにしてます！

  4. とってもためになりました！
    ありがとう

  5. 参考になりました。
    ありがとうございます。
    wordpressでプラグインに頼ってばかりでしたので勉強になりました。
    これからもサイトに訪問させていただきます。

  6. とても役に立つ記事をありがとうございます。
    関連記事の表示を使わせて頂きました。

    それでよろしければなのですが、
    2. 関連する記事を表示する
    を使った時に関連記事がない場合に
    関連記事はありません
    のような表示をさせる方法を教えて頂けないでしょうか？

    の部分をイロイロといじってはいるのですが
    どうもうまくいきません。

    教えて頂けると嬉しいです。
    よろしくお願いします！

  7. @seita さん
    上記記事に追加したので参考にしてください。変更箇所は</li>の下に

        < ?php endwhile; wp_reset_query(); ?>
    < ?php } else { ?>
        <p>関連する記事は見当たりません…</p>
    < ?php } } ?>

    を加えました。

  8. To Webクリエイターボックス さん

    ありがとうございます。
    望み通りの動きになりました！
    endwhileとwp_reset_queryの間をいじってました。
    その後ろなんですね。
    勉強になりました。

トラックバック

トラックバックする

  1. [...] プラグインを使わずWordPressに6の機能をつける | Webクリエイターボックス [...]

  2. [...] プラグインを使わずWordPressに6の機能をつける | Webクリエイターボックス [...]

  3. プラグインを使わずWordPressに6の機能をつける…

    プラグインを使わずに、WordPressに機能を追加する方法を伝授いただきました。どれを追加しようか、楽しくて迷ってしまいます。 　１．人気の記事を表示 　２．関連記事を表示 　３．記事をランダムに表示 　４．最新のTwitter記事を表示 　５．タグクラウドを表示 　６．ソーシャルブックマークアイコン表示 以下のサイトで詳しく書かれていますので、どうぞご参考ください。 komogomoも暇を見て、１つずつ試してみようと思っています。 ブログのデザインも変えたいと思っているし、そんな心もちです。 W…

  4. [...] プラグインを使わずWordPressに6の機能をつける | Webクリエイターボックス. by admin bookmark コメント (0) [...]

  5. [...] プラグインを使わずWordPressに6の機能をつける | Webクリエイターボックス (tags: wordpress tips) [...]

  6. [...] プラグインを使わずWordPressに6の機能をつける | Webクリエイターボックス [...]

  7. [...] プラグインを使わずWordPressに6の機能をつける | Webクリエイターボックス [...]

  8. [...] 関連記事やソーシャルブックマークへのリンクに付いてはWebクリエイターボックス様を参考にしました。 プラグインを使わずWordPressに6つの機能をつける [...]

  9. [...] ・プラグインを使わずWordPressに6の機能をつける | Webクリエイターボックス [...]

  10. [...] プラグインを使わずWordPressに6の機能をつけるコーディングテクニックをソース入りで紹介。Twitterをjavascriptで表示するなどの内容が紹介されています。 [...]

  11. [...] プラグインを使わずWordPressに6の機能をつけるコーディングテクニックをソース入りで紹介。Twitterをjavascriptで表示するなどの内容が紹介されています。 [...]

  12. [...] プラグインを使わずWordPressに6の機能をつける [...]

  13. [...] あと、Webクリエイターボックスさんの記事も良かったら。→プラグインを使わずWordPressに6の機能をつける [...]

  14. [...] プラグインを使わずWordPressに6の機能をつける [...]

  15. [...] Webクリエイターボックス プラグインを使わずWordPressに6の機能をつける 次に目を付けたのがこのサイト。 Creazy! 第５回：twitter の JavaScript Badge [...]

  16. [...] 記事の最後に関連記事を表示してあげるとユーザーフレンドリーですね。 関連記事ということで同じタグを付けてある記事タイトルを表示させます。 WebクリエイターボックスのManaさんのコードがキレイなので参照させてもらいました。 [...]

  17. [...] もっと詳しいコードは過去記事「プラグインを使わずWordPressに6の機能をつける」の「2. 関連する記事を表示する」が参考になります。 [...]

コメントする

Eメールアドレスは公開されません。





トラックバックURL

記事のトップへ。

サブカテゴリー

CSS JavaScript jQuery Webサイト制作 Webデザイン Web関連記事 Wordpress お知らせ インスピレーション フリーランス マーケティング ユーザビリティ 便利ツール

人気の記事

    アンケート

    無料配布されているもので、あったら嬉しいものは？(3つまで)

    結果を見る

    Loading ... Loading ...