1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【初心者必見】WordPressテンプレートタグ集|仕事で使えるコピペ用

Last updated at Posted at 2024-02-14

※情報古いのありますm(_ _)m

WordPressテンプレートタグ集!!!

「コピペして使ってね♪」

これまで数多くWordPressでwebサイトを制作してきましたが、過去の実績で使ってきたテンプレートタグを、基本的なタグから便利なタグまで幾つかピックアップ致します。

私自身が一番この記事を参考にする事でしょう(笑)

ブログカスタマイズのテーマ調整だけでなく、WordPressでホームページを作り込みたい人にもおすすめです!

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

私自身がよく使う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('https://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;
}
?>

メディア挿入の際、captionを勝手に入れない設定

<?php
define('CAPTIONS_OFF', true);
add_filter('disable_captions',
create_function('','return true;'));
?>

https://webmobile.jp/
https://wifimobile.jp/

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

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?