2015.11.05
wordpress

【保存版】 製作用WPタグリファレンス 基本から応用まで

WPタグリファレンス

MEMO: 2016年6月30日に追加・更新しました。

ワードプレスでよく使うテンプレートタグのリファレンスを一覧にしました。基本的なものから応用までいろいろです。私自身が一番使うことになると思います。随時追加していく予定です。

長いですので目次をつけました。

目次

  • 1. header.phpに記述すること
    • head終了タグの前に必ず
    • スタイルシートを読み込む
    • ファビコンを読み込む
    • ブログのタイトル・基本SEO対策
    • metaタグに関すること・基本SEO対策
    • コメント欄の返信を押すとすぐ下に返信用メッセージが出てくる
    • jQueryを読み込む
  • 2. footer.phpに記述すること
  • 3. グローバルメニュー
  • 4. サイドバー・ウィジェット
  • 5. ループに関して
    • ループの基本形
    • 複数ループ、サブループの場合 WP_Query
    • 最新記事、特定のカテゴリ、ランダムなど色々な条件で表示 get posts
  • 6. ファイルを読み込む
    • header.phpを読み込む
    • footer.phpを読み込む
    • sidebar.phpを読み込む
    • 任意のphpファイルをを読み込む
    • 検索フォームを読み込む
    • コメントフォームを読み込む
    • 任意の画像ファイルを読み込む
  • 7. index.php、single.php、page.phpで使うこと
    • タイトル
    • 本文
    • カテゴリ
    • タグ
    • 日付
    • 著者
    • サムネイル
    • ページ送り・ページ分割
  • 8. functions.phpに書いてできることいろいろ
    • 現在使っているワードプレスのバージョンを表示しないようにする
    • EditURI を削除
    • wlwmanifest を削除
    • 自動で挿入されるpタグやbrタグを挿入しないようにする
    • 検索結果に固定ページを表示しない
    • 投稿した画像のwidthとheightを表示しない
    • サムネイルのwidthとheightを表示しない
    • ショートコードを作成する
    • ウィジェットでショートコードを使えるようにする
    • ショートコードでphpファイルを読み込む
  • 9. 任意の場所に表示したいあれこれ
    • タグクラウドを表示
  • 10. その他必要なこと
    • screenshot.png
    • スタイルシートの冒頭に記述
    • 固定ページにテンプレートとして認識させる
    • 投稿画像に追加されるCSSのクラス

1. header.phpに記述すること

head終了タグの前に必ず

<?php wp_head(); ?>

スタイルシートを読み込む

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen">

ファビコンを読み込む

<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico">

iPhone・iPad用のapple-touch-icon.png

<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/images/apple-touch-icon-precomposed.png" />
<link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/images/apple-touch-icon.png" />

ブログのタイトル・基本SEO対策

タイトルの右に「|」で区切ってその後にブログ名をつける場合。

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

プラグインを使わずにカスタムフィールドの値をタイトルに

カスタムフィールドの名前をmy_titleとして値に表示したい内容を記述。

<?php if ( $post->my_title ):  ?>
	<title><?php echo esc_html( $post->my_title ); ?> | <?php bloginfo('name'); ?></title>
<?php else: ?>
	<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
<?php endif; ?>

metaタグに関すること・基本SEO対策

ブログのキャッチグレーズをディスクリプションに

<meta name="description" content="<?php bloginfo('description'); ?>" />

プラグインを使わずにカスタムフィールドでメタディスクリプション表示

投稿画面のカスタムフィールドでカスタムフィールドの名前をmy_descriptionとして値に表示したい内容を記述。

   <?php if ( $post->my_description ):  ?>
	<meta name="description" content="<?php echo esc_attr( $post->my_description ); ?>" />
   <?php endif; ?>

プラグインを使わずにカスタムフィールドでメタディスクリプション表示、さらにカテゴリ、タグアーカイブではそれぞれカテゴリ説明、タグ説明を表示し、トップページではブログのキャッチグレーズをメタディスクリプションとして表示

投稿画面のカスタムフィールドでカスタムフィールドの名前をmy_descriptionとして値に表示したい内容を記述。

<?php if(is_front_page() || is_home()) :?>
   <meta name="description" content="<?php bloginfo('description'); ?>" />
<?php elseif(is_category()): ?>
   <?php if ( category_description() ) : ?>
   <meta name="description" content="<?php echo category_description(); ?>" />
   <?php endif; ?>
<?php elseif(is_tag()): ?>
   <?php if ( tag_description() ) : ?>
   <meta name="description" content="<?php echo tag_description(); ?>" />
   <?php endif; ?>
<?php else: ?>
   <?php if ( $post->my_description ):  ?>
	<meta name="description" content="<?php echo esc_attr( $post->my_description ); ?>" />
   <?php endif; ?>
<?php endif ;?>

カスタムフィールドの値をキーワードに

投稿画面のカスタムフィールドでカスタムフィールドの名前をmy_keywordsとして値に表示したい内容を記述。
「ここに好きなキーワード」はmy_keywordsがない場合に表示したいキーワードを表示。

<?php if ( $post->my_keywords ):  ?>
	<meta name="keywords" content="<?php echo esc_attr( $post->my_keywords ); ?>" />
<?php else: ?>
	<meta name="keywords" content="ここに好きなキーワード" />
<?php endif; ?>

コメント欄の返信を押すとすぐ下に返信用メッセージが出てくる

<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>

jQueryを読み込む

<?php echo wp_enqueue_script('jquery'); ?>

2. footer.phpに記述すること

bodyタグが終了する直前に記述

<?php wp_footer(); ?>

3. グローバルメニュー

管理目画面のメニューを使えるようにするのにfuctions.phpに以下を記述。

add_theme_support( 'menus' );

テンプレートのメニューを表示したい場所へ以下を記述。

<?php wp_nav_menu( array('menu' => 'ここにメニューの名前','container' => false)); ?>

リファレンス:テンプレートタグ/wp nav menu

4. サイドバー・ウィジェット

ウィジェットを登録するためにfuctions.phpに以下を記述。

register_sidebar( array(
'name' => 'ここにウィジェット名' ,
'id' => 'ここに半角英数字でid',
'before_widget' => '<div class="widget">',
'after_widget' => '</div><!--.widget-->',
'before_title' => '<div class="widget_title">',
'after_title' => '</div><!--.widget_title-->',
) );

テンプレートの表示したい部分に以下を記述。

<?php dynamic_sidebar( '上記で設定したnameもしくはidをここに' ); ?>

リファレンス:関数リファレンス/register sidebar

5. ループに関して

ループの基本形

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 ここにループする内容
<?php endwhile; else: ?>
 ループが見つからなかったときに表示すること
<?php endif; ?>

リンクつきタイトル、リンクつきサムネイル、本文を表示する場合

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
     <?php the_title(); ?>
  </a>
  
  <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
     <?php if ( has_post_thumbnail() ):  ?>
      <?php echo get_the_post_thumbnail(); ?>
     <?php else: ?>
        <img src="<?php echo get_template_directory_uri(); ?>/images/no_image.png" alt="NO IMAGE" title="NO IMAGE" />
     <?php endif; ?>
   </a>
  
  <?php the_content(); ?>

<?php endwhile; else: ?>
 お探しの記事はみつかりませんでした。
<?php endif; ?>

複数ループ、サブループの場合 WP_Query

特定の固定・投稿ページの内容を表示したい

<?php $my_loop = new WP_Query(' pagename=表示したい固定ページのスラッグ '); ?>
<?php while ( $my_loop->have_posts() ) : $my_loop->the_post(); ?>

<?php the_title(); ?>
<?php the_content(); ?>

<?php endwhile; wp_reset_postdata();?>

pagename部分は以下のパラメータで変更できる。

固定・投稿ページのパラメータ

  • p (int) – 投稿のIDを使用する。
  • name (string) – 投稿のスラッグを使用する。
  • page_id (int) – 固定ページのIDを使用する。
  • pagename (string) – 固定ページのスラッグを使用する。
  • post_parent (int) – 固定ページのIDを使用する。子ページを返す。
  • post__in (array) – 投稿のIDを使用する。取得するために投稿を指定する。
  • post__not_in (array) – 投稿のIDを使用する。指定された投稿は取得されない。

リファレンス:関数リファレンス/WP Query

最新記事、特定のカテゴリ、ランダムなど色々な条件で表示 get posts

最新記事のリンクつきタイトルを3件表示

<?php 
 $latestposts = get_posts( 'posts_per_page=3' );
 global $post;
 foreach ( $latestposts as $post ) :
 setup_postdata( $post ); ?>
  
  <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>

<?php endforeach; wp_reset_postdata(); ?>

特定のカテゴリのリンクつきタイトルを表示

<?php 
 $args = array( 'category' => 3, 'posts_per_page' => 0);
 $cat_posts = get_posts( $args );
 global $post;
 foreach( $cat_posts as $post ) : 
 setup_postdata( $post ); ?>

  <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<?php endforeach; wp_reset_postdata(); ?>

カテゴリをスラッグで指定したい場合(スラッグがwordpress)

<?php 
 $term_id = get_category_by_slug('wordpress')->term_id;
 $args = array( 'category' => $term_id, 'posts_per_page' => 0);
 $cat_posts = get_posts( $args );
 global $post;
 foreach( $cat_posts as $post ) : 
 setup_postdata( $post ); ?>

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

<?php endforeach; wp_reset_postdata(); ?>

投稿記事をランダムに5件表示

<?php 
 $args = array( 'numberposts' => 5, 'orderby' => 'rand', 'offset' => 1);
 $rand_posts = get_posts( $args );
 global $post;
 foreach( $rand_posts as $post ) : 
 setup_postdata( $post ); ?>

  <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<?php endforeach; wp_reset_postdata(); ?>

リファレンス:テンプレートタグ/get posts

6. ファイルを読み込む

header.phpを読み込む

<?php get_header(); ?>

footer.phpを読み込む

<?php get_footer(); ?>

sidebar.phpを読み込む

<?php get_sidebar(); ?>

任意のphpファイルをを読み込む

<?php include( TEMPLATEPATH . '/sample.php' ); ?>

検索フォームを読み込む

<?php get_search_form(); ?>

コメントフォームを読み込む

<?php comments_template(); ?>

任意の画像ファイルを読み込む

<img src="<?php echo get_template_directory_uri(); ?>/images/画像.jpg">

7. index.php、single.php、page.phpで使うこと

タイトル

<?php the_title(); ?>

リンクつきタイトル

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

本文

<?php the_content(); ?>

抜粋

<?php the_excerpt(); ?>

抜粋の文字数を自由に設定する場合

functions.phpに以下を記述。

function my_excerpt( $length ) {
global $post;
$content = mb_substr( strip_tags( $post -> post_content ), 0, $length );
$content = $content . ' ......';
return $content;
}

抜粋を表示したい場所に以下を記述。

<?php echo my_excerpt(200); ?>

カテゴリ

<?php the_category(', '); ?>

「,」で区切って表示。

リンクなしのカテゴリ

カンマで区切る

<?php
$str = '';
foreach((get_the_category()) as $cat){
	$str .= $cat->cat_name . ', ';
}
echo rtrim($str, ", ");
?>

リスト表示

<ul>
<?php foreach((get_the_category()) as $cat){
	echo '<li>' . $cat->cat_name . '</li>'; } ?>
</ul>

リファレンス:記事が属する複数のカテゴリー名をリンクなしで表示

タグ

<?php the_tags( 'タグ: ', ', ', '<br />' ); ?>

リンクなしのタグ

カンマで区切る

<?php
$posttags = get_the_tags();
$count = count($posttags);
$loop = 0;
if ($posttags) {
foreach ($posttags as $tag) {
	$loop++;
	if ($count == $loop){
	echo $tag->name . '';
	} else {
	echo $tag->name . ', ';
	}
	}
} ?>

リファレンス:リンク無しのタグを出力する方法

リスト表示

<ul>
<?php
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
echo '<li>'. $tag->name . '</li>'; 
}
}
?>
</ul>

日付

<?php the_time('Y年n月j日'); ?>

著者

<?php the_author(); ?>

リンクつき

<?php the_author_posts_link(); ?>

サムネイル

functions.phpに以下を記述してサムネイルを使えるように。

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true );

上記の記述だと、width150px、height150pxで切り取られる。

サムネイルを表示したい場所に以下を記述。

<?php 
if ( has_post_thumbnail() ) {
	the_post_thumbnail();
} 
?>

リンクつきサムネイル

<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php 
if ( has_post_thumbnail() ) {
	the_post_thumbnail();
} 
?>
</a>

リンクつきサムネイルでサムネイルがない場合にNo image画像を表示

 <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ):  ?>
   <?php the_post_thumbnail(); ?>
<?php else:  ?>
   <img src="<?php echo get_template_directory_uri(); ?>/images/no_image.png" alt="NO IMAGE" title="NO IMAGE" />
<?php endif; ?>
 </a>

ページ送り・ページ分割

single.phpの場合 前へ、次へ

<?php previous_post_link(); ?>
<?php next_post_link(); ?>
<?php previous_post_link( '%link',  '&laquo; 前の記事へ', TRUE); ?>
<?php next_post_link( '%link', '次の記事へ &raquo;', TRUE); ?>

リファレンス:テンプレートタグ/previous post link

index.phpやアーカイブページの場合

<?php next_posts_link() ?>
<?php previous_posts_link() ?>
<?php next_posts_link('古い記事へ') ?>
<?php previous_posts_link('新しい記事へ') ?>

プラグインなしでページ分割

functions.phpに以下を記述。

function pagination($pages = '', $range = 4)
{
     $showitems = ($range * 2)+1; 
      global $paged;
     if(empty($paged)) $paged = 1;
      if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }  
      if(1 != $pages)
     {
         echo "<div class=\"pagination\">";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; 最初へ</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&laquo;</a>";
         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
             }
         }
         if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">&raquo;</a>";
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>最後へ &raquo;</a>";
         echo "</div>\n";
     }
}

ページ分割を表示したい部分に以下を記述。index.phpやアーカイブなど。

<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>

CSSを調整。

.pagination {
width:100%;
margin:0;	
float:left;
}
.pagination span, .pagination a {
text-decoration:none;
padding:5px 8px;
margin:3px;
background-color:#FC90AD;
color:#fff;
}
.pagination a:hover{
background-color:#E2CA7D !important;
}
.pagination .current{
background-color:#E2CA7D !important;
}

8. functions.phpに書いてできることいろいろ

現在使っているワードプレスのバージョンを表示しないようにする

remove_action('wp_head', 'wp_generator');

EditURI を削除

remove_action('wp_head', 'rsd_link');

wlwmanifest を削除

remove_action('wp_head', 'wlwmanifest_link');

自動で挿入されるpタグやbrタグを挿入しないようにする

本文からpタグやbrタグを削除

remove_filter( 'the_content', 'wpautop' );

抜粋からpタグやbrタグを削除

remove_filter('the_excerpt','wpautop');

カテゴリー説明文、タグ説明文、タクソノミー説明文からpタグやbrタグを削除

remove_filter('term_description','wpautop');
remove_filter('category_description','wpautop');
remove_filter('tag_description','wpautop');

検索結果に固定ページを表示しない

function SearchFilter($query) {
if ($query->is_search) {
$query->set('post_type', 'post');
}
return $query;
}
add_filter('pre_get_posts','SearchFilter');

投稿した画像のwidthとheightを表示しない

function remove_hwstring_from_image_tag( $html, $id, $alt, $title, $align, $size ) {
    list( $img_src, $width, $height ) = image_downsize($id, $size);
    $hwstring = image_hwstring( $width, $height );
    $html = str_replace( $hwstring, '', $html );
    return $html;
}
add_filter( 'get_image_tag', 'remove_hwstring_from_image_tag', 10, 6 );

サムネイルのwidthとheightを表示しない

 
function custom_attribute( $html ){
    $html = preg_replace('/(width|height)="\d*"\s/', '', $html);
    return $html;
}
add_filter( 'post_thumbnail_html', 'custom_attribute' );

ショートコードを作成する

functions.phpに以下を記述。

function content_shortcode() {
    return '<a href="http://ri-mode.com/rainbow/">Ri-mode Rainbow</a>';
}
add_shortcode('my_link', 'content_shortcode');

記事や固定ページに以下のショートコードを記述。

[my_link]

ウィジェットでショートコードを使えるようにする

add_filter('widget_text', 'do_shortcode' );

ショートコードでphpファイルを読み込む

functions.phpに以下を記述。

function Include_my_php($params = array()) {
    extract(shortcode_atts(array(
        'file' => 'default'
    ), $params));
    ob_start();
    include(get_theme_root() . '/' . get_template() . "/$file.php");
    return ob_get_clean();
}
add_shortcode('myphp', 'Include_my_php');   

phpファイルを読み込みたい記事や固定ページに以下のショートコードを記述。

[myphp file='ここにphpのファイル名']

「ここにphpのファイル名」の部分は、sample.phpだったら、sampleと記述。

9. 任意の場所に表示したいあれこれ

タグクラウドを表示

ウィジェットを使わずに任意の場所にタグクラウドを表示する場合、表示したい部分に記述。

<?php wp_tag_cloud(); ?>

使用例1

<?php wp_tag_cloud('smallest=8&largest=22'); ?>

使用例2

<?php 
$args = array(
	'smallest'  => 8, 
	'largest'   => 22,
); 
wp_tag_cloud( $args );
?>

リファレンス:テンプレートタグ/wp tag cloud

10. その他必要なこと

screenshot.png

テーマファイルのサムネイル。大きさは300x225または600x450が良い。

スタイルシートの冒頭に記述

/*
Theme Name: Ri-mode Rainbow
Author: Rina Inamoto
Author URI: http://ri-mode.com
Version: 1.0
*/
Theme Name・・・テーマの名前
Theme URI・・・テーマのURL
Description・・・テーマの説明
Author・・・テーマの作成者
Author URI・・・テーマ作成者のURL
Version・・・バージョン
Tags・・・タグ
License・・・ライセンス
License URI・・・ライセンスURL
General comments・・・その他コメントなど

Theme Nameは必須でそれ以外は省略可能です。

固定ページにテンプレートとして認識させる

固定ページでデフォルト以外のテンプレートファイルを使用したい場合、用意したphpファイルの冒頭に以下のように記述すると固定ページの投稿画面でテンプレートを選ぶことができるようになる。

<?php
/*
Template Name: サンプル
*/
?>

投稿画像に追加されるCSSのクラス

img.alignleft{
float: left;
padding-right: 30px;
}
img.alignright{
float: right;
padding-left: 30px;
}
img.aligncenter{
display: block;
margin: auto;
}

本気でワードプレスに取り組む場合、自分にあったワードプレスの本、1冊は手元にいて置きたいものです。アマゾンでベストセラー1位の本がWeb担当者のためのWordPressがわかる本 あらゆるビジネスサイトで使える企画・設計・制作・運用のノウハウのようです。

ちなみに私が持っているワードプレスの参考書はWordPressデザインブック3.x対応。ワードプレスの仕組みをしっかり理解させてくれる上でいろいろなことができるようになります。本当にすばらしい本です。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP