JOURNAL クリエイティブとマーケティングの話

スタティック(静的)ページをWordPress化する際によく使うタグまとめ

WordPressテーマを制作する際、まずHTMLとCSSでスタティック(静的)ページを制作し、それにWordPressのテンプレートタグを挿入して完成させるのが一般的だと思います(だよね？)。

ということで、今回は僕がそういう手順でWordPressテーマを制作する際によく使うテンプレートタグをまとめてみました。

中には現在はあまり使わなくなったものもありますが、誰かの役に立つかもしれないので書いておきます。

下準備

WordPressダッシュボードの設定で、パーマリンク設定を「投稿名」を選択、投稿設定の「更新情報サービス」のところに以下のRSS送信先を設定

更新情報サービス

http://rpc.pingomatic.com/
http://api.my.yahoo.co.jp/RPC2
http://api.my.yahoo.com/RPC2
http://blog.goo.ne.jp/XMLRPC
http://blog.link-engine.net/ping/
http://blogsearch.google.co.jp/ping/RPC2
http://blogsearch.google.com/ping/RPC2
http://blogstyle.jp/xmlrpc/
http://ping.ask.jp/xmlrpc.m
http://ping.blog360.jp/rpc
http://ping.bloggers.jp/rpc/
http://ping.blogoon.net/
http://ping.fc2.com/
http://ping.feedburner.com/
http://ping.kutsulog.net/
http://ping.maplog.jp/
http://ping.mitekaite.com/rpc/
http://ping.myblog.jp/
http://ping.namaan.net/rpc/
http://ping.rss.drecom.jp/
http://ping.sitecms.net
http://ping.syndic8.com/xmlrpc.php
http://ping.weblog.ne.jp/
http://ping.weblogalot.com/rpc.php
http://r.hatena.ne.jp/rpc
http://rpc.reader.livedoor.com/ping
http://rpc.technorati.com/rpc/ping
http://rpc.technorati.jp/rpc/ping
http://rpc.weblogs.com/RPC2
http://www.31engine.com/weblogUpdates/9.cgi
http://www.bloglines.com/ping
http://www.blogpeople.net/servlet/weblogUpdates
http://www.trackbackcenter.com/cgi-bin/receive.cgi
http://www.triathleteblog.net/ping3.php

head要素

スマホ表示用の横幅設定

レスポンシブWebデザインなどでスマホ用レイアウトを用意しない場合、以下のソースを記述しておけばスマートフォンのディスプレイ幅に合わせてサイトを表示できるようになります。

<meta name="viewport" content="width=1024">

タイトル

<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>

フィードURL

<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

スタイルシートのURL

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

WordPressテーマディレクトリへのパス

<?php bloginfo('template_url'); ?>/

テーマディレクトリ内の画像を表示させるときなどに以下のようにして使います。

<img src="<?php bloginfo('template_url'); ?>/images/01.png" alt="" />

ホームURL

<?php echo home_url( '/' ); >

wp_head

<?php wp_head(); ?>

wp_footer

<?php wp_footer(); ?>

wp_headでjQueryを読み込ませないようにする

wp_headタグにより読み込まれるWordPress同梱のjQueryを読み込ませたくない場合にwp_headの直上に記述してください。

<?php wp_deregister_script('jquery'); ?>

iPhone用アイコンの設定

ルートディレクトリに「apple-touch-icon.png」というファイル名でアイコン用画像をアップロードし、以下のソースで読み込ませます。

<link rel="apple-touch-icon" href="<?php echo home_url(); ?>/apple-touch-icon.png">

bodyタグ

head要素内ではありませんがおまけに。

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

テンプレート読み込み

header.php読み込み

<?php get_header(); ?>

sidebar.php読み込み

<?php get_sidebar(); ?>

footer.php読み込み

<?php get_footer(); ?>

ウィジェット表示

<?php dynamic_sidebar(); ?>

ウィジェットが複数ある場合は以下のようにして読み込ませます。

<?php dynamic_sidebar(); ?>
<?php dynamic_sidebar(2); ?>
<?php dynamic_sidebar(3); ?>
<?php dynamic_sidebar(4); ?>

ポスト読み込み

ループ開始

<?php if(have_posts()): while(have_posts()): the_post(); ?>

ポストのタイトル

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

記事本文

<?php the_content(); ?>

記事抜粋

記事本文の最初の60文字を抜粋して表示する場合

<?php echo mb_substr(strip_tags($post-> post_content),0,60).'...'; ?>

ループ終了

<?php endwhile; endif; ?>

WP-pagenaviのページナビゲーションを表示

ページナビゲーションを表示するプラグイン「WP-pagenavi」をインストールしたのち、以下を表示させたい場所に挿入します。

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

ループ条件リセット

同一テンプレート内で複数のループを使用する場合に、ループ終了タグの直下に挿入してください。

<?php wp_reset_postdata(); wp_reset_query(); ?>

ループ条件いろいろ

<?php query_posts('posts_per_page=10&paged='.$paged); ?>//投稿を10件ずつ表示
<?php query_posts('post_type=works&showposts=-1&order=asc'); ?>//ポストタイプタイプ「works」を古い順にすべて表示
<?php query_posts('post_type=works&posts_per_page=10&paged='.$paged); ?>//ポストタイプタイプ「works」を10件ずつ表示
<?php query_posts('cat=3&posts_per_page=10&paged='.$paged); ?>//カテゴリーID「3」に属する投稿を10件ずつ表示
<?php query_posts('post_type=works&taxonomy=website&term=white&showposts=-1'); ?>//カスタムポストタイプ「works」内のタクソノミー「website」内のターム「white」に属する投稿をすべて表示

Breadcrumb NavXT

パンくずリストを表示するプラグイン「Breadcrumb NavXT」をインストールしたのち、以下を表示させたい場所に挿入します。

<div class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

カテゴリー

<?php the_category(' '); ?>

投稿日

<?php echo get_the_date('Y.m.d'); ?>

投稿者

<?php the_author_posts_link(); ?>

固定ページの内容を任意の場所に表示

<?php
$page_id = 16;//ページID
$page = get_post($page_id, 'OBJECT' , 'raw');
$page_include = apply_filters( 'the_content',$page->post_content);
echo $page_include;
?>

カテゴリースラッグをクラス名として追加

<div class="post_cat">
  <?php $cat = get_the_category(); $cat = $cat[0]; { echo '<span class="' . $cat->category_nicename . '" />';  } ?>
  <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
  </span></div>

function.php用

WP-PageNaviのCSSを読み込ませないようにする

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );
}

カスタムポストを有効化

//カスタム投稿タイプ(サービス)の追加
register_post_type(
    'service',
    array(
        'label' => 'サービス',
        'public' => true,
        'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'custom-fields' ,'comments' ),
        'menu_position' => 5,
        'has_archive' => true
    )
);

ループ回数を取得

//ループ回数を取得
function loopCountNum() {
global $wp_query;
return $wp_query->current_post+1;
}

アイキャッチ画像を有効化

add_theme_support('post-thumbnails');
add_image_size('thumb400',400,200,true);

アイキャッチ画像のサイズを複数用意する場合は以下のように記述してください。

add_theme_support('post-thumbnails');
add_image_size('thumb400',400,200,true);
add_image_size('thumb200',200,100,true);

その他

テンプレート名を設定

オリジナルのテンプレートを作成する場合に、ソースの最初に記述します。

<?php
/*
Template Name: テンプレート名
*/
?>

スタティック(静的)ページでWordPressタグを使用する

ソースの一番上に以下のタグを挿入してください。ディレクトリ構造に合わせて適宜「./wp/wp-load.php」の部分のパスを変更してください。

<?php require_once('./wp/wp-load.php'); ?>

スタティック(静的)ページにブログ記事一覧を表示する例。

<?php require_once('./wp/wp-load.php'); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ブログ記事一覧表示</title>
</head>
<body>
<ul>
  <?php
    $posts = get_posts('numberposts=10&category=3');
    global $post;
    ?>
  <?php
    if($posts): foreach($posts as $post): setup_postdata($post); ?>
  <li><a href="<?php the_permalink();?>">
    <?php the_title(); ?>
    </a></li>
  <?php endforeach; endif;
    ?>
</ul>
</body>
</html>

カスタムフィールドを表示(未入力の場合は非表示)

<?php
 $metakeys = array('カスタムフィールド名' );
		foreach( $metakeys as $key ) :
    $value = get_post_meta( $post->ID, $key, true );
    $value = esc_html( $value ); // WP2.8+
    // $value = wp_specialchars( $value );
    if ( !empty( $value ) ) :
?>

<li><a href="<?php echo get_post_meta($post->ID,"カスタムフィールド名",true);  ?>" target="_blank"><img src="画像URL" width="40"/></a></li>

<?php
  endif;
	endforeach;
?>

よく使うスタイル指定

ここからはWordPressテンプレート用タグではありませんが、個人的によく使うスタイル指定をご紹介します。

○番目の要素を指定してスタイル指定

divなどのブロック要素をfloatで横並びにした際に端にくるブロック要素のみマージンをなくしたいなど、○番目の要素を指定してスタイル指定をする場合に便利です。以下は3番目のdiv要素のみ右マージンをなくした例です。

div:nth-child(3n) {
	margin-right: 0;
}

box-sizing

div {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

マウスホバー時にカーソルをリンクカーソルにする

div {
	cursor: pointer
}

ホバー時の画像透過

a img:hover {
	opacity:0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}

グラデーション

div {
	background: #f8f8f8;
	background: -moz-linear-gradient(top, #fff, #f8f8f8);/* FF3.6+ */
	background: -webkit-linear-gradient(top, #fff, #f8f8f8);/* Chrome10+, Safari5.1+ */
	background: -o-linear-gradient(top, #fff, #f8f8f8);/* Opera 11.10+ */
	background: linear-gradient(to bottom, #fff, #f8f8f8);/* IE10+, W3C */
}

clearfix

.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

まとめ

いかがでしたか？ちょっと言葉足らずのところがあったりして分かりにくいところがあるかもしれませんが、随時追記していきたいと思います。

この他にも使用頻度の高いタグやスタイル指定がありますので、それらもこのページに追加していくつもりです。是非活用して頂ければうれしいです。

また、上記内容に誤記などがありましたら優しめにご指摘頂けますと助かります。それでは！

この記事を書いた人
柴田 竹思

フリーランスWebディレクター／デザイナー。Webデザイン事務所Bamboo Works代表。中小企業・個人事業主のWebサイト制作のほか、官公庁や大手企業のプロジェクトにも携わる。神戸とベトナムの二拠点生活中。

記事一覧 記事一覧
関連する記事