22のWordPress カスタマイズ ハック
WordPressをカスタマイズする時のハック集です。使用する場面を想定してトップページで使えるハック、サイドバーで使えるハックなど、目次が付いています。WordPressをカスタマイズする時のチートシートとして使ってください。お役にたてればうれしいです！ （続き記事があります：+アルファのWordPress カスタマイズハック）
WordPress はとってもカスタマイズ性が高いブログツール。私も WordPress をカスタマイズするのが大好きです。そんな WordPress をカスタマイズする時に使えるTipsをまとめてみました。
ハックというよりちょっとしたコード集ですが w オリジナルのテーマを作るときにちょっとお役立ちかもしれません。まだまだたくさんあるのでシリーズ記事になりそうな予感。今回は私もよくやる WordPress ハックをご紹介します！
目次
1. 時短ハック
記事を投稿する時に時間を節約できるテクニックをご紹介します！WordPress にはショートコードと呼ばれる便利な機能が備わっています。[xxx]~[/xxx] という風に書くアレです。AddQuicktagプラグインを使った方がいいじゃん！って聞こえてきそうですが、組み合わせて使うとけっこう便利です。よく使うタグや定型文はショートコードに設定しておくと時間の節約になりますね！
1. 1. ショートコードの作り方
ショートコードの設定は、関数ファイル functions.php 内に書き込むことで追加できます。例えば以下はよく使うリンクをショートコードにしてしまう例です。
function follow_me() {
return 'お気軽にフォローしてくださいね！ <a href="http://twitter.com/WebDesignRecipe">@WebDesignRecipe</a>';
}
add_shortcode('follow', 'follow_me');
function のあとの関数名はお好きな名前をどうぞ。関数を定義したあと、add_shortcode() とすればショートコードとして設定されます。上の場合は、follow_me 関数を follow というショートコードにしたっていう意味です。投稿画面で [follow] とすれば、画面には以下のように表示されます。
お気軽にフォローしてくださいね！ @WebDesignRecipe
↑ こんな風にショートコードで設定したものが表示されます。
1. 2. 属性を付けたオリジナルショートコードの作り方
ショートコードに属性を付けたいときがありますよね。例えばリンクに target=”_blank” の属性をつけたいなど。以下は url というリンク先のURLを指定すると同時に、target=”_blank” の属性をつけたショートコードです。
functions.php に以下を書き足します。
function blank_link($atts, $content = null) {
extract(shortcode_atts(array(
"href" => 'http://'
), $atts));
return '<a href="'.$href.'" target="_blank">'.$content.'</a>';
}
add_shortcode("url", "blank_link");
こんな感じです！WordPressの投稿画面のリンクボタンはデフォルトでは target=”_self” なので、_blank属性はショートコードで！なんて使い方もできますね。投稿画面では、[ url href="http://webdesignrecipes.com/"]Webデザインレシピ[/url] とすればOKです（url href 直前の半角スペースは削除してください）。前述した AddQuicktag プラグインと組み合わせればらくちんです。
2. トップページ用のハック
テーマのトップページをカスタマイズするのに使えるTipsを紹介します。トップページやアーカイブページでは記事の全文を表示しないで the_excerpt関数を使ってサマリー表示するデザインがカッコいいですよねー … （ついつい more タグを入れるのを忘れてしまうので w ）。
でも記事の抜粋表示、テキストだけだと見た目がいまいちよくないので、画像も一緒に表示したいところです。いろんな方法があるので、あなたにピッタリの方法を探してみてください！
こんな風に画像と記事の一部と画像を表示したいときに以下のような方法があります。
2. 1. 記事の中の画像を取り出す
ポスト（記事）の中に使われている画像を取り出して表示します。各ポストの全ての画像を取り出していますが、サイズは投稿時のサイズのままです。ギャラリー系サイトには使えるのかな？画像のないポストはそのままスルーしていますので、要カスタマイズですが w
表示したい部分、記事のループの中に以下を追加してください。
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php
/* ここから */
$sz_post_content = $post->post_content;
$sz_search_pattern = '~<img [^\>]*\ />~';
preg_match_all( $sz_search_pattern, $sz_post_content, $a_pics );
$i_number_of_pics = count($a_pics[0]);
if ( $i_number_of_pics > 0 ) {
for ( $i=0; $i < $i_number_of_pics ; $i++ ) {
echo $a_pics[0][$i];
};
};
/* ここまで */
?>
<?php endwhile; endif; ?>
2. 2. 記事の中の画像を1枚表示する
記事の中で使われている画像の一番最初の1枚を取得して表示してみましょう。上と違って関数になってます。まずは 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;
}
記事の中に画像が一枚もない場合は、場合は imagesフォルダ内の default.jpg を表示するようになっているので、そこはあなたの環境に合わせて変更してみてください。テーマ内の表示したい箇所に以下を追加してください。
<?php echo "<img src=".catch_that_image()." alt='' />"; ?>
画像のサイズは投稿した時のサイズそのままなので、毎回違うサイズを上げる人は、別途リサイズするコードが必要です。
2. 3. カスタムフィールドを使ってサムネイルを設定
カスタムフィールドを使って、記事ごとにポストイメージ（イメージ画像）を設定しておけば、記事の中の画像に関係なくイメージ画像を表示できます。カスタムフィールドの名前に、例えば post-image と入力して、値には画像のURLを入力します。
テーマの中で表示する時は、ループの中に以下を追記します。
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php /* ここから */ ?>
<?php $justanimage = get_post_meta($post->ID, 'post-image', true); ?>
<?php if ($justanimage) : ?>
<img src="<?php echo get_post_meta($post->ID, "post-image", true); ?>" alt="<?php the_title(); ?>" />
<?php else: ?>
<img src="<?php bloginfo('template_url'); ?>/images/default.jpg" alt="" /> //画像がない場合の代替え画像
<?php endif; ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php /* ここまで */ ?>
<?php endwhile; endif;?>
カスタムフィールドで設定するポストイメージ画像のサイズは、いつも同じに揃えてアップロードしてください。
2. 4. 追記：アイキャッチ機能を使ってサムネイルを設定
WebクリエイターボックスのManaさんにとってもいい方法を教えてもらいました！カスタムフィールドを使わなくても、WordPress にはアイキャッチ画像という機能が備わっているそうです！使い方はとっても簡単で、functions.php に以下を書き込むだけです。
<?php add_theme_support( 'post-thumbnails' ); ?>
すると投稿画面の右側にアイキャッチ画像という項目が追加されます。
画像をアップロードする時にアイキャッチ画像として使用をクリック。
呼び出すときはたった一行。。。
<?php the_post_thumbnail(); ?>
こんなにあっさりできるなんて・・・。カスタムフィールドを使うより全然楽ちんです！Manaさんありがとうございましたー！カスタムフィールドで実装してしまった人、ごめんなさいっ！
3. 記事ページ（シングルページ）で使えるハック
記事の投稿時に使えるものや、個別記事を表示する single.php の中で使うものをいくつかご紹介します。便利なショートコードや、カスタムフィールドを使ってのカスタマイズは、ひとつひとつの記事ごとに、細かいカスタマイズをする手助けにもなりますねー。記事ごとにスタイルシートを加える方法もご紹介します！
3. 1. Google Adsenseを好きなところに表示
まずは投稿時。ショートコードを使って好きなところへ Google Adsense を表示してみます。準備として、function.php に以下を追加します（ Google Adsense のコードはあなたのコードに書き換えてくださいね！）。
function showads() {
return '<script type="text/javascript"><!--
google_ad_client = "pub-3637220125174754";
google_ad_slot = "4668915978";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
';
}
add_shortcode('adsense', 'showads');
上記で Google Adsense を表示するためのショートコードを設定します。あとは記事の中、好きな所に[adsense]と書けば、そこに Google Adsense が表示されます。
3. 2. 画像の幅を揃えて（リサイズ）して表示する
記事中の画像の横幅のサイズって、できる限り揃えた方が見た目もいいですよね。全部の画像の幅を画像ソフトを使っていちいち揃えるのも面倒だ！っていう人にはお勧めです。TimThunb というサムネイルを生成してくれるプラグインを使って、リサイズしてから画像を表示するようにします。
ダウンロードした timthumb.php を任意のところへアップロードしてください。次に functions.php に以下を追加してショートコードを設定します。
<?php
function imageresizer( $atts, $content = null ) {
return '<img src="/timthumb/timthumb.php?src='.$content.'&w=500" alt="" />';
}
add_shortcode('img', 'imageresizer');
?>
アップロードした timthumb.php に元画像のURLと、指定したい幅をパラメータで渡します。timthumb.php へのパスはアップロードした場所にあわせて書き換えてくださいね。上記の例では画像の幅を500pxに設定してあります。投稿する時には以下のように書きます。
[img]http://www.yoursite.com/yourimage.jpg[/img]
こうすると、全部の画像が幅500pxに揃えられて表示されます。
3. 3. カスタムフィールドを使って記事ごとにスタイルシートを設定する
ちょっと特別な記事を書いた時など、記事に合わせて CSS を変更したい場合もあるかもしれませんね。そんな場合はカスタムフィールドを使うのが便利です。header.php の<head>~</head> 間に以下を記述します。
styleタグで書き出す場合
<?php if (is_single()) : ?>
<?php $css = get_post_meta($post->ID, 'css', true); ?>
<?php if (!empty($css)) : ?>
<style type="text/css">
<?php echo $css; ?>
</style>
<?php endif; ?>
<?php endif; ?>
カスタムフィールドに css という名前をつけて、値にスタイルを書けば、<style> タグが出力されて記事ごとにスタイルシートを設定できます。
外部CSSを読み込みたい場合
header.php の<head>~</head> 間に以下を記述します。
<?php if (is_single()) : ?>
<?php $css = get_post_meta($post->ID, 'css', true); ?>
<?php if (!empty($css)) : ?>
<link rel="stylesheet" href="<?php echo $css; ?>" type="text/css" />
<?php endif; ?>
<?php endif; ?>
css という名前のカスタムフィールドの値に、別途用意したスタイルシートのURLを入力すればOKです。
3. 4. 関連する記事を表示
ブログ記事の下辺りに表示したい関連記事。下の例では、現在の記事と同じタグ（ファーストタグ）の記事表示します。下の例では5件表示しています。
<?php $tags = wp_get_post_tags($post->ID);
if ($tags) : ?>
<ul id="related-post">
<?php
$first_tag = $tags[0]->term_id;
$args=array(
'tag__in' => array($first_tag),
'post__not_in' => array($post->ID),
'posts_per_page '=>5, //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(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?></a></li>
<?php endwhile; wp_reset_query(); ?>
</ul>
<?php endif ?>
3. 5. 記事中に自分にしか見えないノートをつける
ブログの記事の中に、自分にしか見えないメモを残しておくと、あとで読み返すときにちょっといいかもです。その記事を書いた時の動機とか、気分とか、そんなことを書いておくと、自分のブログを読み返す時にちょっと新鮮です。私は記事とは関係ないけど、ちょっと書いておきたいことなどを、ちょこちょこっと書いています。
まずは functions.php でショートコードを設定します。
add_shortcode( 'note', 'sc_note' );
function sc_note( $atts, $content = null ) {
if ( current_user_can( 'publish_posts' ) )
return '<div class="note">'.$content.'</div>';
return '';
}
[ note]
This is a personal note that only admins can see!
[/note]（[ note] の中の半角スペースは削除してください。）こうすればログインしている時にだけ表示されるので、他の人には見えません。
3. 6. 日付をTwitterみたいに time ago にする
まずは functions.php に以下を追加します。
function time_ago( $type = 'post' ) {
$d = 'comment' == $type ? 'get_comment_time' : 'get_post_time';
return human_time_diff($d('U'), current_time('timestamp')) . " " . __('前');
}
表示したい箇所、ループの中には以下のように書きます。
<?php echo time_ago(); ?>
こうすると日付が3日前とかで表示されます。
4. サイドバーで使えるハック
サイドバーにはどんなブログも過去記事へのリンクを表示していると思います。最近の記事だけではつまらないので色んな表示方法を紹介します！今回はランダム表示と人気の記事（コメントの多い記事）をご紹介。また、記事にサムネイルをつける方法もあるので好きにカスタマイズしてみてください。
4. 1. ランダムに記事を表示
過去記事の中からランダムに記事を選んで表示します。以下の例では5件を表示していますが、posts_per_pageの値を変更すれば件数を変更できます。sidebar.php の表示したい所に以下を追加してください。
<ul id="randam-post">
<?php
$args=array( 'posts_per_page'=>5, 'orderby'=>rand );
$my_query = new WP_Query($args); ?>
<?php 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_query(); ?>
<?php endif; ?>
</ul>
4. 2. 人気の記事を表示
人気の記事（コメントの多い順）を表示します。sidebar.php の表示したい所に以下を書き足してください。下の例では5件取得していますが SQL文の LIMIT の値を変更すれば表示件数を変更できます。
<ul id="popular-post">
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5"); //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 endif; endforeach; ?>
</ul>
4. 3. 人気の記事をサムネイルと共に表示
上の人気の記事を表示をもうちょっとカスタマイズして、カスタムフィールドで設定したサムネイルも一緒に表示する例です。
<?php $popular = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>
<?php while ($popular->have_posts()) : $popular->the_post(); ?>
<?php $justanimage = get_post_meta($post->ID, 'Image', true);
if ($justanimage) { ?>
<img src="<?php echo get_post_meta($post->ID, "Image", true); ?>" alt="<?php the_title(); ?>" />
<?php } else { ?>
<img src="http://an-alternative-image.jpg" alt="" /> /* 画像がない場合の代替え画像 */
<?php } ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php endwhile; wp_reset_query(); ?>
上記の例ではコメントの多い順で5件表示しています。1行目の posts_per_page=5 を変更して表示件数を変更してください。
5. ソーシャルメディアハック
ソーシャルメディアへの投稿ボタンの設置はWordPressのプラグイン、ウィジットなしで追加できる機能7つを読んでもらうとして、ソーシャルメディア関連のその他の tips をご紹介します！今回は Feedburner の読者数と Twitter のフォロワー数を表示する方法です。
5. 1. あなたのブログのFeedburnerの読者数を表示
たくさんRSS購読者がいるなら Feedburner の購読者数を表示して、あなたの人気者っぷりをアピールすることもできます。YourURLはあなたのブログのURLに変更してくださいね！
<?php $fburl=”https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=YourURL“; $ch = curl_init(); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_URL, $fburl); $stored = curl_exec($ch); curl_close($ch); $grid = new SimpleXMLElement($stored); $rsscount = $grid->feed->entry['circulation']; echo $rsscount; ?>
5. 2. あなたのTwitterフォロワーの数を表示
ツイッターのフォロワー数を表示してみます。まずは functions.php に以下を記述します。
function string_getInsertedString($long_string,$short_string,$is_html=false){
if($short_string>=strlen($long_string))return false;
$insertion_length=strlen($long_string)-strlen($short_string);
for($i=0;$i<strlen($short_string);++$i){
if($long_string[$i]!=$short_string[$i])break;
}
$inserted_string=substr($long_string,$i,$insertion_length);
if($is_html && $inserted_string[$insertion_length-1]=='<'){
$inserted_string='<'.substr($inserted_string,0,$insertion_length-1);
}
return $inserted_string;
}
function DOMElement_getOuterHTML($document,$element){
$html=$document->saveHTML();
$element->parentNode->removeChild($element);
$html2=$document->saveHTML();
return string_getInsertedString($html,$html2,true);
}
function getFollowers($username){
$x = file_get_contents("http://twitter.com/".$username);
$doc = new DomDocument;
@$doc->loadHTML($x);
$ele = $doc->getElementById('follower_count');
$innerHTML=preg_replace('/^<[^>]*>(.*)<[^>]*>$/',"\\1",DOMElement_getOuterHTML($doc,$ele));
return $innerHTML;
}
表示したい箇所には以下を記述します。
<?php echo getFollowers("WebDesignRecipe")." followers"; ?>
WebDesignRecipe の部分はあなたのTwitterアカウントに変更してください！
6. テンプレートハック
テーマをカスタマイズするときに使える、テンプレートファイル関連の tips です。
6. 1. 独自の header.php、sidebar.php、footer.phpを読み込む
WordPress では header.php や sidebar.php などいくつも作ることができます（増やすと管理が大変になるのでたくさん増やすのはおすすめしませんが ）。例えば WordPress というカテゴリーの時だけ独自の header.php、例えば header-wordpress.php を読み込みたいときは以下のようにします。
<?php if (is_category('WordPress')) {
get_header('wordpress');
} else {
get_header();
} ?>
header-xx.php の xx 部分をパラメータにすれば、get_header() で独自の header.php を読み込むことができます。footer.php や sidebar.php も同じです。
/* will include footer-myfooter.php */
<?php get_footer('myfooter'); ?>
/* will include sidebar-mysidebar.php */
<?php get_sidebar('mysidebar'); ?>
6. 2. テーマをいじらずに Google Analytics が使えます
functions.php に少しコードを加えれば、プラグインを使わず、テーマをいじらなくても Google Analytics を使うことができます。
<?php
add_action('wp_footer', 'ga');
function ga() { ?>
// Paste your Google Analytics code here
<?php } ?>
こうすると、フッター部分に Google Analytics のコードが挿入されます。あなたの Google Analytics code を忘れずに！
6. 3. wp_headから不必要なコードを削除
WordPressでは<head>~</head>の間に色んなリンクが自動的に貼られます。もしあなたの WordPress サイトで必要なければ削除して head内をすっきりさせることができます。
Really Simple Discovery
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://example.com/xmlrpc.php?rsd" />
これを削除するなら以下を functions.php に以下を追加。
<?php remove_action('wp_head', 'rsd_link'); ?>
Windows Live Writer
Windows Live Writerを使ってないなら必要ないですよね。
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.com/wp-includes/wlwmanifest.xml" />
これを削除するなら以下を functions.php に以下を追加。
<?php remove_action('wp_head', 'wlwmanifest_link'); ?>
WordPress Generator
WordPress のバージョンはセキュリティー的に伏せた方がいいと言われています。なので非表示にしちゃいましょう。
<meta name="generator" content="WordPress 2.8.4" />
これを削除するなら以下を functions.php に以下を追加。
<?php remove_action('wp_head', 'wp_generator'); ?>
Post Relational Links
関連記事へのリンクって何で表示されているのかな？理由が分かる人がいたらぜひ教えてください！SEOかな？rel=index は分かる気がするけどそれ以外はなんでだろう？
<link rel='index' title='Main Page' href='http://www.example.com' /> <link rel='start' title='Article in the distant past' href='http://www.example.com/hello-world/' /> <link rel='prev' title='The Post Before This One' href='http://www.example.com/post-before/' /> <link rel='next' title='The Post After This One' href='http://www.example.com/post-after/' />
こんなにいっぱい表示されてる … functions.phpに以下を追加すれば削除できます。
<?php
remove_action('wp_head', 'start_post_rel_link');
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'adjacent_posts_rel_link');
?>
7. ダッシュボードで使えるハック
自分のブログだったらそのままでもOKですけど、クライアントさんに納品する場合などに使えるハックをいくつかご紹介します。「W」のロゴをあまり出したくないって場合もあるかと思うので、その辺を中心にご紹介します。もちろん自分用の WordPressでもカスタマイズして自分だけの WordPress をつくっちゃってください。
7. 1. ダッシュボードのWordPressのロゴを変える
ダッシュボードの左上にある「W」のアレですね。32X32pxです。
functions.php に以下を追加して、代替えの画像を images フォルダの中に、custom-logo.gifという名前でアップロードしてください。
add_action('admin_head', 'my_custom_logo');
function my_custom_logo() {
echo '
<style type="text/css">
#header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important; }
</style>
';
}
7. 2. プラグインを使わずにログイン画面のWordPressのロゴを変える
ログイン画面を変更できるプラグインBM custom loginもありますが、以下はロゴだけ変更するハックです。
functions.php に以下を追加して、代替えのロゴ画像をcustom-login-logo.gifという名前で imagesフォルダの中にアップロードしてください。デフォルトのロゴは250X68pxです。
function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }
</style>';
}
add_action('login_head', 'my_custom_login_logo');
7. 3. ダッシュボードのフッターのテキストを変更
「WordPress のご利用ありがとうございます。 | ドキュメンテーション | バグ報告と提案」っていうアレです。個人的利用なら別にあってもいいんですけど。
function.php に以下を追加してください
function remove_footer_admin () {
echo "Your own text";
}
add_filter('admin_footer_text', 'remove_footer_admin');
随分と長い記事になってしまいました。今日のところはこんなところで！お役に立てれば嬉しいです！