WordPressでバナーをランダムに表示するさまざまな方法があります。簡単にプラグインを使用することができますが、ログオンを使用したくない場合は、JavaScriptとHTML / CSSを使用してバナーをランダムに表示できます。
プラグインを使用してランダムバナーを表示したい場合は、次の記事で紹介するプラグインをインストールしてテストできます。
この記事では、 GeneratePress テーマでJavaScriptを使用してTop Barウィジェット領域にバナーをランダムに表示する方法を見てみましょう。他のテーマでも同様に応用が可能です。
WordPress トップバナーランダムに表示する方法（feat。 GeneratePress テーマ）
GeneratePress テーマの場合 外観 » ウィジェットの Top Bar（トップバー） ウィジェット領域にカスタムHTMLブロックを追加して、トップバナーを表示できます。
Top Barエリアにバナーを表示する方法については、次の記事を参照してください。
GPテーマのTop Barウィジェット領域にカスタムHTMLブロックを追加して、複数のバナーをランダムに表示することを目的としています。
訪問者がページを読み込むたびにバナーがランダムに変わるようにします。 （ブラックフライデーイベントをする テーマ와 ウェブホスティングのバナーを交互に表示するように実装したが、今は1つだけ表示しています。ブルフの割引イベントが近いうちにほとんど終了するようです。😄）
HTMLコード
外観 » ウィジェットのトップバー領域にカスタムHTMLブロックを追加し、 HTML コードを入力してください。
<div id="banner1" class="notice-inner grid-container" style="display: none;">
Banner 1<a href="https://example.com/banner1" aria-label="Learn more about Banner 1">
Learn More
</a>
</div>
<div id="banner2" class="notice-inner grid-container" style="display: none;">
Banner 2<a href="https://example.com/banner2" aria-label="Learn more about Banner 2">
Learn More
</a>
</div>
フレーズやURLなどは好きなように変更してください。
CSSコード
トップバー エリアに表示されるバナーのスタイルは、 GeneratePress テーマのテーマオプションとカスタムCSSで調整する必要があります。
WordPress 管理者ページ » 外観 » カスタム » Layout » Top Barでレイアウトを設定できます。
背景色やテキスト色などは 外観 » カスタム » Colorsの トップバー セクションで設定できます。
カスタムCSSは 外観 » カスタム » 追加 CSSに追加します。私は次のコードを使用しました。実際に使用する場合は、色や文字サイズなどは適切に変更してください。
/* Top Bar - Dark and Modern HighTech Style in GeneratePress */
.top-bar {
background: #0a0a0a; /* Almost black dark background */
color: #1abc9c; /* Vibrant teal text */
font-family: 'Consolas', monospace; /* Tech-friendly, monospace font */
font-size: 1.0rem !important;
font-weight: 600 !important;
padding: 10px 20px;
border-bottom: 4px solid #1abc9c; /* Vibrant teal bottom border */
}
.top-bar a {
display: inline-block;
padding: 8px 20px;
margin: 0 10px;
border-radius: 0; /* Sharp edges to maintain a techy look */
background: #1abc9c; /* Vibrant teal background */
color: #0a0a0a; /* Dark text */
text-decoration: none;
font-weight: 700;
letter-spacing: 1px; /* Slight letter spacing for that high-tech aesthetic */
transition:
background 0.3s,
color 0.3s,
box-shadow 0.3s;
}
.top-bar a:hover {
background: #16a085; /* A slightly darker teal on hover */
color: #ecf0f1 !important; /* Light grey text on hover */
box-shadow: 0 0 10px 2px rgba(26, 188, 156, 0.7); /* Slight shadow with a teal hue */
}
/* Media Queries */
@media (max-width: 768px) {
.top-bar {
display: none; /* Hide top bar on mobile devices */
}
}JSコード
次のJavaScriptコードを使用すると、訪問者が訪問するたびにページを読み込むたびに上部バナーがランダムに変わります。
<script>
document.addEventListener('DOMContentLoaded', function () {
const banners = ['banner1', 'banner2'];
const randomBanner = banners[Math.floor(Math.random() * banners.length)];
// Hide all banners
banners.forEach(bannerId => {
document.getElementById(bannerId).style.display = 'none';
});
// Show the selected banner
document.getElementById(randomBanner).style.display = 'block';
});
</script>JavaScriptコードは 形状 » Elementsからフックとしてwp_footer領域に追加するか WPコードなどのプラグインを使用してフッタ領域に追加できます。
上記のJSコードは、訪問者が訪問するたびにランダムにバナーを表示する単純な機能です。 localStorageを使用してバナーをユーザーごとに維持するようにコードを改善することもできます。
サイトへの影響を最小限にしたい場合 チャイルドテーマの関数ファイルに次のコード（例）を追加してenququeする方法をご利用ください。
function enqueue_random_banner_alternative() {
if (wp_is_mobile()) {
return; // 모바일 기기에서는 로드하지 않음
}
wp_enqueue_script(
'random-banner-alt',
get_stylesheet_directory_uri() . '/js/random-banner-alt.js',
array(),
'1.0',
true
);
}
add_action('wp_enqueue_scripts', 'enqueue_random_banner_alternative');チャイルドテーマを作成して作業しないと、今後のテーマが更新されると修正または追加したコードが消えるので、必ずチャイルドテーマ（子テーマ）を作成してチャイルドテーマの関数ファイルにコードを追加してください。
random-banner-alt.jsファイルを作成してJavaScriptを追加する（ 태그와 タグは削除）し、チャイルドテーマフォルダのjsサブフォルダにアップロードしてください。
トップバナーがモバイルから読み込まれないようにコードが追加されました。また、例では2つのバナーの中からランダムに表示されるようにしました。必要に応じて、3つ以上のバナーがランダムに表示されるようにコードを適切に変更できます。
最後に、
以上、簡単なHTMLとJavaScriptで WordPressにランダムなバナーを実装する方法を見てみました。 GeneratePress テーマを例として説明しましたが、原理を理解すれば他のテーマにも自由に応用が可能です。
GeneratePress テーマは速い速度のため、多くのブログ、特に収益性の高いブログで使用されています。このブログには現在、GPテーマがインストールされています。ブログを運営する場合や、速度が重要なサイトを運営する場合 GeneratePress テーマはまともな選択です。
コメントを残す