あちゃまWEB\n >

サンプルからWordPressテーマを作成する手順

サンプルサイト
1,000点以上の商用利用無料のホームページテンプレート｜Template Party
フリーホームページ.net

テンプレートのダウンロード

サンプルサイトから好みのテンプレートをダウンロードする
今回は「ビジネスサイト向け 無料ホームページテンプレート tp_cool7_black_green」を使用
※ダウンロード後もサイトを使用するのでページは開いたままとする

テーマ格納フォルダの作成

テーマ(themes)を格納するフォルダを　WordPressルート \wp-content\themes　の下に作成
ダウンロードした tp_cool7_black_green.zip を解凍して格納する

サンプルファイルの構成

解凍イメージ 　
themes
├─cool7
│  │ ├ c2.html
│  │ ├ company.html
│  │ ├ confirm.html
│  │ ├ contact.html
│  │ ├ finish.html
│  │ ├ form.html
│  │ ├ index.html
│  │ ├ link.html
│  │ ├ recruit.html
│  │ ├ service.html
│  │ └ service2.html
│  ├─base
│  │  ├ 1.jpg
│  │  ├ 2.jpg
│  │  ├ 3.jpg
│  │  ├ banner1.jpg
│  │  ├ banner1_sh.jpg
│  │  └ logo.png
│  ├─css
│  │  ├ slide.css
│  │  └ style.css
│  ├─images
│  │  ├ 1.jpg
│  │  ├ 123.psd
│  │  ├ 2.jpg
│  │  ├ 3.jpg
│  │  ├ banner1.jpg
│  │  ├ banner1.psd
│  │  ├ banner1_sh.jpg
│  │  ├ banner1_sh.psd
│  │  ├ bg1.png
│  │  ├ bg1.psd
│  │  ├ icon_menu.png
│  │  ├ icon_menu.psd
│  │  ├ logo.png
│  │  ├ logo.psd
│  │  ├ sample1.jpg
│  │  └ sample1_big.jpg
│  └─js
│　　　├ fixmenu_pagetop.js
│　　　└ openclose.js

テーマのイメージを保存

ダウンロードしたテーマの「プレビュー」をクリックするとサイトのイメージが表示される
この画面をペイント等で テーマ格納フォルダに screenshot.jpg として保存するとテーマの見出し画像として使用される

生成AIでサンプルhtmlをWordPress定義に変換する

google gemini を開く
・テーマフォルダのhtmlファイルをgeminiに送信する
geminiで扱えるのは2025/08/01時点で最大10ファイルまでなので、ファイルエクスプローラなどからhtmlファイルを先頭から１０本選択してgeminiにドロップする
・プロンプトに「これらの定義をWordPress定義に変換」と入力する
・右下の[送信]ボタンを押下

生成されたWordPressテーマのファイル

  • header.php
  • footer.php
  • index.php
  • page.php
  • style.css
  • functions.php

header.phpの編集

すべてのページに共通する<head>タグと、ヘッダー部分のHTML（ナビゲーションメニューなど）を定義する

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header class="header">
        <div class="logo">
            <a href="<?php echo esc_url( home_url('/') ); ?>">サイトのロゴ</a>
        </div>
        <nav class="gnav">
            <ul>
                <li><a href="<?php echo esc_url( home_url('/service/') ); ?>">サービス</a></li>
                <li><a href="<?php echo esc_url( home_url('/recruit/') ); ?>">採用情報</a></li>
                <li><a href="<?php echo esc_url( home_url('/company/') ); ?>">会社概要</a></li>
                <li><a href="<?php echo esc_url( home_url('/contact/') ); ?>">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>

footer.phpの編集

すべてのページに共通するフッター部分（<footer>タグ）と、</body>および</html>タグ

    <footer class="footer">
        <p>&copy; <?php echo date('Y'); ?> サイト名</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

index.phpの編集

index.htmlの内容からヘッダーとフッターを切り取った部分をindex.phpとして使用
WordPressの投稿ループを挿入することで、動的にブログ記事を表示

<?php get_header(); ?>

<main class="main-content">
    <h1>トップページ</h1>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div><?php the_content(); ?></div>
            </article>
            <?php
        endwhile;
    else :
        ?><p>投稿がありません。</p><?php
    endif;
    ?>
</main>

<?php get_footer(); ?>

page.phpの編集

固定ページを表示するためのテンプレート

<?php get_header(); ?>

<main class="main-content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            ?>
            <h1><?php the_title(); ?></h1>
            <div><?php the_content(); ?></div>
            <?php
        endwhile;
    endif;
    ?>
</main>

<?php get_footer(); ?>

style.cssファイルの編集

テーマの名前や作成者などを書くと、WordPressがこれを読み取り、ダッシュボード画面のインストール済テーマの一覧に表示されるようになる

/*
Theme Name: My Custom Theme
Author: Your Name
Description: A custom theme based on uploaded HTML files.
Version: 1.0
*/

/* 以下に既存のCSSコードを貼り付けます */
body {
    /* ...既存のスタイル... */
}

style.cssでの記述例

これらの情報は、style.cssファイルの一番最初の行から、以下のようにコメントブロックとして記述します。

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com/your-website
Description: これは私が作成したカスタムWordPressテーマです。
Version: 1.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom, blog, responsive
Text Domain: my-custom-theme
Domain Path: /languages
*/

/* ここからテーマのCSSコードを記述します */
body {
    background-color: #f0f0f0;
}
/* ... */

WordPress テーマ情報（style.css メタデータ）

WordPressのテーマの style.css ファイルの冒頭に記述する作成者情報などの一覧です。これらはWordPressがテーマを管理画面で認識し、表示するために使用されます。

項目名（style.cssでの記述） 説明 必須/推奨
Theme Name

テーマの名前です。管理画面に表示されます。

 必須
Theme URI

テーマのデモサイトや詳細情報へのURLです。

 推奨
Author

テーマの作成者の名前です。

 必須
Author URI

テーマ作成者のウェブサイトやポートフォリオへのURLです。

 推奨
Description

テーマの簡単な説明です。管理画面に表示されます。

 推奨 (実質必須)
Version

テーマのバージョン番号です (例: 1.0, 1.0.1)。

 推奨 (実質必須)
Requires at least

このテーマが必要とするWordPressの最低バージョンです。

 推奨
Requires PHP

このテーマが必要とするPHPの最低バージョンです。

 推奨
License

テーマのライセンス情報です (例: GNU General Public License v2 or later)。

 推奨
License URI

ライセンスの全文へのURLです。

 推奨
Tags

テーマを分類するためのタグです (例: responsive-layout, blog, one-column)。WordPress.orgのテーマディレクトリで使われます。

 任意
Text Domain

国際化（多言語対応）のためのテキストドメインです。翻訳ファイルを読み込む際に使用されます。

 推奨 (多言語対応するなら必須)
Domain Path

翻訳ファイル（.moファイル）が保存されているディレクトリのパスです。通常は /languages。

 推奨

functions.phpの定義

提供されたHTMLテンプレートをWordPressテーマとして適切に動作させるための基本的な設定を含んでいます。

<?php
/**
 * My Custom Theme のセットアップ
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 */
function my_custom_theme_setup() {
    // テーマにタイトルタグのサポートを追加
    add_theme_support('title-tag');

    // カスタムロゴのサポートを追加
    add_theme_support('custom-logo');

    // ナビゲーションメニューのサポートを追加
    // このテーマにはPC用とモバイル用（小さな端末用）のメニューがあるため、2つ登録します
    register_nav_menus( array(
        'primary' => esc_html__( 'PC用メニュー', 'my-custom-theme' ),
        'mobile'  => esc_html__( '小さな端末用メニュー', 'my-custom-theme' ),
    ) );

    // 投稿のサムネイル（アイキャッチ画像）のサポートを追加
    add_theme_support('post-thumbnails');

    // HTML5のサポートを追加
    add_theme_support('html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
    ));
}
add_action('after_setup_theme', 'my_custom_theme_setup');

/**
 * スタイルシートとJavaScriptをエンキュー（読み込み）
 */
function my_custom_theme_scripts() {
    // style.cssを読み込みます
    wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
    
    // HTMLファイルで参照されていたCSSファイルを読み込みます
    // style.cssは自動的に読み込まれるので、ここでは他のCSSファイルを読み込みます。
    wp_enqueue_style('my-custom-theme-slide', get_template_directory_uri() . '/css/slide.css');

    // HTMLファイルで参照されていたJavaScriptファイルを読み込みます
    // footerで読み込むように設定
    wp_enqueue_script('my-custom-theme-openclose', get_template_directory_uri() . '/js/openclose.js', array(), '1.0.0', true);
    wp_enqueue_script('my-custom-theme-fixmenu-pagetop', get_template_directory_uri() . '/js/fixmenu_pagetop.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_custom_theme_scripts');

トップページの作成

トップページとなるファイルの作成

WordPressのトップページ（ホームページ）を表示する際のPHPテンプレートファイルの使用優先順位は「テンプレート階層（Template Hierarchy）」と呼ばれており特定の条件に基づいて、どのテンプレートファイルを使用するかを決定される

優先ファイル名説明
1front-page.php
2home.php
3page.php
4index.php

②ヘッダファイルの作成

  • テーマのフォルダに header.php ファイルを新規追加
    • 　※ これが 各ページの共通のヘッダとなる
  • index.phpとheader.phpをエディタで開
  • index.phpの先頭から までを切り取り、header.phpに張り付ける
    • ※ 今回は トップメニューも共通ヘッダに含めるため <nav>～</nav>も含めている
  • index.phpを再度開き、先頭に <?php get_header(); ?> と書

・header.phpを編集

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

WordPress情報

WEB開発

その他