TwitterでWEB制作やWEBデザインについて発信しています。

【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
  • page.php
  • single.php
  • archive.php
  • header.php
  • footer.php
  • search.php
  • 404.php
  • functions.php
  • style.css

必要に応じて

  • 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にコピーし、ヘッダーとフッターとで3分割します。

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', array(), '5.8.2', 'all');
  wp_enqueue_style('swiper', 'https://unpkg.com/swiper@8/swiper-bundle.min.css');
  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', array(), false, true);
  wp_enqueue_script('wow', get_template_directory_uri() . '/js/wow.min.js', array(), '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
$mediamedia属性に関する指定。‘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()
$ver任意のバージョンを指定。ブラウザキャッシュ対策としても有効。
ファイル名の末尾にクエリパラメータとして追加されます。
指定がない場合、WordPress のバージョン番号がパラメータに付与されます。
false
$in_footerwp_footer()で読み込ませるかどうか。false

第5引数の$in_footerだけ指定したい場合は、以下のように第3引数、第4引数には初期値を入れます。

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

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

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

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

第4引数の記述例

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の場合、以下の方法で一括置換が可能です。

一括置換方法

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

追従ヘッダーと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' );
		}
	});
});

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

$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>

続く

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次