カテゴリー
WordPressウェブサイトをDocker＆Svelteを使ってローカル環境で開発する②〜テーマ開発編
※ 当ページには【広告/PR】を含む場合があります。
2022/07/05
2022/08/19
前回までの内容は以下の記事になります。
今回の記事では、主にWordPress内部にオリジナルのテーマを作成し、そのテーマをSvelteでビルドした静的リソースに置き換えることで、SPA(シングルページアプリケーション)としてカスタマイズしたWordPressウェブページを構築します。
WordPressでオリジナルのテーマをカスタマイズする
ウェブ検索すると、WordPressのサイトを外部からカスタマイズする方法は、おおよそ以下の３つの方法が紹介されているのを目にします。
1. 独自テーマをインストールする
2. 独自プラグインでカスタマイズページを追加する
3. WordPressとは別のサーバーでウェブページをホスティングし、
プロキシサーバとしてWordPressからそちらへリダイレクトさせる
例えば項目１にあたる独自テーマを一から作成するやり方を紹介している以下のようなサイトも多数あります。
独自テーマを作るやり方は非常に汎用性があり、開発期間が許せばフロントエンドエンジニアがじっくりとウェブサイト構築に取り組めるのならば、最もおすすめの手法です。
開発時間に余裕がなかったり、既存のWordPressウェブサイトが中大規模で、途中からのコード修正が既にやりにくい場合には、項目２の「プラグイン」で対応する方が懸命な対応と言えます。
また独自プラグインはテーマと比較してWordPressで有料販売しやすく、好んでプラグインの方を開発するエンジニアの方も多いようです。
実用性を兼ね備えるやり方としては、プラグイン方式もおすすめになります。
他方、WordPressのウェブサイトのエンドポイントURLを変換することで、通常のWordPressサーバーがホスティングする静的リソースを使わず、別の代替サーバーで立ち上げたウェブサイトへリダイレクトする機能を使う方式もあります。
この場合、WordPressウェブサイトを間借りした、別のウェブサイトである気がしますが、一応WordPressが提供している機能ですので、WordPressウェブサイトの一形態と言えます。
この方式を行うデメリットしては、フロントエンドのみならず、サーバーサイドのバックエンド開発の知識も必要になってくる点です。
どちらかといえば、既存のWordPressウェブサイトを、非WordPress系のウェブサイトに移行するときに、サイト集客やGoogle検索のインデックスに影響を与えずにスムーズに新旧サイトを入れ替えるときに有効な技です。
このため主としてウェブサイトを運用するやり方には向かないかも知れません。
これら項目１〜３のやり方には長所短所がそれぞれありますが、このブログでは
WordPressに独自テーマを作成する
まずは独自テーマをどのように作成すると良いのかを具体的に手動でやってみましょう。
もっともシンプルに、ヘッダーとフッターとメインコンテンツだけを含むテーマを作ります。
/var/www/html
ここでWordPressのテーマが格納されているのが、
wordpress/wp-content/themesさらにその中身を確認すると、
$ tree wordpress/wp-content/themes/ -L 1
.
├── index.php
├── twentytwenty
├── twentytwentyone
└── twentytwentytwo
という構成になっており、ウェブページのルート共通ファイルにあたる
index.phptwentytwenty(2020)twentytwentyone(2021)twentytwentytwo(2022)
もう少しテーマの一つのフォルダの中を見てみましょう。
.
├── index.php
├── 404.php
├── comments.php
├── footer.php
├── functions.php
├── header.php
├── searchform.php
├── singular.php
├── assets
├── classes
├── inc
├── package-lock.json
├── package.json
├── print.css
├── readme.txt
├── style-rtl.css
├── style.css
├── screenshot.png
├── template-parts
└── templates
見ての通り、WordPressのテーマの実体はPHPファイルを主としたHTML生成プログラムのリソースセットになっています。
ではWordPressのファイル構造をサッと把握してもらったところで、もっとも簡単なテーマを作成していきましょう。
以下のように
wordpress/wp-content/themesempty $ mkdir wordpress/wp-content/themes/empty
$ cd wordpress/wp-content/themes/empty
$ touch functions.php index.php header.php footer.php style.css
WordPressテーマとして最低限動かしたい場合、以下のファイルが必要になるでしょう。
+ functions.php:
テーマ全体で使う機能を設定する定義ファイル
+ index.php:
HTMLページのテンプレートファイル(本体)
+ header.php
HTMLページのテンプレートファイル(ヘッダーパート)
+ footer.php
HTMLページのテンプレートファイル(フッターパート)
+ style.css
スタイルシートのルートファイル
ではそれぞれのファイルの実装の中身を示します。
functions.php
functions.phpにはウェブサイトで共通のアセットファイルなどを管理するという重要な役目がありますが、この時点ではほぼ空です。
<?php
///...以降で定義や共通関数を記述していく
index.php
いわゆる
index.htmlヘッダーとフッターは別のファイルに分離しています。
<?php get_header(); ?>
<main>
<p>初めてのWordPressテーマです。</p>
</main>
<?php get_footer(); ?>
header.php
先程index.phpから分離したうちのヘッダー部分を担当するPHPファイルになります。
<!DOCTYPE html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
<div>
<p>ヘッダーです。</p>
</div>
footer.php
こちらはindex.phpから分離したうちのフッター部分を担当するPHPファイルになります。
<div class="section-inner">
<p>フッターです。</p>
</div>
<?php wp_footer(); ?>
</body>
</html>
style.css
style.cssファイルが無いとテーマの読み込みに失敗するため、スタイリングしない場合でもテーマのフォルダのルートに原則作成しなくてはいけません。
/*
Theme Name: Empty
Text Domain: Empty
Version: 1.0
Tested up to: 6.0
Requires at least: 4.7
Requires PHP: 5.2.4
*/
html, body {
width: 100%;
background: rgb(255, 255, 255);
}
ダッシュボードから自作テーマを適用する
上記のように各リソースファイルを編集し終えたら、WordPressのダッシュボードより、
[外観] > [テーマ]Empty
このテーマを適用することで、以下のようにもっとも単純なWordPressページが生成されているはずです。
本格的にWordPressテーマの開発を勉強してみたい方はここからPHPのプログラミングを学習することになりますが、弊社のブログではPHPのネタは直接扱いません(というか著者はPHPあまり詳しくありません...)。
ということで、PHPでゴリゴリにWordPress開発をするスタイルではなく、
SvelteのビルドリソースでWordPressのアセットファイルを置き換えるやり方
後半のパートの目標としては、
1. Svelteでビルド・バンドルしたJavascriptファイルをWordPressテーマに埋め込む
2. Svelteでビルド・バンドルしたCssファイルをWordPressテーマに埋め込む
3. 1と2をポストビルド処理として自動化する
という内容を軸に話を進めます。
WordPress側のPHPファイルから外部Javascriptスクリプトを読み込む
WordPress側のPHPプログラムでJSスクリプトを読み込ませるテクニックから解説します。
WordPressのウェブページでは最終的にレンダリングされるHTMLへ直接
<script>functions.php一つ簡単なJSスクリプトで試してみましょう。
wordpress/wp-content/themes/emptyassets #...wordpress/wp-content/themes/empty内で作業する
$ mkdir assets
$ mkdir assets/js
$ touch assets/js/hello_wp.js
とりあえず空で作成した
assets/js/hello_wp.js console.log(`Hello, WORDPRESS THEME!`);
次に
functions.php <?php
//👇テーマルートディレクトリまでのパスを定数として定義
if (!defined('WP_THEMES_ROOT')) {
define('WP_THEMES_ROOT', get_template_directory_uri());
}
function add_files() {
wp_enqueue_script('my_first_script', WP_THEMES_ROOT . '/assets/js/hello_wp.js');
}
add_action('wp_enqueue_scripts', 'add_files');
ここでの
add_actionadd_action([アクション名], [ハンドラ名])...PHPを使わない人間にはあまりアクションフック自体が馴染みが薄いですが、理解はしやすいので定形構文としてそんなもんなんだ、くらいに思っておきましょう。
再度、WordPressページを読み込んで、ブラウザコンソールを確認すると、
標準出力得られていればOKです。
これでWordPressとJavascriptコードとの提携が出来るようなりました。
ここで試しにSvelteのビルド出力した
bundle.jsassets/jsSvelteコードの制約として、バンドル後のJSスクリプトは
<head>デフォルトの
wp_enqueue_scriptsこれを避けるために、
functions.php //...中略
function add_svelte(){
wp_enqueue_script('svelte_script', WP_THEMES_ROOT . '/assets/js/bundle.js');
}
add_action('wp_head', 'add_svelte');
ポイントとして、アクションフック先に
wp_head<head>WordPressページをリロードして、
Svelteアプリが無事レンダリング出来ていることが確認できます。
WordPress側のPHPファイルから外部Cssスタイルを読み込む
先程はJSスクリプトをfunctions.phpに読み込ませてみましたが、ほぼ同じ理屈でcssファイルも
wp_enqueue_styleまずテーマのcssスタイル用に
assets/cssそしてfunctions.phpを更に以下のように修正します。
<?php
//テーマディレクトリまでのパス定数
if (!defined('WP_THEMES_ROOT')) {
define('WP_THEMES_ROOT', get_template_directory_uri());
}
function add_files() {
wp_enqueue_script('my_first_script', WP_THEMES_ROOT . '/assets/js/hello_wp.js');
#👇WordPressルートのstyle.cssはここで読み込み
wp_enqueue_style('root_style', WP_THEMES_ROOT . '/style.css');
}
add_action('wp_enqueue_scripts', 'add_files');
function add_svelte(){
wp_enqueue_script('svelte_script', WP_THEMES_ROOT . '/assets/js/bundle.js');
#👇Svelteアプリのスタイルもhead要素内で読み込みする
wp_enqueue_style('main_style', WP_THEMES_ROOT . '/assets/css/bundle.css');
}
add_action('wp_head', 'add_svelte');
ではSvelteとWordPressの連携の準備が整いましたので、ページをリロードすると、
ようやく首題の
Svelteビルド後の出力ファイル先を変更する
以上までで
bundle.jsbundle.cssそこでSvelteビルド後に、WordPressのテーマアセットフォルダへ自動仕訳してくれるようにシェルスクリプトを一つ噛まします。
Svelteプロジェクト側のルートから作業して、
shell/postbuild.sh $ mkdir shell
$ touch shell/postbuild.sh
で、スクリプトの中身を以下にしておきます。
#!/bin/bash
echo 'POSTBUILD PROCESS'
#👇Svelteアプリのビルド後保存先の開発Dockerコンテナ内での絶対パス
SVELTE_DIST=/usr/src/app/svelte-app/public/build
#ビルド後のリソースの送り先(こちらもDockerコンテナ内での絶対パス)
WP_ASSETS_DIR=/usr/src/app/wordpress/wp-content/themes/empty/assets
if [ -d $WP_ASSETS_DIR ]; then
if [ ! -d $WP_ASSETS_DIR/js ]; then
mkdir $WP_ASSETS_DIR/js
fi
if [ ! -d $WP_ASSETS_DIR/css ]; then
mkdir $WP_ASSETS_DIR/css
fi
else
echo 'Themeにassetsフォルダがありません！'
fi
if [ -f $SVELTE_DIST/bundle.js ]; then
cp $SVELTE_DIST/bundle.js $WP_ASSETS_DIR/js/
echo 'bundle.jsをコピーしました'
fi
if [ -f $SVELTE_DIST/bundle.css ]; then
cp $SVELTE_DIST/bundle.css $WP_ASSETS_DIR/css/
echo 'bundle.cssをコピーしました'
fi
あとはpackage.jsonのスクリプトパートにこのスクリプトを仕込んでおきます。
{
"name": "svelte-wordpress-app",
//...中略
"scripts": {
"build": "rollup -c",
//...中略
//👇postbuildコマンドを追記
"postbuild": "bash shell/postbuild.sh"
},
//...以下略
これでビルド後に
shell/postbuild.sh $ yarn build
#👇アプリのビルド後にリソースのコピー処理が走るとOK
yarn run v1.22.17
rollup -c
src/main.ts → public/build/bundle.js...
created public/build/bundle.js in 5.7s
bash shell/postbuild.sh
POSTBUILD PROCESS
bundle.jsをコピーしました
bundle.cssをコピーしました
これで、WordPressのSvelteによるSPA化が無事完了しました。 めでたしめでたし。
まとめ
以上までで、WordPressウェブサイト(テーマ)をSvelteアプリによるビルド生成物で置き換える方法の手順を２回に渡り説明してきました。
JS系のフレームワークであれば、Svelteに限らず、ReactでもVueでもAngularでもビルド後にWordPressのテーマのアセットフォルダへ上手く結びつけられたら理屈上ではどのフレームワークでも動くと思います。
ただし、リッチなフレームワークほど出力生成物の容量が大きいので、SvelteやSolid.jsなどの軽量なフレームワークの方がより快適かも知れません。
SvelteによるWordPressウェブサイトの開発環境の構築の話はここで一旦終わりですが、実際のWordPressが使えるレンタルサーバーで動くのかは興味があるところです。
今後時間があれば、適当なアプリでウェブサイトを公開する手順も紹介していきたいと思います。
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー