テーマの作成と適用
テーマフォルダ、必須ファイルの用意
作成したHTMLサイト、もしくは当講座素材のフォルダを、ローカル環境WordPressのthemesフォルダ内に複製します。
使用されているアプリケーションや設定によって、ローカルWordPressがある場所は異なります。
ご自身のパソコンの使用するWordPress > wp-content > themesフォルダ内に置いてください。
themesフォルダ内に設置したら、WordPressがテーマと認識できるよう２つのファイルを用意します。
- index.php
- style.css（Template ヘッダー入り）
● style.css
style.cssは既にありますので、ファイルの一番上にTemplate ヘッダーだけ書けば良いです。
以下5行を追加して、上書き保存してください。
style.css
/*
Theme name: ズーロッパ東京-課題解説
Description:SKILLHUBのWP化課題見本です
Author: SKILLHUB
*/
● index.php
index.phpは、index.htmlの拡張子を変更するだけで、とりあえずは使えます。
直にindex.htmlの拡張子を変更するか、複製してファイル名を変えてください。
よくわからない、という方は以下の手順でindex.phpを作成してください。
- WordPressテーマにしたフォルダの中にある、index.htmlを開く
- 名前をつけて保存（別名で保存）
- ファイル名をindex.phpにして、保存する
WordPressテーマでは、htmlファイルは使用しません。
phpファイルに変更した時点で削除しても、確認用にとっておいて最後にまとめて削除しても、どちらでも良いです。
WordPressから自作テーマを適用する
ローカル環境のWordPressに、自作テーマを適用してみましょう。
管理画面のメニューから外観 > テーマ を開きます。
style.cssのTheme nameに書いたテーマ名（ズーロッパ東京-課題解説）が表示されています。
マウスカーソルを重ねると表示される、有効化のボタンをクリック。
下図のように「有効：ズーロッパ東京～」と表示が変わったら、有効化成功です。
functions.phpを追加
テーマフォルダの中にfunctions.phpを新しく作りましょう。
functions.phpに書くコードはWordPress基礎講座【後編】で書いたものと、ほとんど同じです。
以前作成されたfunctions.phpから、丸ごとコピー・アンド・ペーストしても構いません。
サムネール（アイキャッチ画像）の最大サイズ指定は、600に変更しています。
functions.php
<?php
//アイキャッチ機能の追加
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 600, 600, true );
//ナビゲーション機能の追加
add_theme_support('menus');
register_nav_menus( );
//ウィジェット機能の追加
register_sidebars(3, array('name' => 'サイドウィジェット%d'));
?>
なお、本解説で作成するテーマではウィジェットを使用しません。
register_sidebars...の行は、書いても、書かなくても、どちらでも良いです。
functions.phpを保存したら、WordPress管理画面を開いてください。
先程テーマを有効化したままの方は、リロード（再読み込み）してください。
外観の項目の中に「ウィジェット」と「メニュー」が増えていたら、functions.phpの記述が上手く出来ています。
