HTML/CSSやJavaScriptで作成したサイトをWordPress化する手順

1. HTMLファイルを準備

• 既存のHTML/CSS/JavaScriptファイルを用意します。

2. WordPressテーマフォルダの作成

• WordPressのインストールディレクトリ内の wp-content/themes に移動し、新しいテーマフォルダを作成します（例: my-theme）

3. 基本ファイルの作成

• フォルダ内に以下のファイルを作成：
  • style.css: テーマ情報を記述。
  • index.php: メインテンプレートファイル

style.css の例:

/*
Theme Name: My Theme
Author: Your Name
Description: Custom WordPress Theme
Version: 1.0
*/

4. HTMLをPHPに変換

• HTMLファイルを .php に変更。
• ヘッダー、フッター、サイドバーなどを分割し、それぞれ header.php, footer.php などに保存

5. パスの修正

• CSS、JS、画像のパスを WordPress用に置き換えます。php<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css"> <script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>

6. functions.php の作成

• 必要に応じて functions.php を作成し、CSSやJSファイルを登録。

phpfunction enqueue_scripts() {
    wp_enqueue_style('main-style', get_template_directory_uri() . '/css/style.css');
    wp_enqueue_script('main-script', get_template_directory_uri() . '/js/script.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

7. WordPressテンプレートタグの追加

• 動的な部分（例: 投稿ループ）にテンプレートタグを追加。

php<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <p><?php the_content(); ?></p>
<?php endwhile; endif; ?>

8. テーマを有効化

• WordPress管理画面から新しいテーマを有効化します

これでHTML/CSS/JavaScriptで作成したサイトがWordPressテーマとして動作します。