初めてのWordPress子テーマをゼロから作る(コードサンプル付き)

多くの初心者はワードプレスウェブサイトを構築する際、オリジナルのテーマを壊すことなく、自分好みの変更を加えたい。このとき子テーマ これが最も安全で柔軟なソリューションなのです。ここでは、最初の子テーマを作成する方法をステップバイステップで説明します。

画像[1] - WordPressの子テーマをゼロから作成するチュートリアル

まず、WordPressの子テーマとは何か。

子テーマは、メインテーマ(親テーマ)に依存するテーマで、メインテーマ(親テーマ)のごかんけいせいぼおんの機能やスタイルを変更することができますが、メインテーマに影響を与えることなくファイルの一部を自由に変更することができます。メインテーマが更新されても、子テーマのカスタマイズされたコンテンツは上書きされないので、長期的なメンテナンスが必要なサイトに最適です。

わかりやすい:
メインテーマ=基本機能
サブテーマ = カスタム拡張機能

II.サブトピックを作る前の準備

始める前に、以下のものをご用意ください:

  1. WordPressバックエンドへのアクセス、FTPまたはホスティングによるファイル管理。
  2. メインテーマのフォルダ名(例 blocksyそしてアストラそしてトゥエンティトゥエンティフォー).
  3. テキストエディタ(VS Code、Notepad++など)。

III.サブトピックフォルダの作成

ウェブサイト・カタログへのアクセス wp-content/themes/ここに、通常の命名形式で新しいフォルダを作成する:

被写体名-子供

あなたのメインテーマが woodmartそうだ。サブテーマそして、そのフォルダに名前が付けられる:

ウッドマート・チャイルド

これにより、システムは自動的に父子関係を認識することができ、管理も容易である。

画像[2] - WordPressの子テーマをゼロから作成するチュートリアル

第四に、style.cssファイルを書く。

ある ウッドマート-子供 という名前の新しいフォルダを作成します。 スタイル.css ファイルを開き、次のコードを書く:

/*
テーマ名: Woodmart Child
テンプレート:ウッドマート
作者: Your Name
バージョン: 1.0
説明: これはWoodmartテーマの子テーマです。
*/ウッドマート

説明

  • テーマ名サブトピックの表示名。
  • テンプレートメインテーマのカタログ名で、正確に記入すること。
  • その他の情報はカスタマイズ可能。

救われた。ワードプレスそうして初めて、サブテーマを認識することができる。

V. メインテーマ・スタイルの読み込み

子テーマを作成したら、メインテーマのCSSスタイルを継承させる必要もある。
子テーマのディレクトリに functions.php ファイルに以下のコードを追加してください:

<?php
function astra_child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'astra_child_enqueue_styles');
?>

役割
このコードにより、子テーマはメインテーマのスタイルファイルを自動的に読み込み、一貫したページ外観を確保することができます。

VI.バックグラウンドでサブを有効にするごかんけいせいぼおん

WordPressバックエンド → 外観 → テーマに戻り、先ほど作成した子テーマを確認する "ウッドマート・チャイルド".

画像[3] - WordPressの子テーマをゼロから作成するチュートリアル


有効化」をクリックすると、子テーマが正式に有効になります。サイトの外観は変わりませんが、メインテーマに影響を与えることなく、子テーマのテンプレートファイルやスタイルを自由に変更することができます。

VII.子テーマの内容をカスタマイズする

有効にすると、操作のカスタマイズを開始できます:

1.修正カスケーディングスタイルシートタイプ

に直接接続する。 スタイル.css メインテーマよりも優先順位の高い新しいスタイルを書き込む。例

h1 {
    font-size: 28px; color: #0073aa; h1 { {.
    color: #0073aa.
}

2.テンプレートファイルの修正

ページ構造を変更したい場合は、メインテーマのファイルを子テーマのフォルダにコピーしてください。例
のコピーを取ります。 header.php 子テーマのディレクトリに移動して、その中のコードを修正するだけです。

3.機能的機能の追加

サブトピックの functions.php 新しいナビゲーションメニューを追加したり、ログインページのロゴを変更するなどのカスタマイズを追加します。

試験とメンテナンス

果たすサブテーマその後、必ずテストしてください:

  • ウェブサイトのページを開き、スタイルと機能が正しいことを確認する;
  • 報告されたエラーをコンソールで確認する;
  • メインテーマを定期的に更新し、互換性を確保する。

推薦します:
悪用を避けるために、子テーマファイルを変更する前にバックアップしてください。

高度なスキル:カスタムテンプレートの追加

特定のページで特別なレイアウトを使用したい場合は、子テーマで新しいカスタムテンプレートファイルを作成できます。
例えば ページカスタム.php書くんだ:

<?php
/*
Template Name: Custom Page Layout
*/
get_header(); ?>

<h2>これはカスタムテンプレートのページです。</h2>

<?php get_footer(); ?>

このテンプレートは、バックエンドで新規ページを作成する際に選択することで、異なるページレイアウトを素早く実装することができます。

X. サブテーマの長所のまとめ

  1. 高い安全性メインテーマの更新はカスタムコンテンツには影響しません。
  2. メンテナンスが容易コードの明確性と階層的管理。
  3. 柔軟な拡張性ファンクション機能の追加や変更も可能です。
  4. 構造的に独立トラブルシューティングがしやすい。

サブテーマは、初心者のための最初のステップであるだけでなく、プロの開発者がパーソナライズされたウェブサイトを作成するためのコアツールでもあります。ほんの数ステップで、あなたのワードプレスよりコントロールしやすく、メンテナンスしやすい。


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨询:1025174874
Eメール:[email protected]
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
著者:Linxiulian
終わり
好きなら応援してください。
クドス109 分かち合う
linxiulianのアバター - Photon Flux|WordPress 修理サービス、プロフェッショナル、ワールドワイド、迅速対応
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし