Web、モバイル（スマホ・格安SIM）、ソーシャルメディア活用術、フリーランスの働き方などを綴ります！

WordPressテンプレートタグ集｜初心者即実践＆仕事で使えるコピペ用

WordPress

Web制作のTips WordPressの使い方

104,235 view

更新日：2015年11月02日投稿日 : 2012年04月23日

私自身がWordPressでホームページを作成している中で、過去の実績で利用してきたテンプレートタグを、基本的なタグから便利なタグまで幾つかピックアップ致します。
私自身が一番この記事を参考にすると思います（笑）

ブログカスタマイズなどのテーマ編集だけでなく、ワードプレス自体でホームページを作り込みたい人におすすめ！

テンプレートタグの組み合わせ次第で実践で使え、初心者の方でも比較的レベルの高いホームページを作れるはず？！

私自身がよく使うマルチサイト化した時のテンプレートタグも記載しているので要チェックです！

テンプレートタグの表記ですが、”SyntaxHighlighter Evolved”というソースコードを美しく表示するプラグインを試してみたけど、下記の表記の方がしっくりしたのでご了承を。インストールはしているけど。

それでは、おすすめのWordPressテンプレートタグ、ご参照下さい。

インクルードタグ（テーマファイルへ挿入）
WordPressの基本情報を出力
index.phpページ以外をトップページで利用
投稿エリアでよく使うテンプレートタグ
固定ページ（page.php）で使うテンプレート
サイドバー（sidebar.php）でよく使うテンプレートタグ
カスタムフィールド系
functions.phpに追記しておきたいテンプレートタグ

インクルードタグ（テーマファイルへ挿入）

プラグイン動作用タグ（ヘッダー用：必須）

<?php wp_head(); ?>

プラグイン動作用タグ（フッター用：必須）

<?php wp_footer(); ?>

bodyへのclass設定対応

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

ヘッダーテンプレート

<?php get_header(); ?>

サイドバーテンプレート

<?php get_sidebar(); ?>

フッターテンプレート

<?php get_footer(); ?>

コメントテンプレート

<?php comments_template(); ?>

検索フォームのテンプレート

<?php get_search_form(); ?>

任意のテンプレートファイル.phpの呼び出し（ファイル名を自由に決めれる）

<?php include( TEMPLATEPATH . '/ファイル名自由.php' ); ?>

外部のテーマファイルからテンプレートファイル.phpを呼び出し（インクルード）

<?php include(get_theme_root() . '/テーマフォルダ名/***.php'); ?>

スマートフォンとパソコンのコンテンツ表示の有無

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
スマートフォン用コンテンツを配置。
<?php else: ?>
パソコン用コンテンツを配置。
<?php endif; ?>

WordPressの基本情報を出力

文字コードの指定

<meta charset="<?php bloginfo( 'charset' ); ?>"> />

ブログ名

<?php bloginfo('name'); ?>

<title>タグに設定するタグ（ページタイトルとサイトタイトルの間に区切り線挿入）

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

ブログのURL

<?php echo home_url(); ?>

CSS（スタイルシート）のURL

<?php echo get_stylesheet_directory_uri(); ?>

テーマテンプレートのURL

<?php echo get_template_directory_uri(); ?>

JavaScriptの読み込み時のURL（jQueryなどの利用時）

<?php wp_enqueue_script( 'スクリプト名', get_template_directory_uri().'/js/スクリプト名.js', array('スクリプトの種類')); ?>

ディスクリプション（説明）

<?php bloginfo('description'); ?>

RSSフィードのURL

<?php bloginfo('rss2_url'); ?>

<?php bloginfo('atom_url'); ?>

AtomフィードのURL

<?php bloginfo('atom_url'); ?>

index.phpページ以外をトップページで利用

index.phpページ以外をトップページにする場合の”任意.php”への設定表記（本文エリアの先頭に記載）

<?php
/*
Template Name:メイン画面 ← 名前任意
*/ ?>

カテゴリーごとに違うデザインの個別ページを表示

（カテゴリーIDが１の場合、single-info.phpを表示。それ以外は、single.phpを表示。）

<?php
$post = $wp_query->post;
if ( in_category('1') ) {
include(TEMPLATEPATH . '/single-info.php');
}
?>

ポータルサイトのトップページに配置する新着情報一覧に使う

<?php query_posts('showposts=6'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php the_date('Y年m月d日（D） h:i:s'); ?></li>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

カテゴリーごとに新着エントリー表示（カテゴリー３の最新エントリー10件を表示）

<ul class="qa1_list">
<?php $myposts = get_posts('numberposts=10&category=3'); foreach($myposts as $post) : ?>
<li><?php echo get_the_date("Y年n月j日(D)"); ?>　<a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

マルチサイト化した子ブログの記事を読み込む方法（子ブログID2の最新エントリーを6件を表示）

<?php switch_to_blog(2) ?>
<?php global $post;
$myposts = get_posts('numberposts=6');
foreach($myposts as $post) :
setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
<?php restore_current_blog(); ?>

投稿エリアでよく使うテンプレートタグ

記事のID（同じページ間での移動に使える）

<?php the_ID(); ?>

記事の日付

<?php the_time('Y年m月d日（D）'); ?>

記事の更新日

<?php the_modified_date('Y年m月d日（D）'); ?>

記事のタイトル

<?php the_title(); ?>

記事の本文

<?php the_content(); ?>

記事本文の文字を制限して表示（140文字で区切って語尾に…を表示）

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

記事のURL（パーマリンク）

<?php echo get_permalink(); ?>

記事の投稿者名

<?php the_author(); ?>

投稿記事タグのセット（CSS付き（任意））

<div class="contents">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="section">
<div class="data"><?php the_date(); ?></div>
<div class="title"><?php the_title(); ?></div>
<?php the_content(); ?>
</div><!--section-->
<?php endwhile; ?>
<?php endif; ?>
</div><!--contents-->

前の記事へ・次の記事へ

<div class="previous"><?php previous_post_link('%link', '« %title'); ?></div>
<div class="next"><?php next_post_link('%link', '» %title'); ?></div>

記事の並び替え（昇順・降順）

記事のループの前に下記を追記。

<?php query_posts($query_string .'order=asc'); ?> //昇順
<?php query_posts($query_string .'order=desc'); ?> //降順

カテゴリー名をリンク付きで表示（カテゴリーページへ遷移）

<?php foreach((get_the_category()) as $cat) {
$cat_id = $cat->cat_ID ;
break ;
}
$category_link = get_category_link( $cat_id ); ?>
<a href="<?php echo $category_link; ?>" title="<?php echo $cat->cat_name; ?>"><?php echo $cat->cat_name; ?></a>

記事にinterview（任意）タグが設定されてある場合表示するif文

<?php if(has_tag('interview')): ?>
記事にinterviewタグが設定されてある場合表示する内容
<?php else: ?>
記事にinterviewタグが設定されて無い場合表示する内容
<?php endif; ?>

固定ページ（page.php）で使うテンプレート

自動で付く<p>タグを解除（柔軟にデザインできる）

<?php the_post(); ?>
<?php remove_filter('the_content', 'wpautop');
the_content();
add_filter('the_content', 'wpautop'); ?>

404ページを作らないで、トップページへリダイレクトさせる方法

テーマの404.phpに下記を挿入するだけ。

<?php
header( "location: " . home_url() );
?>

サイドバー（sidebar.php）でよく使うテンプレートタグ

エントリー一覧（最新の10件を表示）

<ul class="entry">
<?php wp_get_archives('type=postbypost&limit=10'); ?>
</ul>

月別の一覧（リスト表示）

<ul class="backnumber">
<?php wp_get_archives('type=monthly'); ?>
</ul>

月別の一覧（プルダウンメニュー表示）

<select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'> 
<option value=""><?php echo attribute_escape(__('Select Month')); ?></option> 
<?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?>
</select>

カテゴリ一覧を表示

<?php wp_list_categories('title_li='); ?>

カテゴリー名

<?php single_cat_title(); ?>

カテゴリページへリンク（1がカテゴリーID。アンカーリンクタグ付）

<ul class="t_qa">
<li><a href="<?php echo get_category_link(1); ?>#<?php the_ID(); ?>"><?php the_title(); ?></li>
</ul>

外部RSSを呼び出して表示

<?php
include_once(ABSPATH . WPINC . '/rss.php');
$rss = fetch_rss('http://example.com/feed/');
$maxitems = 4;
$items = array_slice($rss->items, 0, $maxitems);
?>
<ul class="blog">
<?php if (empty($items)) echo '<li>No items</li>';
else
foreach ( $items as $item ) : ?>
<li><?php echo $up = date('Y年m月d日',strtotime($item[pubdate])); ?><br /><a href='<?php echo $item['link']; ?>'
title='<?php echo $item['title']; ?>'><?php echo $item['title']; ?>
</a></li>
<?php endforeach; ?>
</ul>

タグ一覧

<?php echo get_the_tag_list(); ?>

ウィジェットを利用する為の設定

１、functions.phpへ下記を挿入。

if ( function_exists('register_sidebar') )
    register_sidebar();

２、サイドバーなどの任意の位置に下記に挿入。

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>

カスタムフィールド系

フィールド名”add”と設定した投稿情報（文字や数値）を表示（無記入の場合は非表示）

<?php if(post_custom('add')): ?>
<div class="（任意CSSタグ"><?php echo post_custom('add'); ?></div>
<?php endif; ?>

カスタムフィールドテキストボックス内の改行処理（フィールド名：txt）

<?php echo nl2br(post_custom('txt')); ?>

本文入力フォームが不要なら消そう！

「投稿記事の入力フォームはカスタムフィールドだけで十分！」
って方は、本文フォームが邪魔になるので消しちゃいましょう！
下記をfunctions.phpに追記して下さい。

//　投稿ページの本文フォーム非表示
add_action( 'init' , 'my_remove_post_editor_support' );
function my_remove_post_editor_support() {
remove_post_type_support( 'post', 'editor' );
}

//　固定ページの本文フォーム非表示
add_action( 'init' , 'my_remove_post_editor_support' );
function my_remove_post_editor_support() {
remove_post_type_support( 'page', 'editor' );
}

functions.phpに追記しておきたいテンプレートタグ

<head>内のWordPressのバージョンを消す

remove_action('wp_head','wp_generator');

<head>内の絵文字のスクリプトを消す

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('wp_print_styles', 'print_emoji_styles' );
remove_action('admin_print_styles', 'print_emoji_styles');

アイキャッチの利用設定

add_theme_support( 'post-thumbnails' );

functions.phpに上記をセットしたら、テーマのアイキャッチを挿入したい場所に下記のいずれかのソースを挿入。

<?php the_post_thumbnail("thumbnail"); ?> // サムネイル画像を表示
<?php the_post_thumbnail("medium"); ?> // 中サイズ画像を表示
<?php the_post_thumbnail("large"); ?> // 大サイズ画像を表示
<?php the_post_thumbnail(array(100, 50)); ?> // 横・縦指定（数値は任意で変更可）
<?php the_post_thumbnail("post-thumbnail"); ?> // アイキャッチ画像を表示
<?php the_post_thumbnail(); ?> // アイキャッチ画像を表示（上と同じ）

カスタマイザーの利用設定

add_theme_support( 'custom-background' );

WordPressログイン時に、サイト確認上部に出ている管理バーの非表示

remove_action('wp_head','wp_generator');
add_filter( 'show_admin_bar', '__return_false' );

メディア挿入時の添付ファイルの表示設定の配置を「なし」にする

function media_script_buffer_start() {
    ob_start();
}
add_action( 'post-upload-ui', 'media_script_buffer_start' );
function media_script_buffer_get() {
    $scripts = ob_get_clean();
    $scripts = preg_replace( '#<option value="post">.*?</option>#s', '', $scripts );
    $scripts = preg_replace( '#<option value="custom">.*?</option>#s', '', $scripts );
    $scripts = preg_replace( '#<option value="file" selected>.*?</option>#s', '', $scripts );
    echo $scripts;
}
add_action( 'print_media_templates', 'media_script_buffer_get' );

予約投稿を解除

<?php function forced_publish_future_post( $data, $postarr ) {
if ( $data['post_status'] == 'future' && $postarr['post_status'] == 'publish' ) {
$data['post_status'] = 'publish';
}
return $data;
}
add_filter( 'wp_insert_post_data', 'forced_publish_future_post', 10, 2 ); ?>

カスタムメニューの設置

１、functions.phpに下記を挿入し、

<?php register_nav_menus(array(
	'gnav' => 'グローバルナビ',
	'sidenav' => 'サイドナビ',
	'footernav' => 'フッターナビ'
)); ?>

２、カスタムメニューを表示させたいテンプレートファイルの任意の位置に下記を挿入。

// グローバルナビ
<?php wp_nav_menu(array('theme_location' => 'gnav','container' => false,'menu_id' => 'gnav')); ?>

// サイドナビ
<?php wp_nav_menu(array('theme_location' => 'sidenav','container' => false,'menu_id' => 'sidenav')); ?>

// フッターナビ
<?php wp_nav_menu(array('theme_location' => 'footernav','container' => false,'menu_id' => 'fnav')); ?>

カスタムヘッダー（ロゴ）の設置

１、functions.phpに下記を挿入し、

<?php $custom_header_params = array(
        'default-image'          => get_bloginfo('template_url').'/img/logo-img.jpg',
        'width'                  => 240,
        'height'                 => 60,
        'header-text'            => false,
);
add_theme_support( 'custom-header', $custom_header_params ); ?>

２、カスタムヘッダーを表示させたいテンプレートファイルに下記を挿入設定。

<?php <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo('name'); ?>" />
 ?>

カスタム背景の設置

１、functions.phpに下記を挿入し、

<?php $custom_background_defaults = array(
        'default-color' => 'ffffff',
        'default-image' => get_bloginfo('template_url') . '/img/back01.jpg',
);
add_theme_support( 'custom-background', $custom_background_defaults ); ?>

２、カスタム背景を表示させる為、bodyタグを下記に変更。

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

コメント欄の「次のHTMLタグが使えます〜」を消す

<?php
add_filter("comment_form_defaults","my_special_comment_after");
function my_special_comment_after($args){
    $args['comment_notes_after'] = '';
return $args;
}
?>

★合わせて読む
⇒ WordPress｜カスタムフィールドで値無記入の場合、項目非表示。
⇒ WordPress｜アイキャッチ画像（サムネイル）を新着記事一覧に表示する方法
WordPressの使い勝手は日進月歩で進化しております。

上記以外にもありますが、私自身もどんどん実績を積み上げ、このページに実践で得たテンプレートタグを追記していければと思います!!