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

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

101,159 view 更新日:2015年11月02日
  • はてなブックマーク 450
  • facebook 232
  • Google+ 14
  • Pocket 508
  • twitter
wordpress_tag

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

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

スポンサーリンク

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

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

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

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

インクルードタグ(テーマファイルへ挿入)

プラグイン動作用タグ(ヘッダー用:必須)

<?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が1の場合、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(); ?>

カテゴリーごとに新着エントリー表示(カテゴリー3の最新エントリー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(); ?>

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

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

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

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

<?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 ); ?>

カスタムメニューの設置

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

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

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

// グローバルナビ
<?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')); ?>

カスタムヘッダー(ロゴ)の設置

1、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 ); ?>

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

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

カスタム背景の設置

1、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 ); ?>

2、カスタム背景を表示させる為、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の使い勝手は日進月歩で進化しております。

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

当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

  • はてなブックマーク 450
  • facebook 232
  • Google+ 14
  • Pocket 508
  • twitter
101,159 view 2012年04月23日

後回しにしている買物はありませんか?

webmobile 著者

フリーランスWebデザイナーとして活動をはじめて13年。全国の私を必要としてくれる方々からWordPressでのWeb制作のご依頼を頂いております。

各地のコワーキングスペースやWordPressの勉強会(WordBench、WordCamp)などに顔を出し、様々な人達とご縁をいただき刺激を受け、学んだこと感じたことを、日々のお仕事や自社メディアへの開発・配信にと繋げております。妻、子、プードル2匹と里山暮らし。当ブログは230記事時点で月間120万PV超えを達成しています。コペン乗り。


書き手(webmobile)の紹介 ⇒ 仕事旅

facebookページでも更新情報を発信中♪

スマホ充電器大容量バッテリー
スマートフォンの充電切れ対策に携帯用バッテリーは持っておこう♪

当ブログで公開されているテキスト、画像、イラストなどに関する権利は、当方に帰属します。
著作者の許諾を得ることなく複製、改変、転載、販売、出版など著作権法そのほか法律に触れる行為は禁止されております。

© 2004-16 webmobile ALL COPYRIGHTS RESERVED.