WordPressの子テーマの紹介

公開: 2021-01-20

WordPressの主な機能の中には、デザイナーでなくても見栄えの良いWebサイトを構築する機能があります。 サードパーティのテーマを使用することで、技術的な知識が少しある人なら誰でも、見た目も機能も非常に優れたものを作成できます。

多くのテーマが無料または手頃な価格であるという事実に加えて、なぜこれほど多くの人々が時流に乗ったのかがわかります。

しかし、多くの人が気付いていないかもしれないのは、テーマをインストールしてニーズに合わせてカスタマイズすることは、物事の終わりではないということです。 実際には、行ったカスタマイズの種類によっては、将来テーマをアップグレードすると、それらの変更が失われる可能性があります。

たとえば、WordPressに含まれているデフォルトのテーマであるTwentySeventeenテーマを使用することを想像してみてください。 ページテンプレートやスタイルシートを直接編集したとしましょう。 既存のテーマをハッキングすることは、開発の詳細を学ぶための優れた方法ですが、次にその更新ボタンを押したときに、これらの変更をすべて消去するのも非常に簡単です。 ライブサイトでそれを行うと、悲惨な結果になる可能性があります。

ありがたいことに、物事を行うための別のより安全な方法があります。

子供は未来を守る

ここで、WordPressの子テーマの概念が役立ちます。 つまり、サイトの/wp-content/themes/ディレクトリ内に独自のフォルダを持つ別のテーマです。 ただし、ひねりがあります。 本格的なテーマではなく、子供はその「親」を参照します。

つまり、子テーマのフォルダーには、いくつかの基本的なアイテムしか含まれていません。

  • functions.phpファイル。
  • カスタマイズまたは追加するスタイルのみを含むスタイルシート( style.css )。
  • カスタマイズするテンプレートファイルのみ。

この設定の利点は、親テーマが提供するすべての機能を引き続き利用しながら、独自のタッチを追加できることです。 ハードな設計と開発作業のほとんどは、テーマの作成者によってすでに行われています。 そこから、好きなだけそれを行うことができます。

さらに良いのは、親テーマが最新バージョンに更新されるたびに、子は変更されないままになることです。 これは破損から完全に保護するわけではありませんが(これについては後で説明します)、カスタマイズが上書きされないことを意味します。 入ってすべてのハードワークをやり直すのは楽しいことではないので、それはかなり大きな問題です。

あなたの子供に会います

基本的な子テーマの設定

子テーマを設定する最初のプロセスは非常に単純で、数分しかかかりません。 確かに、それが現在と将来の両方であなたに提供する利益を考慮して支払うべき小さな価格。

Twenty Seventeenテーマ(およびWordPressテーマハンドブックのアドバイス)を例にとって、最も基本的な子テーマを見ていきましょう。

1. /wp-content/themes/ディレクトリに新しいフォルダを作成します。 好きな名前を付けることができますが、WordPressの推奨事項を次のように呼びます: twentyseventeen-child

WordPressの子テーマディレクトリ

2.新しいスタイルシートを作成し、 style.cssという名前を付けます。

そのCSSファイル内に、次のような見出しを配置し​​ます(特定の設定に合わせてカスタマイズできます)。

 /* Theme Name: Twenty Seventeen Child Description: My Twenty Seventeen Child Theme Author: Your Name Author URI: http://www.your-site.com Template: twentyseventeen Version: 1.0.0 */

ここに他のアイテムを配置できますが、必要な領域はテーマ名とテンプレートのみであることに注意してください。 名前は実際には好きな名前にすることができますが、テンプレート宣言には注意が必要です。 これは、親テーマのフォルダー名(この場合はtwentyseventeen )と一致する必要があります。 その参照が正しくない場合、子テーマは機能しません。

この情報の下に、子テーマで使用するカスタムスタイルを追加できます。 既存のスタイルを変更する場合は、親テーマのスタイルシートから直接コピーして貼り付けるか、ブラウザの開発ツールを使用して、ターゲットにするスタイルを簡単に見つけることができます。

3.少なくとも、親テーマと子テーマの両方のスタイルシートを参照するfunctions.phpファイルを作成します。

 <?php add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { $parent_; // This is 'twentyseventeen-style' for the Twenty Seventeen theme. 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 ), wp_get_theme()->get('Version') ); } ?>

* WordPressテーマハンドブックの子テーマガイドから変更されたコード。

もちろん、 functions.phpファイルは、サイトをさらに発展させるときにかなりカスタマイズできるファイルです。 しかし今のところ、この基本的なセットアップで少なくとも始めることができます。

4.親テーマのテンプレートファイルのいずれかを(元のファイルをそのままにして)子テーマのフォルダーにコピーし、必要に応じて変更します。

5. WordPressダッシュボード内で、[外観]> [テーマ]に移動して、新しい子テーマをアクティブにします。 テーマとともに画像を表示する場合は、 screenshot.pngという名前の1200×900のPNGファイルを子テーマのルートディレクトリに追加します。

子テーマのアクティブ化

オッズと終わり

それがどれほど簡単だったかわかりますか? その子テーマの作成にはほとんど時間がかかりませんでした。また、サイトで直接作成しました。 ただし、知っておくべきことがいくつかあります。

物事はまだ壊れている可能性があります

子テーマは変更が上書きされないように保護しますが、永久に問題が発生しないことを保証するものではありません。 親テーマが新しい機能を導入したり、特定のテンプレートを大幅に変更したりする場合があります。

これにより、子テーマに存在するカスタムテンプレートまたはスタイルで予期しない問題が発生する可能性があります。 その結果、問題のテンプレートの新しいコピーを使用して、以前の作業の一部をやり直す必要がある場合があります。

正しい親を使用していますか?

ばかげているように聞こえますが、テンプレートに大幅な変更を加えていることに気付いた場合は、最初に適切な親テーマを選択したかどうか疑問に思うのは当然です。 子テーマのアイデアは、オリジナルを完全に分解するのではなく、いくつかのカスタム調整を行う(そして保存する)ことであることを忘れないでください。 探しているものの少なくとも75%程度の親テーマを使用することをお勧めします。

それ以外の場合は、スターターテーマまたはフレームワークを使用したほうがよい場合があります。

親テーマのドキュメントはあなたの友達です

すべてのテーマが同じ方法で作成されるわけではありません。 したがって、上記のクイックセットアップは機能しますが、特定の親テーマには理想的ではない場合があります。 テーマのドキュメントをチェックして、子を作成するための特別な考慮事項があるかどうかを確認してください(これは実際には子育ての記事のように聞こえ始めています)。

お子さんおめでとうございます(テーマ)

子のテーマは、時間と将来の頭痛の種の両方を節約できる、クールで小さなWordPressのトリックの1つです。

独自のカスタマイズをミックスに追加する機能を持ちながら、サードパーティのテーマが提供するすべてのものを利用したい場合に強くお勧めします。