WordPressカスタマイズ時の【CSS追加】と子テーマの作成方法

サイトのカスタマイズをするに当たってテーマのコードの修正や書き足しを行う必要があります。

直接テーマのコードを修正したり書き足したりするとテーマのアップデート時に変更した箇所が失われてしまいます。

そうならないために子テーマを作ってテーマの修正変更をすれば変更した箇所が確実に保持されます、WordPress 4.7以降のバージョンでは、・・・

スポンサーリンク

子テーマを作る理由

サイトのカスタマイズをするに当たってテーマのコードの修正や書き足しを行う必要があります。

直接テーマのコードを修正したり書き足したりするとテーマのアップデート時に変更した箇所が失われてしまいます。

そうならないために子テーマを作ってテーマの修正変更をすれば変更した箇所が確実に保持されます、WordPress 4.7以降のバージョンでは、管理画面の【外観】⇒【カスタマイズ】⇒【追加CSS】からデザインを変えることもできますが、あくまで補助的なものであるため、本格的にCSSの修正やphpファイルの変更をするのであれば子テーマを作るほうがいいと思います。

 

 

管理画面からのCSS追加

テーマをカスタマイズするには管理画面から直接テーマの編集をすることもできますが、テーマのアップデートをすると編集したコードがリセットされてしまいます、WordPress 4.7以降のバージョンでは、【追加CSS】の機能が追加されたので直接テーマの編集をすることなくCSSの修正をすることができます。

またテーマのアップデート後にも修正したCSSは引き継がれます、ただしテーマを変えてしまうと【追加CSS】で変更や修正をした箇所は反映されません。

【追加CSS】は補助的に利用するものであり、本価格的なCSSの編集をするのであれば子テーマを作成してCSSの編集をしたほうが良いでしょう。

【追加CSS】の機能を使用するには管理画面左側のメニューから外観⇒カスタマイズを選択します。

カスタマイズを選択

 

 

画面が変わりますので【追加CSS】のボタンクリックします。

テーマによっては【追加CSS】の項目がない場合もあるようです。

CSS追加ボタンをクリック

 

 

コードを入力する画面が出ますのでここに追加修正したいコードを入力すれば反映されます。

この方法だと子テーマを作る手間をかけることなくデザインの編集が可能になります、もしテーマのデザインを少し変える程度ならばこちらを使ってカスタマイズしたほうが便利かもしれませんね。

CSSコードを記述する

 

 

プレビュー画面を見ながらカスタマイズできるので、カスタマイズ後の様子をすぐに見ることができます。

プレビュー画面を見ながらカスタマイズ

 

 

子テーマの作り方

子テーマは、 1つのディレクトリと、最低2つのファイル(style.css と functions.php) から構成されます。

子テーマを作成するにはまず最初に子テーマディレクトリを作成していくところから始めます。

まずは子テーマを作るための親テーマをインストールしておきます、またはインストール済みのテーマや今現在使っているテーマでもOKです。

この記事では【Wordpress】にすでにインストールされているWordPress公式テーマ【Twenty Seventeen】で子テーマを作ってみますね。

私が使っているレンタルサーバーは【さくらのレンタルサーバ】ですのでこちらを使ってやってみたいと思います、どのレンタルサーバーも操作の仕方はそれほど大差ないと思います。

サーバコントロールパネルにログインしたら【ファイルマネージャー】を選択します。

FTPを使ってもこの工程で作成できます。

FTPの使い方をかいた記事はこちら⇒FTPソフト(WinSCP)でPCのデータをサーバーに送る方法

ファイルマネージャーを開く

 

 

ファイルマネージャーが開いたら子テーマを作成したいフォルダを選択して開きます。

小テーマの作成フルダを開く

 

 

フォルダが開いたら次に【wp-content】フォルダを開きます。

wp-contentを開く

 

 

フォルダが開いたら【themes】フォルダを開きます。

themesフォルダを開く

 

 

フォルダが開いた階層に子テーマフォルダを作成します。

【表示アドレスへの操作】の▼プルダウンメニューをクリックして【フォルダ作成】を選択します。

新しいフォルダの作成

 

 

ダイアログボックスが開きますので子テーマの名前を入力します。

ここでは【Twenty Seventeen】の子テーマなので【twentyseventeen-child 】としましたが、自分がわかりやすければ何でも良いです。

入力できたら【OK】のボタンをクリックします。

わかりやすい名前を入力

 

 

これで新しいフォルダ【twentyseventeen-child】の作成できましたが、このままではフォルダの中が空のため表示されません。

新しいフォルダの完成

 

 

WordPress管理画面からテーマを見てみるとインストール済みだが「スタイルシートが見つかりません。」となっています。

ファイルマネージャーに戻り【twentyseventeen-child】の中にstyle.cssのファイルを作ります。

画面表示ができない

 

 

【style.css】ファイルの作成

【twentyseventeen-child】のフォルダを開いて【style.css】のファイルを作成します。

新しく作成したフォルダを開く

 

 

フォルダが開いたら【表示アドレスへの操作】の▼プルダウンメニューをクリックして【ファイル作成】を選択します。

表示アドレスへの表示からファイル作成を選択

 

 

空白の画面になりますので【style.css】のコードを記述します

/*
 Theme Name:twentyseventeen-child
 Theme URI:http://example.com/twentyseventeen-child/
 Description:twentyseventeen-child-Theme
 Author:norita
 Author URI:http://example.com
 Template:twentyseventeen
 Version:1.7
 License:GNU General Public License v2 or later
 License URI:http://www.gnu.org/licenses/gpl-2.0.html
 Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain:twentyseventeen-child
*/

これはWordPress公式サイトに書かれている記述をもとに作成したものですが、実際には水色の親テーマと小テーマの記述があれば良いので、面倒くさい方は簡単にしてしまいましょう。

コードの記述が終わったら【保存】のボタンをクリックします。

style.cssコードを記述

 

 

ダイアログボックスが開くので【style.css】と入力してOKをクリックします。

ファイル名style.cssと入力

 

 

WordPress管理画面からテーマを見てみると小テーマの表示が確認できます。

子テーマが表示されるか確認

 

 

プレビュー画面を見ると【functions.php】の作成をしていないため表示が変です、先程のファイルマネージャーに戻り【functions.php】の作成を行います。

functions.phpの記述がないため表示がおかしい

 

【functions.php】ファイルの作成

上記で作成した【style.css】と同じ階層に【functions.php】のファイルを作成します、【表示アドレスへの操作】のプルダウンメニューをクリックして【ファイル作成】を選択します。

表示アドレスへの作成からファイル作成を選択

 

 

コードを記述する画面に変わりますので【functions.php】のコードを記述します。

こちらもWordPress公式サイトを参考にして記述していきます。

<?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')
);
}
?>

 

 

コードを記述したら【保存】のボタンをクリックします。

functions.phpコードを記述して保存をクリック

 

 

ダイアログボックスが表示されたら【functions.php】と入力して【OK】ボタンをクリックします。

ファイル名を記述してOKをクリック

 

 

これで【twentyseventeen-child】に【style.css】と【functions.php】のファイルが作成できました。

2つのファイル作成

 

 

子テーマの有効化

WordPress管理画面から【twentyseventeen-child】テーマのプレビュー画面を見ると正常な表示に変わりました。

子テーマのプレビュー画面

 

 

これで子テーマの作成ができましたので子テーマの有効化をクリックしてして完了です。

有効化をクリック

 

 

スタイルシート以外のファイルを子テーマに置く

子テーマの場合はデザインを指定する【style.css】だけではなくサイトの構成などを変えたい場合などに親テーマのファイルを全て上書きできます、ここが管理画面の【追加 CSS】とは違ったところです。

やり方は、親テーマから変更したいファイルを子テーマに置くだけです。

先ほど作成した子テーマ【twentyseventeen-child】(この記事での設定では)と同じ階層にある親テーマ【twentyseventeen】を開きます。

【子テーマを作ったサイト名】⇒【wp-content】⇒【themes】⇒【twentyseventeen】(この記事での親テーマ)に行きフォルダを開きます。

親テーマのフォルダを開く

 

 

フォルダを開いたら変更したいファイルをクリックして【指定の場所に複製】を選択します。

変更したいファイルを選択

 

 

ダイアログボックスが開きますので【twentyseventeen-child】(この記事の設定では)を選択して【OK】ボタンをクリックします。

子テーマを選択

 

 

「以下のファイル・フォルダ等はすでに存在しています」となりますがこれは親テーマの事だと思われますので【はい】のボタンをクリックします。

はいを選択

 

 

これで子テーマに【header.php】のファイルを置くことができました。

子テーマは親テーマのすべてのファイルを上書きする事ができます、また親テーマに存在しないファイルを、子テーマに含める事が出来ます。

子テーマに選択したファイルを複製

以上が子テーマを作る方法です、これで親テーマがアップデートしてもテーマの変更は消えることなく保持されます。

 

 

最後に

子テーマ作成をする場合デザインだけの場合なら管理画面の【外観】⇒【カスタマイズ】⇒【追加CSS】から変更ができますのでこちらを使うほうが簡単かと思いますが、サイトの構成などを変えたい場合には子テーマを作ってのカスタマイズになるかと思います。

テーマに直接カスタマイズを施してしまうと、テーマのアップデート時には変更した内容は全て消えてしまいます、致命的なエラーやセキュリティーの面からアップデートしなければ良いという訳にはいかないので、カスタマイズするなら管理画面から【追加CSS】使ってのカスタマイズか、本格的なカスタマイズを行うなら子テーマを作る事を選択しましょう。

スポンサーリンク

コメントを残す

*

CAPTCHA