子テーマとは？

子テーマとは、親テーマと呼ばれるメインで利用するテーマの機能とスタイルを継承したテーマです。
メインテーマを変更する方法として、子テーマが推奨されています。

なぜ子テーマを使うのか？

子テーマを利用する理由は以下の通りです。

• テーマを直接変更した場合、そのテーマがアップデートされると変更が失われる可能性があるので、その変更を保持するため
• 開発時間を短縮できる
• WordPressのテーマの仕組みを深く学ぶことができる

3つの理由を述べましたが、特に重要なのは変更が失われるのを防ぐためです。
親テーマのバージョンアップは「致命的なエラー、セキュリティに対する対応」するため無視できないわけで、その際にせっかく行ったカスタマイズが失われるのは困ります。
それを避けるために、子テーマを作るというのが主な理由です。

子テーマの作り方

まず最初に、wordpress＞wp-content＞themesのフォルダにrestaurant-recipe-childという名称のフォルダを作成します。

そのフォルダの中にstyle.cssファイルを作成し、以下の内容をコピペしてください。

/*
Template:restaurant-recipe
Theme Name:restaurant-recipe-child
*/

続いてfunctions.phpを作成、以下の内容をコピペしてください。

<?php 
// 親テーマのCSS読み込み
function my_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array('bootstrap'));
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

// JSファイル追加の関数
function my_enqueue_script() {
    wp_enqueue_script('isotop', get_template_directory_uri() . '/assets/library/isotop/isotope.pkgd.min.js', array());
}
add_action('wp_footer', 'my_enqueue_script');
?>

左カラムのメニューから外観＞テーマをクリック。
ページが遷移したら、restaurant-recipe-childテーマにマウスオーバーし、有効化をクリックしましょう。
これで子テーマの作成は完了です。

※子テーマのスクリーンショット画像を設定するには、フォルダ内にscreenshot.jpg画像を入れるだけで表示されます。

利用するテーマの構成はとても複雑です。
だからデモデータを読んだうえで編集を行っていくという手法をとっていますが、それぞれどこを編集すればいいか把握する必要があります。
本項では、ページの上から順にコンテンツブロックの解説を行っていきます。
※教材のテキストでは伝えられないので、講義内での解説を主とし、教材は簡単な説明とします

カスタマイズの基本操作

左カラムのメニューから外観＞カスタマイズをクリック。
ページが遷移したら、目的のカスタマイズ項目をクリック。

編集が完了したら上部の公開ボタンをクリック。
項目選択に戻るには、項目タイトルの横にある＜矢印をクリック。

サイト基本情報

全ページに共通する設定

サイトロゴ、サイトタイトル、サブタイトルの表示の有無、favionの設定が出来ます。

Header Options

全ページに共通する設定

ページの一番上に表示される、黒背景バーの表示設定ができます。

※子テーマ作成時には、この項目が消えてしまうので再設定が必要です。

Featured Section Options

TOPページのスライダー設定

TOPページに表示されるアニメーションを伴ったスライダーの設定ができます。
固定ページからデータを引用して表示されるので、表示画像や文言はそちらの編集ページから行う必要があります。

※子テーマ作成時には、この項目が消えてしまうので再設定が必要です。

Home Main Content Area

TOPページのコンテンツブロック設定

この項目はウィジェット設定から行いますので、事項のウィジェット解説を参考にしてください。

Footer Options

フッター設定

コピーライト、フッターメニューの設定ができます。

Layout/Design Option

レイアウト・デザイン設定

全体デザインにかかる背景色や文字色の設定、レイアウト等の設定ができます。

Single Post Option

投稿記事の設定

ブログやニュースとして投稿する記事の設定ができます。

Theme Options

テーマの設定

パンくず、検索窓のPlaceholder、SNSのアイコンとリンクの設定ができます。

WordPressの特徴としてウィジェットという機能があります。
これは、プログラミングが出来なくても表示したい項目をドラッグ＆ドロップで簡単に設置できるというもので、カスタマイズには欠かせません。
本項では重要な枠に絞り込んで解説を行います。

ウィジェットの表示枠

Right Sidebar

TOPページには表示されませんが、投稿ページ、固定ページの右側に表示されるブロックです。
一般的には検索窓、最近の投稿などが設置されます。

Home Main Content Area

TOPページのコンテンツブロックを構成する枠です。
ここにウィジェットを放り込むことにより、TOPページにブロックが追加されるという仕組みです。

Left Sidebar

Right Sidebarの左版という認識で十分です。

Footer Column ～

フッターの上に存在する黒背景部分に表示されるブロックです。
左から順にOne,Two,Three,Fourと表示されます。

Popup Widget Area

クリックすると背景が暗くなり、モーダルと呼ばれるブロックが呼び出されます。
その中身をこちらで設定できます。
デモデザインでは、お問い合わせフォームが入っています。

ウィジェットの機能解説

テーマ特有の重要なウイジェットを簡単に解説します。
実際に、データを入力して確認することで理解を深めます。

AT About Section

About Our Restaurantにあるように、画像、見出し、説明1、説明2、リンクボタン1、リンクボタン2を設定できるシンプルなウィジェットです。

AT Service Section

Our Servicesにあるように、サービスの内容を紹介するブロックのウィジェットです。
固定ページから情報を引用して表示しているので、アイコンや見出し、文言は対象の固定ページで行う必要があります。

ウイジェット設定内では、引用文章、文章の省略文字数、1行に表示するカラム数、背景色、背景画像、背景画像の表示位置が設定できます。

AT Food Menu Widget

Restaurant Menuにあるように、飲食物メニューを紹介するブロックのウィジェットです。
固定ページから情報を引用して表示しているので、画像やメニュー名、文言は対象の固定ページで行う必要があります。

ウイジェット設定内では、メニューの価格、メニューのリンク先、引用文章、文章の省略文字数、1行に表示するカラム数、背景色が設定できます。

AT Feature Section

Memorable Experience With Delicious Foodにあるように、画像、見出し、説明、リンクボタン1、リンクボタン2を設定できるシンプルなウィジェットです。

AT Accordion Section

Why Choose Usにあるように、左には固定ページの内容、右には複数の固定ページを引用してアコーディオン型表示となっているブロックのウィジェットです。
固定ページから情報を引用して表示しているので、画像やメニュー名、文言は対象の固定ページで行う必要があります。
少々複雑なウィジェットなので、実際触れてみる必要があるでしょう。

ウイジェット設定内では、引用文章、文章の省略文字数、背景色が設定できます。

AT Gallery Section

Food Galleryにあるように、ギャラリーブロックのウィジェットです。
固定ページから情報を引用して表示しているので、画像と見出しは固定ページで行う必要があります。

ウイジェット設定内では、1行に表示するカラム数、背景色、画像の拡大動作、表示画像サイズが設定できます。

AT Team/Speakers Section

Our Chefにあるように、スタッフ紹介ブロックのウィジェットです。
固定ページから情報を引用して表示しているので、画像と名前、抜粋は固定ページで行う必要があります。

ウイジェット設定内では、引用文章、文章の省略文字数、1行に表示するカラム数、背景色が設定できます。

AT Testimonial Section

Testimonialsにあるように、お客様の声ブロックのウィジェットです。
固定ページから情報を引用して表示しているので、画像と名前、コメントは固定ページで行う必要があります。

ウイジェット設定内では、引用文章、文章の省略文字数、1行に表示するカラム数、背景画像が設定できます。

AT Contact Section

Get In Touch With Usにあるように、お問い合わせブロックのウィジェットです。
固定ページから情報を引用して表示しているので、説明文は固定ページで行う必要があります。

ウイジェット設定内では、メールフォーム、引用文章、文章の省略文字数、背景色が設定できます。

※メールフォームの内容を編集したい場合は、管理画面左メニューのお問い合わせページから行ってください。

AT Posts Column

Our Blogにあるように、投稿記事ブロックのウィジェットです。
投稿記事から情報を引用して表示しているので、画像、見出し、テキストは投稿ページで行う必要があります。

ウイジェット設定内では、表示対象カテゴリとタグ、表示件数、引用文章、文章の省略文字数、1行に表示するカラム数、表示順の対象、昇順降順、サムネイル画像サイズ、背景色が設定できます。

ウィジェットを上手に使うコツ

覚えるより慣れろというのが一番のコツです。

ウィジェットは、WordPressに最初から備わっているものとテーマ特有のものがあります。
このテーマ特有のウィジェットというのが厄介者で、触ってみるまでどんな動きをするかわからない事が多々あります。
その際に、解説ページを見ながらやるのもいいですが、それよりは入力枠に文字を入れたり、選択項目をいじったりしてどんな変化が起こったかを確認するのが良いと思います。

壊れたらまたデータを入れ直せばいいので、納得がいくまで触るのが上達への近道です。

第2回目の講義では、なんだかよくわからないものでも触ることによってコンテンツを編集できるという事が理解できたと思います。
サイトの完成図がまだ固まってないかもしれませんが、コンテンツを構成するウィジェットがどのようなものかをわかっていくと、全体図が想像できるようになります。

まずは部品を見て触ること。
それが集まり、組み立てることによってHPができあがります。

『WordPress』の項目から学習してみましょう。
それからWordPressと言えども、HTMLとCSSの知識が必要になりますので『HTMLとCSS』を学習しておきましょう。