WordPressでサイト作成する際に最低限必要なこと

※別端末に共有するため、途中までのアップ。
※2016-03-26 エスケープ処理を一部追加。
※2019-11-21 wp_enqueue_XXX で使ってた`get_template_directory_uri()`ではなく、4.7から対応した `get_theme_file_uri()`に変更しました。

よく最初に書くこと忘れるので汗　忘れるというよりもどうだったっけってなるので、検索しなくてもいいようにメモを残すといったものです。
関数に関してはCodexを参照すること。

当方はGulpとBowerを使用しているので、端折った書き方をしてる部分もあります。

## style.cssのテンプレート
```
/*
Theme Name: テーマ名
Theme URI: テーマのURL
Author: 作成者名
Author URI: 作成者のURL
Description: 説明書き
Version: バージョンの数値を書く
Text Domain: 言語ファイルで使う名称（必要なければ消しても構わない）
*/
```

## HTMLのMETA周り

```php:index.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo('charset'); ?>">
	<?php wp_head(); ?>
</head>
<body>
	
<?php wp_footer(); ?>
</body>
</html>
```

`<title/>`は`add_theme_support('title-tag')`を使うこと。
また、HTML5で行う場合は`add_theme_support('html5', $array)`で対応を行うこと。`$array`は以下を参考。

```php:functions.php
$array = array(
	'search-form',
	'comment-form',
	'comment-list',
	'gallery',
	'caption'
);
```

## functions.php周り
functions.phpなどで最低限必要なもの
関数内の細かい部分は書きません。その代わりCodexへのリンクを参照できるようにしています。

### テーマのセットアップ
```php:functions.php
add_action( 'after_setup_theme', 'my_theme_setup' );
function my_theme_setup() {
	// titleタグの出力
	add_theme_support( 'title-tag' );
	// HTML5のサポート
	add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
	// アイキャッチのサポート
	add_theme_support( 'post-thumbnails' );
	// Feedのリンク生成をサポート
	// add_theme_support( 'automatic-feed-links' );
	
	// カスタムエディターのCSS（パスは適宜変更してください）
	add_editor_style( array( 'editor-style.css', 'css/font-awesome.css' ) );
	
	// カスタムメニューの使用（add_theme_supportは使わなくても問題ありません）
	register_nav_menus( array(
		'primary' => 'Main Menu',
		'secondary'  => 'Sub Menu',
	) );
}
```

### CSSやJSを読み込む
```php:functions.php
add_action( 'wp_enqueue_scripts', 'my_theme_scripts', 2 );
function my_theme_scripts() {
	// CSS
	/*
	 * 親テーマや子テーマを分ける場合に親のディレクトリから読み取りたい場合は、
	 * get_template_directory_uri()を使う
	 * 子テーマの場合は get_stylesheet_directory_uri()を使う
	 *
	 * 4.7からget_theme_file_uri()が追加されました。
	 */
	wp_enqueue_style( 'myStyleSheetID-Name', get_theme_file_uri('assets/css/mystyle.css') );
	
	/*
	 * style.cssで直接CSSを書いているなら以下で呼び出せる
	 */
	wp_enqueue_style( 'myStyleSheetID-Name', get_stylesheet_uri() );


	// JavaScript
	/*
	 * WordPressのjQueryを使いたくない場合は以下のように設定する
	 * Footerに出力したいなら、バージョンの次の引数をtrueにする
	 */
	wp_deregister_script( 'jquery' );
	wp_enqueue_script( 'jquery', get_theme_file_uri('assets/js/jquery.min.js'), array(), '1.11.3' );  
	
	/*
	 * jQueryを必要とするJavaScriptがあるのならば以下のように紐付けも行う
	 */
	wp_enqueue_script( 'myJavaScriptID-Name', get_theme_file_uri('assets/js/myjavascript.js'), array('jquery') );
	
	/*
	 * 関連性の無い独自のJSなら普通の呼び出しで問題ない
	 */
	wp_enqueue_script( 'myJavaScriptID-Name', get_theme_file_uri('assets/js/myjavascript.js') );
}
```
#### Codex参考
* [関数リファレンス/get_theme_file_uri(en)](https://codex.wordpress.org/Function_Reference/get_theme_file_uri)
* [関数リファレンス/wp_enqueue_style](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/wp_enqueue_style "関数リファレンス/wp enqueue style")
* [関数リファレンス/wp_enqueue_script](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/wp_enqueue_script "関数リファレンス/wp enqueue script")

## エスケープ処理
カスタムフィールドやオプションなどを`echo`等で直接出力するのではなく、文字列のエスケープを必要に応じて必ず行うようにする。



### URLをエスケープさせる
`esc_url()`関数を使用することで、URLの文字列をエスケープ処理します。

```php:sample
// 悪い例①
$url = get_post_meta(get_the_ID(), 'url', true);
echo '<a href="' . $url . '">リンク</a>';

// 悪い例②
<a href="<?php echo get_post_meta(get_the_ID(), 'url', true); ?>">リンク</a>

// 良い例①
$url = get_post_meta(get_the_ID(), 'url', true);
echo '<a href="' . esc_url( $url ) . '">リンク</a>';

// 良い例②
<a href="<?php echo esc_url( get_post_meta(get_the_ID(), 'url', true) ); ?>">リンク</a>
/* ※注１ */

// echo 以外の関数を使う場合もエスケープしましょう。
$url = get_post_meta(get_the_ID(), 'url', true);
printf(
	'<a href="%1$s">%2$s</a>',
	esc_url( $url ),
	'リンク'
);

$link = sprintf(
	'<a href="%1$s">%2$s</a>',
	esc_url( $url ),
	'リンク'
);
echo $link;

```
※注１
出力する際には良い例ですが、直接`get_post_meta`で呼び出すのは、あまりよろしくありません。例ではリンクを出力しているので、この場合にタグだけがでてしまうからです。
`if ( $url = get_post_meta(get_the_ID(), 'url', true) )`など判定を行いましょう。
確実に空判定したい場合は `empty()` 関数を使いましょう。

### HTMLの属性値などをエスケープ
`esc_attr()`関数を使用することで、HTMLタグ等の属性値の文字列をエスケープ処理します。

```php:sample
// 悪い例
$class_name = get_post_meta(get_the_ID(), 'class_name', true);
echo '<div class="' . $class_name . '"></div>';

// 良い例
$class_name = get_post_meta(get_the_ID(), 'class_name', true);
echo '<div class="' . esc_attr( $class_name ) . '"></div>';
```

### HTMLタグをエスケープ処理
`esc_html()`関数を使用することで、HTMLタグ等の文字列をエスケープ処理します。

```php:sample
// 悪い例
$js = '<script>alert("JavaScriptのAlertです");</script>';
echo '<div>' . $js . '</div>';

// 良い例
$js = '<script>alert("JavaScriptのAlertです");</script>';
echo '<div>' . esc_html( $js ) . '</div>';
```
極端な例かもですが、悪い例だとそのままJavaScriptが動いてしまいます。
良い例はエスケープはされますが、文字列としてそのまま画面上に見えてしまいます。

HTMLタグの文字列を表示させたくない場合は、`wp_kses()`関数を使いましょう。
以下より簡単な除去として簡易な説明を書いておきます。

### HTMLタグを除去 wp_kses関数
この関数はしっかりと使ってるわけではないので、詳しくは説明できませんが全てのタグを除去したい場合には、シンプルではないでしょうか。

```php:sample
$html = '<div id="test" onclick="alert(this.id)">HTMLのテスト</div><script>alert("JavaScriptのAlertです");</script>';

// 全てのHTMLタグを除去する場合
wp_kses($html, array());


// 特定のタグや属性を許可する場合
$arrowed_html = array(
	'div' => array(
		'id' => array(),
	)
);
wp_kses($html, $arrowed_html);
/* この場合<div id="test">HTMLのテスト</div>が出力される
　　見た目では、　HTMLのテスト　だけが見える状態かな */
```