【WordPress化】最初の手順

2022年9月1日2023年5月15日

静的ページをWordPress化する手順の備忘録です。

ローカル環境を作る

LocalやMAMPでローカル環境を作ります。

基本的にはLocalでサクッと作るのがおすすめですが、手順を踏みながら作りたい場合はMAMPを使います。

WordPressのメインフォルダの確認

Webデベロッパーが触るのは以下のみです。

wp-config.php
wp-contentフォルダ以下

それ以外のphpファイルは、WordPressを形づくっているコアファイルなので触りません。

各フォルダの内容

wp-config.php: データベースとの接続情報などが書かれた大元の設定ファイル
wp-content > plugins: インストールしたプラグインのソースコード達が入ってるフォルダ
wp-content > themes: テーマのソースコード達が入ってるフォルダ
wp-content > uploads: 管理画面からアップロードしたメディア（画像など）が入ってるフォルダ

オリジナルテーマを作る場合「wp-content > themes」内で開発していきます。

デバッグモードを有効化しておく

コードのエラーや警告をブラウザ上で確認するために、デバッグモードを有効化します。

wp-config.phpを開いて、７６行目あたりにある第２引数をtrueに変更すればOK。

define('WP_DEBUG', false);
//↓有効化にする
define('WP_DEBUG', true);

実際にサーバーにあげる際はデバッグモードをOFFにすること。

phpファイルを作る

themesフォルダの中に開発中のフォルダを入れて、以下の空ファイルを作成します。

Localの場合「app > public > wp-content > themes」の中に開発中のテーマを入れます。

必須ファイル

index.php
style.css

ほぼ必須ファイル

functions.php
header.php
footer.php
page.php
single.php
archive.php
search.php
404.php

必要に応じて

sidebar.php
category.php
tag.php
screenshot.png

テーマとして認識させる

「サイト名」直下のstyle.cssとfunctions.pnpに記述して、テーマとして認識させます。

ここでのstyle.cssはテーマ用です。

style.css

@charset "utf-8";
/*
theme Name: サイト名
Author: 自分の名前
Description: 自作テーマ
version： 1.0.0
*/

theme Name以外は必要に応じて記入。

これだけでテーマとして認識されますが、まだメインページであるindex.phpは何も記入されていないため、アクセスしても真っ白な状態です。

functions.pnp

<?php
/**
 * テーマのセットアップ
 **/
function my_setup() {
  add_theme_support('post-thumbnails'); // アイキャッチ画像を有効化
  add_theme_support('automatic-feed-links'); // 投稿とコメントのRSSフィードのリンクを有効化
  add_theme_support('title-tag'); // タイトルタグ自動生成
  add_theme_support(
    'html5', //HTML5でマークアップ
    array(
      'search-form',
      'comment-form',
      'comment-list',
      'gallery',
      'caption',
    )
  );
}
add_action('after_setup_theme', 'my_setup');

テーマやプラグイン、WordPress関数、管理画面の設定などをするためのファイルです。

index.php / header.php / footer.php を作る

index.htmlの中身をindex.phpにコピーし、ヘッダーとフッターとで３分割します。

header.phpには「一番上〜</header>の下まで」、footer.phpには「<footer>〜一番下まで」をコピペ。

index.phpには以下のように置き換えます。

<?php get_header(); ?>

<!-- コンテンツの中身 -->
<!-- コンテンツの中身 -->
<!-- コンテンツの中身 -->

<?php get_footer(); ?>

functions.phpからスタイルシートやjsを読み込む

読み込ませたいスタイルシートやjsはfunctions.phpで一元管理し、head内でファイルを読み込むか、body閉じタグ前で読み込むかを設定します。

wp_head( )を<head>タグ内に、wp_footer( )は</body>タグの前に記述。

<!--
<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">
ここを置き換える
-->
　
<?php wp_head(); ?>
</head>

<!--
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
ここを置き換える。jqueryはWPデフォで読み込まれるので消してOK。
-->	

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

functions.phpに読み込ませたいスタイルシート、jsを記述。

/**
* CSSとJavaScriptの読み込み
*/
function my_script_init() {
  wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css', [], null);
  wp_enqueue_style('swiper', 'https://unpkg.com/swiper@8/swiper-bundle.min.css', [], null);
  wp_enqueue_style('animate', get_template_directory_uri() . '/css/animate.css', array(), '1.0.0', '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('swiper', 'https://unpkg.com/swiper@8/swiper-bundle.min.js', [], null, true);
  wp_enqueue_script('wow', get_template_directory_uri() . '/js/wow.min.js', [], '1.3.0', true);
  wp_enqueue_script('my', get_template_directory_uri() . '/js/script.js', array('jquery'), filemtime(get_theme_file_path('js/script.js')), true);
}
add_action('wp_enqueue_scripts', 'my_script_init');

style.cssを読み込むにはwp_enqueue_style、
script.jsを読み込むにはwp_enqueue_scriptを使用します。

wp_enqueue_styleの説明

wp_enqueue_style( $handle, $src, $deps, $ver, $media )

引数	説明	初期値
$handle	スタイルを区別する名前。すでに登録済みの名前を入れると、新しいスタイルはキューへ追加されません。	なし
$src	スタイルシートへのパスを指定。	空文字列
$deps	このスタイルより前に読み込み込むべきスタイルのハンドル名を配列で指定。依存がない場合は空の配列`[]`を指定。	array()
$ver	任意のバージョンを指定。ブラウザキャッシュ対策としても有効。ファイル名の末尾にクエリパラメータとして追加されます。指定がない場合、WordPress のバージョン番号がパラメータに付与されます。	false
$media	media属性に関する指定。	‘all’

CDNは、以下のように第5引数を省略した記述でOKです。

wp_enqueue_style('swiper', 'https://unpkg.com/swiper@8/swiper-bundle.min.css', [], null);

第４引数はfalse（無効）にすると、古いキャッシュから読み込まれる場合があるので、省略せずにnull（空）を指定しておいた方が無難です。

wp_enqueue_scriptの説明

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);

引数	説明	初期値
$handle	スクリプトを区別する名前。すでに登録済みの名前を入れると、新しいスクリプトはキューへ追加されません。	なし
$src	スクリプトへのパスを指定。	空文字列
$deps	このスクリプトより前に読み込み込むべきスクリプトのハンドル名を配列で指定。依存がない場合は空の配列`[]`を指定。	array()
$ver	任意のバージョンを指定。ブラウザキャッシュ対策としても有効。ファイル名の末尾にクエリパラメータとして追加されます。指定がない場合、WordPress のバージョン番号がパラメータに付与されます。	false
$in_footer	wp_footer()で読み込ませるかどうか。	false

CDNをwp_footer()で読み込ませるには、第５引数の$in_footerをtrueにし、間に空の配列[]、nullを入れておきます。

wp_enqueue_script('swiper', 'https://unpkg.com/swiper@8/swiper-bundle.min.js', [], null, true);

キャッシュクリアを自動化するために

ファイルの更新日時を取得してくれるfilemtimeを第４引数（クエリパラメータ）に付与することで、更新するたびキャッシュではなくサーバーから新たにファイルを取得するようにすることが出来ます。

よって、スタイルシートやjs更新時のキャッシュクリアが不要となります。

WordPress CSSを更新するたびに自動的にブラウザキャッシュを無効にするテクニック – loveMac.jp

第４引数の記述例

filemtime(get_theme_file_path('css/style.css'))

ただしanimate.cssなどのダウンロードファイル、更新が不要な場合はキャッシュさせておいたほうが読み込みが早いので、任意のバージョンを指定しておきます。

画像のパスを変換

<!-- 元のパス -->
<img src="img/pickup1.png" alt="">
<!-- これを以下のように書き換える -->
<img src="<?php echo esc_url( get_template_directory_uri() . '/img/pickup1.png' ); ?>" alt="">

echo get_template_directory_uri( )で、現在使っているテーマフォルダまでのパスを自動出力します。

『src=”img/』を『src=”<?php echo esc_url( get_template_directory_uri() . ‘/img/』に書き換えればOK。

' ); ?>で画像の最後を閉じます。

VSCodeの場合、以下の方法で一括置換が可能です。

一括置換方法

⌘+Fで検索
左側の>をクリック
置換したい文字列を入力
全て置換をクリック

追従ヘッダーとadminバーが被る場合の対策

<body>直後辺りに、以下のような分岐コードを記述しておけばadminバーとヘッダーは被りません。

<body>
	<?php if( is_user_logged_in() ) : ?>
	<style type="text/css">
	.header {
		margin-top: 32px;
	}

	@media screen and (max-width: 780px) {
		.header {
			margin-top: 46px;
		}
	}

	@media screen and (max-width: 600px) {
		#wpadminbar {
			position: fixed !important;
		}
	}
	</style>
	<?php endif; ?>

jsがうまく動作しない場

WordPressでは他のライブラリとの衝突を防ぐため$では動きません。

$(function() {
		$(window).on("scroll", function() {
		if (100 < $(this).scrollTop()) {
	$('.to-top').addClass( 'is-show' );
		} else {
		$('.to-top').removeClass( 'is-show' );
		}
	});
});

解決するには、生のJavaScript（VanillaJS）で記述するか、以下の方法が有効です。

解決方法①：$を全て書き換える

$をjQueryに書き換えると動きます。

$(function() {
		jQuery(window).on("scroll", function() {
		if (100 < jQuery(this).scrollTop()) {
	jQuery('.to-top').addClass( 'is-show' );
		} else {
		jQuery('.to-top').removeClass( 'is-show' );
		}
	});
});

解決方法②：jQuery(function($)で囲む

もしくは、jQuery(function($) {}でコード全体を囲むことで、その内側は$が使えます。

jQuery(function($) {
		$(window).on("scroll", function() {
		if (100 < $(this).scrollTop()) {
	$('.to-top').addClass( 'is-show' );
		} else {
		$('.to-top').removeClass( 'is-show' );
		}
	});
});

書き換えが面倒な場合はこちらで対応します。

カスタムメニューを有効化

/**
* メニューの登録
*
* 参考：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/register_nav_menus
*/
function my_menu_init()
{
register_nav_menus(
array(
'global' => 'ヘッダーメニュー',
'drawer' => 'ドロワーメニュー',
'footer' => 'フッターメニュー',
)
);
}
add_action('init', 'my_menu_init');

登録すると、管理画面の外観にメニューが追加されます。

動的に変更

管理画面から登録したメニューを動的に表示させるために、メニューを記述しているコードを書き換えます。

ドロワーメニューの例

<!-- drawer-content -->
<div class="drawer-content">
  <?php
  //.drawer-navを置き換えて、スマホ用メニューを動的に表示する
  wp_nav_menu(
    array(
      'depth' => 1,
      'theme_location' => 'drawer', //ドロワーメニューをここに表示すると指定
      'container' => 'nav',
      'container_class' => 'drawer-nav',
      'menu_class' => 'drawer-list',
    )
  );
  ?>
</div><!-- /drawer-content -->

ヘッダーメニューの例

<!-- header-nav -->
<nav class="header-nav">
  <div class="inner">
  <?php
  //.header-listを置き換えて、PC用メニューを動的に表示する
  wp_nav_menu(
    array(
      'depth' => 1,
      'theme_location' => 'global', //グローバルメニューをここに表示すると指定
      'container' => 'false',
      'menu_class' => 'header-list',
    )
  );
  ?>
  </div><!-- /inner -->
</nav><!-- header-nav -->

リンクを書き換える

リンクを動的にするために、URLを取得して書き換えます。

トップページのURL

<a href="<?php echo esc_url(home_url('/')); ?>">

表示：http://sample-site.com/

ついでにbloginfo('name')でサイト名も取得するようにしておくと便利です。

<a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a>

表示：サイトのタイトル（http://sample-site.com/）

トップページ以外のURL

下層ページなど、トップページ以外のURLは以下の方法で取得することが出来ます。

<a href="<?php echo esc_url(home_url('/about/')); ?>">

表示：http://sample-site.com/about/

ヘッダーロゴとタイトルのH1設定

トップページではロゴをH1に、それ以外はdivに設定します。（SEOの観点から）

<!-- <h1 class="header__logo"><a href="<?php echo esc_url(home_url('/')); ?>"><img src="<?php echo esc_url( get_template_directory_uri() . '/img/logo.svg'); ?>" alt="ヘッダーロゴ"></a></h1>
ここを動的に置き換える -->

<?php if (is_front_page()) : //トップページではロゴをh1に、それ以外のページではdivに。 ?>
<h1 class="header-left"><a href="<?php echo esc_url(home_url('/')); ?>"><img src="<?php echo esc_url( get_template_directory_uri() . '/img/logo.svg'); ?>" alt="<?php bloginfo('name'); ?>"></a></h1><!-- /header-left -->
<?php else : ?>
<div class="header-left"><a href="<?php echo esc_url(home_url('/')); ?>"><img src="<?php echo esc_url( get_template_directory_uri() . '/img/logo.svg'); ?>" alt="<?php bloginfo('name'); ?>"></a></div><!-- /header-left -->
<?php endif; ?>

固定ページを認識させる

page-スラッグ名.php（例：page-about.php）

上記のファイル名であれば、WordPressの固定ページを新規作成するだけで認識されます。

固定ページの設定

固定ページのタイトル→任意の名前
パーマリンク→スラッグ名（about）

任意の名前.php（カスタムテンプレート）を使う場合

任意の名前.php（例：about.php）

任意の名前をテンプレートファイルとして扱うには、以下の記述が必要です。
（通常は上部に書く）

<?php
/*
Template Name: 会社概要
*/
?>

以下のようにget_header()にまとめてもOK。

<?php
/*
Template Name: 会社概要
*/
get_header(); ?>

あとはWordPressの固定ページの作成画面から、右側に「テンプレート」が現れ、カスタムテンプレートページの名前が選べるようになります。

ナビゲーションのカレント表示

ヘッダーメニューで現在地に目印をつける方法です。

header.phpに直接書く場合

それぞれclass名の中に、以下ような分岐を入れます。

実装例

<ul class="header__nav">
 <li class="header-nav__item <?php if( is_front_page() ) echo 'current'; ?>"><a href="#">ホーム</a></li>
 <li class="header-nav__item <?php if( is_page('about') ) echo 'current'; ?>"><a href="#">about</a></li>
 <li class="header-nav__item <?php if( is_page('blog') || is_single() ) echo 'current'; ?>"><a href="#">blog</a></li>
</ul>

ホーム

<?php if( is_front_page() ) echo 'current'; ?>

固定ページ

<?php if( is_page('about') ) echo 'current'; ?>

投稿ページ

<?php if( is_page('blog') || is_single() ) echo 'current'; ?>

外観→メニューで作成した場合

WordPerssのコアの機能でメニューを追加した場合は、現在地にcurrent-menu-itemが自動付与されるのでcssで装飾するだけでOKです。

<ul>
	<li class="current-menu-item"><a href="/">HOME</a></li>
	<li><a href="">私たちについて</a></li>
	<li><a href="">お問い合わせ</a></li>
</ul>

【WordPress化】最初の手順

ローカル環境を作る

WordPressのメインフォルダの確認

各フォルダの内容

デバッグモードを有効化しておく

phpファイルを作る

テーマとして認識させる

style.css

functions.pnp

index.php / header.php / footer.php を作る

functions.phpからスタイルシートやjsを読み込む

wp_enqueue_styleの説明

wp_enqueue_scriptの説明

キャッシュクリアを自動化するために

画像のパスを変換

追従ヘッダーとadminバーが被る場合の対策

jsがうまく動作しない場

解決方法①：$を全て書き換える

解決方法②：jQuery(function($)で囲む

カスタムメニューを有効化

動的に変更

ドロワーメニューの例

ヘッダーメニューの例

リンクを書き換える

トップページのURL

トップページ以外のURL

ヘッダーロゴとタイトルのH1設定

固定ページを認識させる

任意の名前.php（カスタムテンプレート）を使う場合

ナビゲーションのカレント表示

header.phpに直接書く場合

ホーム

固定ページ

投稿ページ

外観→メニューで作成した場合

続く

コメント

コメントするコメントをキャンセル

【WordPress化】最初の手順

ローカル環境を作る

WordPressのメインフォルダの確認

各フォルダの内容

デバッグモードを有効化しておく

phpファイルを作る

テーマとして認識させる

style.css

functions.pnp

index.php / header.php / footer.php を作る

functions.phpからスタイルシートやjsを読み込む

wp_enqueue_styleの説明

wp_enqueue_scriptの説明

キャッシュクリアを自動化するために

画像のパスを変換

追従ヘッダーとadminバーが被る場合の対策

jsがうまく動作しない場

解決方法①：$を全て書き換える

解決方法②：jQuery(function($)で囲む

カスタムメニューを有効化

動的に変更

ドロワーメニューの例

ヘッダーメニューの例

リンクを書き換える

トップページのURL

トップページ以外のURL

ヘッダーロゴとタイトルのH1設定

固定ページを認識させる

任意の名前.php（カスタムテンプレート）を使う場合

ナビゲーションのカレント表示

header.phpに直接書く場合

ホーム

固定ページ

投稿ページ

外観→メニューで作成した場合

続く

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル