WordPress のスニペットメモ

Posted under - WordPress

6

このブログを作るときに使った、WordPress のスニペットメモです。個人的な覚え書き ...。

WordPress MEMO

WordPress でサイト構築するときのスニペット … というか、かなり個人的なメモです。このブログを作った時に使ったコードのメモ書きです。

1. アーカイブページで使えるハック

カテゴリーやタグ、日時別に表示するアーカイブページ。あまり意識することがないページですが、他のページとちょっと違いを出して、少しだけ分かり易いアーカイブページにしてみました。

タグやカテゴリー、検索などをした時に、ちょっとひと言ページに表示するだけで、ページが変わったことも明示できますしね!

1.1. カテゴリーの名前と件数を表示する

WordPress のループ外で使うことを想定しています。… header.php とかで。index.php などで、メインループの中で使うコードではありません。下記は、カテゴリー “WordPress” を表示しているページです。

カテゴリー : WordPress

カテゴリー名と件数

カテゴリーページで、カテゴリー名と該当件数を表示しています。カテゴリー名には背景画像を使っています。

今回はヘッダーに、見出し的に表示していますけど、パンくずリストなどにも応用できますね!

header.php
<?php if (is_archive()): ?>
    <?php
	global $wp_query;
	$total_results = $wp_query->found_posts;
    ?>
	<?php if(is_category()): ?>
	    <p>カテゴリー &quot;<?php single_cat_title(); ?>&quot;:<?php echo $total_results; ?>件</p>
        <?php endif;  ?>
<?php endif; ?>

1.2. タグの名前と件数を表示する

カテゴリーのときと同じように、タグのときもタグ名と件数を表示してみます。下記はタグ “Design” を表示しているページです。

タグ : Design

タグ名を件数を表示

タグ名は single_tag_title() で表示します。

1タグ名 “Design” を表示して、2該当する件数を表示しています。

header.php
<?php if (is_archive()): ?>
    <?php
	global $wp_query;
	$total_results = $wp_query->found_posts;
    ?>
	<?php if(is_tag()): ?>
	    <p>タグ &quot;<?php single_tag_title(); ?>&quot;:<?php echo $total_results; ?>件</p>
        <?php endif; ?>
<?php endif; ?>

1.4. 検索クエリを表示する

検索結果ページで、検索クエリ(検索したキーワード)と件数を表示します。

検索クエリ : WordPress + jQuery

検索結果ページ

キーワード “WordPress jQuery” で検索した結果を表示するページです。

検索クエリは、the_search_query() で簡単に表示できますね!1検索クエリ “WordPress jQuery” を表示して、2検索結果数を表示しています。

header.php
<?php
if (is_search()): ?>
    <?php
	global $wp_query;
	$total_results = $wp_query->found_posts;
    ?>

    <p>&quot;<?php the_search_query(); ?>&quot; で検索した結果:<?php echo $total_results; ?>件</p>
<?php endif; ?>

1.4. 上記3つをまとめると

header.php
<?php if (is_archive()): ?>
    <?php
	global $wp_query;
	$total_results = $wp_query->found_posts;
    ?>
    <?php if(is_tag()): ?>
	<p>タグ &quot;<?php single_tag_title(); ?>&quot;:<?php echo $total_results; ?>件</p>

    <?php elseif(is_category()): ?>
	<p>カテゴリー &quot;<?php single_cat_title(); ?>&quot;:<?php echo $total_results; ?>件</p>

    <?php endif; ?>

<?php elseif (is_search()): ?>
    <?php
	global $wp_query;
	$total_results = $wp_query->found_posts;
    ?>

    <p>&quot;<?php the_search_query(); ?>&quot; で検索した結果:<?php echo $total_results; ?>件</p>

<?php else: ?>
	<p>トップページなどのその他のページには、これを表示します。</p>
<?php endif; ?>

2. RSS で使えるハック

ブログを購読してみようかなーっていう人がクリックする RSS を、少しだけカスタマイズしてみましょう。このブログは Feed を、全文じゃなくて抜粋で表示させているので、画像が含まれなくてちょっと寂しい感じがします …。なので抜粋にアイキャッチ画像を挿入してみます。

また、Feed をクリックしてくれた人は、大切なブログのファンですよね!RSS をクリックしてくれたファンに向けて、メッセージを表示してみるのもいいかもです!

RSS フィードに画像とメッセージを表示

WebデザインレシピのRSSフィード

抜粋表示にアイキャッチ画像をプラス。そしてツイッターの案内を表示してみました。Safari での表示です。

2.1. RSSフィードにアイキャッチとメッセージを追加

まず、1はアイキャッチ画像を使用しているので、投稿にアイキャッチ画像を使っている必要があります。そして2の部分が、投稿に関係なく追加されたメッセージの部分です。

やり方は簡単で、functions.php に以下を追記します。

functions.php
function rss_post_thumbnail($content) {
	global $post;
	if(has_post_thumbnail($post->ID)) {
		$content = '<p>' . get_the_post_thumbnail($post->ID) .
		'</p>' . get_the_excerpt();
	}
	
	$content .= '<hr />Webデザインレシピの購読ありがとうございます!<br />ツイッターでも Web情報、キレイな写真やデザインのことをつぶやいてます。お気軽にフォローしてみてくださいね!<a href="http://twitter.com/WebDesignRecipe" target="_blank">@WebdesignRecipe</a><hr />';
	return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');

has_post_thumbnail でアイキャッチ画像があるかどうかをチェックして、あったらアイキャッチ画像を挿入 … っていう流れですね!後半部分が追加で表示するメッセージです。

3. <body> タグに便利なクラスを付ける

WordPressには body_class という便利なテンプレートタグがあります。これは表示するページによって、色んなクラスを <body>につけてくれるので、CSS で装飾する時にとっても便利です。例えば “Design” というカテゴリーを表示しているページは、catogory-design というようなクラスが、<body> タグに自動でつけられます。

  • 1. <body <?php body_class();?>>

以下は、この body_class を拡張して、ユーザーのブラウザに応じて <body> タグのクラスを変更するスニペットです。

3.1. ブラウザごとに <body > タグのクラスを変える

body_class を拡張するために、functions.php に以下を追加します。

functions.php
<?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes&#91;&#93; = 'lynx';
	elseif($is_gecko) $classes&#91;&#93; = 'gecko';
	elseif($is_opera) $classes&#91;&#93; = 'opera';
	elseif($is_NS4) $classes&#91;&#93; = 'ns4';
	elseif($is_safari) $classes&#91;&#93; = 'safari';
	elseif($is_chrome) $classes&#91;&#93; = 'chrome';
	elseif($is_macIE) $classes&#91;&#93; = 'macie';
	elseif($is_winIE) $classes&#91;&#93; = 'winie';
	else $classes&#91;&#93; = 'unknown';

	if($is_iphone) $classes&#91;&#93; = 'iphone';
	return $classes;
}
?>

あ、header.php の <body> タグを以下のようにするのを忘れずに!

header.php
<body <?php body_class(); ?>>

例えば Windows の IE でアクセスした時には、<body class=”winie”>、iPhoneでアクセスした時には <body class=”iphone”> というようなクラスを付けることができます!

ユーザーのブラウザの取得には $_SERVER['HTTP_USER_AGENT'] を使っていますが、そのコードは wp-includes → vars.php の中にありますよー!

4. オリジナルデザインのツイートボタン

ツイッターから、公式のツイートボタンが発表されましたね!でも、自分のブログのデザインに合わせたオリジナルアイコンのツイートボタンにしたいなーと思うこともあるかもしれません …。実はオリジナルデザインのツイートボタンは、とっても簡単に設置できます!というのも、以下のようなリンクを記述すればいいだけなんですねー!

ツイッターへ投稿するリンク
<a href="https://twitter.com/share?text=<?php the_title(); ?>&nbsp;via @WebDesignRecipe" target="_blank">tweet</a>

@WebDesignRecipe の部分は、あなたのツイッターアカウントに変更してください。

こうすれば、リンクを CSS でデザインすれば、オリジナルボタンでツイートボタンが設置できますね!

5. WordPressのPHP構文について

WordPress を初めてカスタマイズしようとしたときに、少し戸惑ったのが PHP の構文の書き方でした …。PHP の構文の書き方は複数ありますけど、WordPress のテーマに使われている PHP 構文の書き方は、一般的(PHPのサンプル集など)に教えられた構文の書き方と違います。

例えば if 文の書き方 …。一般的に PHP の if 文は、こんな風に書くと教わりました。

PHP if 文

<?php
/* single.phpでh1タグを記事タイトルにするコード */
if (is_single()){
    echo '<h1><a href="'.php the_permalink().'">'.the_title().'</a></h1>';
else {
    echo '<h1><a href="'.get_option('home').'">'.bloginfo('name').'</a></h1>';
}

でもWordPressテーマ内でよく使われている書き方は、以下のような感じですねー。

PHP if 文

<?php if(is_single()): ?>
    <h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
<?php else: ?>
    <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<?php endif; ?>

といった感じで、ブレース({})の代わりに、 : が使われているのをたくさん見かけます。そして最後に endif; って書きます。

こうすれば、いちいち echoprint で出力しなくてもいいのでとても楽ちんですし、コードもスッキリして見やすいです!最初は戸惑うかもしれませんが、慣れてくればこっちの方がいいですね。

Comments

Thank you for the comment.