見出し画像

ChatGPT-4oとWordPressテーマ作成にチャレンジ①

Ken-ta

さて、ChatGPT-4oと対話しながら作ったiPad mini 6用の電卓アプリが完成したので（近日中にnoteに記事アップ？）、今回はオリジナルWordPressテーマの作成にチャレンジしてみたいと思います。

仕事でWordPressを使ってサイトを作っているのですが、配布されているテーマって、いろいろ機能はついているんだけど、なかなか思い通りにカスタマイズできなかったりしません？
できればシンプルで、必要な機能はプラグインで補えるようなテーマ作りたいなと前々から思っていたのですが……素人にはなかなか……ねぇ。

そこでChatGPT-4oくんなら、もしかしてちゃちゃっとできちゃう？

さっそくChatGPTくんに相談してみましょう。

制作環境は：
Windows11 Home。
ChatGPTはChatGPT Plus。
ブラウザはGoogle ChromeとMicrosoft Edge。
テキストエディタ―はBrackets。
ファイルのアップロードはWordPressのテーマ追加かFPT（ウェブサーバー付属の）。

ChatGPTを使う上での注意点：
・同じ質問をしても、返ってくる返事が毎回違う。
・生成されたデータやプログラムが正しいとは限らない。
・修正を1か所お願いしたのに、他の箇所も修正されていることがある。
・やり取りが堂々巡りになって終わらなくなることがある。


まず何をすればいい？

ボク：
WordPress用のシンプルなテーマを作成したいです。

・WordPressのブロックエディターGutenbergに対応。
・レスポンシブに対応。
・ページテンプレートはサイドバー無しの1段。（ただし、今後、追加でサイドバーありも検討する）

基本的な設定以外は、さまざまなプラグインを配置するためのコンテナのようなテーマを考えています。
まずは何から考えればよいでしょう。

ChatGPT-4o：
WordPress用のシンプルなテーマを作成するための基本的なステップは以下の通りです：

1. テーマのディレクトリ構成を決める

まずはテーマのディレクトリ構成を決めます。以下は基本的な構成例です：

mytheme/
├── style.css
├── index.php
├── functions.php
├── header.php
├── footer.php
├── sidebar.php (必要になったときに追加)
├── single.php
├── page.php
├── assets/
│   ├── css/
│   ├── js/
│   └── images/
└── templates/
└── template-no-sidebar.php

2. style.css を作成する

テーマのメタ情報と基本的なスタイルを定義します。

/*
Theme Name: My Simple Theme
Theme URI: http://example.com/
Author: Your Name
Author URI: http://example.com/
Description: A simple responsive WordPress theme compatible with Gutenberg.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-simple-theme
*/

3. index.php を作成する

WordPressのメインテンプレートファイルです。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <?php wp_body_open(); ?>
    <header>
        <h1><?php bloginfo( 'name' ); ?></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        else :
            echo '<p>No posts found.</p>';
        endif;
        ?>
    </main>
    <footer>
        <p>&copy; <?php echo date('Y'); ?> <?php bloginfo( 'name' ); ?></p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

4. functions.php を作成する

テーマの機能を定義します。

<?php
function mytheme_enqueue_styles() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_styles' );

function mytheme_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'align-wide' );
    add_theme_support( 'editor-styles' );
    add_theme_support( 'wp-block-styles' );
    add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

5. template-no-sidebar.php を作成する

サイドバー無しのページテンプレートです。

<?php
/* Template Name: No Sidebar */
get_header();
?>
<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            the_content();
        endwhile;
    else :
        echo '<p>No posts found.</p>';
    endif;
    ?>
</main>
<?php get_footer(); ?>

6. レスポンシブ対応のスタイルを追加する

style.css に基本的なレスポンシブデザインのスタイルを追加します。

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header, footer {
    text-align: center;
    padding: 1em;
    background: #333;
    color: #fff;
}

main {
    padding: 1em;
}

@media (min-width: 600px) {
    main {
        width: 80%;
        margin: 0 auto;
    }
}

7. テーマをテストする

WordPressにテーマをアップロードし、有効化して動作を確認します。

ChatGPT：
これらのステップを基にして、テーマの基盤を作成し、必要に応じてカスタマイズや追加機能を実装していくと良いでしょう。テーマの詳細な要件やデザインに応じて、ファイルやコードを追加・修正してください。

ボクが行った作業：
・PC内に「mysimpletheme」というフォルダを作成。
・index.php、style.css、functions.php、template-no-sidebar.phpにコードをコピー。

ウェブサーバー上のWordPressにアップロードするには？

ボク：
ウェブサーバー上にテスト用のWrodPressを用意しました。 作成したファイルをどのようにアップロードすればよいか教えてください。

ChatGPT：
WordPressテーマをウェブサーバーにアップロードするには、以下の手順を実行してください。

1. テーマファイルを準備する

作成したテーマファイルを1つのフォルダにまとめます。例えば、「mytheme」というフォルダに以下のようなファイル構成にします。

mytheme/
├── style.css
├── index.php
├── functions.php
├── header.php
├── footer.php
├── sidebar.php (必要になったときに追加)
├── single.php
├── page.php
├── assets/
│   ├── css/
│   ├── js/
│   └── images/
└── templates/
    └── template-no-sidebar.php

2. テーマフォルダを圧縮する

テーマフォルダ全体をZIP形式に圧縮します。例えば、「mytheme.zip」とします。

3. WordPress管理画面にログインする

ウェブサーバー上のWordPressサイトの管理画面にログインします。

4. テーマをアップロードする

  1. 「外観」 > 「テーマ」 に移動します。

  2. 画面上部の 「新規追加」 ボタンをクリックします。

  3. 「テーマのアップロード」 ボタンをクリックします。

  4. 「ファイルを選択」 ボタンをクリックして、先ほど圧縮した「mytheme.zip」ファイルを選択します。

  5. 「今すぐインストール」 ボタンをクリックします。

5. テーマを有効化する

インストールが完了したら、「有効化」 ボタンをクリックしてテーマを有効化します。

6. テーマの動作を確認する

新しいテーマが正しく動作しているか確認します。サイトを表示し、レイアウトやスタイルが期待通りかどうかを確認します。

ファイルの手動アップロード（FTP経由）

もし、FTPを使用してファイルを直接サーバーにアップロードする場合は、以下の手順に従います：

  1. FTPクライアントソフトを使用（例：FileZilla）してサーバーに接続します。

  2. サーバーの wp-content/themes/ ディレクトリに移動します。

  3. 「mytheme」フォルダをそのディレクトリにアップロードします。

アップロードが完了したら、WordPress管理画面の「外観」 > 「テーマ」に移動し、新しいテーマを有効化します。

ChatGPT：
これで、作成したテーマがWordPressで使用できるようになります。必要に応じて、テーマのスタイルや機能を調整してください。

ボクが行った作業：
・「mysimpletheme」フォルダ内に必要なフォルダを作成。
・先ほど作成したindex.php、style.css、functions.php、template-no-sidebar.phpを所定の場所に入れ、それ以外のファイルも作成（中身は無し）。
・「mysimpletheme」フォルダごとZIPファイルに圧縮。
・指示通り、WordPressのテーマ選択画面からmysimpletheme.zipファイルをインストール＆有効化。

次のステップとして

ボク：
成功しました。

ChatGPT：
成功してよかったです！次に進めるステップとして、以下の点を考えてみてください。

1. テーマのカスタマイズ

テーマの基本的な部分が動作することを確認できたので、次に以下のカスタマイズを行ってみてください。

  • デザインの調整: style.css を編集して、テーマのデザインをさらに洗練させます。

  • テンプレートファイルの追加: 必要に応じて、single.php, page.php などのテンプレートファイルを作成・編集します。

2. レスポンシブデザインの強化

より多くのデバイスに対応するために、メディアクエリを使ってレスポンシブデザインを強化します。

3. Gutenberg ブロックのサポート

Gutenberg ブロックエディターを利用している場合、以下のサポートを追加すると良いでしょう。

  • ブロックスタイルのカスタマイズ: functions.php に以下のコードを追加して、エディタースタイルを読み込みます。

function mytheme_enqueue_editor_styles() {
    add_editor_style( 'style.css' );
}
add_action( 'admin_init', 'mytheme_enqueue_editor_styles' );

  • カスタムブロックの追加: 必要に応じて、JavaScript を使ってカスタムブロックを作成します。

4. テーマの検証とテスト

テーマがさまざまな状況で正しく動作することを確認するために、以下を実施します。

  • 異なるブラウザでのテスト: 主なブラウザ（Chrome, Firefox, Safari, Edge）でテーマをテストします。

  • モバイルデバイスでのテスト: スマートフォンやタブレットでテーマをテストします。

  • パフォーマンスのチェック: テーマのパフォーマンスをチェックし、最適化します。

5. ドキュメントの作成

テーマを他のユーザーが使いやすくするために、基本的な使い方やカスタマイズ方法を記載したドキュメントを作成します。

これらのステップを順次進めていくことで、より完成度の高いWordPressテーマを作成できるでしょう。何か質問や問題があれば、いつでもお手伝いします。

という感じで、WordPressテーマ制作の第一歩が完了しました。

実際にウェブサーバー上に用意したWordPressにテーマを追加・有効かしてみたところ、こんな感じになりました。

以前、テーマの作り方の本を購入してチャレンジしたこともあるのですが、仕事の忙しさ……いや、Youtubeみたりアニメ観たりSNSやったりしてて、諦めてたので、この調子で出来るならいいかなぁ。

次はサイトのタイトル、サブタイトル、メニューの追加をやってみようかな？

この記事が参加している募集

#AIとやってみた

27,336件

この記事が気に入ったらサポートをしてみませんか？