【WordPress】よく使うテンプレートタグ、チートシートを作ってみました。

WP WPオリジナルテンプレート作成チートシートテンプレートタグテンプレートタグチートシートテンプレートタグ一覧ワールドプレス

記事を書くのって大変ですね。
こういったサイトを運営していらっしゃる方特に個人でされてる方には本当に脱帽します。

豊富な知識だけでなく、記事に書き起こすという作業は人にわかりやすくということも含まっているので、かなり勉強になりますが、大変な作業だと思います。

さて、今回は、worldpressのテンプレートをいじるにあたってよく使うテンプレートタグなどのチートシートを一部なんですが、
そしてほぼ、自分用になるんですが作成しました。

他の方も作成していらっしゃる方がいるんですが、
どうにもこうにもやっぱり自分がよく使う使い勝手の良いものが欲しくて…
前々から記事にしたいと思っていました。

他の方の役にも立てれば幸いです。

よく使うテンプレートタグ、チートシート

よく使うテンプレートタグのチートうシートをエクセル、それをPDF化したものをご用意いたしましたので、
ご自由にお使いください。

テンプレートタグ、各解説

ワールドプレス、テンプレートファイル

ワールドプレステンプレートは最小二つのファイルで構成できます。

style.css
index.php

私がテンプレートを作成する場合は、クライアントの要望にもよりますが、最低これだけは用意します。

index.php … メイン、トップページ部分
header.php … ヘッダー部分
footer.php … フッター部分
sidebar.php … サイドバー部分
archive.php … アーカイブ部分
category.php … カテゴリー部分
functions.php … ファンクション（テーマのための関数）部分
page.php … 固定ページテンプレート
single.php … 記事部分テンプレート
style.css … メインスタイルシート

テーマテンプレートファイルの一覧はこちらからも確認できます。

テンプレートファイル別テンプレートタグ

style.css

/*
Theme Name: テンプレートの名前
Theme URI: テーマを使用しているホームサイトのURL
Author: テーマの著者
Author URI: テーマ著者のサイトのURL
Description: テーマの説明
Version: テーマのバージョン
License: テーマのライセンス
License URI: テーマのライセンスのURL
Tags: タグ
Text Domain: テキストドメイン
コメント等/利用許諾の記述等あれば

*/

上記記述したものは、ワールドプレス公式の解説サイトにも記載してありますが、

スタイルシートにこちらの記載がないと、
テンプレートとして認識してくれないので、
インストールしてもエラーが出ますので、
必ずメインスタイルシートの一番上に記載してください。

header.php

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

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>">
<meta name="description" content="<?php bloginfo('description'); ?>" />
<meta name="format-detection" content="telephone=no,address=no,email=no">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link href="<?php bloginfo('stylesheet_url') ?>" rel="stylesheet" type="text/css">

<!-- Othert CSS -->
<link href="<?php bloginfo('template_url'); ?>/css/other.css" rel="stylesheet">

<?php wp_head(); ?>
</head>

<body>

文字エンコーディングの指定

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

ページタイトルの指定

こちらは、WPの[設定＞一般]で設定できる【サイトタイトル】が適応されます。

<?php wp_title(); ?>

ディスクリプションの設定

こちらは、WPの[設定＞一般]で設定できる【キャッチフレーズ】が適応されます。

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

メインスタイルシートのアドレス

<?php echo get_stylesheet_uri(); ?>

テンプレートに入れたその他CSS、js、image等を呼び出す

ディレクトリー URL を表示

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

※テンプレートフォルダ直下のcssフォルダに入れたスタイルシートを呼び出す場合は

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/ファイル名.css" type="text/css" />

※テンプレートフォルダ直下のjsフォルダに入れたスタイルシートを呼び出す場合は

<script src="<?php bloginfo('template_url'); ?>/js/ファイル名.js"></script>

※テンプレートフォルダ直下のimgフォルダに入れたスタイルシートを呼び出す場合は

<script src="<?php bloginfo('template_url'); ?>/img/ファイル名.jpg"></script>

</head>より前に挿入

プラグインはこのアクションフックを使ってスクリプトやスタイルシート、その他の機能を追加する

<?php wp_head(); ?>

footer.php

<footer>

    <div id="copylight"><small>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></small></div>

</footer>


<!-- other js -->
<script src="<?php bloginfo('template_url'); ?>/js/other.js"></script>

<!--<?php
global $template;
$template_name = basename($template, '.php');
echo $template_name;
?>-->

<?php wp_footer(); ?>
</body>
</html>

</body>より上に挿入

<?php wp_footer(); ?>

Copyright

年に関して

<?php echo date('Y'); ?>

※2014年から現在にしたい場合

2014-<?php echo date('Y'); ?>

コピーライト付きでブログ名を入れる

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

どのテンプレートが使用されているか出力する

<?php
global $template;
$template_name = basename($template, '.php');
echo $template_name;
?>

これは別にいらないっちゃいらないんですが、
テンプレートがちゃんと機能しているのか確認するためだけに入れています。
いらないときはコメントアウトで消しています。

一覧

インクルードタグでヘッダー部分を読み込む

<?php get_header(); ?>

インクルードタグでサイドバー部分を読み込む

<?php get_sidebar(); ?>

この場合、function.phpに下記記述が必要です。

//sidebarを使用

 register_sidebar();

インクルードタグでフッター部分を読み込む

<?php get_footer(); ?>

インクルートパーツを入れる

 <?php get_template_part('フォルダ名/ファイル名'); ?>

固定ページコンテンツを読み込む

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

 <h1><?php the_title(); ?></h1>

 <?php the_content(); ?>

<?php endwhile; else : ?>
 <p><?php _e( '記事がありません' ); ?></p>
<?php endif; ?>

基本ループ

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

 //ここにループの内容を記述

<?php endwhile; else : ?>
 <p><?php _e( '記事がありません' ); ?></p>
<?php endif; ?>

固定ページ/記事のタイトル

<?php the_title(); ?>

固定ページ/タイトル文字数を指定

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

固定ページ/記事の内容

<?php the_content(); ?>

アイキャッチ画像

 <?php the_post_thumbnail(); ?>

アイキャッチ画像にクラスを付ける

 <?php the_post_thumbnail( '', array( 'class' => 'クラス名' ) ); ?>

アイキャッチ画像のサイズ指定

the_post_thumbnail();   
// パラメータなし -> 'post-thumbnail'

the_post_thumbnail( 'thumbnail' );
// サムネイル (デフォルト 150px x 150px :最大値...メディアで指定可能)

the_post_thumbnail( 'medium' );
// 中サイズ   (デフォルト 300px x 300px :最大値 ...メディアで指定可能 )

the_post_thumbnail( 'large' );
// 大サイズ   (デフォルト 640px x 640px :最大値 ...メディアで指定可能 )

the_post_thumbnail( 'full' );
// フルサイズ (アップロードした画像の元サイズ)

the_post_thumbnail( array( 100, 100 ) );  // 他のサイズ

アイキャッチ画像はメディアで設定したもの以外のサイズを任意で作成することができます。

アイキャッチ画像がない場合他の画像を使う

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

        <?php the_post_thumbnail('thumbnail'); ?>
　　　　//アイキャッチの指定
    <?php else : ?>

        <img src="画像URL">
　　　　//アイキャッチがない場合代わりになる画像の指定
    <?php endif ; ?>
<?php endwhile; endif; ?>

抜粋

 <?php the_excerpt(); ?>

抜粋の文字数を指定

 <?php echo mb_strimwidth(get_the_excerpt(), 0, 55, "…", "UTF-8"); ?>

日時取得（同じ日付はページ内一つしか表示できない）

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

日時取得（同じ日付をページ内何度でも表示できる）

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

ページのパーマリンク

<?php the_permalink(); ?>

カテゴリー

<?php the_category(); ?>

空白を使ってカテゴリーを区切る

<?php the_category(' '); ?>

コンマで区切る

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

中点で区切る

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

リンク無しカテゴリー

<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>

特定のカテゴリーを除外して表示

<?php
 $cats = get_the_category();
 $exclude = array(1,3,5);//ここに除外したいカテゴリーIDを入れる。複数可能。コンマで区切る
 foreach((array)$cats as $cat){
 if(!in_array($cat->cat_ID, $exclude)){
 echo '<a href="' . get_category_link($cat->cat_ID) . '">' . $cat->cat_name . '</a>';
 }
 } ?>

現在のカテゴリーID、NAMEを取得・表示

<?php
$category = get_the_category(); 
echo $category[0]->cat_name;
?>

リンク付きタグ出力（）

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

よく使われているタグを出力

<?php $args = array(
'smallest'                  => 12,
'largest'                   => 12,
'unit'                      => 'px',
'number'                    => 20,
'format'                    => 'list',
'separator'                 => "",
'orderby'                   => 'name',
'order'                     => 'RAND',
'exclude'                   => null,
'include'                   => null,
'topic_count_text_callback' => default_topic_count_text,
'link'                      => '',
'taxonomy'                  => 'post_tag',
'echo'                      => true,
'child_of'                  => null, // 注を参照
); ?>
<?php wp_tag_cloud( $args ); ?>

page.php

<?php get_header(); ?>
<?php <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <h1><?php the_title(); ?></h1>
  <?php the_content(); ?>
 <?php endwhile; else : ?>
  <p><?php _e( '記事がありません' ); ?></p> <?php endif; ?>
 <?php get_footer(); ?>

固定ページテンプレート名を設定

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

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

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

 <h1><?php the_title(); ?></h1>

 <?php the_content(); ?>

<?php endwhile; else : ?>
 <p><?php _e( '記事がありません' ); ?></p>
<?php endif; ?>

<?php get_footer(); ?>

single.php

<?php get_header(); ?>
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <h1><?php single_post_title(); ?></h1>
  <?php the_content(); ?>
 <?php endwhile; else : ?>
  <p><?php _e( '記事がありません' ); ?></p>
 <?php endif; ?> <?php get_footer(); ?>

single.phpのタイトルを表示

個別記事ページでループ外に記事のタイトルを出力します。このタグはループの外に投稿のタイトルを表示する場合に便利です。

<?php single_post_title(); ?>

テンプレートタグ/single post title
WP codex
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/single_post_title

archive.php

<?php get_header(); ?><?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <h1><?php the_archive_title(); ?></h1>
 //loop
<?php endwhile; else : ?>
 <p><?php _e( '記事がありません' ); ?></p>
<?php endif; ?>
<?php get_footer(); ?>

アーカイブファイル優先順位

archive-{post_type}.php – 投稿タイプがproduct ならば WordPress は archive-product.php を探す。
archive.php
index.php

アーカイブページタイトル

<?php the_archive_title(); ?>

タイトルの前にタグ（h1）を挿入

<?php the_archive_title( '<h1>', '</h1>' ); ?>

関数リファレンス/the archive title
WP codex
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/the_archive_title

category.php

<?php get_header(); ?>

<h1><?php single_cat_title(); ?></h1>

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

 //loop

<?php endwhile; else : ?>
 <p><?php _e( '記事がありません' ); ?></p>
<?php endif; ?>

<?php get_footer(); ?>

カテゴリーファイル優先順位

category-{slug}.php – カテゴリーのスラッグが news ならば WordPress は category-news.php を探す。
category-{id}.php – カテゴリー ID が 6 ならば WordPress は category-6.php を探す。
category.php
archive.php
index.php

カテゴリーページタイトル

<?php single_cat_title(); ?>

※この関数が使えるのはループの外側においてのみ

テンプレートタグ/single cat title
WP codex
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/single_cat_title

Category

Archive