【WordPress化】最初の手順
静的ページを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
を開いて、76行目あたりにある第2引数を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などの外部リンクは、第2引数までの省略した記述で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 |
外部リンクをwp_footer()で読み込ませるには、第5引数の$in_footerをtrue
にし、残りは初期値を入れます。
wp_enqueue_script('swiper', 'https://unpkg.com/swiper@8/swiper-bundle.min.js', [], false, true);
第4引数でキャッシュ管理する
第4引数(クエリパラメータ)にfilemtime
を指定することで、「ファイルを更新したのに反映されない」といったことを防ぐことができます。
記述例
filemtime(get_theme_file_path('css/style.css'))
filemtime
はファイルの更新日時を取得してくれるため、更新しない限りはキャッシュされ、更新するたびサーバーから新たにファイルを取得するようにすることが出来ます。
これにより、CSSやJS更新時の手動キャッシュクリアが不要となります。
属性付きのタグは別のアプローチで記述
Webフォントなど、事前接続させて高速化するためのlinkタグにはcrossorigin
などの属性がついていることがあります。
通常、属性付きのタグはwp_enqueue_scripts
からでは追加できないので、別のアプローチで記述する必要があります。
方法1:headタグに直接書く
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<?php wp_head(); ?>
</head>
小規模なサイトであれば、直接headタグに書き込んだ方が直感的で管理しやすいかもしれません。
方法2: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')
を使ってサイト名を出力すると便利です。
作成したページを固定ページとして認識させる
作成したページを固定ページとして認識させるには、以下の2種類のどちらかの方法で実装します。
- ページテンプレートを使う方法
- カスタムテンプレートを使う方法
ページテンプレートを使う方法
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>
お気軽にコメントどうぞ