Cocoonの使い方やカスタマイズとオリジナルスキン

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

Web
この記事は約4分で読めます。

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

 

アップデート用テーマ

はじめに

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

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

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

Twenty Twenty

 

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

 

新しいテーマをインストールして有効化するまで、長くても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ファイルを選択してインストールすれば完了です。

アップデート用テーマ

 

ブラウザ表示例

アップデート用テーマ

 

 

コメント

タイトルとURLをコピーしました