【WordPress化】最初の手順

2022年9月1日2024年3月13日

静的ページを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');
  wp_enqueue_style('swiper', 'https://unpkg.com/swiper@8/swiper-bundle.min.css');
  wp_enqueue_style('animate', get_template_directory_uri() . '/css/animate.css', [], '1.0.0', 'all');
  wp_enqueue_style('my', get_template_directory_uri() . '/css/style.css', [], filemtime(get_theme_file_path('css/style.css')), 'all');
  wp_enqueue_script('swiper', 'https://unpkg.com/swiper@8/swiper-bundle.min.js', [], false, 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', ['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()`の代わりに`[]`でもOK。	array()
$ver	任意のバージョンを指定。キャッシュバスト用のクエリパラメータとしてURLに追加されます。 `false`の場合、WordPress のバージョン番号がパラメータに付与されます。 `null`に設定すると、バージョンは追加されません。	false
$media	media属性に関する指定。	‘all’

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

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

wp_enqueue_scriptの説明

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

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

CDNをwp_footer()で読み込ませるには、第５引数の$in_footerをtrueにし、残りは初期値を入れておきます。

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

ファイルを更新するたびに自動でキャッシュを無効にする

ファイルを更新したのに反映されないといったことを防ぐ方法です。

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

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

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

第４引数の記述例

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

ただしキャッシュさせておきたい場合はこちらの方法ではなく、任意のバージョンを指定しておきます。

画像のパスを変換

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

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; ?>

jQueryがうまく動作しない場

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

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

解決するには、$を全てjQueryに置き換える方法か、引数に$を入れたjQuery(function($)で囲む方法が有効です。

// ①$を全て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($) {
		$(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/

引数にはスラッシュ推奨

トップページ以外の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バーが被る場合の対策

jQueryがうまく動作しない場

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

動的に変更

ドロワーメニューの例

ヘッダーメニューの例

リンクを書き換える

トップページの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バーが被る場合の対策

jQueryがうまく動作しない場

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

動的に変更

ドロワーメニューの例

ヘッダーメニューの例

リンクを書き換える

トップページのURL

トップページ以外のURL

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

固定ページを認識させる

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

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

header.phpに直接書く場合

ホーム

固定ページ

投稿ページ

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

続く

お気軽にコメントどうぞ

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

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