SWELLのLPをトップページにする作業マニュアル

AIとのやりとりだけでSWELLの雨漏り業者紹介LPをトップページにする手順

この記事では、WordPressテーマ「SWELL」で、雨漏り業者紹介サービスのトップページを作る流れを、AIへのプロンプトとAIから出力されたコードを中心に説明します。

1. ChatGPTにトップページのデザインイメージを作らせる

最初に、ChatGPTへ以下のプロンプトを入力して、トップページの完成イメージ画像を作成します。

ポイントは、後からHTML/CSS化するときに文字が二重にならないよう、背景写真や装飾画像の中に文字を入れないよう指定しておくことです。

WordPressの固定ページでSWELLテーマのトップページを作りたい。

- 業種は雨漏り工事です。
- 雨漏り業者を紹介するサービスです。
- 電話番号は掲載せず問い合わせフォームのみにしてください。
- サービスページはないのでトップページのみになります。
- ボタンは「無料で相談する」のみでOKです。
- 会社概要ページへのリンクをフッターに入れてください。
- 後からHTML/CSS化する前提のデザインにしてください。
- 背景写真や装飾画像の中には文字を入れないでください。
- 見出し、説明文、ボタン文字、ナビゲーション文字は画像に埋め込まず、HTML側で載せる想定にしてください。
- ヒーロー背景や工事例写真は、文字なしの写真素材として切り出せる見た目にしてください。

この条件で、トップページのデザインイメージを作ってください。

この段階では、まだWordPressに貼るHTMLは作りません。まずは、ファーストビュー、各セクション、ボタン、フッターなどの見た目を画像として作ります。

画像の修正がある場合は、ここで画像修正指示を繰り返してください。

2. 画像をもとにHTML化を依頼する

次に、生成された画像をAIへ渡して、SWELLの固定ページやLPに貼れるHTMLへ変換してもらいます。

この画像をHTML（CSSはインラインで入れて）にして、WordPress（テーマSWELL）の固定ページで実現したい。
画像はWordPressメディアにアップロードして使う前提で、画像URLを差し替えやすい形にしてください。
電話番号は掲載せず、ボタン文言は「無料で相談する」のみにしてください。

CSSは外部ファイルにせず、HTML内の <style> に入れます。これにより、SWELLのカスタムHTMLブロックへ貼りやすくなります。

3. WordPressメディアに画像をアップロードする

WordPress管理画面で以下を開き、画像をアップロードします。

メディア > 新規追加

画像URLは、以下のような形式になります。

https://shizuoka-yane.jp/wp-content/uploads/2026/07/hero-roof-rain.png
https://shizuoka-yane.jp/wp-content/uploads/2026/07/cta-rain.png
https://shizuoka-yane.jp/wp-content/uploads/2026/07/case-roof.png
https://shizuoka-yane.jp/wp-content/uploads/2026/07/case-wall.png
https://shizuoka-yane.jp/wp-content/uploads/2026/07/case-balcony.png
https://shizuoka-yane.jp/wp-content/uploads/2026/07/case-gutter.png

画像URLが決まったら、AIへ以下のように依頼してHTML内の画像パスを修正します。

画像URLは以下のようなWordPressメディアURLになります。

http://shizuoka-yane.jp/wp-content/uploads/2026/07/case-balcony.png

この形式に合わせてHTML内の画像パスを修正してください。
トップページはhttpsで表示するので、画像URLもhttpsにしてください。

トップページが https:// で表示される場合は、画像URLも https:// にします。http:// のままだと、ブラウザで混在コンテンツとして扱われることがあります。

4.HTMLコードをLPに貼る

SWELLのLP本文または固定ページのカスタムHTMLブロックに貼り付けます。

5. 子テーマを編集するようAIに依頼する

SWELLのLP投稿が、WordPressの「設定 > 表示設定」の固定ページ一覧に出ないのでそのままではトップページに設定できません。子テーマ側でトップページの表示内容をLP投稿に差し替えます。

AIへ以下のように依頼します。

LPをトップページに設定できるように子テーマをいじって。
対象LPは https://shizuoka-yane.jp/lp/553/ です。
トップページURL https://shizuoka-yane.jp/ のまま、このLP内容を表示したいです。

この依頼により、トップページ https://shizuoka-yane.jp/ にアクセスしたとき、SWELLのLP投稿ID 553 を表示するコードを作成します。

6. 子テーマのfunctions.phpに入れるコード

以下のようなコードが生成されます。SWELL子テーマの functions.php の末尾に追記します。

このコードはリダイレクトではなく、トップページURLのままLP投稿を表示します。

下の例はあくまでも例なのでそのままコピペしないように。WordPressが壊れます。

<?php
/**
 * Show the SWELL LP post as the site front page.
 *
 * Usage:
 * 1. Copy this code into the child theme's functions.php.
 * 2. Keep the LP post ID and post type below in sync with the target LP.
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

const RN_FRONT_LP_ID        = 553;
const RN_FRONT_LP_POSTTYPE  = 'lp';
const RN_FRONT_LP_REDIRECT  = false; // true にすると /lp/553/ への直接アクセスを / に301転送します。

/**
 * Make the root URL load the SWELL LP post instead of the normal posts/page query.
 */
add_action(
    'pre_get_posts',
    function ( WP_Query $query ) {
        if ( is_admin() || ! $query->is_main_query() ) {
            return;
        }

        if ( ! $query->is_home() && ! $query->is_front_page() ) {
            return;
        }

        $query->set( 'post_type', RN_FRONT_LP_POSTTYPE );
        $query->set( 'p', RN_FRONT_LP_ID );
        $query->set( 'page_id', '' );
        $query->set( 'name', '' );
        $query->set( 'posts_per_page', 1 );

        $query->is_home     = false;
        $query->is_archive  = false;
        $query->is_search   = false;
        $query->is_page     = false;
        $query->is_single   = true;
        $query->is_singular = true;
    }
);

/**
 * Keep canonical URL signals on the top URL when the LP is rendered at /.
 */
add_filter(
    'get_canonical_url',
    function ( $canonical_url, $post ) {
        if ( is_front_page() && $post instanceof WP_Post && (int) $post->ID === RN_FRONT_LP_ID ) {
            return home_url( '/' );
        }

        return $canonical_url;
    },
    10,
    2
);

add_filter(
    'wpseo_canonical',
    function ( $canonical_url ) {
        if ( is_front_page() && is_singular( RN_FRONT_LP_POSTTYPE ) && (int) get_queried_object_id() === RN_FRONT_LP_ID ) {
            return home_url( '/' );
        }

        return $canonical_url;
    }
);

add_filter(
    'aioseo_canonical_url',
    function ( $canonical_url ) {
        if ( is_front_page() && is_singular( RN_FRONT_LP_POSTTYPE ) && (int) get_queried_object_id() === RN_FRONT_LP_ID ) {
            return home_url( '/' );
        }

        return $canonical_url;
    }
);

/**
 * Optional duplicate prevention.
 * Turn RN_FRONT_LP_REDIRECT to true if you want /lp/553/ to consolidate to /.
 */
add_action(
    'template_redirect',
    function () {
        if ( ! RN_FRONT_LP_REDIRECT || is_admin() || is_front_page() ) {
            return;
        }

        if ( is_singular( RN_FRONT_LP_POSTTYPE ) && (int) get_queried_object_id() === RN_FRONT_LP_ID ) {
            wp_safe_redirect( home_url( '/' ), 301 );
            exit;
        }
    }
);

7. 会社概要ページへのリンクをフッターに追加する

フッターに会社概要ページへのリンクを入れたい場合は、AIへ以下のように依頼します。

https://shizuoka-yane.jp/company/
会社概要ページへのリンクをフッターにつけて。

HTML内では、以下のリンクをフッターに追加します。

<a href="https://shizuoka-yane.jp/company/">会社概要</a>

8. WordPress側の作業手順

1. ChatGPTでトップページのイメージ画像を作成する
2. 画像をAIに渡して、HTMLとインラインCSSへ変換する
3. 画像をWordPressメディアにアップロードする
4. HTML内の画像URLをWordPressメディアURLに合わせる
5. SWELLのLP編集画面を開く
6. カスタムHTMLブロックにHTMLコードを貼る
7. 子テーマの functions.php にLPトップページ化コードを追記する
8. トップページ https://shizuoka-yane.jp/ を開いて確認する

9. 動作確認

以下を確認します。

• https://shizuoka-yane.jp/ でLPが表示される
• URLが /lp/553/ へ変わらない
• 画像がすべて表示される
• 電話番号が掲載されていない
• ボタン文言が「無料で相談する」になっている
• フッターに会社概要リンクがある
• スマホ表示で崩れていない

10. 画像が表示されないとき

画像が表示されない場合は、HTML内の画像URLを直接ブラウザで開きます。

https://shizuoka-yane.jp/wp-content/uploads/2026/07/case-balcony.png

画像が404になる場合は、WordPressメディア上の実URLとHTML内のURLが一致していません。

11. 元に戻す方法

トップページ化を解除する場合は、子テーマの functions.php に追加したLPトップページ化コードを削除します。

削除後、トップページを開いて通常表示に戻っているか確認します。