テーマのアップデート時に表示するメンテナンス用のテーマを作る

テーマを更新する際、ワードプレスから自動更新が出来るテーマもありますが、自身で最新版をダウンロードするなどして入手し、更新したい際に「メンテナンス中」とわかるように表示するテーマの作成方法です。

はじめに
アップデート用テーマを作成
圧縮
テーマをインストール

はじめに

テーマを手動更新する際、更新したいテーマを削除しなければなりませんが。使用中のテーマは削除できない為、

一時的に別のテーマを有効にする必要があります。

ワードプレス標準の「Twenty Twenty」などを利用されている方も多いと思います。

手順

STEP1
テーマ変更
便宜的に一旦、別のテーマを有効にする
STEP2
削除
更新したいテーマを削除する
STEP3
インストール
最新版のテーマをインストールする

新しいテーマをインストールして有効化するまで、長くても１～２分でしょうが、

一瞬でも使っていないテーマになりデザインが滅茶苦茶になる

これを回避する為と

メンテナンス中ですぐ終わる事を伝える

という目的で「アップデート用」テーマを作成します。

アップデート用テーマを作成

基本構成

ワードプレステーマの最小構成は「index.php」と「style.css」の２つです。

更にテーマ一覧で表示される画像用のファイルを作成しておくとわかりやすいです。

画像なし

画像あり

作成するもの

テーマフォルダ（テーマ名）
index.php
style.css
screenshot.jpg

フォルダ作成

テーマフォルダ名がテーマ名になるので、わかりやすいものにしましょう。

例では「Update」とします。

PHPファイル作成

index.php ファイルを作成し、以下のように記述します。

<!DOCTYPE html>
<html  lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>メンテナンス中｜サイト名</title>
</head>
<body>
<br><br>
<img src="メンテナンスメッセージ画像アドレス" alt="アップデートメンテナンス中です"><br>
<br>
<img src="ロゴファイルアドレス" alt="サイト名">
</body>
</html>

上記はあくまでもサンプルです。

画像でなく、テキストでもいいですし、普通にHTMLで記述すればOK。

スタイルシート作成

style.css を作成し、以下のように記述します。

/*
 *   Theme Name: Update
 *   Description: original update theme.
 *   Author: XXXXXX
 *   Version: 1.0
*/
img {
　　max-width: 1100px;
　　margin: auto;
}

テーマ名は必須になります。

Theme Name　テーマ名（作成したフォルダ名）

Description　テーマの説明

Author　管理者名

Version　バージョン

以降のCSSは好きなようにデザインを記述します。