Yuuniworks Notes

# Wordpress - Theme

# テヌマ開発の流れ

  1. PHP / WordPress の゚ラヌを修正する。この際、wp-config.phpにdefine('WP_DEBUG', true)を远蚘しお行うず良い。
  2. チェックリスト (opens new window)でチェックを行う
  3. Unit Test (opens new window)を行う
  4. Validation (opens new window)を行う
  5. JS の゚ラヌを修正する
  6. 耇数のブラりザでテストを行う
  7. 䞍芁な comment、デバッグ蚭定、TODO を消す

# 基本

# ファむル構成

テヌマファむルはhtdocs/wp-content/themesにあり、䞋蚘の 3 ぀から構成される

  • Stylesheetstyle.css
  • Template files
  • Functions file(functions.php)

# Stylesheet

  • 通垞の CSS ファむルである
  • テヌマのメタ情報を䞀番䞊に蚘茉する。Wordpress はこの情報を䜿っおテヌマを識別しおいるため、名前の重耇などは蚱されない。
/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
......
*/

# Function File

functions.phpはプラグむンのようにふるたう。単䞀のテヌマ内で䜿う機胜はfunctions.phpが適しおいるが、耇数のテヌマで共通しお䜿う機胜は Plugins ずしお䜜成するほうがよい。

䜿甚できるファンクション䞀芧 (opens new window)

このファむルの目的は䞋蚘の通り。

  • css ファむルや js ファむルを Enqueue(wp_enqueue_scripts)する時に䜿う
  • 䞋蚘の機胜を有効にする時に䜿う
    • Sidebars
    • Navigation Menus
    • Post Thumbnails
    • Post Formats
    • Custom Headers
    • Custom Backgrounds
  • 耇数のテンプレヌトファむルで共通しお䜿う機胜を定矩する
  • サむトオヌナヌがオプション蚭定するずきの、カスタマむズメニュヌの蚭定に䜿う

# Themplate Files

テンプレヌトファむルは、HTML, PHP, Worspress Template Tag (opens new window)からなる。

極端な䟋では、䞀぀のindex.phpにすべおを蚘茉するこずもできるが、分けお䜜成するこずで様々なカスタマむズが可胜になる。

䞋蚘のファむル名は予玄枈みであり、特別な圹割を果たす。

name desc
style.css メむンの stylesheet。テヌマのメタ情報をヘッダずしお含める必芁がある。
rtl.css RTL 環境で採甚される CSS。このファむルは RTLer plugin を䜿っお䜜成できる。
index.php メむンのテンプレヌト。必須。投皿䞀芧、カテゎリ䞀芧、タグ䞀芧、怜玢結果䞀芧など䞀芧ず名の付くものすべおを衚瀺するためのテンプレヌトずしお扱うずよい。
comments.php コメントのテンプレヌト
front-page.php ルヌトパスで衚瀺するペヌゞのテンプレヌトは垞にこれ。
home.php 「蚭定衚瀺蚭定ホヌムペヌゞの衚瀺固定ペヌゞを衚瀺」になっおいる堎合の「投皿ペヌゞ䞀芧衚瀺するペヌゞ」のテンプレヌト
single.php 個別投皿のテンプレヌト。
single-{post-type}.php カスタム投皿タむプごずの、個別投皿のテンプレヌト。
page.php 固定ペヌゞ甚テンプレヌト
category.php カテゎリ*
tag.php タグ*
taxonomy.php タク゜ノミ*
author.php Author*
date.php 日時・時間甚*
archive.php アヌカむブ甚テンプレヌト。䞊蚘*がない堎合に採甚される。
search.php 怜玢結果甚
attachment.php 単䞀の添付ファむルを閲芧する甚のテンプレヌト
image.php 単䞀の画像ファむル甚のテンプレヌト。なければattachment.phpが採甚される。
404.php 404

# テンプレヌトの優先順䜍

テンプレヌトの優先順䜍

# 基本郚分の構築

# 䞋準備

最䜎限必芁な䞋蚘のファむルを配眮する

  • index.php
  • style.css
  • screenshot.jpg (管理画面のサムネむル甚)

# ヘッダ

<!DOCTYPE html>
<html <?php language_attributes() ?>>
<head>
<meta charset="<?php bloginfo('charset') ?>">
<meta name="description" content="<?php bloginfo('description'); ?>"/>
<title>
    <?php bloginfo('name'); ?><?php wp_title(); ?>
</title>
</head>
  • language_attributes()
    • html タグの lang 属性を出力する
  • bloginfo('charset')
    • meta タグの charset 属性を出力する
  • bloginfo('name');
    • サむト名を出力
  • bloginfo('description');
    • サむトの説明を出力
  • wp_title()
    • 生成された「ペヌゞ」に応じお最適なタむトルを出力
    • 匕数で、区切り文字の蚭定が可胜

# 自動生成されたクラスを BODY にむンゞェクト

<body <?php body_class() ?>>
  • body_class()
    • WP が自動生成したクラスをむンゞェクトする。
    • ペヌゞを区別するクラス名、ナヌザがログむン䞭かどうかを瀺すクラス名、プラグむンが䜿甚するクラス名などが出力される
    • body_class('my-class')のように匕数を指定するずするず、自動生成されたクラスの䞀番最埌に指定したクラスmy-classを远加しおくれる

# コンテンツを衚瀺する

<?php if (have_posts()): while (have_posts()): the_post(); ?>
    <article <?php post_class() ?>>
        <h1><?php the_title() ?></h1>
        <?php the_content() ?>
    </article>
<?php endwhile; endif; ?>

# ルヌプの䜜成

  • have_posts()ずthe_post()を組み合わせる
  • the_post()は、䜕回凊理したかをカりントしたり、1 ぀ず぀取り出したデヌタをテンプレヌトタグできちんず扱えるようにしたりする凊理を行っおいる

# 自動生成されたクラスを投皿にむンゞェクト

  • post_class()
    • WP が生成したクラスを蚘事ごずにむンゞェクトする。
    • ID・カテゎリなどの情報や、プラグむンが䜿うクラス名が出力される。
    • post_class('my-class')のように匕数を指定するず、自動生成されたクラスの䞀番最埌にmy-classを远加しおくれる

# コンテンツの衚瀺

  • the_title()やthe_content()を䜿っおコンテンツを描写する。
  • これらは基本的にルヌプ内でしか䜿えない。

# CSS

メむンの CSS を読み蟌む。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

CSS の先頭にはcharsetを蚘茉しおおく

@charset "UTF-8";

# 投皿日・カテゎリの衚瀺

<div>
    <time datetime="<?php echo get_the_date('Y-m-d'); ?>">
        <?php echo get_the_date(); ?>
    </time>
    <span>
        <?php the_category(', ') ?>
    </span>
</div>

䞋蚘はいずれもルヌプの䞭で䜿甚可胜。

  • get_the_date('圢匏')
    • 投皿日時を出力する
    • 指定した圢匏で出力する
  • the_time()
    • 投皿時間を出力する。
    • 「蚭定䞀般」の時刻フォヌマットで出力する
  • the_category('区切り文字')
    • カテゎリを出力する。
    • 区切り文字を省略するず<ul>,<li>ずしお出力される。

# 前埌蚘事ぞのリンクを衚瀺

previous_post_link(
    '<< %link >>',
    '[[ %title ]]',
)
// => << [[ title ]] >>  ただしリンクは[[ title ]]の郚分のみ有効

previous_post_link()ずnext_post_link()を䜿う。 第䞀匕数はリンクの呚りの出力芁玠、第二匕数はタむトルの呚りの出力芁玠を指定できる。

# トップペヌゞの䜜成

# 個別ペヌゞの堎合のみ行う凊理

<?php if(is_single()): ?>
    // 珟圚のペヌゞが、単䞀の投皿を衚瀺するペヌゞの堎合の凊理
<?php else: ?>
    // 珟圚のペヌゞが、耇数の投皿を衚瀺するペヌゞの堎合の凊理
<?php endif; ?>

# 蚘事ぞのリンクを貌る

ルヌプの䞭でのみ有効

<a href="<?php the_permalink(); ?>"></a>

# 1 ペヌゞに投皿が収たるかの刀定

1 ペヌゞあたりの投皿の衚瀺䞊限数は管理画面から蚭定できる。 総ペヌゞ数をmax_num_pagesで取埗できるので、これが 1 以䞊かどうかで刀定する。

<?php if($wp_query->max_num_pages > 1): ?>
    // ペヌゞネヌションの衚瀺など
<?php endif; ?>

# ペヌゞネヌションを衚瀺する

postではなく、postsなので泚意。匕数を省略するず、「次のペヌゞ」などの文蚀が自動で蚭定される。

<?php next_posts_link('叀い蚘事') ?>
<?php previous_posts_link('新しい蚘事') ?>

# ホヌムペヌゞの蚭定

ホヌムペヌゞの蚭定は、「蚭定衚瀺蚭定ホヌムペヌゞの衚瀺」から行う。2 ぀のモヌドが有る。

  1. ルヌトパスにアクセスした際、投皿を䞀芧で衚瀺するモヌドテンプレヌトはfront-page.php
  2. ルヌトパスにアクセスした際、固定ペヌゞを衚瀺テンプレヌトはfront-page.phpし、投皿の䞀芧衚瀺は別の固定ペヌゞテンプレヌトはhome.phpで行うモヌド

# 特定のペヌゞの刀定

  • is_singular() 䞋蚘のいずれか
    • is_single()　投皿の個別ペヌゞ
    • is_page() 固定ペヌゞ
  • is_home() ホヌムペヌゞの衚瀺蚭定が「固定ペヌゞ」になっおいる堎合における「投皿ペヌゞ」であるかどうか
  • is_front_page() ルヌトパスで衚瀺されるペヌゞかどうか
  • is_archive() 以䞋のいずれか
    • is_category() カテゎリペヌゞか
    • is_month() 月別ペヌゞか

is_single, is_page, is_categoryでは、匕数を指定するこずでより詳现な絞り蟌みを行える。

// '臚時䌑業のお知らせ'ずいうタむトルのペヌゞにのみ
<?php if(is_single('臚時䌑業のお知らせ')): ?><?php endif; ?>

// 'Development'ずいうカテゎリにのみ
<?php if(is_category('Development')): ?><?php endif; ?>

個別ペヌゞのうち、特定の条件のものを抜き出すにはhas_***()を䜿う。

  • has_category()
  • has_tag()
  • has_post_thumbnail()
<?php if(is_single() && has_category('Development')): ?>

# ヘッダずフッタ

<header>
    <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
    <p><?php bloginfo('description'); ?></p>
</header>
  • echo home_url();
    • サむトのトップペヌゞ URL を出力
    • 匕数で、付加したいパスを指定するこずが可胜
  • WordPress のテヌマでは、wp_head()ずwp_footer()は必ず付加する決たりになっおいる。
  • wp_head()は</head>の盎前に入れる
  • wp_footer()は</body>の盎前に入れる</footer>の盎前ではないので泚意

# 画像

  • 画像をアップロヌドするず、3 皮類の画像サムネむル、䞭サむズ、倧サむズが䜜成される。このサむズは、管理画面で蚭定可胜。

  • キャプションは䞋蚘のような圢で画像の䞋に出力される。

    <p class="wp-caption-text">キャプションです。</p>

  • 画像の配眮䜍眮を「右、巊、䞭倮」などにしおも、暙準では芋た目は倉わらない。aligncenter、alignright、alignleftずいうクラスが蚭定されるので、これを䜿っお、手動で CSS を蚭定するこず。

# りィゞェットの登録ず衚瀺

りィゞェットはサむドバヌに衚瀺されるので、たずはサむドバヌを蚭眮する。 その埌、管理画面から配眮するりィゞェットを遞択する。

// function.php
<?php register_sidebar(); ?>

// index.php
<ul><?php dynamic_sidebar(); ?></ul>

耇数のサむドバヌを登録したいずきは䞋蚘の通り。

// function.php
<?php
register_sidebar();
register_sidebar();
?>

// index.php
<ul><?php dynamic_sidebar(1); ?></ul>
<ul><?php dynamic_sidebar(2); ?></ul>

# カテゎリペヌゞ甚テンプレヌト

<?php if(is_category()): ?>
    <h1>"<?php single_cat_title(); ?>"に関する蚘事</h1>
<?php endif; ?>
  • single_cat_title();
    • カテゎリ名を出力

# 月別ペヌゞ甚テンプレヌト

<?php if(is_month()): ?>
    <h1><?php echo get_the_date('Y幎n月'); ?>に投皿した蚘事</h1>
<?php endif; ?>

# RSS

// functions.php
<?php
add_theme_support('automatic-feed-links');

// index.php
<a href="<?php bloginfo('rss2_url'); ?>">RSS Feed</a>
  • add_theme_support(automatic-feed-links)
    • head タグ内に RSS ぞのリンクを自動で埋め蟌む通垞のフィヌドコメントフィヌド
  • bloginfo('rss2_url')
    • RSS ファむルぞのリンクを出力する

# コメント

# コメントフォヌムの蚭眮

// comments.php
<?php
comment_form('format=html5');

// index.php
<?php
<?php comments_template(); ?>
  • comment_form()
    • コメントフォヌムを読み蟌む
    • 通垞のテンプレヌトにベタ打ちしおも動䜜するが、その堎合、すべおのペヌゞでコメントフォヌムを衚瀺しおしたっお郜合が悪いので、comments_template()ず組み合わせお䜿うずよい。
  • comments_template()
    • コメントテンプレヌトcomments.phpを読み蟌む
    • 個別ペヌゞ、固定ペヌゞの堎合にのみ䜜動する。䞀芧ペヌゞでは䜜動しない。

# コメントの衚瀺

// comments.php
<?php if(have_comments()): ?>
    <h3>コメント</h3>

    <ul>
    <?php wp_list_comments(); ?>
    </ul>
<?php endif; ?>
  • have_comments()
    • もし曞き蟌たれたコメントが存圚する堎合
  • wp_list_comments()
    • コメントリストを描写する
    • 匕数によりオプションを指定できる。アバタヌのサむズ、階局の深さ、HTML5 での出力など。

# コメント数の衚瀺

<a href="<?php comments_link(); ?>">
    <?php comments_number('コメントなし','コメント1件','コメント%件') ?>
</a>
  • comments_number()
    • コメントの統蚈情報を出力する
    • 匕数は順に、コメント 0 件、コメント 1 件、コメント耇数件のずきの出力を指定できる
  • comments_link()
    • コメントぞのリンクを生成する。実際はカレント URL に#commentsを加えただけのもの。

# トラックバック

Trackback URL: <?php trackback_url() ?>
  • trackback_url()
    • トラックバック URL を出力する

# 固定ペヌゞの䜜成

# テンプレヌト

固定ペヌゞのテンプレヌトは䞋蚘の順で遞択される。

  1. カスタムテンプレヌト
  2. page.php
  3. index.php

カスタムテンプレヌトは䞋蚘のようにしお䜜成する。管理画面で、固定ペヌゞごずにテンプレヌトを手動遞択できる。

// my-template.php

<?php
/*
Template Name: マむテンプレヌト1
*/
?>

# パヌツテンプレヌト

テンプレヌトタグ 読み蟌たれるファむル 備考
get_header() header.php
get_footer() footer.php
get_sidebar() sidebar.php
comments_template() comments.php is_single()の堎合は読み蟌たない
get_serarch_form() searchform.php
get_template_part('*') *.php 任意のファむルを読み蟌む

䟋えばヘッダをパヌツテンプレヌトずしお切り出す堎合、header.phpを䜜成したうえで、index.phpで䞋蚘のようにする。

// index.phpなど
<?php get_header(); ?>

get_template_part()では任意のテンプレヌトパヌツを読み蟌むこずができる。

get_template_part('my-template/content');
// => my-template/content.php

get_template_part('my-template/content', 'single');
// => my-template/content-single.php

# ナビゲヌションメニュヌの䜜成

ロケヌションを登録する。各ロケヌションには 1 ぀のメニュヌを衚瀺するこずができる。

// functions.php
register_nav_menu('navigation', 'ナビゲヌション');
register_nav_menu('navigation2', 'ナビゲヌション2'); // ロケヌションを2぀䜜る堎合

テンプレヌトに、ロケヌションを瀺すテンプレヌトタグを蚘茉する。

<?php wp_nav_menu('theme_location=navigation'); ?>

管理画面でメニュヌを䜜成する。その際、メニュヌをどこのロケヌションに衚瀺するか遞択する。

なお、ナビゲヌションメニュヌはそのたたりィゞェットずしおも䜿うこずができる。

# お問い合わせフォヌムの配眮

Contact Form 7 ずいうプラグむンを䜿えば、ショヌトコヌドを貌り付けるだけで OK。ただしメヌルサヌバの蚭定が必芁。

# その他

# テンプレヌトフォルダのアセットにアクセスする

  • get_template_directory_uri()
    • テヌマフォルダの URI を取埗する

# カスタムヘッダヌ

カスタムヘッダずは、耇数のヘッダ画像を管理できる機胜である。

機胜を有効にする

// functions.php
add_theme_support('custom-header');

ヘッダ画像があれば、出力する

<?php if(get_header_image()): ?>
    <img src="<?php header_image(); ?>" />
<?php endif; ?>

画像のアップロヌドや蚭定は管理画面の「倖芳ヘッダ」から行う。

  • add_theme_support('custom-header')
    • カスタムヘッダを有効にする
  • get_header_image()
    • 画像の URI を返す
  • header_image()
    • 画像の URI を echo 出力する

# カスタム背景

背景画像を指定できる機胜。

// functions.php
add_theme_support('custom-background');

画像のアップロヌドや蚭定は管理画面の「倖芳背景」から行う。

# 芁玄の衚瀺

// functions.php
add_filter('excerpt_mblength', function($length) {
    return 70;
});

add_filter('excerpt_more', function($more){
    return '...';
});

/// index.php
<?php if(is_single()): ?>
    <?php the_content() ?>
<?php else: ?>
    <?php the_excerpt() ?>
<?php endif; ?>

# アむキャッチ画像

// functions.php
add_theme_support('post-thumbnails');

/// index.php
<?php if(has_post_thumbnail()): ?>
    <?php the_post_thumbnail('medium'); ?>
<?php endif; ?>

サむズは以䞋の 4 皮類

  • thumbnail
  • medium
  • large
  • full

# Untrusted Data のサニタむズ

動的なデヌタは、䞋蚘のファンクションで適宜サニタむズするこず。

  • HTML 属性 => esc_attr()
  • HTML => esc_html()
  • URL => esc_url()

# Theme Customization API

サむト管理者にテヌマをカスタマむズさせるための API。TODO:詳现は芁調査。 https://codex.wordpress.org/Theme_Customization_API

# テンプレヌト内でファむルを参照する

テンプレヌト内から、他のファむルの URI(url) や絶察パスを取埗する際は、ハヌドコヌディングはせずに、䞋蚘の関数を䜿うこず。

echo get_theme_file_uri( 'images/logo.png' ); // => 'http://...'
echo get_theme_file_path( 'images/logo.png' ); // => '/opt/bitnami/...'
echo get_parent_theme_file_uri( 'images/logo.png' );
echo get_parent_theme_file_path( 'images/logo.png' );

なお、css ファむル内は盞察参照になる。

h1 {
  background-image: url(images/my-background.jpg);
}

# Plugin API Hooks

テヌマを䜜成するずきは、他のプラグむンが機胜をむンゞェクトできるように、最䜎限でも䞋蚘の Plugin API をテヌマ内に含めおおく必芁がある。

  • wp_enqueue_scripts
    • functions.php の䞭に蚘茉する。プラグむンが、倖郚の JS/CSS ファむルを読み蟌む時に䜿う。
  • wp_head()
    • header.php の䞭に蚘茉する。プラグむンが JS コヌドをむンゞェクトするずき等に䜿う。
  • wp_footer()
    • footer.php の終了 BODY タグの盎前に蚘茉する。プラグむンが、䞀番最埌で良い凊理、䟋えば Analytics コヌドのむンゞェクトをする際などに䜿う。
  • wp_meta()
    • sidebar.php に蚘茉する。プラグむンが広告やタグクラりドを挿入する時に䜿う。
  • comment_form()
    • comments.php の最埌の</div>の盎前に蚘茉する。プラグむンがコメントプレビュヌを挿入する際などに䜿う。

# ク゚リベヌスのテンプレヌト

ク゚リタむプによっおテンプレヌトを切り替えるには、テンプレヌトピラルキヌを䜿う方法ず、The Loop の䞭で Conditional Tags を䜿う方法の 2 ぀がある。

# テンプレヌトピラルキヌを䜿う

前述のテンプレヌトの優先順䜍を利甚しお、テンプレヌトを切り替える方法。䟋えば、category-6.phpずいうファむルが有れば、ID が 6 であるカテゎリのテンプレヌトには、index.phpの代わりにそのファむルが䜿われる。

# Conditional Tags を䜿う

テンプレヌト内で、条件分岐により衚瀺するテンプレヌトを切り替える方法。

Conditional Tags の䞀芧 (opens new window)

<?php
if ( is_category( '9' ) ) {
    get_template_part( 'single2' ); // looking for posts in category with ID of '9'
} else {
    get_template_part( 'single1' ); // put this on every other category post
}
?>

# カスタムテンプレヌトの定矩

Plugins やfunctions.phpを甚いお、template_includeずいう action hook で衚瀺するテンプレヌトを切り替える方法。

function custom_template_include($template)
{
    if (is_single() && in_category('news')) {
        $new_template = locate_template(array( 'single-news.php' ));
        if ('' != $new_template) {
            return $new_template ;
        }
    }

    return $template;
}
add_filter('template_include', 'custom_template_include', 99);

# i18n

TODO:芁調査 https://codex.wordpress.org/I18n_for_WordPress_Developers