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

機能を拡張するためのプラグインの豊富さやテーマのカスタマイズのしやすさから最近ではブログの代名詞とも言うべき 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>
参考
このエントリーは以下のリンク先の記事を参考・引用して書かれています。
- 22 Mixed Quality WordPress Hacks | Tutorials | instantShift
この記事の初出時にあったコード表示の不具合は改善されたようです。 - 8 Simple WordPress Developers Tips & Tricks To Improve Your Site Significantly | Onextrapixel – Showcasing Web Treats Without Hitch







48 responses
#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
#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/ [...]
#891: Word press Tips » Blog Archive » やりたかったあの機能を実現する、WordPress 中級者必見のテーマカスタマイズ6個
date: 2009/07/01 08:48:07
[...] 公開予定記事の一覧を表示する方法 [...]
#892: Word press Tips » Blog Archive » やりたかったあの機能を実現する、WordPress 中級者必見のテーマカスタマイズ6個
date: 2009/07/01 08:48:28
[...] top公開予定記事の一覧を表示する方法 [...]
#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個 [...]