カテゴリー
WordPressウェブサイトをDocker&Svelteを使ってローカル環境で開発する②〜テーマ開発編
※ 当ページには【広告/PR】を含む場合があります。
2022/07/05
2022/08/19
WordPressでオリジナルのテーマをカスタマイズする
1. 独自テーマをインストールする
2. 独自プラグインでカスタマイズページを追加する
3. WordPressとは別のサーバーでウェブページをホスティングし、
プロキシサーバとしてWordPressからそちらへリダイレクトさせる
WordPressに独自テーマを作成する
/var/www/html
wordpress/wp-content/themes
$ tree wordpress/wp-content/themes/ -L 1
.
├── index.php
├── twentytwenty
├── twentytwentyone
└── twentytwentytwo
index.php
twentytwenty(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/wp-content/themes
empty
$ mkdir wordpress/wp-content/themes/empty
$ cd wordpress/wp-content/themes/empty
$ touch functions.php index.php header.php footer.php style.css
+ functions.php:
テーマ全体で使う機能を設定する定義ファイル
+ index.php:
HTMLページのテンプレートファイル(本体)
+ header.php
HTMLページのテンプレートファイル(ヘッダーパート)
+ footer.php
HTMLページのテンプレートファイル(フッターパート)
+ style.css
スタイルシートのルートファイル
functions.php
<?php
///...以降で定義や共通関数を記述していく
index.php
index.html
<?php get_header(); ?>
<main>
<p>初めてのWordPressテーマです。</p>
</main>
<?php get_footer(); ?>
header.php
<!DOCTYPE html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
<div>
<p>ヘッダーです。</p>
</div>
footer.php
<div class="section-inner">
<p>フッターです。</p>
</div>
<?php wp_footer(); ?>
</body>
</html>
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);
}
ダッシュボードから自作テーマを適用する
[外観] > [テーマ]
Empty
SvelteのビルドリソースでWordPressのアセットファイルを置き換えるやり方
1. Svelteでビルド・バンドルしたJavascriptファイルをWordPressテーマに埋め込む
2. Svelteでビルド・バンドルしたCssファイルをWordPressテーマに埋め込む
3. 1と2をポストビルド処理として自動化する
WordPress側のPHPファイルから外部Javascriptスクリプトを読み込む
<script>
functions.php
wordpress/wp-content/themes/empty
assets
#...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_action
add_action([アクション名], [ハンドラ名])
bundle.js
assets/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側のPHPファイルから外部Cssスタイルを読み込む
wp_enqueue_style
assets/css
<?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ビルド後の出力ファイル先を変更する
bundle.js
bundle.css
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
{
"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をコピーしました
まとめ
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー