wordpress

【wordpress入門】LPコーディングやり方　～WPオリジナルテーマ～

公開日 2024/1/28 最終更新日 2024/11/19

結論：必須ファイルは6つ。index.php、functions.php、header.php、footer.php、page-thanks.php、404.php。

①index.php（home.php, pront-page.phpでも可）

コーディングしたLPのほぼ本体。

②functions.php

テーマのセットアップと、cssとjs、jQueryの読み込みを行う。

<?php

/**
 * テーマのセットアップ
 * 参考：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support#HTML5
 **/
function my_setup()
{
    add_theme_support('post-thumbnails'); // アイキャッチ画像を有効化
    add_theme_support('automatic-feed-links'); // 投稿とコメントのRSSフィードのリンクを有効化
    add_theme_support('title-tag'); // タイトルタグ自動生成
    add_theme_support(
        'html5',
        array( //HTML5でマークアップ
            'search-form',
            'comment-form',
            'comment-list',
            'gallery',
            'caption',
        )
    );
}

add_action('after_setup_theme', 'my_setup');
// セットアップの書き方の型
// function custom_theme_setup() {
// add_theme_support( $feature, $arguments );
// }
// add_action( 'after_setup_theme', 'custom_theme_setup' );

/**
 * CSSとJavaScriptの読み込み
 */
function my_script_init()
{
    wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.8.2/css/all.css', array(), '5.8.2', 'all');
    wp_enqueue_style('my', get_template_directory_uri() . '/css/style.css', array(), filemtime(get_theme_file_path('css/style.css')), 'all');
    wp_enqueue_script('my', get_template_directory_uri() . '/js/script.js', array('jquery'), filemtime(get_theme_file_path('js/script.js')), true);
    //sns.jsを追記
    if (is_single()) {
        wp_enqueue_script('sns', get_template_directory_uri() . '/js/sns.js', array('jquery'), '1.0.0', true);
    }
}
add_action('wp_enqueue_scripts', 'my_script_init');

この上記のコードで、以下のheader及びfooter の静的コーディングを置き換えることが出来る。


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css?ver=5.8.2">
<link rel="stylesheet" href="./css/style.css">

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>