プラグインなし WordPress サイド固定バナーの作成(JSコード復活)

1

WordPress サイトのコンテンツ領域の右または左マージンに固定バナーを表示したい場合があります。このブログでは、テストで右側に少し余白を浮かべ、バナーを固定してみました。簡単なJavaScriptコードでサイド固定バナーを作成できます。

この記事では、別のプラグインなしでJavaScriptコードのみでサイド固定バナーを実装する方法を紹介します。ビューポートが十分に広い場合にのみ自動的に表示され、コンテンツと重ならず、画面幅の小さいタブレットやモバイルデバイスではバナーが表示されません。

プラグインなし WordPress サイド固定バナーの作成(JSコード復活)

プラグインなし WordPress サイド固定バナーを作成する方法

この WordPress ブログでは、右サイドバーウィジェット領域に隣接しています Naver カフェバナーが表示されるようにしました。😄

WordPress 固定サイドバナー

左には目次を、右にはバナーを表示した状態です。右側の画面に基づいてカレンダーを設定したのではなく、サイトのコンテンツ領域に基づいてマージンを適用しました。

WordPress 固定サイドバーバナー

参考までに、Google AdSense 広告をサイドに固定して配置したい場合 オーバーレイ形式 » サイドレール広告を有効にします。 サイドレール広告は、プレースメントとして左右両方、左のみ、または右から選択できます。

구글 AdSense サイドレール広告

クパンパートナーズの場合、スクロール中に広告がついて本文を隠してクリックを誘導するフローティングバナーを2025年2月6日から禁止しています。

クパンパートナーズフローティングバナー禁止

クパスはまた、クパンを訪問する必要があります。最近は「押して確認」などのフレーズを入れたり、ハンドル状のスライドモーションなどを活用してクリックを誘導するカバー型バナーを2026年6月8日から禁止する公告を発表しました。

クパンパートナーズカバー型バナー広告禁止

クパンカバー型バナー（スライドバナー）を使用している場合は、6月7日以前まで削除する必要があります。そうしないと、アカウントが失効し、収益が没収される可能性があります。

WordPressのサイド領域に固定バナーを表示したい場合は、次のコードを利用できます。

(function () {
	var BANNER_WIDTH  = 160;
	var BANNER_HEIGHT = 664;
	var GAP           = 5;
	var CONTENT_WIDTH = 1135;
	var MIN_VIEWPORT  = CONTENT_WIDTH + (BANNER_WIDTH + GAP) * 2;

	function initBanner() {
		if (document.getElementById('afkr-side-banner-r')) return;

		var banner = document.createElement('div');
		banner.id = 'afkr-side-banner-r';
		banner.setAttribute('aria-hidden', 'true');
		banner.style.cssText = [
			'position: fixed',
			'top: 50%',
			'transform: translateY(-50%)',
			'z-index: 9999',
			'line-height: 0',
			'display: none',
		].join(';');

		var link = document.createElement('a');
		link.href   = 'https://example.com/your-link';
		link.target = '_blank';
		link.rel    = 'noopener nofollow';

		var img = document.createElement('img');
		img.alt      = '';
		img.width    = BANNER_WIDTH;
		img.height   = BANNER_HEIGHT;
		img.loading  = 'lazy';
		img.decoding = 'async';
		img.style.cssText = 'display:block;width:' + BANNER_WIDTH + 'px;height:' + BANNER_HEIGHT + 'px;';
		img.src = 'https://example.com/your-banner-image.webp';

		link.appendChild(img);
		banner.appendChild(link);
		document.body.appendChild(banner);

		function calcPosition() {
			var vw = window.innerWidth;
			if (vw < MIN_VIEWPORT) {
				banner.style.display = 'none';
				return;
			}
			banner.style.display = 'block';
			var contentRight = (vw + CONTENT_WIDTH) / 2;
			banner.style.left = (contentRight + GAP) + 'px';
		}

		calcPosition();
		window.addEventListener('resize', calcPosition, { passive: true });
	}

	if (document.readyState === 'complete') {
		initBanner();
	} else {
		window.addEventListener('load', initBanner, { once: true });
	}
})();

コードの上部にある5つの定数がバナーの動作を決定します。

상수ギャラリー意味
BANNER_WIDTH160pxバナー画像の幅
BANNER_HEIGHT664pxバナー画像の高さ
GAP5pxコンテンツ右端とバナーの間隔
CONTENT_WIDTH1135pxコンテンツ領域の最大幅
MIN_VIEWPORT自動計算バナーを表示する最小ビューポート幅（=CONTENT_WIDTH+（BANNER_WIDTH+GAP）×2）

MIN_VIEWPORTは直接入力する値ではありません。コンテンツ幅と両方のバナースペースを合計して自動的に計算されるので、残りの4つの定数だけを修正するだけです。

そして、次のコードで画像URLを実際の画像パスに置き換えます。

img.src = 'https://example.com/your-banner-image.webp';

次のコードをクリックすると、移動するサイトまたはページのURLが変更されます。

link.href   = 'https://example.com/your-link';

コンテンツの幅（CONTENT_WIDTH）と間隔（GAP）の値を適切に変更した後にテストし、必要に応じてバナーが表示されていることを確認します。気に入らない場合は、これらの値を適切に調整して、コンテンツ領域とバナーの間隔を微調整します。

上記のコードはほとんど WordPress テーマで動作すると予想されます。 GeneratePress テーマで正常に動作しますが、他のテーマで動作するかどうかはテストされていません。

コンテンツの幅は、テーマのカスタムまたはテーマオプションで指定できることがよくあります。テーマがこの機能を提供していない場合は、Chrome Developer Toolで幅を確認し、CSSでコンテンツを調整することが可能です。

上記のスクリプトは、WPCodeなどのプラグインを使用してフッタ領域にロードすることができます。 WPCodeを使用する場合와 を追加します。

チャイルドテーマをインストールして有効にした場合は、次のエンキュー関数をチャイルドテーマの関数ファイルに追加できます。

/**
 * 사이드바 배너
 */
 function afkr_enqueue_side_banner() {
	wp_enqueue_script(
		'afkr-side-banner',
		get_stylesheet_directory_uri() . '/js/side-banner.js',
		array(),
		'1.0.0',
		true	// footer에 로드
	);
}
add_action( 'wp_enqueue_scripts', 'afkr_enqueue_side_banner' );

チャイルドテーマ内のjsフォルダの下にside-banner.jsを作成し、上記のJSスクリプトを配置します。

この部分は基本的な内容ですが、 WordPress慣れていない場合は、チャットGPTなどAIに上記のコードを提供する WordPressから読み込むことができるかどうかを尋ねることができます。

コードがうまくいかない場合は、使用しているテーマの名前をAIに伝え、上記のスクリプトを修正してもらうように依頼してください。

スピード、セキュリティ、SEOへの影響

速度の影響

ほとんどなし。 コードは軽量で、設計自体はパフォーマンスを考慮しています。

  • 即時実行関数（IIFE）で包み、グローバル変数を汚染しない
  • window.loadイベントの後に実行されるため、ページの初期レンダリングを妨げない
  • resize イベントに { passive: true } オプションを適用 → スクロール・リサイズ 性能低下なし
  • 画像にloading = "lazy" + decoding = "async"を適用→バナー画像がメインコンテンツの読み込みを妨げない
  • DOM要素を1回だけ生成し、その後は再利用（重複挿入防止ロジックを含む）

セキュリティへの影響

実質的な危険なし。 ただし、以下の2つは確認しておくことをお勧めします。

  • リンクに rel="noopener nofollow" 適用 → 新しいタブで開くとタブナビング攻撃をブロック
  • バナーイメージのURLが外部ドメインの場合は、そのサーバーが信頼できることを確認する必要があります。イメージサーバーがハッキングされた場合は悪意のあるイメージに置き換えられる可能性があります。

SEOの影響

肯定的な要素と注意すべき点が共存します。

アイテム評価이유
コンテンツの読みやすさ✅肯定本文と重ならないため、ユーザーエクスペリエンスが低下しない
モバイル対応✅肯定狭い画面で自動非表示→モバイルUXスコアに影響はありません
aria-hidden処理✅肯定Googleボットが広告バナーをコンテンツとして誤認する可能性を低くする
rel="nofollow"✅肯定広告リンクにリンクジュースが流れない
CLS（累積レイアウト移動）⚠️注意バナーがロード後に挿入されるので、レイアウトの移動スコアに影響可能。画像に width/height 属性が明示されており、あまり問題にはなりませんが、Core Web Vitals スコアを厳密に管理する場合は監視を推奨
position: fixed 広告⚠️注意Googleはコンテンツを隠す固定広告にペナルティを与えることができます。このコードはコンテンツエリアの外側に配置されるため該当しませんが、ビューポート基準で判断するため、バナーサイズが大きすぎる場合は注意が必要です。

バナー効果を監視する

サイトにバナーを表示するときにユーザーがどれだけクリックしているかを追跡したい場合は、さまざまな方法で可能です。簡単な方法で、Pretty Linksなどのプラグインを使用して短縮URLを作成してリンクを設定すると、ユーザーがクリックした回数を監視できます。

このプラグインを使用して短縮URLを作成する場合は、後で短縮URLをクリックしたときにリンクされる宛先URLを変更でき、便利です。

バナーデザイン

AIが登場する前にクモンを通じてバナーデザインを任せたことがあります。しかし、ほとんどのデザインは気に入らなかった。一回のフィードバックで修正しても気に入らなかったので使用しませんでした。

今はチャットGPTやジェミナイプロなどを使ってバナーを専門家のように作れる時代になりました。下のバナーはチャットGPTで作られましたWordPressを使用している人 Naver カフェ紹介バナーです。ただカフェの名前だけを入力しましたが、以下のように知ってよく作ってください。😄

WordPressを使う人 Naver カフェ

スペルエラーがあり、スペルエラーの修正を要求するので、正しく修正してくれますね。昨年だけでも綴りエラーが多く、修正を要求しても正しく修正できませんでしたが、もうハングル認識問題が多く解決されたようです。😄

私はChatGPT Plusを最初から使用し、今月初めに低価格プランのChatGPT GOに変更しました。使用量が多くないとチャットGPT GOも悪くないようです（」チャットGPT GO 10日使用…率直なレビュー"参照）。

👉 「ワープ社」 Naver カフェに加入して WordPress 関連情報を共有し、 WordPress ユーザーとコミュニケーションできます。😄

参照

1のコメント

コメントを残す

  1. 右サイドに余白を与えて固定する方法、本当に便利ですね。おかげで私が作業しているサイトにも適用してもいいと思います。

    返信