記事の詳細
WordPressの子テーマの作り方!3つのファイルですぐにできる♪カスタマイズ後編
こんにちは!
前回は「STINGER8」というシンプルなテーマをダウンロードしましたね。
今回はつづきとして、同テーマを使用したオリジナルテーマの作成に必要となる「子テーマの作成」について解説していきます。
今回のブログの見出しはコチラです!
さっそくフォルダ&ファイルの作成から!
①themesフォルダ(私の場合はレンタルサーバーではないため下記の場所となります)内に
新しくフォルダを作成し「stinger8-child」の名称で保存。
②つづいて、作成したフォルダ内にstyle.css、functions.php、single.phpの3つのファイルを作成。
必要なコードをコピー&ペースト
③作成した各ファイルに必要コードを記入。まずはstyle.cssには下記をコピー&ペースト。
※親テーマにも記載のあるコードに赤枠の部分が追加される内容となります
1 2 3 4 5 6 7 8 9 10 11 12 |
@charset "UTF-8"; /*--------------------------------------------------------- Theme Name: STINGER8-child Template: STINGER8 Theme URI: wp-fun.com Description: Author: ENJI Author URI: wp-fun.com/about Tags: custom-header, custom-menu Text Domain: stinger8 Version: 20171207 ---------------------------------------------------------*/ |
④次にfunctions.phpに下記をコピー&ペースト。
1 2 3 4 5 |
<?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、images、jsフォルダを作成。
また、今後カスタマイズしたいファイルを親テーマからコピーもしくは同名称で作成して追加。
⑥後ほど外観>テーマで表示される際に分かりやすいよう、テーマのスクリーンショットを追加。
うまくできているか..確認!
⑦管理画面の外観>テーマから作成した「STINGER8-child」を有効化。
⑧以上完成です!
注意点として、親テーマはテーマが更新された際に内容が上書きとなるため、編集は子テーマ!と覚えてくださいね。今回の手順をマスターしてオリジナルのテーマ作成にぜひ挑戦を!では!