カスタマイズ

WordPressの子テーマの作り方とメリット【大事です】

WordPressの子テーマの作り方と必要性【大事です】

こんにちは。ミタロウです。

 

皆さんはWordPressの子テーマを使っていますか?

 

何の事???

 

と思っている方は、恐らく子テーマを使っていないでしょう。

子テーマを使用する事は、カスタマイズを一切しない人には無意味ですが、カスタマイズをする人にとってはめちゃくちゃ重要です。

 

この記事では子テーマの作成方法と使い方を解説します。

 

 

WordPressの子テーマのメリット・必要性

WordPressの子テーマのメリット・必要性

子テーマとは、使用するテーマ(親テーマと呼びます。)を元に、部分的にカスタマイズ出来るように切り離したテーマの事です。

子テーマは単体では使用できません。

 

子テーマを使用する一番のメリットは、親テーマのアップデート、更新などをしてもカスタマイズした内容が引き継がれる事です。

 

親テーマでカスタマイズをしても、アップデートや更新をするとカスタマイズ前のデフォルトの状態に戻ってしまいます。

 

長くサイトを運営していく事を考えると、毎回編集し直すのはめちゃくちゃ面倒臭いです。

それに子テーマをバックアップしていれば、カスタマイズに失敗してもすぐに復元できますのでめちゃくちゃ便利ですよ。

親テーマを元にシンプルな構造となっている為、編集はもちろん、管理も子テーマの方がしやすいというメリットもあります。

 

サイトを作ったら、まず先に子テーマを作ってカスタマイズ、編集しましょう。

コードをいじった事のある人なら簡単ですよ!

 

WordPressの子テーマの作り方

WordPressの子テーマの作り方

mixhost、エックスサーバー、ロリポップでの子テーマの作り方を解説します。

 

流れとしてはこんな感じです。

(1)子テーマのフォルダ作成。

(2)「style.css」と「functions.php」の作成。

(3)「style.css」と「functions.php」にコードを記述する。

 

まず、現在使用しているテーマ(親テーマと呼びます。)と同じディレクトリ(階層)に新しいフォルダを作って下さい。

 

※今回はWordPress公式テーマの「Twenty Seventeen」を例に解説します。

 

mixhostで子テーマの作り方

・mixhostのマイページからcPanelへログインし、「ファイルマネージャー」をクリックして下さい。

 

mixhostのファイルマネージャー

・ファイルマネージャーを開いたら「public_html」→「サイトのドメイン名のフォルダ」→「wp-content」→「themes」と進んで下さい。

すると以下のような画面になります。

画面左上の「+フォルダー」をクリック。

 

mixhostで子テーマ作成

・新しいフォルダー名に「親テーマ-child」となるように入力して下さい。

入力したら「Create New Folder」をクリック。

 

mixhostのファイルマネージャーでフォルダの追加

これで子テーマのフォルダが出来ました。

 

mixhostのファイルマネージャーでフォルダの追加画面

次にこの子テーマ「twentyseventeen-child」内に、「style.css」と「functions.php」を追加します。

 

・「twentyseventeen-child」をクリックし、画面左上の「+ファイル」をクリックし、先ほどのフォルダ作成と同じ手順で「style.css」と「functions.php」を二回に分けて追加して下さい。

 

mixhostのファイルマネージャーでファイルの追加画面

・「style.css」を一度クリックして選択し、画面上の「編集」をクリック。

 

mixhostのファイルマネージャーでコードの編集

・以下のような画面になります。(記述後の画像です。最初に開いた時はコードは無いです。)

 

mixhostのファイルマネージャーでコードの編集画面

 

「style.css」と「functions.php」の記述方法

・「style.css」には以下のコードを記述して下さい。

コピペOKですが要編集

/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen-child/
Description: Twenty Seventeen Child Theme
Author: John Doe
Author URI: https://wordpress.org/
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: 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
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Text Domain: twentyseventeen
*/

 

・Theme NameとDescriptionには子テーマの名前を入力。

・Templateには親テーマのフォルダ名(ここではtwentyseventeenと入力。)

先ほどのファイルマネージャーの画面で確認できますね。

 

親テーマのフォルダ名確認

・Theme URI、Author、Author URI、Tags、Text Domainなどは親テーマのスタイルシート(style.css)に記載されていると思いますので、それを参考に記述して下さい。

WordPressの管理画面から「外観」→「テーマエディター」→「スタイルシート(style.css)」の順に進めば確認出来ると思います。

 

スタイルシート

・コードを記述したら「変更を保存」をクリックして下さい。

 

 

・「functions.php」にも同じ手順でコードを記述して下さい。

こちらはそのままコピペだけで大丈夫です。

以下のコードを記述して下さい。

コピペOK

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

 

これで子テーマの作成は完了です!

 

エックスサーバーでの子テーマの作り方

・XSERVERアカウントへログインし、「ファイル管理」をクリックして下さい。

 

エックスサーバーのファイル管理

・「初期ドメイン」→「public_html」→「wp-content」→「themes」と進んで下さい。

画面右下の作成の所に「親テーマ-child」となるように入力し「フォルダ作成」をクリック。

 

エックスサーバーのファイル管理でフォルダの追加方法

これで子テーマのフォルダは作成されました。

・作成されたフォルダ(twentyseventeen-child)をクリックし、フォルダ内に同じ手順でファイル(「style.css」と「functions.php」)を二回に分けて追加して下さい。

 

エックスサーバーのファイル管理でファイルの追加方法

・作成されたファイルの横にチェックを入れ、編集をクリック。

 

エックスサーバーのファイル管理でファイル編集

・この記事の上に戻り、「style.css」と「functions.php」の記述方法を参考にコードを記述します。

 

保存文字コードは「UTF-8」でOK。

コードを記述したら「保存する」をクリックして下さい。

 

エックスサーバーのファイル管理でファイル編集画面

「style.css」と「functions.php」、それぞれ更新出来たらエックスサーバーでの子テーマ作成は完了です。

 

ロリポップでの子テーマの作り方

・まずロリポップのユーザー専用ページにログインして下さい。

次に「サーバーの管理・設定」→「ロリポップ!FTP」をクリック。

 

ロリポップのFTP

・「公開(アップロード)フォルダ」→「wp-content」→「themes」の順に進んで下さい。

 

以下のような画面になります。

・画面左上のフォルダのアイコンをクリックして下さい。

 

ロリポップのFTPでフォルダ追加

・フォルダ名に「親テーマ-child」となるように入力し、「保存する」をクリック。

 

ロリポップのFTPでフォルダ追加方法

・「OK」をクリック。

 

ロリポップのFTPでフォルダ追加確認

これで子テーマのフォルダは作成されました。

 

・追加したフォルダ名(twentyseventeen-child)をクリックし、フォルダ内に先ほどのフォルダ作成と同じ手順で「style.css」と「functions.php」を二回に分けて追加します。

最初にクリックするのは「フォルダのアイコン」の「隣のファイルのアイコン」です。

 

ロリポップのFTPでファイル作成

・ファイルを追加する際に、コードも記述します。(後からでも大丈夫です。)

この記事の上に戻り、「style.css」と「functions.php」の記述方法を参考にコードを記述して下さい。

 

ロリポップのFTPでファイル作成方法

・入力、記述が出来たら「保存する」をクリックして下さい。

 

「style.css」と「functions.php」、それぞれ作成出来たらロリポップでの子テーマ作成は完了です。

 

WordPressの子テーマの使い方

WordPressの子テーマの使い方

子テーマの使い方はめちゃくちゃ簡単です。

 

WordPressの管理画面で「外観」→「テーマ」と進んで下さい。

先ほど作った子テーマ(Twenty Seventeen Child)の「有効化」をクリックするだけです。

 

子テーマの使い方

子テーマの画像が表示されていませんが、ここに画像を表示させたい場合、

「screenshot.jpg」か、「screenshot.png」のファイル名にした画像を子テーマのフォルダ内(「style.css」と「functions.php」がある所です。)にアップロードすれば画像が表示されます。

サイズは600×400ぐらいが丁度いいです。

 

子テーマの画像

 

 

今後のカスタマイズ、編集をこの子テーマで行えば、テーマのアップデートや更新をしてもカスタマイズは引き継がれます。

 

編集を行った時に、失敗してもすぐに元に戻れるように、最初にバックアップはとっておきましょう。

BackWPupの使い方【WordPressバックアップのやり方】

 

今日はここまで。

 

お疲れ様でした。

-カスタマイズ
-

© 2020 mitanote