画像-クリエ・ココのロゴ
お問い合わせ
blog-Twenty-Twenty-Three-introduction

【ChatGPTが作成した】WordPress6で無料テーマ Twenty Twenty-Three の導入方法

無料テーマ Twenty Twenty-Three の導入方法

WordPressのバージョンは6です。
ChatGPTで作成してみました。一部筆者が補足・編集しています。

１）無料テーマ Twenty Twenty-Three の導入方法（概要）

  1. テーマファイルのダウンロード まず、Twenty Twenty-Threeテーマをダウンロードします。WordPress.orgから無料でダウンロードすることができます。
  2. WordPressにテーマをインストール WordPressにログインし、ダッシュボードから「外観」→「テーマ」を選択します。次に、画面右上の「新規追加」ボタンをクリックし、ダウンロードしたTwenty Twenty-Threeテーマのzipファイルをアップロードします。
  3. テーマを有効化 アップロードが完了したら、「有効化」ボタンをクリックしてTwenty Twenty-Threeテーマを有効にします。

※WordPress.orgからダウンロードしなくても、ダッシュボードから「外観」→「テーマ」に既にTwenty Twenty-Threeテーマが入っているケースが通常でしょう。その場合は上記３項から実施ください。


これで、WordPress6でTwenty Twenty-Threeテーマが導入されました。必要に応じて、カスタマイズしてサイトに適したデザインに調整することができます。

２）Twenty Twenty-Threeテーマのカスタマイズ方法

  1. カスタマイザーでの設定 WordPressのカスタマイザーから、Twenty Twenty-Threeテーマの各種設定を変更することができます。外観 → エディタをクリックすると、カスタマイザーが開きます。ここで、ブロックエディターを使用して、Web サイトの外観をカスタマイズします。
  2. CSSのカスタマイズ Twenty Twenty-Threeテーマは、WordPressによって提供される公式のテーマですが、CSSを変更することでカスタマイズすることも可能です。ツール→ テーマファイルエディターのstyle.cssをクリックし、独自のCSSを追加することができます。
  3. 子テーマの作成 WordPressでは、親テーマをベースにして子テーマを作成することができます。子テーマを作成することで、親テーマのソースコードを変更せずにカスタマイズを行うことができます。子テーマを作成する場合は、Twenty Twenty-Threeテーマを親テーマとして指定し、必要なファイルを作成する必要があります。

以上が、Twenty Twenty-Threeテーマのカスタマイズ方法になります。WordPressには、多数のプラグインが用意されているため、プラグインを使ってカスタマイズすることもできます。

３）Twenty Twenty-Threeの子テーマを作成する方法

  1. テーマフォルダの作成 まず、WordPressのテーマフォルダ内に子テーマのフォルダを作成します。例えば、「twentytwentythree-child」という名前のフォルダを作成します。
  2. スタイルシートの作成 子テーマのスタイルシートを作成します。子テーマフォルダ内にstyle.cssという名前のファイルを作成し、以下のようなコードを記述します。
cssCopy code/*
Theme Name: Twenty Twenty-Three Child
Template: twentytwentythree
*/





ここで、Theme Nameは子テーマの名前を指定し、Templateは親テーマのディレクトリ名を指定します。この場合、親テーマのディレクトリ名は「twentytwentythree」になります。





    

  1. functions.phpの作成 子テーマ用のfunctions.phpファイルを作成します。子テーマフォルダ内にfunctions.phpという名前のファイルを作成し、以下のようなコードを記述します。
    2. 






<?php
 function enqueue_theme_styles() {
    // 親テーマのスタイル
    wp_enqueue_style( 'style-parent', get_template_directory_uri() . '/style.css' );
    // 子テーマのスタイル
    wp_enqueue_style( 'style-child', get_stylesheet_directory_uri() . '/style.css', array('style-parent') );
    }
    add_action( 'wp_enqueue_scripts', 'enqueue_theme_styles' );





上の実行で親スタイルシート（「style.css」）を読み込んだ後に、子テーマのスタイルシート（「style.css」）を読み込み上書きされることになります。





    

  1. 子テーマのカスタマイズ これで子テーマが作成されたので、必要なカスタマイズを行うことができます。子テーマフォルダ内に、親テーマのファイルをコピーして変更することで、テンプレートファイルをカスタマイズすることができます。
    2. 










以上が、Twenty Twenty-Threeの子テーマを作成する方法になります。子テーマを使うことで、親テーマをアップデートしてもカスタマイズが失われないようにすることができます。







	







	
	

	

	
	

		
		

			
			

				
				

					投稿日				

				

				


				
				

					カテゴリー:				

				

				

			

			

			
			

				
				

					投稿者:				

				

				
creacoco

			

			
		

		

		
		

			
			

				
				

					タグ:				

				

				
, ,