※別端末に共有するため、途中までのアップ。
※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周り
<!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は以下を参考。
$array = array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption'
);
functions.php周り
functions.phpなどで最低限必要なもの
関数内の細かい部分は書きません。その代わりCodexへのリンクを参照できるようにしています。
テーマのセットアップ
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を読み込む
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参考
エスケープ処理
カスタムフィールドやオプションなどをecho等で直接出力するのではなく、文字列のエスケープを必要に応じて必ず行うようにする。
URLをエスケープさせる
esc_url()関数を使用することで、URLの文字列をエスケープ処理します。
// 悪い例①
$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タグ等の属性値の文字列をエスケープ処理します。
// 悪い例
$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タグ等の文字列をエスケープ処理します。
// 悪い例
$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関数
この関数はしっかりと使ってるわけではないので、詳しくは説明できませんが全てのタグを除去したい場合には、シンプルではないでしょうか。
$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のテスト だけが見える状態かな */