昨年の「WordPress 上部のバナー/通知/お知らせ表示プラグイン'という文章を通して WordPressで利用できるトップバー（top bar）のプラグインについて簡単に説明したことがあります。
今日見てみると、この中で使えそうなプラグインは、Top Bar程度です。 このプラグインは、無料版と有料版があります。
WordPress Top Barプラグイン
Top Bar無料版を使用すると、上部にバナーや通知を表示することができます。 有料版のTop Bar PROは遅延ロード、Top Bar位置を下部に表示することができる機能、およびバナーをユーザーが閉じることができるCloseボタンを追加で提供します。
無料版を持ってテストしてみるとテーマに沿って正常に動作していない場合がありました。 PROバージョンを使用すると、 Avada などのテーマで正常に動作しました。 Diviテーマの場合上部の代わりに下部に表示すると、正常に動作していたようです。
無料版を使用したときに正常に動作しない場合は、PROバージョンで遅延ロード機能を使用したり、バナーの位置を下部に配置すると、正常に動作することができます。
Top bar機能は、簡単なjavascriptで実装が可能です。 プラグインを使用せずにTop bar機能を実装する方法も考慮してみることができます。
Braveポップアッププラグイン
Brave Popup Builderは、ドラッグ＆ドロップ方式で簡単にポップアップを作ることができる WordPress ポップアッププラグインです。 このプラグインは、モーダルポップアップだけでなく、固定サイドバーの上部/下部固定バーを表示する機能も提供します。
GeneratePress テーマ：トップバーウィジェットを使う
GenetratePressテーマを使用している場合は、フックを使用してトップバナーを表示できますが、単にトップバーウィジェットを使用してトップにバナーを表示することができます。
プラグインを使用せずに上部に通知を表示する
プラグインを使用せずに上部または下部に通知を表示する場合は、作成する方法 WordPress Notification Bar Without a Plugin「に記載されている記事を参照できます。
Closeボタンを追加するには、次のようなコードを使用することができます。
HTML：
<div id="dabar" class="hide_on_mobile"><button id="closexButton" onclick="document.getElementById('dabar').style.display='none'" >Close</button>알림 텍스트</div>
CSS：
/* top-bar */
#dabar{
background: #2c3644;
color: #fff;
font-size:16px;
position: fixed;
z-index:1;
top: 0px;
left: 0px;
width: 100% !important;
padding: 10px 0px;
text-align: center;}
#dabar a {color: #ffffff; border-bottom: 1px dotted;}
@media only screen and (max-width:783px) {
.hide_on_mobile {
display: none !important;}
}
#closexButton {
position: absolute;
top: 5px;
right: 70px;
background-color: #f92c8b;
padding: 2px 10px 2px;
color: white !important;
text-decoration: none;
margin: 0px 20px;
border-radius: 3px;
}
テーマに沿って少しずつ歪む部分は、CSSを使用して適切に制御するようにします。
コメントを残す