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

WordPressで子テーマをつくる意味は、テーマのバージョンアップでファイルが書き換えられても、子テーマの中のカスタマイズしたファイルが温存できるから安心安全、ということらしい。

しかし、親テーマで大きくコーディングが変更されたら、それをベースに子テーマの中のファイルも再修正（つくり直し）する必要は、なくならない。

子テーマ運用が秀逸なのは、バージョンアップのときだけではなく、微修正を繰り返しながら、その都度FTPでファイルをアップロードして、逐次確認できることである。
とくに、レスポンシブWebデザインでは、CSS次第という面もあるので、これが子テーマのstyle.cssを適宜修正して表示を確認できるから、かなりサイト運営が楽になる。

しかも、自分で簡単に、子テーマを用意できるから、これは嬉しいかぎりである。

子テーマのディレクトリーの場所

子テーマのディレクトリーは、親テーマと同じ階層につくる

～/wp-content/themes/

子テーマのstyle.cssは上書き @import:親テーマCSSは不要

子テーマのCSSは、親テーマのCSSを上書きする。

また、WordPress子テーマの古い情報では、子テーマのCSSで、親テーマのCSSを@import: で読み込むように書いてあるが、後述のように子テーマのfunctions.phpで親テーマのCSSを読み込むように設定するので、余計な作為は無用である。

子テーマのfunctions.phpは親テーマのfunctions.phpより前に読み込まれる

基本的に、子テーマのfunctions.phpは、追加（add）と考える。
修正はできない。
削除（remove）は可能。

また、親テーマの記述（関数の箇所）を部分的でもコピペすると、エラーが出る。

Fatal error: Cannot redeclare

重複はダメということだ。

スキルがあれば、関数やその箇所を子テーマのfunctions.phpで書き換えして記述することもできるが、最終的には親テーマのfunctions.phpを修正するほうが早く決着できることが多い。
あとから時間をかけて、子テーマのfunctions.phpをいじることにする。

WordPress子テーマのディレクトリー

まず、子テーマをはじめるには、そのフォルダーというか、ディレクトリーをつくる。

親テーマのディレクトリー名に、「-child」や「_child」、ハイフンかアンダーバーのあとに「child」をつける。

そのディレクトリーの中には、style.cssとfunctions.phpの2つが、最低限必要だ。

子テーマを有効化

そして、WordPressの管理画面のテーマで、今まで親テーマを有効化していたはずだが、非常に違和感があると思うが、今度はこの子テーマを有効化する。

テーマ変更によって、メニューやウィジェットがリセットされることもあるので、注意を。

WordPress子テーマのstyle.css

子テーマのstyle.cssには、冒頭に次のように記述する。

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

この下に、追加のCSSを書いていくことになる。

正しい作法としては、下記を参照していただきたい。

Simple Custom CSS

以前、誇らしげにWordPressプラグインの「Simple Custom CSS」を見つけて使っていることを、どこかで吹聴した覚えがあるが、

じつに、稚拙なことである。

子テーマのstyle.cssでレスポンシブ設定（メディアクエリ @media）

このサイトの、子テーマのstyle.cssでは、とくにレスポンシブ設定が大活躍している。

/* パソコン用はじまり */

/* パソコン用おわり */

@media screen and (max-width: 768px) {
/* ▼768：iPad縦・iPhone6+横 */
 }

@media screen and (max-width: 667px) {
/* ▼667：iPhone6s横 */
 }

@media screen and (max-width: 568px) {
/* ▼568：iPhone5s横 */
 }

@media screen and (max-width: 480px) {
/* ▼480：iPhone6+縦 */
 }

@media screen and (max-width: 400px) {
/* ▼400：Android縦？ */
 }

@media screen and (max-width: 375px) {
/* ▼375：iPhone6s縦 */
 }

@media screen and (max-width: 320px) {
/* ▼320：iPhone5s縦 */
}

パソコンや、タブレット（iPad）の横縦、スマートフォンの横縦（しかも複数のモニターサイズ）で確認しながらCSSを追記修正している。

最初に書いているが、テーマ本体がバージョンアップされたとき、コーディングが変わり、デフォルトのstyle.cssも変わることが多いので、やはり子テーマのstyle.cssはありがたい。

WordPress子テーマのfunctions.php

次は、子テーマのfunctions.phpで、冒頭に下記のように記述し、その下に追記していく

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

RICG Responsive Images

たとえば、今風のサイトでは、画像もレスポンシブにしたいので、プラグイン「RICG Responsive Images」は、非常に重宝する。

RICG Responsive Imagesの設定として、子テーマのfunctions.phpで次のように追記している。

/* RICG Responsive Images用に画像サイズのバリエーション */
add_image_size( ‘snap250’, 250 );
add_image_size( ‘snap500’, 500 );
add_image_size( ‘snap700’, 700 );

WordPressでは、メディアで、サムネイルと、中と大の3段階で画像サイズを設定できるが、そのほかに、上記のように複数のサイズを追加できる。

他社のWordPressテンプレートで

なお、あるプロジェクトで、SEO×WPレスポンシブ以外の、WordPressテーマを使うことになって、いくつも有料版を購入し、また無料版も含めて、二桁のテンプレートを試した。

行儀が悪いのは、WordPressなのか、テンプレートなのか、恐ろしいほどheader要素に書き込まれることもあるので、子テーマのfunctions.phpで、余計なものを削除指定する。

// 余計なheader記述を削除
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'wp_shortlink_wp_head');

つまり、常用しているテーマの仕様に助けられていることも多いので、違うテーマを使うときはかならずソース確認をおこたらないこと。

やはり、子テーマのありがたみを実感できる。

また、サムネイルというかアイキャッチを有効活用するために、そのプラグインの助けを借りるときなど、あえてアイキャッチのサイズ指定をしておくと運用が楽になる。

// アイキャッチ画像の表示の仕方を指定（リサイズ）
set_post_thumbnail_size(120, 120, true );

デフォルトでは、150×150になっているし、テーマによってはサイドバーなどで画像付きで表示するなど独自サイズ指定していることもあるので、YARPPなどのお世話になるなら上記の設定が大きく役に立つ。

WordPress子テーマにファイルを追加

SEO塾.comのWordPress子テーマは、

今はこのようになっている。

子テーマのstyle.cssとfunctions.phpは子テーマ独自の記述になるが、その他のファイルは、複製して子テーマにおいて、そのファイルの目当てのところを修正することになる。

子テーマのheader.php

ヘッダー箇所を修正したいとき、プラグインではなくJQueryなどを使いたいとき、headerに追記したり修正したりしなければならない。

そこで、子テーマのheader.phpを編集する。

リンクをクリック（タップ）したときに、それと分かるように視覚的な効果を与えたい。
波紋（ripple）である。ジョジョではないが…

Googleでも、ソースを公開している。

また、ポピュラーなのが、Waves。

上記からファイルをゲットして、その中のwaves.min.cssとwaves.min.jsの2つをそれぞれアップロードする。

waves.min.cssは、子テーマのディレクトリーに。
waves.min.jsは、子テーマに「js」ディレクトリーをつくり、その中へ。

header要素の中に

header要素の中に、CSSへのリンクを書く。

<link rel="stylesheet" type="text/css" href="～/waves.min.css" />

「～」は絶対URLというか、実際のパスを記述してもいいが、

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ; ?>/waves.min.css" />

<?php echo get_stylesheet_directory_uri() ; ?> を入れることがおすすめ。

body要素の最初のほうに

body要素の中、最初のほうに、次のように書く。

<script type="text/javascript" src="～/js/waves.min.js"></script>   
<script type="text/javascript">
Waves.displayEffect();</script>

こちらの「～」も、<?php echo get_stylesheet_directory_uri() ; ?> を。

コンテンツのアンカータグに

あとは、コンテンツのアンカータグ（a）に、classを設定。

class="waves-effect waves-button"

classというか効果はいろいろあり、自分の使用しているテーマとのからみもあるので、試してみる。

これで、「波紋使い」になる！

子テーマのcategory-blog.phpとheader-2.php single.php

SEOブログは、SEO塾.comのカテゴリーになっていてカスタマイズするので、archive.phpをコピーしてcategory-blog.phpにリネーム。

このテーマファイルを書き換えて、header.phpをリネーム修正したheader-2.phpを読み込む。

<?php get_header('2'); ?>

SEOブログとSEO塾.comの他ページとの大きな違いは、ヘッダー箇所にある親への内部リンクである。
SEO塾.com他ページではトップページへ、SEOブログではSEOブログトップへ、キーワード入りアンカーテキストを設定している。
h2である。

もちろん、波紋（Waves）の設定は、このheader-2.phpでもやっておく。

唯一のカテゴリーで、ブログとして運用するから、専用のsingle.phpをカスタマイズ。

WordPress子テーマのその他

基本的には、HTML5用のSEOとして、「article」を削除している。
articleの代わりに、sectionやnavを、このサイトのコンテンツで好きなように設定するためである。

では、SEO×WPレスポンシブを売るなら、要らないarticleを削除しておいたら？
ということにはならない。

最初からarticleがあって見出しタグを多用しなければ、無理やりsectionやnavを設定してもSEO的に大きな意味はない。

しかし、ちまちまセクション要素を使っていくと、内部対策というかキーワード記述のSEO効果はバツグンになる。
このページのソースをご覧いただくと、なんと鬱陶しいセクション要素の使い方か、とあきれるはずだ。

WordPressやプラグインについては

今回は、WordPressの子テーマについて、さわりの部分を、SEO塾.comサイトをベースに解説している。

他社のテンプレートを使って、あれこれWordPressを設定したり、プラグインに応援してもらったり、あらためて気づきが多かったので、後日。

WordPress カスタマイズなら

好評発売中

インスタや今風のECサイトのカード型フィードが、あっという間にできあがり
カテゴリーやタグの関連コンテンツも、お茶の子さいさい
テーマに頼らず、プラグインを使わず、スイスイとWordPressカスタマイズ