手順
themesフォルダに自分のテーマフォルダ作成
作成したサイトにワードプレスをインストールしたら、FTP上から
/自分のディレクトリ/wp-content/themes/
の中に任意の名前でフォルダを作成する。
index.phpとstyle.php入れる
上で作成したフォルダの中にindex.phpとstyle.phpを作成する。
index.php
事前に作成したサイトのトップページ（index.html）を複製する。
style.php
事前に作成したサイトのcssとは別。
下記コードを記述。
/* Theme Name:サクマテンプレート */
wp_head()とwp_footer()を記述する
wp_head()
index.phpの</head>タグの直前に記述。
テーマやプラグイン、スタイルシートなどを<head> の中に自動で挿入するために必要。
wp_footer()
footer.phpの</body>タグの直前に<?php wp_footer(); ?>
JavaScriptの読み込み、トラッキングコード、スクリプトなどを</body>の直前に自動で挿入するために必要。
CSSやJavaScriptなどのファイルを読み込ませる
functions.phpを作成し下記コードで読み込ませる。
//*******************************************************************
//CSS、JSファイル、フォントを読み込む
//*******************************************************************
function enqueue_my_scripts()
{
// Fonts (Noto Sans JP)
wp_enqueue_style('my-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap', array(), null);
// CSS
wp_enqueue_style('my-reset', get_template_directory_uri() . '/css/reset.css', array(), '1.0.0');
wp_enqueue_style('my-style', get_template_directory_uri() . '/css/style.css', array(), '1.0.0');
'1.0.0');
// JS
wp_enqueue_script('my-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');
jQueryを使用する場合はWordPressのものを読み込む
下記コードをfunctions.phpに記述。
//*******************************************************************
// WordPressのjQueryを読み込む
//*******************************************************************
function my_scripts_method()
{
// WordPressに登録されているjQueryを読み込む
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
読み込ませたファイルのコードを削除
index.phpの<head>の中や</body>に記述していたファイルを削除する。
※functions.phpに記述したもののみ。
※特定のページにのみファイルを読み込ませることも可能。
functions.phpについては下記ページ
画像などを読み込ませる
<img>の相対パスを修正する。
<img src="<?php echo get_template_directory_uri(); ?>/img/〇〇" alt="">
VSコードの置換機能を使えば楽。
cssで画像を読み込んでいる場合も同じ。
JavaScriptのファイルを書き換える
ワードプレスでは$をそのまま使うとエラーになるので下記コードに修正する。
jQuery(document).ready(function($) {
// ここからjQueryコードを書く
// ↓これは例↓
$('button').click(function() {
alert('ボタンがクリックされました！');
});
});
ここまででトップページは正常に表示されているはず。
header.phpとfooter.phpを作成
パーツ分けすると修正などが楽。
header.php
index.phpの最初から<main>までをコピーしheader.phpにペーストする。コピーした部分はindex.phpから削除する。
get_header()
header.phpを呼び出すためにindex.phpの一番初めに下記コードを記述する。
<?php get_header(); ?>
footer.php
index.phpの</main>から最後までをコピーしてfooter.phpにペーストする。コピーした部分はindex.phpから削除する。
php get_footer()
footer.phpを呼び出すためにindex.phpの一番最後に下記コードを記述する。
<?php get_footer(); ?>
トップページ用にfront-page.phpを作成する
index.phpを複製して名前を変更する。
トップページ用の固定ページを作成し
設定>表示設定>ホームページの表示
でトップページ用の固定ページをホームページに設定する。
ここから固定ページやカスタム投稿などを作成していく。