ベストセラー WordPress テーマである Avada(Avada)は現在11年連続販売1位を記録しており、100万個以上販売されています。同様の販売量を誇る有料テーマで同様の機能を提供する多目的テーマ Diviがあります。 Avada テーマには多くの機能が搭載されており、初心者からプロのすべてのユーザーに使用できます。テーマをインストールしてサイトの作成やリニューアル作業を完了するまで「サイト工事中」または「サイトリニューアル」画面を表示したり、一時的なサイトメンテナンス期間中に通知ページを表示したい場合 Avada テーマの 'メンテナンスモード'を使用できます。

Avada テーマ「メンテナンスモード」を使用してサイト建設中に画面を表示する方法

多目的テーマのヒョシと言える Avada(Avada)は10年以上販売1位を記録している伝説と同じテーマです。
Avadaには多くの機能が搭載されており、初心者でも簡単に扱えるというメリットがありますが、一方であまりにも多くの機能によりサイトが重く遅くなる短所もあります。
WordPressでテーマをインストールしてサイトの作成を完了するまで、サイトの作成やリニューアル中であることを知らせる画面を表示したい場合は、Coming Soonプラグインを使用できます。
Avada テーマを使用している場合は、「メンテナンスモード」を使用できます。
WordPress お知らせ» Avada »メンテナンスモードでメンテナンスモードを有効または無効にできます。

上の図のように オフ, Maintenance, Coming Soon オプションから選択できます。
メンテナンス モード 近日公開 モードを選択すると、同じ設定画面が表示されます。


Maitenanceモードでは、サイトのタイトルとともに「メンテナンスモード「メッセージが表示されます。

Coming Soonオプションを選択すると、サイトのタイトルと一緒に「近日公開「メッセージが表示されます。

メッセージは Page Title HTML Tagで指定することができます。

そして次のような CSS コードを 外観 » カスタム » 追加 CSSに追加するとサイトのタイトルが消えます。
.awb-maintenance-site-name {
display: none;
}
サイトのタイトルとメッセージを非表示(削除)して背景画像に置き換えることもできます。サイトの建設中またはリニューアル作業中であることを示す背景画像を作成してメディアライブラリにアップロードした後、次のCSSコードを追加すると、サイトのタイトルとメンテナンスの通知メッセージが消え、指定した画像がフルスクリーンの背景に設定されます。
/* In Avada Maintenance Mode: hide the site title and page title,
and apply a custom full-screen background image */
section.awb-maintenance-content {
display:none;
}
body.awb-maintenance-page {
background-image: url('https://example.com/.../image-name.jpg'); /* 이미지의 실제 경로로 변경*/
background-size: cover; /* 화면을 꽉 채움 */
background-position: center; /* 중앙 정렬 */
background-repeat: no-repeat; /* 반복 없음 */
background-attachment: fixed; /* 스크롤 시 고정 (선택사항) */
width: 100%;
height: 100vh; /* 전체 높이 설정 */
margin: 0;
padding: 0;
}
メンテナンスモードを有効にすると、デフォルトでは管理者だけがサイトにアクセスでき、他のユーザーや訪問者はComing SoonまたはMaintenance画面を表示します。必要に応じて、特定のユーザーロール(Editor、Author、Contributor、Subscriber、Customerなど)に対してサイトにアクセスできるようにすることができます。

最後に、
Avada テーマはメンテナンスモードオプションを提供しているため、サイトを新規に作成したりリニューアルしたりする場合は、サイトが完成するまでメンテナンスモードを有効にできます。これにより、別のComing Soonプラグインを使用する必要はありません。
サイト制作やリニューアル、メンテナンス通知画像を用意して CSSで全画面背景画像でも設定が可能ですので、状況に応じて応用してご利用ください。
コメントを残す