カスタム3兄弟(投稿/タクソノミー/フィールド)

WordPressのカスタマイズは、まずは投稿・フィールド・タクソノミーの改良から始めてみるのがお勧めです。

[

カスタム投稿

カスタムフィールド

カスタムタクソノミー

プラグイン無しでも可能ですし、コードが短いですのでこちらでも十分です。

実際に使う際は、1行目の「area」、3行目の「地域名」の2か所を書き換えて使ってください。編集する箇所はこの2か所のみです。

「area」の方はタクソノミーのURL末尾に付くIDなので、半角英数字で設定してください。「地域名」の方は管理画面に表示される名前ですので、日本語でも大丈夫です。

5行目に「’hierarchical’ => true」と書いてますが、これを書いておくことで投稿画面ではチェックボックスになります。個人的にはこれが使いやすいと感じてますが、キーワード数が多い場合は消してしまっても良いかもしれません。

register_taxonomy('area', 'post', array(
  'labels' => array(
    'name' => '地域名'
  ),
  'hierarchical' => true
));

表示する際はこちらで。

テンプレート階層

WordPressにはテンプレート階層という概念があります。テンプレート階層はWordPressのコンテンツの順序を定義するのに用いられています。

WordPressのテンプレート階層をすべて覚える必要はありませんが、大まかにルールを知ることで理解が深まります。

投稿ページの優先順

①single-{post_type}.php – 投稿タイプが product ならば WordPress は single-product.php を探す。
②single.php
③singular.php
④index.php

Woocommerceをカスタマイズ

今回はWooCommerceというWordPressプラグインを紹介します。
WooCommerce は商品を販売できるECサイトを作れるプラグインです。
WooCommerceをインストールすると、ショップマイアカウント支払いカートの4つの固定ページが作られることになります。固定ページのマイアカウント・支払い・カートにはそれぞれショートコードが記載されており、WCの機能が呼び出されでページ表示が可能となっています。一方で、固定ページのショップには何も記載がないにも関わらず、ページの表示が可能となっています。固定ページのショップをカスタマイズするためには、woocommerce.phpをテーマフォルダへ作成し、functions.phpで適切に設定を入れる必要があります。

<?php get_header(); ?>
<div class="container">

<!--woocommerce_content(); の処理内容はpost_tyep='product'のループ-->
  <?php woocommerce_content(); ?>

</div> <!-- container -->
<?php get_footer(); ?>
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
    add_theme_support( 'woocommerce' );
}

トップページでループを回すには以下の記述となります。

<ul class="products">
	<?php
		$args = array(
			'post_type' => 'product',
			'posts_per_page' => 12
			);
		$loop = new WP_Query( $args );
		if ( $loop->have_posts() ) {
			while ( $loop->have_posts() ) : $loop->the_post();
				wc_get_template_part( 'content', 'product' );
			endwhile;
		} else {
			echo __( 'No products found' );
		}
		wp_reset_postdata();
	?>
</ul><!--/.products-->

カテゴリーページをカスタマイズ

投稿記事をカテゴリー別に分類したカテゴリーページですが、こちらにもテンプレートファイルの優先度が存在します。カテゴリー毎に違うデザインにする場合には、スラッグを適切に設定し、テンプレートファイル名に記述する必要があります。

ここにタイトル

①category-slug.php
②category-ID.php
③category.php
④archive.php
⑤index.php

自作テーマに子テーマを適用する場合

既に一般にテーマとして配布されているものではなく、自分自身で作成したテーマにおいて子テーマを作成する場合は、親テーマでのcss読み込み、子テーマでのcss読み込み順指定を設定する必要があります。

子テーマで正しくCSSを読み込む

①wp_head()を親テーマに記述(wp_enqueue_scriptでcssを読み込みできるように)

②親テーマでのCSS読み込みをfunctions.phpで制御し、get_stylesheet_uri() もしくは get_stylesheet_directory_uri()で記述

③子テーマで親テーマのCSSを読み込む

結果、以下のように親テーマCSSの後に子テーマCSSが読み込まれる状態になれば成功です。

<link rel='stylesheet' id='parent-style-css'  href='http://localhost/wp2/wp-content/themes/mytheme/style.css?ver=4.9.8' type='text/css' media='all' />
<link rel='stylesheet' id='parent-style-responsive-css'  href='http://localhost/wp2/wp-content/themes/mytheme/responsive.css?ver=4.9.8' type='text/css' media='screen and (max-width: 480px)' />
<link rel='stylesheet' id='theme-style-css'  href='http://localhost/wp2/wp-content/themes/mytheme_c/style.css?ver=4.9.8' type='text/css' media='all' />
<link rel='stylesheet' id='theme-style-responsive-css'  href='http://localhost/wp2/wp-content/themes/mytheme_c/responsive.css?ver=4.9.8' type='text/css' media='screen and (max-width: 480px)' />

①wp_headを親テーマに記述(wp_enqueue_scriptでcssを読み込みできるように)。
wp_headの動作は多岐に渡りますが、wp_enqueue_scriptを実行することで、CSSの出力も担っています。

<head>
  <meta charset="UTF-8">
  <title>HOTEL IMPERIAL RESORT TOKYO</title>
  <?php wp_head(); ?>
</head>

②親テーマでのCSS読み込みをfunctions.phpで制御し、get_stylesheet_uri() もしくは get_stylesheet_directory_uri()で記述。

当初、header.phpで記述していたCSS読み込みをfunctions.phpへ記述して、wp_enqueue_scriptに紐づけしています。

function load_styles() {
  wp_enqueue_style( 'theme-style', get_stylesheet_uri() );
  wp_enqueue_style( 'theme-style-responsive', get_stylesheet_directory_uri().'/responsive.css' , "", '','screen and (max-width: 480px)');
}
add_action( 'wp_enqueue_scripts', 'load_styles' );

③子テーマで親テーマのCSSを読み込む

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
      wp_enqueue_style( 'parent-style-responsive', get_template_directory_uri() .'/responsive.css' , "", '','screen and (max-width: 480px)' );
}

子テーマを作成する

講義内では、WordPressのテーマ自体をゼロから作る方法で制作を続けてきましたが、子テーマとして親テーマに依存したWordPressカスタマイズ方法もあります。

確かに、親テーマに依存した状態が続くので、思わぬテーマのアップデートで仕様が変更されるリスクはあります。しかし、どの点を自分が変更したか分かりやすく、コーディングミスがあっても致命傷になりにくい(その部分については削除すればよいので)点はメリットです。

子テーマ制作の最小要件

子テーマディレクトリ
style.css
functions.php

親子の依存関係は子テーマのstyle.css内の記述で示します。このとき、親テーマの指定はディレクトリ名でなければなりません。

/*
Template:親テーマのディレクトリ名
Theme Name:子テーマ名
*/

これで、wordpressの管理画面から外観>テーマで設定した子テーマを選ぶことができます。

また、functions.php内には子テーマで使用するstyle.cssを読み込むために以下の指定が必要となります(さらに追加の記述が必要な場合もあります)。親テーマのcssの後に子テーマのcssを読み込む指定ですので、子テーマで書いたcssが追加されることになります。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

なお、style.cssfunctions.php以外のファイル(index.phpやfront-page.phpなど)を子テーマフォルダ内に作成した場合は、親テーマの記述は無視されます。