WEB技術

知らないとテーマが作れない！5分で学ぶwordpress テンプレートタグ一覧

  /

こちらの記事は随時更新したいと思います。

テンプレートタグとは

ワードプレスの独自タグをテンプレートタグと言います。

通常のPHPも知っていた方がいいので
https://logzitsu.tlog.work/wp-php/
こちらを見てください。この記事の内容の意味がわかればギリギリなんとかなるかも。

よく使うものを知っておきましょう。
テンプレートタグの傾向
get となっているものは取得。
the となっているものは出力までしてくれます。(ehco 不要)

構築時に必要となるもの

テーマスタイルシートの場所（cssと画像のパス）

<?php echo get_stylesheet_directory_uri(); ?>

使用例

<!-- 画像に使う場合こんな感じ -->
<img class="img-fluid" src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png">

<!-- スタイルシート読み込みはこんな感じ -->
<link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet">

<!-- JavaScript読み込みはこんな感じ -->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/script.js"></script>

サイト情報

// サイトのタイトル
<?php bloginfo( "name" ); ?>

// サイトのサブタイトル
<?php bloginfo( "description" ); ?>

サイトURL

<?php echo home_url(); ?>

使用例

<!-- トップへのリンク -->
<a href="<?php echo home_url(); ?>">TOPページへ</a>

WPで必要な css / js などを出力してくれるやつ

header.phpの「headタグ内の一番下」に追加

<?php wp_head(); ?>

WPで必要な htmlを出力してくれるやつ

footer.phpの「bodyタグ内の一番下」に追加

<?php wp_footer(); ?>

bodyにページ別のクラスをつける

これがついてるかついてないかで扱いやすさに雲泥の差がでますので忘れずつけましょう。

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

パーツ系

パーツを読み込む時に使います。

<?php get_header(); ?>
<?php get_footer(); ?>
<?php get_sidebar(); ?>
<?php get_template_part( パーツの名前 ); ?>

特定のテンプレートのみでCSS/JSの読み込み

テンプレートのヘッダー読み込みの上あたりに足すと読み込んでくれます。
以下はテーマフォルダ内の
「css/custom.css」 「js/custom.js」を参照する場合です。
最初の引数はidになるので、識別しやすいわかりやすい名前をつけるといいです。
読み込む順番を自邸することもできますがここでは割愛。

<?php wp_enqueue_style( 'page-css', get_stylesheet_directory_uri() . '/css/custom.css'); ?>
<?php wp_enqueue_script( 'page-script', get_stylesheet_directory_uri() . '/js/custom.js' ); ?>

ループ関連

メインループ(省略形)

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



<?php //別の書き方
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post(); 
		//
		// 投稿がここに表示される
		//
	} 
}
?>

サブループ(例)

<?php
$args = array( 
'post_type' => 'post', // カスタムポスト名
'posts_per_page' => 5 // 投稿件数の指定
);
$the_query = new WP_Query($args);
if($the_query->have_posts()):
?>
<?php while ($the_query->have_posts()): $the_query->the_post(); ?>

<!-- 記事タイトル -->
<?php the_title(); ?>

<!-- 記事内容 -->
<?php the_content(); ?>

<!-- 記事リンクURL（タイトル付き） -->
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>

<!-- 日付 -->
<?php the_time("Y.m.d"); ?>

<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: //投稿がない場合 ?>

<?php endif; ?>

ループ内で使うもの

記事タイトル

「ループ内で使うもの」の欄でいきなりですが、これはループ外でも動きます。

<?php the_title(); ?>

記事内容

<?php the_content(); ?>

サムネイル

<!-- 普通に出す -->
<?php the_post_thumbnail(); ?>

<!-- サイズを指定する(独自設定可) -->
<?php the_post_thumbnail("thumbnail"); ?>
<?php the_post_thumbnail("medium"); ?>
<?php the_post_thumbnail("large");?>
<?php the_post_thumbnail("full"); ?>
<?php the_post_thumbnail("index_thumbnail");  //設定していれば任意の名前 ?>

<!-- 画像がない時になんか表示する -->
<?php 
if(has_post_thumbnail()){
the_post_thumbnail();
}else if{  ?>
<!-- 代わりの画像 -->
<img src="default.png" alt="画像設定されとらんが">
<?php } ?>

<!-- bootstrap用 -->
<?php the_post_thumbnail( 'full', array('class' => 'img-fluid') ); ?>

<!-- ファイルパスのみ出力 -->
<?php echo get_the_post_thumbnail_url (); ?>

記事リンクURL

<?php the_permalink(); ?>

カスタムフィールド(ACF)の出力

カスタムフィールドを便利に使えるプラグインを使った場合の出力です。

advancedcustomfields

<?php the_field('カスタムフィールド名'); ?>


//繰り返しフィールド(スライダ)
<div class="slide">
<?php if(have_rows('repeater_field_names')): ?>
<?php while(have_rows('repeater_field_names')): the_row(); ?>
<div class=""><a href="<?php the_sub_field('sub_field_names'); ?>">

<?php
$image = wp_get_attachment_image_src(get_sub_field('img_cf'), 'full');
?>
<img src="<?php echo $image[0]; ?>" alt="" />
</a></div>
<?php  endwhile;else :endif; ?>

次の記事、前の記事

ループ外側に設置してください。

<!-- 個別記事 -->
<?php previous_post_link(); ?>
<?php next_post_link(); ?>

<!-- 一覧ページ -->
<?php previous_posts_link(); ?>
<?php next_posts_link(); ?>

WP-PageNavi プラグインのページ送り

WP-PageNavi

<?php wp_pagenavi(); ?>

カテゴリー

<!-- カテゴリー -->
<?php the_category(); ?>

<!-- タグ -->
<?php the_tags(); ?>

日付

上の方を使うとアーカイブ一覧で同日の日付は出力されない。出力したい場合は下を利用。

<!-- 日付 -->
<?php  the_date(); ?>

<!-- 時間 -->
<?php  the_time(); ?>

パンクズリスト

https://ja.wordpress.org/plugins/breadcrumb-navxt/ 
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
  <?php if(function_exists('bcn_display'))
  {
   bcn_display();
  }?>
</div>

functions.phpで使うもの

//テーマでthumbnailをサポートする
add_theme_support( 'post-thumbnails' );

//新たに画像サイズを追加する
add_image_size( 'original-size', 500, 300,true); 

//ページ送りにclassを追加する(一覧)
add_filter( 'previous_posts_link_attributes', 'add_prev_posts_link_class' );
function add_prev_posts_link_class() {
  return 'class="prev"';
}
add_filter( 'next_posts_link_attributes', 'add_next_posts_link_class' );
function add_next_posts_link_class() {
  return 'class="next"';
}

//ページ送りにclassを追加する(個別)
add_filter( 'previous_post_link', 'add_prev_post_link_class' );
function add_prev_post_link_class($output) {
  return str_replace('<a href=', '<a class="prev" href=', $output);
}
add_filter( 'next_post_link', 'add_next_post_link_class' );
function add_next_post_link_class($output) {
  return str_replace('<a href=', '<a class="next" href=', $output);
}

参考：https://www.nxworld.net/wordpress/wp-add-class-previous-posts-link-and-next-posts-link.html

こちらの記事もおすすめ！