entry

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

date: 2009/06/21 19:38 | modified: 2009/07/14 14:15

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>

参考

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

関連記事

59 responses

reply

#3142: うみがめ

date: 2012/03/13 19:58:32

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

助かりました!!!
この方法はWeb上にほとんど落ちていなかったので、本当に助かりました!!!!!!!

#1007: Yuichiro Morimoto

date: 2009/06/23 05:33:37

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

#1006: yoshinon

date: 2009/07/01 00:58:19

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

#1005: snize

date: 2009/07/07 12:18:29

あとでRSSに登録するかもhttp://is.gd/1pT57

#1004: zach west

date: 2009/08/31 12:51:09

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

#1003: Arata Fujimura

date: 2009/08/31 13:20:06

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

#1002: Taniguchi Makoto

date: 2009/08/31 13:57:31

こりゃすげー http://gerenuk.crazyphoto.org/2009/06/21/801/

#1001: 佐藤豊

date: 2009/10/14 02:05:34

RT @gerenukrumoi やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 http://bit.ly/YKD6N

#1000: WordPressPlus

date: 2009/10/22 13:55:03

これは便利。やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 http://gerenuk.crazyphoto.org/2009/06/21/801/

#999: Delicious Over 50

date: 2009/12/30 16:00:42

やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 :: gerenuk.crazyphoto. http://bit.ly/IcLFx

#998: webdesignStatio.

date: 2010/05/03 16:20:18

やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 :: gerenuk.crazyphoto.org/ http://bit.ly/9T3gXd

#1218: ひばりヶ丘ホームページ制作Ca-stye

date: 2010/10/14 13:03:21

RT @gerenukrumoi: やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 http://bit.ly/dqPK3Z

#1708: 匿名

date: 2010/10/14 13:03:21

#1217: カズちゃん

date: 2010/10/14 13:04:31

RT @Castyle_tweet: RT @gerenukrumoi: やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 http://bit.ly/dqPK3Z

#1381: D2U

date: 2011/04/07 01:26:11

[D2U] やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 | gerenuk.crazyphoto.org/: #wp #WordPresscomments http://bit.ly/ejzlTd #d2u

#1411: なつき

date: 2011/07/05 14:01:47

記事中の最初の画像を取得する関数など。facebook OGPなどで使えそう。 / やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 :: gerenuk.crazyphoto.org/ http://htn.to/AvAVU2

#1414: ふくち

date: 2011/07/08 11:51:33

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

#1413: Akinaga

date: 2011/07/08 11:53:38

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

#1428: あんり

date: 2011/08/17 07:38:18

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

#1434: 北角裕巳 NPO WEB担当

date: 2011/09/03 10:01:50

RT @gerenukrumoi: やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 http://t.co/1lQHn2H

#1546: アリスとテレス

date: 2011/10/14 06:09:36

RT @gerenukrumoi: やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 http://t.co/hbnd9W1k

#1781: daigo

date: 2011/11/28 05:01:15

http://t.co/EzlNJcUp
これは役に立ちそう

#1854: michieru

date: 2011/12/21 01:13:17

アレを実現するにはコレっていう、ありがたい話。 / “ やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 :: http://t.co/ptPauljt” http://t.co/FFWiQZgS

#2261: hirocoji

date: 2012/01/24 00:35:45

wordpressの必見カスタマイズ / “ やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 :: http://t.co/FiPaT1gM” http://t.co/2EqtUauN

#2549: リズムファクトリー

date: 2012/02/02 05:53:44

: ) 丁度やりたかったカスタマイズがいくつかありました。
WordPress 中級者必見のカスタマイズ6個
http://t.co/73WYZExn # wirdoress

#3328: Unkler

date: 2012/05/14 15:01:34

RT @gerenukrumoi: やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 http://t.co/jqfYEpTB

#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個 [...]

#978: WPやりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 | 備忘録

date: 2010/04/12 12:00:51

[...] いため、「このサイトのこの機能ってどうやっているんだろう?」と思うことも・・・続きを読む→ « WP Kechol Coreserverユーザの僕がWordPressで自分のブログを立ち上げるためにした [...]

#1315: WordPressをカスタマイズしたいと思ってる人のための厳選記事6 | WordPress【ワードプレス】初心者の部屋~使い方知っとこ?

date: 2011/01/04 14:44:09

[...] CSSの知識がない方が読むと、ちょっときついかも。 やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 |… [...]

#1399: pc.casey.jp » [WordPress] 記事内の最初の画像を表示する

date: 2011/05/20 00:04:48

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

#1415: 記事中の最初の画像を自動検出して、表示する方法 « メモとか

date: 2011/07/13 18:58:36

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

#1416: 記事中の最初の画像を自動検出して、表示する方法 | メモとか

date: 2011/07/13 19:01:21

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

#1417: 記事中の最初の画像を自動検出して表示 | メモとか

date: 2011/07/13 19:38:05

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

#1430: 【 WordPressのプラグイン 】トップページにアイキャッチ画像(サムネイル)を自動的に表示させる方法 – サムリのブログ

date: 2011/08/29 17:26:25

[...] やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 | gerenuk.crazyphoto.org/ 記事中の最初の画像を自動検出して、表示する方法 [...]

#1453: アイキャッチ画像を使わずにフォトログ - 私のあしあと。

date: 2011/09/15 21:12:31

[...] メンドクサイよね。アイキャッチ画像の設定。 そんな時はこちら↓ http://gerenuk.crazyphoto.org/……06/21/801/ まずは functions.php で以下の関数を定義し、 function catch_that_image() { global $post, $ [...]

#1454: アイキャッチ画像を使わずにフォトログ - 私のあしあと。

date: 2011/09/15 21:14:13

[...] メンドクサイよね。アイキャッチ画像の設定。 そんな時はこちら↓ http://gerenuk.crazyphoto.org/……06/21/801/ [...]

#1509: WordPressをカスタマイズしたいと思ってる人のための厳選記事6 « leocao

date: 2011/10/05 09:14:53

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

#1722: Wordpress カスタマイズ色々まとめ | makoto-tanaka.com

date: 2011/11/12 14:30:51

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

#2698: ゐるゑ らくがき星系 » 箱ドット アニメGIFでまわるダパンダ

date: 2012/02/11 02:38:20

[...] (やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個) ▲コメントを開く (0) ▼コメントを閉じる [...]

#3075: 【続・仕様変更】WordPressが吐き出すRSSフィードにサムネイルを挿入し別WordPressサイトで表示させる【画像自動取得】 | UNDAKOVR Blog

date: 2012/03/03 23:09:05

[...] す。 これである程度は自動化出来たはずです。ちなみに「やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個」辺りを参考にさせて頂きました。 _ga.trackFacebook(); [...]

#3224: WordPress:記事中の一番最初の画像を自動的に拾ってindexループの中で表示する方法(改) | ログメモチップス

date: 2012/03/27 01:22:26

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

#3361: WordPressテンプレートカスタマイズの最強解説サイト

date: 2013/04/02 14:44:24

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

#3363: WordPressカスタマイズ - 究極データベース

date: 2013/04/07 09:04:46

[...] アイコンを添えたオシャレなフォームを実装するチュートリアルWordPressのカスタム投稿(ポスト)タイプを作成するまでの手順リストWordPressの検索機能をもっと使いやすくする管理画面で追加できるウィジェットで不要のコンテンツを削除するプラグインは使わない!WordPress カスタマイズまとめ40やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個プラグインを使わずWordPressに9の機能をつける [...]

#3369: 初心者でも簡単!WordPressテンプレートやテーマ作成に必須な29 | コムテブログ

date: 2013/07/08 08:37:33

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

#3435: メモしておきたい!サイト制作時に知っておくと「意外」と役に立つこと | コムテブログ

date: 2014/08/04 08:31:05

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

#3671: 【続・仕様変更】WordPressが吐き出すRSSフィードにサムネイルを挿入し別WordPressサイトで表示させる【画像自動取得】 | Skye

date: 2014/11/20 00:40:25

[...] 。 これである程度は自動化出来たはずです。ちなみに「やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個」辺りを参考にさせて頂きました。 この記事を書いた人 [...]

#3778: WordPressを完全に使いこなすための良エントリーまとめ | いい勉強するWEBサイト

date: 2015/11/03 04:00:58

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

respond