WordPressは子テーマで微修正しながら逐次確認。レスポンシブではCSS次第で表示確認できるからサイト運営がむちゃくちゃ楽!
スマホサイトWeb WordPressなどのSEO
小画面 少コンテンツ 省テキスト 多画像対応の
コーディング実験検証
WordPressで子テーマをつくる意味は、テーマのバージョンアップでファイルが書き換えられても、子テーマの中のカスタマイズしたファイルが温存できるから安心安全、ということらしい。
しかし、親テーマで大きくコーディングが変更されたら、それをベースに子テーマの中のファイルも再修正(つくり直し)する必要は、なくならない。
子テーマ運用が秀逸なのは、バージョンアップのときだけではなく、微修正を繰り返しながら、その都度FTPでファイルをアップロードして、逐次確認できることである。
とくに、レスポンシブWebデザインでは、CSS次第という面もあるので、これが子テーマのstyle.cssを適宜修正して表示を確認できるから、かなりサイト運営が楽になる。
しかも、自分で簡単に、子テーマを用意できるから、これは嬉しいかぎりである。
子テーマのディレクトリーは、親テーマと同じ階層につくる
~/wp-content/themes/
子テーマのCSSは、親テーマのCSSを上書きする。
また、WordPress子テーマの古い情報では、子テーマのCSSで、親テーマのCSSを@import: で読み込むように書いてあるが、後述のように子テーマのfunctions.phpで親テーマのCSSを読み込むように設定するので、余計な作為は無用である。
基本的に、子テーマのfunctions.phpは、追加(add)と考える。
修正はできない。
削除(remove)は可能。
また、親テーマの記述(関数の箇所)を部分的でもコピペすると、エラーが出る。
Fatal error: Cannot redeclare
重複はダメということだ。
スキルがあれば、関数やその箇所を子テーマのfunctions.phpで書き換えして記述することもできるが、最終的には親テーマのfunctions.phpを修正するほうが早く決着できることが多い。
あとから時間をかけて、子テーマのfunctions.phpをいじることにする。
まず、子テーマをはじめるには、そのフォルダーというか、ディレクトリーをつくる。
親テーマのディレクトリー名に、「-child」や「_child」、ハイフンかアンダーバーのあとに「child」をつける。
そのディレクトリーの中には、style.cssとfunctions.phpの2つが、最低限必要だ。
そして、WordPressの管理画面のテーマで、今まで親テーマを有効化していたはずだが、非常に違和感があると思うが、今度はこの子テーマを有効化する。
テーマ変更によって、メニューやウィジェットがリセットされることもあるので、注意を。
子テーマのstyle.cssには、冒頭に次のように記述する。
/*
Theme Name: 親テーマ名 Child
Template: 親テーマのディレクトリー名
*/
この下に、追加のCSSを書いていくことになる。
正しい作法としては、下記を参照していただきたい。
以前、誇らしげにWordPressプラグインの「Simple Custom CSS」を見つけて使っていることを、どこかで吹聴した覚えがあるが、
じつに、稚拙なことである。
このサイトの、子テーマの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はありがたい。
次は、子テーマの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の設定として、子テーマのfunctions.phpで次のように追記している。
/* RICG Responsive Images用に画像サイズのバリエーション */
add_image_size( ‘snap250’, 250 );
add_image_size( ‘snap500’, 500 );
add_image_size( ‘snap700’, 700 );
WordPressでは、メディアで、サムネイルと、中と大の3段階で画像サイズを設定できるが、そのほかに、上記のように複数のサイズを追加できる。
なお、あるプロジェクトで、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などのお世話になるなら上記の設定が大きく役に立つ。
SEO塾.comのWordPress子テーマは、
今はこのようになっている。
子テーマのstyle.cssとfunctions.phpは子テーマ独自の記述になるが、その他のファイルは、複製して子テーマにおいて、そのファイルの目当てのところを修正することになる。
ヘッダー箇所を修正したいとき、プラグインではなくJQueryなどを使いたいとき、headerに追記したり修正したりしなければならない。
そこで、子テーマのheader.phpを編集する。
リンクをクリック(タップ)したときに、それと分かるように視覚的な効果を与えたい。
波紋(ripple)である。ジョジョではないが…
Googleでも、ソースを公開している。
また、ポピュラーなのが、Waves。
上記からファイルをゲットして、その中のwaves.min.cssとwaves.min.jsの2つをそれぞれアップロードする。
waves.min.cssは、子テーマのディレクトリーに。
waves.min.jsは、子テーマに「js」ディレクトリーをつくり、その中へ。
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要素の中、最初のほうに、次のように書く。
<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というか効果はいろいろあり、自分の使用しているテーマとのからみもあるので、試してみる。
これで、「波紋使い」になる!
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をカスタマイズ。
基本的には、HTML5用のSEOとして、「article」を削除している。
articleの代わりに、sectionやnavを、このサイトのコンテンツで好きなように設定するためである。
では、SEO×WPレスポンシブを売るなら、要らないarticleを削除しておいたら?
ということにはならない。
最初からarticleがあって見出しタグを多用しなければ、無理やりsectionやnavを設定してもSEO的に大きな意味はない。
しかし、ちまちまセクション要素を使っていくと、内部対策というかキーワード記述のSEO効果はバツグンになる。
このページのソースをご覧いただくと、なんと鬱陶しいセクション要素の使い方か、とあきれるはずだ。
今回は、WordPressの子テーマについて、さわりの部分を、SEO塾.comサイトをベースに解説している。
他社のテンプレートを使って、あれこれWordPressを設定したり、プラグインに応援してもらったり、あらためて気づきが多かったので、後日。
好評発売中
インスタや今風のECサイトのカード型フィードが、あっという間にできあがり
カテゴリーやタグの関連コンテンツも、お茶の子さいさい
テーマに頼らず、プラグインを使わず、スイスイとWordPressカスタマイズ