/ entry

hatena_usersやりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個

date: 2009/06/21 19:38 | modified: 2009/07/14 14:15 | やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個

wordpress-tips

機能を拡張するためのプラグインの豊富さやテーマのカスタマイズのしやすさから最近ではブログの代名詞とも言うべき WordPress ですが、なかなか他のユーザーのコードを見る機会が少ないため、「このサイトのこの機能ってどうやっているんだろう?」と思うことも多いのではないでしょうか?
instantShift では、そんなちょっとしたカスタマイズが22個紹介されています。

ただしここで紹介されているものはプラグインではありません。
WordPress を使う上でプラグインは確かに便利ですが、結局のところプラグイン同士のバッティングを防ぐためにコードを読み返したり、自分のサイトにはいらない機能が多かったりして、テーマにコードを直書きしたい場面も多いはずです。
PHP の知識はある程度必要ですが、是非参考にしてみてください。

なお、理解しやすいように、元の記事から引用したコードを少し簡略化してある部分があります。
また、自分が独自にカスタマイズしている部分もついでにご紹介します。

公開予定記事の一覧を表示する方法

公開時間を未来に指定することで、記事の自動投稿をさせる機能はご存知でしょうか?
定時にブログを更新したい場合などに便利なこの機能ですが、公開予定の記事一覧を表示することで訪問者に対してアピールすることが出来ます。

設置例: サイドバー(sidebar.php)

<h2>公開予定記事</h2>
<ul>
<?php query_posts('showposts=10&post_status=future'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <li><?php the_time('Y/m/d'); ?>: <?php the_title(); ?></li>
<?php endwhile; else: ?>
    <li>現在公開予定の記事はありません。</li>
<?php endif; ?>
</ul>

人気記事の一覧を表示する方法

一口に「人気」と言っても様々な測定方法があります。
ここではごく単純に「人気がある=よくコメントされる」という解釈で、コメントが多い記事を表示してみましょう。

設置例: サイドバー(sidebar.php)

<h2>人気記事</h2>
<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
    foreach ($result as $post) {
        setup_postdata($post);
        $postid = $post->ID;
        $title = $post->post_title;
        $commentcount = $post->comment_count;
        if ($commentcount != 0) { ?>
            <li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
        <?php echo $title ?></a> (<?php echo $commentcount ?>)</li>
    <?php } } ?>
</ul>

記事中の最初の画像を自動検出して、表示する方法

例えばトップページなどで、サムネイル画像から個別記事にリンクしているギャラリーサイトがありますが、これらのサイトのほとんどは各記事のカスタムフィールドにサムネイル画像の URL を登録しておいて、get_post_meta を使ってテーマで呼び出しています。
しかし以下のコードを使えばその手間を省いて、記事中で使われている最初の画像を自動検出し、表示させることが出来ます。
ただし、記事中に画像がない場合に備えて、デフォルトで表示する画像を用意しておいてください。

設置例: ファンクション(functions.php)
まずは functions.php で以下の関数を定義し、

function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];

    if(empty($first_img)){ //Defines a default image
        $first_img = "/images/default.jpg";
    }
    return $first_img;
}

設置例: トップページのループ内(index.php)
画像を表示したい位置に以下のコードを挿入します。

<img src="<?php echo catch_that_image(); ?>" />

ただしこのままだと画像のサイズはまちまちになる可能性があるので、更に CSS 等でデザインを整えてやればなお良いと思います。

著者のコメントを目立たせる方法

コメント欄で著者(つまり自分)のコメントを目立たせることが出来ます。
ただし2.7から登場した wp_list_comments を使っている場合はコールバック関数を使ってやらないと無理だと思います(現状、wp_list_comments の実装例が少なく、そのうち gerenuk でもフォローできればと考えています)

設置例: コメント部分(comments.php)

<?php echo $oddcomment; ?>

となっている部分を、

<?php if ($comment->user_id == 1) $oddcomment = "authorstyle"; echo $oddcomment; ?>

に変更する。
ただし、CSS で authorstyle というクラスを作ってやることをお忘れなく。

特定のカテゴリーのアーカイブページデザインを変える方法

他のカテゴリーとはデザインを別にしたい場合はこのコードが有効です。
下の例では、カテゴリー ID が1番のものには post1category.php のテンプレートを、それ以外のカテゴリーでは post2category.php が適用されます。
また、is_category 内の数字はカテゴリー ID ですので、適宜変更してください。

設置例: カテゴリーページ(category.php)

<?php if (is_category('1')) {
    include(TEMPLATEPATH . '/post1category.php');
}  else {
    include(TEMPLATEPATH . '/post2category.php');
} ?>

「はてなブックマークに追加」ボタンを作る方法

設置例: 個別記事ページのループ内(single.php)

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

参考

このエントリーは以下のリンク先の記事を参考・引用して書かれています。

関連記事

13 responses

#862: links for 2009-06-21 « 個人的な雑記

date: 2009/06/22 07:01:23

[...] やりたかったあの機能を実現する、WordPress 中級者必見のテーマカスタマイズ6個 :: gerenuk.crazyphoto.org/ (tags: wordpress) [...]

#863: links for 2009-06-21

date: 2009/06/22 14:03:15

[...] やりたかったあの機能を実現する、WordPress 中級者必見のテーマカスタマイズ6個 :: gerenuk.crazyphoto.org/ (tags: あとで読む wordpress) [...]

#864: Taraco-sell’s 2DIE | Like a Merlion

date: 2009/06/22 23:50:42

[...] 見のテーマカスタマイズ6個 :: gerenuk.crazyphoto.org/ gerenuk.crazyphoto.org/2009/06/21/801/ [...]

#865: 2009/06/22に気になったこと | debeso

date: 2009/06/22 23:55:14

[...] やりたかったあの機能を実現する、WordPress 中級者必見のテーマカスタマイズ6個 :: gerenuk.crazyphoto.org/ WPのtips [...]

#867: blog.dix-sept.org » links for 2009-06-22

date: 2009/06/23 09:13:18

[...] やりたかったあの機能を実現する、WordPress 中級者必見のテーマカスタマイズ6個 :: gerenuk.crazyphoto.org/ (tags: wordpress) コメント (0) [...]

#869: orioa » links for 2009-06-22

date: 2009/06/23 12:00:59

[...] やりたかったあの機能を実現する、WordPress 中級者必見のテーマカスタマイズ6個 :: gerenuk.crazyphoto.org/ (tags: tips wordpress web cms themes blog web制作 customize カスタマイズ) [...]

#870: 6月23日 今日のTop「ダークサイド・オブ・クラウド -クラウドの暗部- その難関に立ち向かう米国IT業界」 | P2P today ダブルスラッシュ

date: 2009/06/23 15:08:32

[...] [WP]やりたかったあの機能を実現する、WordPress 中級者必見のテーマカスタマイズ6個 :: gerenuk.crazyphoto.org/ [...]

#884: 今週の管理人Bookmark (6/21-6/28) - ElectronicBrain is eating BreakFast

date: 2009/06/28 23:58:09

[...] やりたかったあの機能を実現する、WordPress 中級者必見のテーマカスタマイズ6個 :: gerenuk.crazyphoto.org/ [...]

#906: links for 2009-07-03 | 雷都散策記

date: 2009/07/03 18:02:26

[...] やりたかったあの機能を実現する、WordPress 中級者必見のテーマカスタマイズ6個 :: gerenuk.crazyphoto.org/ (tags: wordpress tips blog web カスタマイズ cms customize themes web制作) This entry was posted on [...]

#958: Coreserverユーザの僕がWordPressで自分のブログを立ち上げるためにしたことまとめ。 | Kechol

date: 2010/01/08 16:41:09

[...] かもしれません。 やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 [...]

#959: ITキヲスク | 2009年12/27~2010年1/9の週間ブックマーク

date: 2010/01/11 00:37:07

[...] やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 [...]

respond