• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • お問い合わせ
FOXWP / WordPress / WordPressで子テーマを作成する方法

WordPressで子テーマを作成する方法

最終更新日:2021年10月6日

WordPressでテーマをカスタマイズしたい時は、子テーマを作成しましょう。

関連記事

  • WordPressの子テーマとは?メリットとデメリット

WordPressで子テーマを作成するには、FTPソフトを使う必要があります。FTPソフトの詳しい使い方は、このブログにある別記事のFileZillaの設定と使い方を参照してください。

目次 非表示
1 WordPressで子テーマを作成する方法
1.1 Step 1. サーバーに子テーマ用のディレクトリを作成
1.2 Step 2. style.cssファイルの作成
1.3 Step 3. functions.phpファイルの作成
1.4 Step 4. 子テーマ用のディレクトリに作成したファイルをアップロード
1.5 Step 5. 子テーマの有効化

WordPressで子テーマを作成する方法

まずは、子テーマの作成手順を確認しておきましょう。

いまからやることは…

  1. サーバーに子テーマ用のディレクトリを作成
  2. style.cssファイルの作成
  3. functions.phpファイルの作成
  4. 子テーマ用のディレクトリに作成したstyle.cssファイルとfunctions.phpファイルをアップロード
  5. 子テーマの有効化

今回は、Twnety Seventeenの子テーマを作成してみます。

Step 1. サーバーに子テーマ用のディレクトリを作成

まずは、FTPソフトを使ってWordPressをインストールしているサーバーに接続しましょう。

接続できたら、/wp-content/themes ディレクトリに移動します。ここの階層に子テーマ用のディレクトリを作成します。

FTPでWordPressのテーマディレクトリへ移動

ディレクトリの名前は、「親テーマ名」 + 「-child」などがいいでしょう。

子テーマ用のディレクトリ名

子テーマ用のディレクトリを作成できたら、親テーマのディレクトリ名を確認しておきます。次のstyle.cssファイルの作成で必要となります。

親テーマのディレクトリ名を確認

Step 2. style.cssファイルの作成

style.cssファイルを作成します。子テーマのstyle.cssファイルに必須な項目は以下の2つです。

  • Theme Name – 子テーマ名です。WordPres管理画面で表示される名称です。わかりやすく「親テーマ名」 + 「Child」がいいでしょう。
  • Template – Step 1で確認した親テーマのディレクトリ名を入力します。1文字でも間違えたら動作しませんので、注意しましょう。
/*
 Theme Name:   Twenty Seventeen Child
 Template:     twentyseventeen
*/

これらの項目を作成したstyle.cssファイルに記載しましょう。項目の前後にある「/*」と「*/」も必須ですので忘れないようにしてください。

Step 3. functions.phpファイルの作成

functions.phpを作成します。以下のコードを作成したfunctions.phpにコピーしてください。

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

Step 4. 子テーマ用のディレクトリに作成したファイルをアップロード

Step 2,3で作成したstyle.cssファイルとfunctions.phpファイルを、Step 1で作成した子テーマ用のディレクトリにアップロードします。

サーバーへ子テーマ用のファイルをアップロード

これで子テーマの準備は完了です。WordPress管理画面で確認してみましょう。

アップロード完了

Step 5. 子テーマの有効化

Step 2でstyle.cssファイルに記載したTheme Nameと同じテーマがあるのを確認できます。

WordPress管理画面で子テーマの確認

子テーマを使用したい場合、あとは有効化すれば完了です。

子テーマの有効化

カテゴリー:WordPress

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル
Previous Post: « FileZillaの設定と使い方
Next Post: WebサイトやブログのWordPressテーマを調べる方法 »

Primary Sidebar

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
レビューを見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

最新ニュース

  • 【カラフルボックス】夏のキャンペーン実施中【2021年8月31日まで】

最近の投稿

  • WordPressでおすすめのバックアッププラグイン5選
  • WordPressのPHP設定を変更する方法(php.ini)
  • WordPressでおすすめの画像圧縮プラグイン5選
  • WordPressの投稿編集画面でその投稿を表示する方法
  • WordPressの管理画面に再利用ブロックの管理を追加する方法

カテゴリー

  • WordPress
  • お役立ち情報
  • アフィリエイト
  • ドメインレジストラ
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2023 FOXWP All rights reserved.