バックエンド

WordPressで子テーマを設定する簡単な方法!

WordPressの子テーマって何?

ナカイ君: WordPress子テーマの設定方法についてわかりやすく知りたいんだけど。

世界のアオキ: OK、子テーマってのは、既存のテーマ(親テーマ)をベースにして、カスタマイズを加えるためのテーマだよ。これを使うと、オリジナルのテーマを直接編集せずに済むから、アップデートがあってもカスタマイズした部分が失われる心配がないんだ。

ナカイ君: もっと具体的に教えてくれない?

世界のアオキ: そうだね。子テーマを作るには、まず新しいテーマフォルダを作成して、そこに「style.css」ファイルを作り、その中に親テーマを指定する情報を書き込むんだ。それだけで、子テーマとして機能するようになるんだよ。

わかりやすいコード例

ナカイ君: わかりやすいコードがあれば教えてほしいな。

世界のアオキ: もちろんだよ。子テーマの「style.css」ファイルにはこんな感じで書くんだ。

/*
 Theme Name:   Twenty Twenty-One Child
 Theme URI:    http://example.com/twenty-twenty-one-child/
 Description:  Twenty Twenty-One Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentytwentyone
 Version:      1.0.0
*/


ここで、「Template:」の後に親テーマのディレクトリ名を書くんだ。これが子テーマを親テーマにリンクさせる鍵になるよ。

具体的にどう使うの?

ナカイ君: 具体的にはどうやって使うの?

世界のアオキ: 「style.css」を設定したら、子テーマのフォルダをWordPressの「themes」ディレクトリにアップロードするんだ。その後、WordPressの管理画面から子テーマを有効化するだけ。これで、子テーマを使ってサイトのカスタマイズができるようになるんだ。

ナカイ君: 他のパターンがあれば教えてほしいな

世界のアオキ: 了解だよ。さらにカスタマイズを進めたい場合、子テーマに「functions.php」ファイルを追加するといいんだ。このファイルを使って、親テーマの機能を拡張したり、新しい機能を追加したりできるよ。

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




これで、親テーマのスタイルを引き継ぎつつ、さらに子テーマでスタイルを追加できるようになるんだ。

ナカイ君: そうやって使えばいいんだね。

世界のアオキ: そういうわけで、子テーマを使えば、安全にテーマをカスタマイズできるんだ。カスタマイズしても、テーマのアップデートで変更が上書きされる心配がなくなるから、安心して使えるよ。

ナカイ君: わかった、ありがとう!

まとめ

WordPressで子テーマを設定する方法は、非常に簡単です。新しいテーマフォルダを作成し、「style.css」に必要な情報を記入して、WordPressの「themes」ディレクトリにアップロードするだけ。

これにより、オリジナルのテーマを保持したまま、安全にカスタマイズを行うことができます。ナカイ君のように、ステップバイステップで進めれば、あなたも簡単に子テーマを設定できるようになりますよ!


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

アーカイブ

  1. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  2. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
  3. オンライン教材

    ChatGPTをビジネス活用する講座をリリースしました【Udemy】
  4. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  5. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock