WordPressでサイト作成する際に最低限必要なこと #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周り

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は以下を参考。

functions.php

$array = array(
    'search-form',
    'comment-form',
    'comment-list',
    'gallery',
    'caption'
);

functions.php周り

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

テーマのセットアップ

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を読み込む

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参考

エスケープ処理

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

URLをエスケープさせる

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

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タグ等の属性値の文字列をエスケープ処理します。

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タグ等の文字列をエスケープ処理します。

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関数

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

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のテスト　だけが見える状態かな */