【WordPress化】最初の手順

2022年9月1日2024年10月20日

静的ページを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
404.php

必要に応じて

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

テーマとして認識させる

テーマ直下のstyle.cssファイルに、以下のヘッダーコメントを記述します。

/*
theme Name: サイト名
Author: 自分の名前
Description: 自作テーマ
version: 1.0
*/

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

これで一応テーマとして認識されますが、まだindex.phpは何も記入されていないため、アクセスしても真っ白な状態です。

index.phpを分割する

index.htmlの内容をindex.phpにコピーし、headerやfooterなど使いまわす部分は共通パーツとして分割します。

headerを含む上部をheader.phpにコピペ。
footerを含む下部をfooter.phpにコピペ。

コピペした部分をそれぞれ置き換えます。

<?php get_header(); ?>

<!-- コンテンツ部分 -->

<?php get_footer(); ?>

これでヘッダー、コンテンツ、フッターに分割することができました。

PHPファイルを編集していく前に

セキュリティ対策

テーマやプラグインのPHPファイルが直接リクエストされると、外部から不正にアクセスされてしまう危険があります。

それを防ぐために全てのPHPファイルの先頭には、if (! defined('ABSPATH')) exit; を記述しておくことを推奨します。

<!-- PHPファイルの先頭に記述しておく -->
<?php if (! defined('ABSPATH')) exit; ?>


<!-- 他のタグとまとめてもOK -->
<?php
if (! defined('ABSPATH')) exit;
get_header();
?>

不具合対策

phpのコードで終わる際は、基本的にphpの閉じタグ?>をつけないこと。

<!-- 非推奨 -->
<?php wp_footer(); ?>

<!-- 推奨 -->
<?php wp_footer();

phpの続きとしておくことで、もし誤って末尾に改行を複数入れてしまった場合でも、HTMLとして出力されるのを防ぐことができ、予期しない問題を回避できます。

テーマの基本セットアップ

アイキャッチ画像やタイトルタグなどを有効化するために、基本的なセットアップをfunctions.phpに記述しておきます。

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

セットアップ関係は、管理しやすくするために先頭に記述しておきます。

functions.phpからCSSやJSを読み込む

CSSやJSはfunctions.phpに置き換え、読み込ませる位置やキャッシュなどを一元管理します。

<head>タグ内にwp_head()、</body>タグの前にwp_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">
ここを置き換える
-->

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

CSSファイルを読み込むにはwp_enqueue_style、
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, $args);

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

WordPress6.3以降で、deferまたはasyncを第５引数で指定できるようになりました。

defer属性を追加する場合は以下のように指定します。

wp_enqueue_script(
  'foo',
  '/path/to/foo.js',
  array(),
  '1.0.0',
  array(
    'strategy' => 'defer',
  )
);

基本、defer属性をつけるときはheadタグ内で読み込むことが多いので、in_footerは省略してOKです。

従来通り第５引数をtrueにした場合は、in_footerのみ有効となりwp_footerで出力されます。

wp_enqueue_script(
  'foo',
  '/path/to/foo.js',
  array(),
  '1.0.0',
  true
);

WordPress Developer Resources

wp_enqueue_script() – Function | Developer.WordPress.org Enqueues a script.

第４引数でキャッシュ管理する

第４引数（クエリパラメータ）にfilemtimeを指定することで、「ファイルを更新したのに反映されない」といったことを防ぐことができます。

記述例

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

filemtimeはファイルの更新日時を取得してくれるため、更新しない限りはキャッシュされ、更新するたびサーバーから新たにファイルを取得するようにすることが出来ます。

これにより、CSSやJS更新時の手動キャッシュクリアが不要となります。

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

属性付きのタグは別のアプローチで記述

Webフォントなど、事前接続させて高速化するためのlinkタグにはcrossoriginなどの属性がついていることがあります。

通常、属性付きのタグはwp_enqueue_scriptsからでは追加できないので、別のアプローチで記述する必要があります。

方法１：headタグに直接書く

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<?php wp_head(); ?>
</head>

小規模なサイトであれば、直接headタグに書き込んだ方が直感的で管理しやすいかもしれません。

方法２：wp_headフックで出力させる

function add_preconnect_links() {
  echo '<link rel="preconnect" href="https://fonts.googleapis.com" />';
  echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />';
}
add_action('wp_head', 'add_preconnect_links', 5);

wp_enqueue_scriptsよりも前に読み込ませたいので、優先度を低く（5前後を指定）しています。

functions.phpで一元管理したい場合は、こちらの方が良いと思います。

画像のパスを変換

<!-- 元のパス -->
<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/に一括置換すると作業が楽です。

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

一括置換方法

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

アドミンバーと固定ヘッダーが被る場合の対策

上部に位置しているアドミンバーと固定ヘッダーの被りを防ぐために、functions.phpからスタイルをつけます。

// アドミンバー対策
function custom_admin_bar_styles() {
  if (is_user_logged_in() && !is_customize_preview()) {
    echo '<style>
      .header {
        margin-top: 32px;
      }

      @media screen and (max-width:782px) {
        .header {
          margin-top: 46px;
        }
        #wpadminbar {
          position: fixed !important;
        }
      }
    </style>';
  }
}
add_action('wp_head', 'custom_admin_bar_styles');

カスタマイズで編集している最中はアドミンバーは非表示になるので!is_customize_preview()を付け加えています。

jQueryが動作しない場合

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

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

以下のどちらかの方法で、書き換える必要があります。

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

リンクを書き換える

内部リンクを絶対パスで出力するために、home_url()で書き換えます。

トップページのURL

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

リンク先：http://sample-site.com/

下層ページのURL

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

リンク先：http://sample-site.com/about/

サイトロゴ（タイトル）の設定

サイトロゴ（タイトル）は、トップページではH1に、それ以外はdivに設定します。

これにより、下層ページのタイトルをH1として適切に扱うことができます。

<!-- <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>
ここを動的に置き換える -->
↓
<!-- トップページではロゴをh1に、それ以外のページではdivに -->
<?php $tag = is_front_page() ? 'h1' : 'div'; ?>
<<?php echo $tag ?> 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="<?php bloginfo('name'); ?>"></a>
</<?php echo $tag ?>>

ロゴ画像を使う場合、alt属性にはbloginfo('name')を使ってサイト名を出力すると便利です。

作成したページを固定ページとして認識させる

作成したページを固定ページとして認識させるには、以下の２種類のどちらかの方法で実装します。

ページテンプレートを使う方法
カスタムテンプレートを使う方法

ページテンプレートを使う方法

page-スラッグ名.php

こちらの方法では、固定ページのパーマリンクをスラッグ名に揃えるだけで認識されます。

ページテンプレートの設定例

page-about.php：固定ページのパーマリンクをaboutに設定
page-contact.php：固定ページのパーマリンクをcontactに設定

スラッグに基づいて自動的にテンプレートを適用できるため、手間がないのがメリットです。

カスタムテンプレートを使う方法

任意の名前.php

company.phpのような任意のファイル名でカスタムテンプレートとして扱うには、ファイルの最上部に以下のようなコメントを追加します。

カスタムテンプレートの記述例

<?php
/*
Template Name: 任意の名前（例：会社概要）
*/
?>

あとは、固定ページを新規作成し、サイドバーにある「テンプレート」からテンプレートファイルを選択することで認識されます。

こちらは、パーマリンクを自由に命名することができ、ファイルを別の固定ページでも使いまわせるのがメリットです。

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

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

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_home() || is_single() || is_category() ) echo 'current'; ?>"><a href="#">blog</a></li>
</ul>

ざっくりとこんな感じ。

<!-- トップページ -->
<?php if( is_front_page() ) echo 'current'; ?>
<!-- 固定ページ（about） -->
<?php if( is_page('about') ) echo 'current'; ?>
<!-- 投稿関連ページ -->
<?php if( is_home() || is_single() || is_category() ) 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ファイルを作る

テーマとして認識させる

index.phpを分割する

PHPファイルを編集していく前に

セキュリティ対策

不具合対策

テーマの基本セットアップ

functions.phpからCSSやJSを読み込む

wp_enqueue_styleの説明

wp_enqueue_scriptの説明

第４引数でキャッシュ管理する

属性付きのタグは別のアプローチで記述

方法１：headタグに直接書く

方法２：wp_headフックで出力させる

画像のパスを変換

アドミンバーと固定ヘッダーが被る場合の対策

jQueryが動作しない場合

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

動的に変更

ドロワーメニューの例

ヘッダーメニューの例

リンクを書き換える

トップページのURL

下層ページのURL

サイトロゴ（タイトル）の設定

作成したページを固定ページとして認識させる

ページテンプレートを使う方法

カスタムテンプレートを使う方法

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

header.phpに直接書く場合

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

続く

お気軽にコメントどうぞ

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

【WordPress化】最初の手順

ローカル環境を作る

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

各フォルダの内容

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

phpファイルを作る

テーマとして認識させる

index.phpを分割する

PHPファイルを編集していく前に

セキュリティ対策

不具合対策

テーマの基本セットアップ

functions.phpからCSSやJSを読み込む

wp_enqueue_styleの説明

wp_enqueue_scriptの説明

第４引数でキャッシュ管理する

属性付きのタグは別のアプローチで記述

方法１：headタグに直接書く

方法２：wp_headフックで出力させる

画像のパスを変換

アドミンバーと固定ヘッダーが被る場合の対策

jQueryが動作しない場合

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

動的に変更

ドロワーメニューの例

ヘッダーメニューの例

リンクを書き換える

トップページのURL

下層ページのURL

サイトロゴ（タイトル）の設定

作成したページを固定ページとして認識させる

ページテンプレートを使う方法

カスタムテンプレートを使う方法

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

header.phpに直接書く場合

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

続く

お気軽にコメントどうぞ

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

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

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