WordPress「テンプレートタグ」について

# はじめに
・WordPres初心者〜中級者。
・WordPressのカスタムテンプレートを作成したい方。
・WordPressのテンプレートタグについて、よく分からない方

## テンプレートタグとは
テンプレートタグとは**`「blgoinfo('パラメータ')」`**のような記述をし、管理画面で作成した値など（サイトのタイトルや、サイトのキャッチフレーズ）をパラメータに応じて表示するための、WordPessで使用できる関数の一種です。

## テンプレートタグのパラメータ
テンプレートタグには、あらかじめパラメータが用意されています。パラメータを設定することで、そのパラメータに応じた値を表示できます。

※以下は、パラメータをまとめたものです。

|パラメータ|詳細|
|:---:|:---:|
|name|サイトのタイトル|
|description|サイトのキャッチフレーズ|

######サンプルコード（サイトのタイトルを表示）

```php:index.php
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>WordPressテンプレートタグ</title>
	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
</head>
<body>
	<div class="header_name">

		<!-- パラメータをnameに設定し、サイトのタイトルを表示 -->
		<h1><?php bloginfo('name')?></h1>
	</div>
	<img src="<?php echo get_template_directory_uri(); ?>/images/wordpress.jpg">
</body>
</html>
```

```css:style.css
/*
Theme Name : WordPress
*/

.header_name {
	text-align: center;
}

img {
	width: 100%;
}
```
※実行結果
![スクリーンショット 2021-04-20 19.07.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1110232/5e78df56-799f-9311-a670-75fed45e6239.png)


######サンプルコード（サイトのキャッチフレーズを表示）

```php:index.php
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>WordPressテンプレートタグ</title>
	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
</head>
<body>
	<div class="header_description">

		<!-- パラメータをdescriptionに設定し、サイトのキャッチフレーズを表示 -->
		<h1><?php bloginfo('description')?></h1>
	</div>
	<img src="<?php echo get_template_directory_uri(); ?>/images/wordpress.jpg">
</body>
</html>
```

```css:style.css
/*
Theme Name : WordPress
*/

.header_description {
	text-align: center;
}

img {
	width: 100%;
}
```
※実行結果
![スクリーンショット 2021-04-20 19.10.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1110232/c72e49b2-9ff6-6b79-eb59-8225ca7cb9e5.png)



### その他のテンプレートタグ

その他の主なテンプレートは以下になります。

|テンプレートタグ|パラメータ|詳細|
|:---:|:---:|:---:|
|home_ur|path, scheme（pathは、ホームURLからの相対パス（省略可）。schemeは、http,httpsなど（省略可））|トップページのリンクを取得|
|body_class|クラス名の文字列など。（省略可）|bodyタグと異なるクラスを、WordPressのルールに基づいて割り当てる|

######サンプルコード（トップページのリンクを取得）


```php:index.php
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>WordPressテンプレートタグ</title>
	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
</head>
<body>
	<div class="header_home_url">

		<!-- home_urlを使用し、トップページのリンクを表示 -->
		<h1><a href="<?php echo home_url();?>">トップページのリンク</a></h1>
	</div>
	<img src="<?php echo get_template_directory_uri(); ?>/images/wordpress.jpg">
</body>
</html>	
```

```css:style.css
/*
Theme Name : WordPress
*/

.header_home_url {
	text-align: center;
}

img {
	width: 100%;
}
```
※実行結果
![スクリーンショット 2021-04-20 19.02.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1110232/0b3f307d-2752-bb34-05b1-3787fef76269.png)

######サンプルコード（bodyタグのclass属性を表示）

```php:index.php
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WordPressテンプレートタグ</title>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
</head>

<!-- body_classを使用し、bodyタグのclass属性を表示 -->
<body><?php body_class(); ?>>
    <img src="<?php echo get_template_directory_uri(); ?>/images/wordpress.jpg">
</body>
</html> 
```

```css:style.css
/*
Theme Name : WordPress
*/

body {
    text-align: center;
    font-size: 45px;
}

img {
    width: 100%;
}
```

※実行結果
![スクリーンショット 2021-04-20 22.01.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1110232/451977e4-25be-c3bd-98eb-92495b6f30bd.png)

## まとめ
・テンプレートタグとはWordPress関数の一種で、パラメータに応じて値を表示したり、取得することができる。

・**`「blgoinfo('パラメータ')」`**は、サイトのタイトルやキャッチフレーズを表示する。パラメータは、**`name`**と**`description`**になる。

・**`home_url`**は、トップページのリンクを取得できる。

・**`body_class`**はbodyタグと異なるクラスを、WordPressのルールに基づいて割り当てることができる。