既存の親テーマでWordPressをカスタマイズしてはいけないのはなぜですか？使用しているテーマが更新されると、カスタマイズはどうなりますか？
答えはそれらが失われ、あなたのブランドとメッセージングのガイドラインと好みに従ってあなたのサイトを作成するためのあなたの努力も失われるでしょう。
子テーマを使用すると、別のCSSスタイルシートを作成し(child theme enables you to create a separate CSS stylesheet)、親テーマが更新されたときに失われたり影響を受けたりしない追加機能を追加できます。
これは、手動で行うことも、子テーマ作成プラグインをインストールすることによって行うこともできます。手動プロセスから始めましょう。
新しいディレクトリを作成する(Create a New Directory)
(Start)子テーマの新しいディレクトリを作成することから始めます。FTPクライアント(FTP client)を使用するか、cPanelを介して既存のwp-content/themes
cPanelを使用するには、ホスティングコントロールパネルに移動します。ファイルマネージャー(file manager)を選択し、 WordPressがインストールされているディレクトリに移動します。
これは通常、public_htmlという名前のディレクトリにあります。wp-contentフォルダーを見つけて開きます。[新しいフォルダーの作成](create new folder)をクリックして、子テーマの名前を入力します。後で認識できる名前を付けてください。良い例は、nameofparenttheme-childです。
エラーを避けるために、ファイル名にスペースを含めないでください。
内部処理のため、以下の例に示すように、フォルダー名には親テーマの名前（テーマ'slug'）を含める必要があります。
CSSスタイルシートを作成する(Create a CSS Stylesheet)
スタイルシートは、2つの理由でWordPressテーマで使用されます。
- これは、サイトの外観に影響を与えるスタイルの場所です。
- テーマのメインスタイルシートは、WordPressがテーマに関する情報を検索する場所です。
子テーマに新しいスタイルを追加したくない場合があります。ただし、テーマ名や親テーマ名などの詳細を定義するには、スタイルシートが存在する必要があります。
したがって、子テーマの新しいスタイルシートを作成する必要があります。したがって、次のステップは、子テーマの外観を制御するルールを定義するCSSスタイルシートのテキストファイルを作成することです。(CSS)
子テーマのCSSファイルは、親テーマよりも優先されます。
テキストファイルに次の情報を含める必要があります。
- あなたのテーマの名前。
- 親テーマディレクトリの名前。
- 意味のあるタイトルと説明。
ファイルの上部にある次のヘッダーコメントをスタイルシートに必ず含めてください。WordPressはこの情報を読み取り、子テーマが使用されていることを認識します。
テンプレートタグに細心の注意を払いたい。それはあなたの子供の親テーマが何であるかをWordPressに伝えます。(WordPress)親テーマが配置されているフォルダーでは大文字と小文字が区別されることに注意してください。
技術的には、子テーマをアクティブ化できるようになりました。ただし、より複雑な子テーマを作成する場合は、カスタムPHP(PHP)関数を追加する必要があります。
子テーマにfunctions.php(functions.php)ファイルを作成します（作成したstyle.cssファイルと同じディレクトリにあります）。これは、追加の投稿フォーマットなどを追加する必要がある場所です。
CSSファイルと同様に、 PHPファイルへの変更または追加は、親の関数と自動的にマージまたはオーバーライドされます。
add_theme_support（）で追加された投稿形式などの場合、それらはマージではなくオーバーライドとして機能します。
add_theme_support（）を使用する場合は、子テーマが親をオーバーライドするように、いくつかの追加手順を実行する必要があります。
これは複雑になる可能性があるため、WordPressの投稿形式の使用に関する現在の( post on using WordPress post formats)WordPressテーマレビューチーム(WordPress Theme Review Team)のリーダーであるWilliamPattonの投稿を参照してください。
スタイルとスクリプトを追加して、親テーマの機能をオーバーライドします(Add Styles & Scripts To Override Parent Theme Functionality)
次のステップは、子テーマが親テーマの機能とスタイルを継承するか、使用する新しいものを反映することを確認することです。
スタイルは、Webサイトの外観を変更するために使用されます。スクリプト(Scripts)は機能を強化します。スタイルとスクリプトをWordPressサイトに追加する方法は、ファイルの内容と同じくらい重要です。
WordPressのエンキュー機能は、これを実現する方法です。
エンキューとは、スタイルとスクリプトをWordPressサイトに追加して、ユーザーがサイトにアクセスしたときに表示される内容に影響を与える方法を指します。
同じ結果を達成するために多数のプラグインを使用すると、互換性の問題やサイトの破損につながることがよくあります。
Wp_enqueueは、プラグインのオーバーヘッドを削減することでWebサイトのパフォーマンスを向上させるだけでなく、ユーザーエクスペリエンスも向上させます。
使用方法'wp_enqueue'(How To Use ‘wp_enqueue’)
子テーマのスタイルを出力するには、 wp_enqueue_style（）(wp_enqueue_style())という関数を使用する必要があります。
この関数は数ビットの情報を取りますが、最も重要なのはファイルの名前（または「ハンドル」）と場所です。
関数(functions.php).phpファイル内に次のコードを追加します。
このコードは、親ディレクトリからスタイルシートを追加してから、前に作成した子のスタイルシートも追加します。親スタイルの(parent-style)テキストは、親テーマの名前と一致し、最後に-styleが追加されている必要があることに注意してください。
お子様のテーマを有効にする(Activate Your Child Theme)
wp-content/themes/yourthemenameフォルダー内に子テーマのファイルを作成した場合、そのファイルはWordPressダッシュボードでアクティブ化できるようになります。
- ダッシュボードにログインします。
- Appearance > Themesに移動します。
- あなたの子供のテーマがリストされている必要があります。
- [プレビュー](Preview)を選択して、新しい子テーマでサイトがどのように表示されるかを確認します。
- 外観に満足したら、[アクティブ化(Activate )]をクリックしてライブにします。
サーバー以外の場所のwp-content/themes/yourthemenameフォルダーに子テーマを作成した場合は、新しい子テーマフォルダーをzip形式で圧縮する必要があります。
- WordPressダッシュボードにログインします。
- Appearance > Themesに移動します。
- [新規追加]を(Add new)クリックします。
- [テーマのアップロード](Upload Theme)を選択します。
- 表示される新しいボックスにzipファイルをドラッグ(Drag)するか、ファイルセレクターをクリックしてコンピューターで参照します。
- アップロードが完了すると、プレビューしてアクティブ化できます。
テンプレートファイルを追加する(Add Template Files)
他のテンプレートを上書きするには、それらを親テーマから子テーマにコピーします。子で親と同じ名前のテンプレートファイルは、オーバーライドとして機能します。次に、必要に応じてテンプレートの内容を調整します。
新しいテンプレートを追加する(To add new templates)には、正しい名前で新しいファイルを作成し、独自のコンテンツを追加するだけです。上記のセクションでは、手動プロセスについて説明します。
それでは、 WordPress(WordPress)プラグインを使用して子テーマを作成する方法を見ていきましょう。
WordPressプラグインを使用する(Use a WordPress Plugin)
(Log)WordPressダッシュボードにログインします。[(Click)Plugins > Add Newクリックします。子テーマ(child theme.)を検索します。
最初に表示されるプラグインは、ChildThemeConfiguratorです( Child Theme Configurator)。上のスクリーンショットに見られるように、これは良い選択です。理由は次のとおりです。
- WPの現在のバージョンと互換性があります。
- たくさんのインストールがあります。
- 最近更新されました。
[Install now > Activateクリックします。次のステップは、[ツール]に移動して、(Tools)子テーマ(child themes.)を選択することです。
(Find)ドロップダウンメニューから親テーマを見つけて選択します。分析(analyze)を選択して、テーマが子テーマとして使用できることを確認します。
以下は、 (Below)ChildThemeConfiguratorを設定する方法のステップバイステップのチュートリアルです。別のWordPress(WordPress)プラグインを使用する場合は、その設定方法に関するチュートリアルも簡単に見つけることができます。
ご存知のように、子テーマは、機能の一部を親テーマに依存する別個のテーマです。
子テーマを使用する場合、WordPressは親の前に子を探し、子が存在する場合はそのスタイルと機能に従います。
更新の影響を受けない子を作成することにより、親テーマが更新されるときに、多くの時間、トラブル、および将来の頭痛の種を節約できます。
How To Create a WordPress Child Theme
Why should you nevеr customize WordPress in the existing parent theme? What happens to your customizations when the theme you are using is updated?
The answer is they are lost, and your hard work to create your site according to your brand and messaging guidelines and preferences will also be lost.
A child theme enables you to create a separate CSS stylesheet and add additional functionality that will not be lost or affected when the parent theme is updated.
This can be done manually or by installing a child theme creator plugin. Let’s start with the manual process.
Create a New Directory
Start by creating a new directory for your child theme. You can use an FTP client or access your existing wp-content/themes directory via your cPanel.
To use cPanel, go to your hosting control panel. Select file manager and navigate to the directory where WordPress is installed.
This is usually in a directory named public_html. Locate and open the wp-content folder. Click on create new folder and input a name for your child theme. Be sure to give it a name that you will recognize later. A good example is nameofparenttheme-child.
Do not include any spaces in your file name to avoid errors.
Due to internal handling, the folder name must include the name of the parent theme (theme ‘slug’) as shown in the example below.
Create a CSS Stylesheet
Stylesheets are used in WordPress themes for two reasons.
- It is the location of the styles that affect how your site looks.
- A theme’s main stylesheet is where WordPress looks to find information about the theme.
You may not want to add any new styles in the child theme. However, the stylesheet still needs to exist to define specifics such as your theme name and the parent theme name.
Therefore, you need to create a new stylesheet for your child theme. So, your next step is to create a text file for the CSS stylesheet that will define the rules that control the look of your child theme.
The child theme CSS file will then take precedence over the parent theme.
You need to include the following information in your text file:
- Your theme’s name.
- The name of the parent theme directory.
- Title and description that makes sense.
Be sure to include in the stylesheet the following header comment at the top of the file. WordPress will read this information and know that a child theme is being used.
You want to pay close attention to the template tag. It tells WordPress what the parent theme of your child is. Note that the folder where your parent theme is located is case sensitive.
Technically, you can now activate your child theme. However, if you want to create a more complex child theme, you will need to add custom PHP functions.
Create a functions.php file in the child theme (in the same directory as the style.css file you made). This is where things like additional post formats should be added.
As with your CSS file, the changes or additions to your PHP file will automatically be merged with or override the parent’s functions.
For things like post formats that are added with an add_theme_support(), they act as overrides instead of merges.
When using add_theme_support(), you need to take some additional steps to ensure that the child theme overrides the parent.
This can get complicated, so refer to the current WordPress Theme Review Team lead William Patton’s post on using WordPress post formats.
Add Styles & Scripts To Override Parent Theme Functionality
Your next step is to make sure your child theme either inherits the parent theme’s features and styles or reflects the new ones you want to use.
Styles are used to changing the appearance of your website. Scripts enhance functionality. The way styles and scripts are added to your WordPress site is as essential as the contents of the files.
WordPress’ enqueue functionality is how to get this accomplished.
Enqueueing refers to the way styles and scripts are added to WordPress sites so that they can affect what users see when they visit your site.
Using numerous plugins to achieve the same result often leads to compatibility issues and broken sites.
Wp_enqueue not only improves your website’s performance by way of reducing plugin overhead, but it also enhances the user experience.
How To Use ‘wp_enqueue’
To output the styles for your child theme, you will need to use a function called wp_enqueue_style().
This function takes a few bits of information, but the most important is the name (or ‘handle’) and the location of the file.
Inside the functions.php file add the following code.
This code adds the stylesheet from the parent directory and then also adds the stylesheet for the child which we created earlier. Note that the parent-style text should match the name of the parent theme with -style added to the end.
Activate Your Child Theme
If you created the files for your child theme on the server inside the wp-content/themes/yourthemename folder, it would then be available in your WordPress dashboard for you to activate.
- Log into your dashboard.
- Go to Appearance > Themes.
- Your child theme should be listed.
- Select Preview to see how the site looks with the new child theme.
- Once you are satisfied with how it looks, click Activate to make it go live.
If you created your child theme somewhere other than on the server in the wp-content/themes/yourthemename folder, then you should zip your new child theme folder.
- Log into your WordPress dashboard.
- Go to Appearance > Themes.
- Click Add new.
- Choose Upload Theme.
- Drag your zipped file to the new box that appears or click the file selector and browse to it on your computer.
- Once it has been uploaded, then you can preview it and then activate it.
Add Template Files
To override other templates, you can copy them from the parent theme into the child theme. Any template files that have the same name in the child as in the parent act as overrides. Then adjust the contents of the templates as needed.
To add new templates, it’s just a case of making a new file with the correct name and adding your own content. The above section explains the manual process.
Now let’s go over how to create child themes with a WordPress plugin.
Use a WordPress Plugin
Log into your WordPress dashboard. Click on Plugins > Add New. Search for child theme.
The first plugin you will see is the Child Theme Configurator. This is a good choice, as seen in the screenshot above, because it:
- Is compatible with the current version of WP.
- Has a lot of installations.
- Was recently updated.
Click on Install now > Activate. The next step is to navigate to Tools and then select child themes.
Find and select your parent theme from the drop-down menu. Choose analyze to make sure your theme is ok to use as a child theme.
Below is a step-by-step tutorial on how to set up Child Theme Configurator. If you decide to use a different WordPress plugin, you can easily find a tutorial on how to set it up as well.
As you now know, child themes are distinct themes that rely on their parent theme for some of their functionality.
When you use a child theme, WordPress will look for the child before the parent and follow the styling and functionality of the child if it exists.
Save yourself a lot of time, trouble, and future headaches when the parent theme updates by creating a child that will not be affected by the update.
