2026年5月20日

WordPressのランディングページテンプレートを作成する方法

テーマ・デザイン

はじめに

WordPressでランディングページ（LP）を作るには、ヘッダー・フッターを非表示にしたカスタムページテンプレートを作成します。ACFなどのカスタムフィールドプラグインと組み合わせることで、コードなしでLPコンテンツを管理できます。

症状・原因

ヘッダー・フッターのないLPを作りたい
テーマのデザインに縛られないフルワイドレイアウトが必要
CTAボタンやフォームをLPに配置したい
複数のLPを管理しやすくしたい

解決手順

ステップ1：ランディングページテンプレートを作成する

<?php
/*
 * Template Name: ランディングページ
 * Template Post Type: page
 */

// WordPressコア読み込み
defined('ABSPATH') || exit;
?>
<!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('lp-page'); ?>>
<?php wp_body_open(); ?>

<main class="lp-main">
    <?php while (have_posts()): the_post(); ?>
        <?php the_content(); ?>
    <?php endwhile; ?>
</main>

<?php wp_footer(); ?>
</body>
</html>

ステップ2：LP専用のCSSを作成する

/* css/landing-page.css */

/* LP全体のリセット */
.lp-page * {
    box-sizing: border-box;
}

/* ヒーローセクション */
.lp-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #0073aa 0%, #1d2327 100%);
    color: #ffffff;
}

.lp-hero h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 24px;
}

.lp-hero .subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 40px;
    max-width: 600px;
}

/* CTAボタン */
.lp-cta-btn {
    display: inline-block;
    background-color: #f0a500;
    color: #1d2327;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 18px 48px;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(240, 165, 0, 0.4);
}

.lp-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(240, 165, 0, 0.5);
}

/* セクション */
.lp-section {
    padding: 80px 20px;
    max-width: 960px;
    margin: 0 auto;
}

/* 特徴グリッド */
.lp-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.lp-feature-card {
    padding: 30px;
    background: #f6f7f7;
    border-radius: 8px;
    text-align: center;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .lp-hero h1 { font-size: 2rem; }
    .lp-section { padding: 40px 20px; }
}

ステップ3：LP専用CSSをfunctions.phpで読み込む

// functions.php
add_action('wp_enqueue_scripts', function(): void {
    // ランディングページテンプレートのみ読み込む
    if (is_page_template('page-landing-page.php')) {
        wp_enqueue_style(
            'landing-page',
            get_stylesheet_directory_uri() . '/css/landing-page.css',
            [],
            wp_get_theme()->get('Version')
        );

        // 通常のテーマCSSを無効化（LP専用スタイルのみ適用）
        wp_dequeue_style('parent-style');
        wp_dequeue_style('child-style');
    }
});

ステップ4：カスタムフィールドでLPを管理する

// functions.php — LP用のカスタムフィールドを追加
add_action('add_meta_boxes', function(): void {
    add_meta_box(
        'lp_settings',
        'LP設定',
        function(WP_Post $post): void {
            $headline    = get_post_meta($post->ID, '_lp_headline', true);
            $subheadline = get_post_meta($post->ID, '_lp_subheadline', true);
            $cta_text    = get_post_meta($post->ID, '_lp_cta_text', true);
            $cta_url     = get_post_meta($post->ID, '_lp_cta_url', true);
            ?>
            <p><label>メインキャッチコピー:<br>
                <input type="text" name="lp_headline" value="<?php echo esc_attr($headline); ?>" style="width:100%"></label></p>
            <p><label>サブキャッチコピー:<br>
                <textarea name="lp_subheadline" style="width:100%"><?php echo esc_textarea($subheadline); ?></textarea></label></p>
            <p><label>CTAボタンテキスト:<br>
                <input type="text" name="lp_cta_text" value="<?php echo esc_attr($cta_text); ?>" style="width:100%"></label></p>
            <p><label>CTAリンク先URL:<br>
                <input type="url" name="lp_cta_url" value="<?php echo esc_attr($cta_url); ?>" style="width:100%"></label></p>
            <?php
        },
        'page',
        'normal'
    );
});

add_action('save_post', function(int $post_id): void {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    foreach (['lp_headline','lp_subheadline','lp_cta_text','lp_cta_url'] as $field) {
        if (isset($_POST[$field])) {
            update_post_meta($post_id, '_' . $field, sanitize_text_field($_POST[$field]));
        }
    }
});

ステップ5：テンプレートでカスタムフィールドを表示する

// page-landing-page.php のmain内に追加
$headline    = get_post_meta(get_the_ID(), '_lp_headline', true);
$subheadline = get_post_meta(get_the_ID(), '_lp_subheadline', true);
$cta_text    = get_post_meta(get_the_ID(), '_lp_cta_text', true) ?: '無料で始める';
$cta_url     = get_post_meta(get_the_ID(), '_lp_cta_url', true) ?: '#contact';
?>
<section class="lp-hero">
    <h1><?php echo esc_html($headline ?: get_the_title()); ?></h1>
    <p class="subtitle"><?php echo esc_html($subheadline); ?></p>
    <a href="<?php echo esc_url($cta_url); ?>" class="lp-cta-btn">
        <?php echo esc_html($cta_text); ?>
    </a>
</section>

注意事項

wp_head() と wp_footer() は必ず呼び出してください。プラグインが正常に動作するために必要です
通常テーマのCSSを wp_dequeue_style() で無効化する際は、スタイルハンドル名がテーマによって異なります。DevToolsで確認してください
Elementorなどのページビルダーを使う場合は、カスタムテンプレートなしでLP作成が可能です

まとめ

LPテンプレートは /Template Name: ランディングページ/ コメントを持つPHPファイルを子テーマに作成するだけで使えます。is_page_template() でLP専用CSSを読み込み、カスタムフィールドでコンテンツを管理することで複数LPを効率的に運営できます。

Post Views: 11