WordPress トップバーのプラグインTop Bar PRO

昨年の「WordPress 上部のバナー/通知/お知らせ表示プラグイン'という文章を通して WordPressで利用できるトップバー(top bar)のプラグインについて簡単に説明したことがあります。

今日見てみると、この中で使えそうなプラグインは、Top Bar程度です。 このプラグインは、無料版と有料版があります。

WordPress Top Barプラグイン

WordPress 上部のバナーのプラグイン

Top Bar無料版を使用すると、上部にバナーや通知を表示することができます。 有料版のTop Bar PROは遅延ロード、Top Bar位置を下部に表示することができる機能、およびバナーをユーザーが閉じることができるCloseボタンを追加で提供します。

無料版を持ってテストしてみるとテーマに沿って正常に動作していない場合がありました。 PROバージョンを使用すると、 Avada などのテーマで正常に動作しました。 Diviテーマの場合上部の代わりに下部に表示すると、正常に動作していたようです。

無料版を使用したときに正常に動作しない場合は、PROバージョンで遅延ロード機能を使用したり、バナーの位置を下部に配置すると、正常に動作することができます。

WordPress トップバーのプラグインTop Bar PRO 2
Top Bar PROバージョン。 遅延(Delay)ロード機能とバナーを終了(Close)することができる機能などが追加で提供される。

Top bar機能は、簡単なjavascriptで実装が可能です。 プラグインを使用せずにTop bar機能を実装する方法も考慮してみることができます。

Braveポップアッププラグイン

Brave Popup Builderは、ドラッグ&ドロップ方式で簡単にポップアップを作ることができる WordPress ポップアッププラグインです。 このプラグインは、モーダルポップアップだけでなく、固定サイドバーの上部/下部固定バーを表示する機能も提供します。

プラグインを使用せずに上部に通知を表示する

プラグインを使用せずに上部または下部に通知を表示する場合は、作成する方法 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を使用して適切に制御するようにします。


コメントを残す

*メールアドレスは公開されません。