【HTMLサイトをWordPress化しよう】③ディレクトリ作成編

目次

• テーマディレクトリの作成
• 基本ファイルの作成
• 既存ファイルのコピー
• CSS、JavaScriptの読込（functions.php）
• テーマの切り替え

テーマディレクトリの作成

WordPressのthemesディレクトリの中に、「fd」という名前で今回制作するサイトのディレクトリを作成します。

C:\Usersユーザー名\Local Sites\blog\app\public\wp-content\themes\fd

基本ファイルの作成

続いて、テーマに必要な基本ファイルを作成します。

WordPressでオリジナルテーマを表示させるために最低限必要なファイルは下記の2つです。

• index.php
• style.css

この2つのファイルを、先ほど作成した「fd」ディレクトリの中に作ります。

C:\Usersユーザー名\Local Sites\fd\app\public\wp-content\themes\fd\index.php
C:\Usersユーザー名\Local Sites\fd\app\public\wp-content\themes\fd\style.css

次に、style.cssの中にテーマ名を記述します。
これもテーマを動かすためには必須です。

    style.css
    
@charset "UTF-8";
/*
Theme Name: fd
*/
    
  

「index.php」は、とりあえず空のままでOKです。

既存ファイルのコピー

続いて、既存のファイルをテーマディレクトリ内にコピーしてきます。

ひとまず、コピーするのはそのまま使用する下記ファイルのみです。

• 画像ファイル
• JSファイル（main.js）
• CSSファイル（style.css）

CSSファイルについては、ファイルのコピーではなく、先ほど作成した「style.css」にコードを追記します。

コピー後のディレクトリ構成は下記の通りです。

    
fd
 ├─img
 │  ├─favicon.ico
 │  └─logo.svg
 │
 ├─js
 │  └─main.js
 │
 ├─index.php
 └─style.css
    
  

CSS、JavaScriptの読込（functions.php）

CSSファイルとJavaScriptファイルの読込を行います。

HTMLサイトの場合は、CSSやJavaScriptファイルはheadタグ内で読み込むのが一般的ですが、WordPressでは「functions.php」の中で読み込むのが推奨されています。

「functions.php」の作成とCSS、JavaScriptファイルの読み込みは下記を参考にしてください。

コーディング後の「functions.php」は下記の通りです。

    functions.php
    
<?php

/**************************************************
CSSファイルの読み込み
**************************************************/
function my_enqueue_styles() {
  wp_enqueue_style('ress', '//unpkg.com/ress/dist/ress.min.css', array(), false, 'all');
  wp_enqueue_style('style', get_stylesheet_uri(), array('ress'), false, 'all');
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');

/**************************************************
JSファイルの読み込み
**************************************************/
function st_enqueue_scripts() {
  wp_deregister_script('jquery');
  wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', array(), '3.5.1', false);
  wp_enqueue_script('main', get_theme_file_uri('js/main.js'), array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'st_enqueue_scripts');
    
  

テーマの切り替え

ここまで完了したら、WordPressの管理画面から使用するテーマを今回作成したテーマに変更します。

テーマの変更方法については、下記の記事の「オリジナルテーマの表示確認」を参考にしてください。