皆さんこんにちは！こんばんは！ロト君です。
先日、『WordBench 鹿児島』に参加し、WordPressの子テーマについて勉強をしてきました。子テーマを活用する事によって、親テーマがアップロードされた際の影響を最小限に抑える事を勉強して来ました！
本当に、この手法を覚えたら便利ですね！！！
では、早速。紹介したいと思います。
1-1.準備
WordPressを動かす為に必要なものは主に下記のものがあります。
・WordPress本体(https://ja.wordpress.org/)
・XAMPP(Windowsの場合 https://www.apachefriends.org/jp/index.html)
・SublimeText3(HTML編集などに使います。 https://www.sublimetext.com/)
の、3点です。↑が私が普段使っている環境です。
基本、英語で書かれているものが多いですが、日本語のプラグインも多いので日本語へ変換したい人はプラグを入れて下さい。
2-1.子テーマの作り方
子テーマは下記のように同じ階層に作ります。
↑の『-child』フォルダが子テーマの保存ファイルです。
WordPressが推奨している設定方法は、
親『xxxxxx』だった場合。子『xxxxxx-child』の様に設定します。
※子テーマには空白文字(スペース)は使わないで下さい。←重要。
2-2.子テーマフォルダの中身
子テーマフォルダの中身は基本的に、2つです。
・functions.php
・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' );
}
?>;
上記のコードは親のcssを読み込んでから子のcssを読み込む様に設定しています。
style.cssの中身はこんな感じです。
/* Theme Name: Twenty Seventeen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Seventeen Child Theme Author: WordBench Kagoshima Author URI: http://example.com Template: twentyseventeen 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: twentyseventeen-child */
色々と厄介なものが入っていますが実際に必須なものは下記のものです。
Theme Name: Twenty Seventeen Child Template: twentyseventeen
上記のテーマ名と親のテーマです。親子関係を認識する為に必要ですね。
3-1.まとめ
後は、style.cssにガタガタコードを書いていけば、-child側の見た目が、親のcssを上書きしながら表現できます。
然しながら、functions.phpは上書きではなく、追加の形になりますので注意が必要です。
ベースになる大きなテーマを作ってから、レスポンシブなサイト作りや基本functions.phpの活用にはもってこいの操作だと思います。
0からの完全スクラッチも中々味がありますが、安全な基本テーマをいじりながらのシステム構築も面白いのではと思いますね！
では、今回はここまで！(>ω<)ﾉｼ
