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

テーマ

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

アップデート用テーマ

 

ルクセリタスの場合

ルクセリタスにはアップデート用のテーマが用意されていますので、ルクセリタスをお使いの方は以下からダウンロードしてご利用下さい。

アップデート用テーマを有効化した後、ルクセリタス親テーマをインストールすると、子テーマが自動で有効化されて完了します。

アップデート中のメッセージをカスタマイズする方法も以下にまとめています。


今回作成するのは、

テーマ更新したい際に、単に一時的に利用するテーマになります。

 

はじめに

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

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

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

アップデート用テーマ

 

テーマの更新手順

  1. 便宜的に一旦、別のテーマを有効にする
  2. 更新したいテーマを削除する
  3. 最新版のテーマをインストール

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

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

これを回避する為と

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

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

 

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

基本構成

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

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

画像なし
アップデート用テーマ
画像あり
アップデート用テーマ
作成するもの

  • テーマフォルダ(テーマ名)
  • 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は好きなようにデザインを記述します。

 

スクリーンショット作成

必要なければ作らなくてもOKです。

作成した場合は、「screenshot.jpg」とします。

 

圧縮

上記がすべて揃ったらファイルごと ZIP圧縮します。

アップデート用テーマ

アップデート用テーマ
 ↓ 圧縮 

アップデート用テーマ

 

テーマをインストール

外観 → テーマ →「新規選択」から

圧縮したZIPファイルを選択してインストールすれば完了です。

アップデート用テーマ

 

ブラウザ表示例

アップデート用テーマ

 

以上です。

関連記事

テーマ

Posted by 綾糸