(06) 6651-3832

WordPress子テーマを利用してみよう!

安全なWordPress公式テーマを利用していて、テーマのアップデートを適用すると、自分で加えた修正がアップデートにより消え去ることがあります。そんなことにならないように子テーマというものをあらかじめ作成して、修正は子テーマに対して記述するようにします。

子テーマで行ったカスタマイズは親テーマのアップデートから影響されない!

子テーマのメリット

  • 開発時間の短縮
  • 製作費用を抑えられる
    • 無料のテンプレート+カスタマイズの費用
    • 公式のWordPressのテーマ
    • 上記のテーマは悪質なスクリプトの心配が無いのでお勧めします
    • 利用する際、絞り込み検索(レイアウトや機能など)が便利です
  • 豊富な機能
    • レスポンシブ対応(スマートフォンやタブレット対応)
    • アイコンや画像が高解像度ディスプレイにも対応しているものもある
    • レイアウトをドラッグ&ドロップで変更できるものもある
    • スライダー等を使ったフォトギャラリーやSNSとの連携
    • これらの機能が無料である
  • 簡単なカスタマイズが管理画面から出来る
    • サイトの色やロゴ画像、背景画像など
  • テーマの開発を良い形で学べる
  • 必要なもの
    • 小テーマディレクトリ
    • style.css(必須)
    • functions.php

作り方

wp-content/themesディレクトリ下に設置(親テーマと同じ階層)

child-folda

例 twentysixteen-child 一般的にはテーマ名と同じ名前を付ける

既存の公式ディレクトリを同じ名前にならないようにする(そのテーマにアップデートがあると、通知が来てしまう)

1)style.cssに記述

/*
Theme Name: twentysixteen-child  (テーマ名)
Template:twentysixteen(親テーマのディレクトリ名)
*/

上記4行で大丈夫です。

WordPress公式サイトでの説明も見ておきます。

子テーマ WordPress Codex  https://wpdocs.osdn.jp/子テーマ

/*
Theme Name:   Twenty Fifteen Child
Theme URI:    http://example.com/twenty-fifteen-child/
Description:  Twenty Fifteen Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     twentyfifteen
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twenty-fifteen-child
*/

2)次に以下のコードを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' );
}

もしうまくいかない場合は以下のコードを記述します。
<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}

これでhead部分にparent.cssがchild.cssの前に挿入されて、

子テーマのcssが親テーマのcssを上書きするようになります。

h1font-familygoogleデベロッパーツールの検証により変更

https://www.re-simpleinc.com/cssフォント指定を考える2015/

【ゴシック書体】

font-family: Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;

stylesheetの変更は以上で大丈夫です。次にhtml部分の変更について記述します。

///////////////////////////////////////////////////////////////////////////////////////////////

3)テンプレートでカスタマイズ

出力されるhtmlを変更したい場合。(例えばヘッダーにある何かを消したいなど。)

親テーマのファイルをコピーして変更→

小テーマディレクトリに設置→

親テーマのファイルを上書きして表示される。

親テーマに存在しないファイルでも、小テーマに含められる。

例えば、特定のページ用のテンプレートや

カテゴリーアーカイブ用のテンプレートなど。

///////////////////////////////////////////////////////////////////////////////////////////////

4)functions.phpのカスタマイズ

functions.phpのみ親テーマを上書きしません。

親テーマのfunctions.phpも読み込まれます。

(親テーマのファイルの直前に小テーマのファイルが読み込まれます。)

例1:

子テーマ

$content_width = 500;
親テーマ
if ( ! isset( $content_width ) )
$content_width = 604;

子テーマに500pxの設定があるので604pxは無視されます。

例2:

親テーマの中に

if ( ! function_exists( ’twenty sixteen_entry_meta’ ) ) :

このif構文がある場合のみtwenty sixteen_entry_metaの中身を子テーマにコピーして修正できます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です