2月19日(金) CMS演習④ 講義内容

子テーマによるカスタマイズ

ものにもよるが、テーマは頻繁にアップデートされる(面倒なようですが、むしろアップデートがない=更新されていないということなので、信用度は低いです)。
テーマをカスタマイズする際、直接編集してしまうと、アップデート時に再上書きされてしまい、折角編集したデータが消えてしまう。
その為、カスタマイズ時には元テーマのデータを残したまま編集を行う、子テーマを利用すると良い。
子テーマは、元のテーマをすべて引き継いだ新しいテーマという形になる。

テーマに最低限必要なファイル

WordPressのテーマには、最低限必要なファイルが二つある
これらのファイルは、テーマフォルダの直下(wordpress/wp-content/themes/テーマ/)に置く必要がある。
また、名称は固定。別の名前にすると動かない。

index.php
他のページ(single.phpやpage.php)がなかった時に、自動で読み込まれる基盤となるファイル。
基本的にメインのループ処理が行われ、記事の読み込みを行う。
子テーマの場合は、親から継承するのでなくても問題ない。
後日詳しく講義します。
style.css
ただのCSSかと思いきや、テーマの基礎設定を行う重要ファイル
こればかりは一テーマに必ず一つは必要になる。
基礎設定は、style.cssの一番上で、コメントアウト内に記述する。

/*
Theme Name:テーマの名前
Theme URI:http://●●●.com/
Description:テーマの説明文
Author:制作者名
Version:1.0
*/

上記の様に記述すると、テーマの基礎情報として反映される。
他人に向けて公開するテーマの場合は前項入れた方が良いが、自前で使うだけであれば、必須なのは「Theme Name」だけになる。大文字小文字、半角スペースの有無なども判定されるので注意しよう。
テーマを作る際、一番初めに作成するファイルでもある。

子テーマの設定

子テーマを制作する場合、上記した基礎設定にさらに追加で書き込む必要がある。

/*
Template:親テーマのフォルダ名
Theme Name:テーマの名前
Theme URI:http://●●●.com/
Description:テーマの説明文
Author:制作者名
Version:1.0
*/
@import url("親までのパス/style.css");

Templageは、親に指定したいテーマのフォルダ名。こちらも大文字、小文字、スペースの有無を判定するので注意しておきたい。
これを書くことで、親テーマ内のphpファイルを継承する。
ただしcssはデフォルトでは読み込んでくれない為、「@import url」を使って読み込んであげることが多い。

設定ができたら、「wp_content/themes」フォルダに、新しくフォルダを作って「style.css」の名前で保存する。

既存テーマの改変

子テーマを使って既存テーマを改変する際、いくらか注意点がある。
「@import url」で全てのcssを読み込んだものの下に書くため、直接編集する時とは勝手がいくらか違う。
検証ツールを上手く使って「どこを変えればいのか」を調べた上で記述していくと良い。

style.css以外の編集

子テーマでstyle.css以外のファイル(header.php、content.phpなど)を編集する場合は、親テーマから改変したいファイルを探してそのまま子テーマにコピーする。同じファイル名がある場合、子テーマの物が優先して読まれるので、親を残したまま変更が出来る。全てのファイルをコピーする方法もあるが、編集したファイルだけを移した方が何のファイルを編集したのか分かりやすい。

特殊なファイル、「functions.php」

数あるテンプレートファイルの中で、唯一特殊な挙動をするファイル。全ページに共通でかかる設定などを纏めるファイルだが、これだけは他のファイルの様にそのままコピーするとエラーになる
このファイルは新規で真っ白な同じ名前のファイルを用意し、追加記述を書いていく形をとる。(挙動としては先に子テーマのものを読んでから、親テーマの物を読み込む)
暫く編集する機会はないかもしれないが、覚えておくと良い。

テンプレートタグ

WordPressには、WordPressの中だけで使える関数が数多く用。意されている。
簡単なものだけとりあえず紹介する。大体名前通りの場合が多い。
まだ詳しく抗議していませんが、とりあえずいくつか頻出するものを書いておくので参考までに。

get_header();
header.phpを読み込む設定。他にも「get_footer」「get_sidebar」などがある。
the_title();
記事のタイトルを表示する為のタグ。
the_content();
記事の本文を表示する為のタグ。画像を含めて全文が出てくる
the_excerpt();
記事の抜粋文を指定する為のタグ。画像は表示されない。
the_time();
記事が投稿された日時を指定する為のタグ。
括弧の中はphpのdate関数と同じように、the_time(“Y年m月d日”)と記述できる。また、WordPressでは設定画面で日付の表示設定が出来るので、それを活かす場合は
the_time( get_option( ‘date_format’ ) );
と書いてあげると反映される。
get_template_parts();
他のテンプレートを用意して、読み込む。get_header等と同質だが、header.php等の様に決まった名称ではないファイルを読み込むためのもの。
特に記事の表示部分だけ別のファイルに記述する事が多く、テーマ改変時に頻出するので覚えておくと良い。
get_template_part( ‘template-parts/content’);
と書かれていた場合、「tempate-partsフォルダ内のcontent.php」を読み込んでいる。