ルクセリタスのテーマアップデート中メッセージ画面をカスタマイズ

ルクセリタスのテーマは機能拡張やWordPress・jQuery・PHPなどなどのバージョンに応じて頻繁に更新して下さる為、最新版で利用するのが望ましいです。

テーマアップデートは、アップデート用テーマファイルを利用して簡単に行えますが、その際、アップデート中に表示される画面はいたってシンプル。

これをカスタマイズする方法についてです。

テーマファイルのアップデート方法については以下をご覧ください。

アップデート用テーマのないテーマをお使いの場合、作成する事も出来ます。

はじめに

アップデート用のテーマファイルは以下の公式サイトからダウンロードできます。
Luxeritas アップデート用テーマ

デフォルト

さっさとやればほんの数秒でアップデートは完了するのですが、この表示だとしばらくかかりそうな印象だし、何をしているのかわからない為、アップデート作業中に訪れたサイト訪問者に「すぐ終わるよ」と明示したいと思い、当サイトでは以下のようにカスタマイズしています。

モバイルでもレスポンシブで画像を縮小表示。

やることは簡単ですが、PHPファイルを直接編集するので注意です。

必要なもの：FTPクライアント

FTPについて不明な方は以下を参考にして下さい。

テーマのアップデート中に表示したい画像を用意し、メディアにアップロードします。

以下をフォルダごとダウンロードするか、対象のPHPファイルとCSSをダウンロードし、念のためコピーを保存します。

/wp-content/themes/luxeritas-update

index.phpファイルの31行目をコメントアウトするか、修正します。

<h1><?php echo __( 'Briefly unavailable for scheduled maintenance. Check back in a minute.', 'luxeritas-update' ); ?></h1>

修正内容は、画像を使うのかテキストで表示するのかによりますが、当サイトの例で説明します。

<div class="img_center"><img src="画像URL" alt="代替テキスト" width="100%"></div>
<br><center><img src="画像URL" alt="代替テキスト"></center>

レスポンシブ対応にしたい画像には任意のクラス名を指定し、幅を100%で指定します。対応クラス名でスタイルシートに追記（後述）。

上記の例では「クラス名：img_center」

小さな画像（ロゴなど）を表示する場合は、クラス名を指定した<DIV>タグの外に書きます。

上記の例ではセンタリングしてそのままのサイズで表示しています。（<center>タグ）

style.ssに追記します。

一番最後に以下を追記。

.img_center {
　　max-width: 1100px;
　　margin: auto;
}

max-widthで指定するサイズはお好みで調整して下さい。

上記２つのファイルを上書きアップロードします。

以上で完了です。