WordPressのスマホ表示で、画面下に閉じるボタン付きの案内バナーを出す方法です。
投稿IDを指定して表示するページを限定し、バナーの高さに合わせてページ末尾の余白を確保します。
文字が折り返された場合も、固定の60pxなどを想定せず、表示した高さから余白を計算します。
この例はテキストの案内バナーです。
SWELLのブログパーツを使う表示はSWELLの固定バナーの記事、テーマ標準の固定フッターメニューはSWELL側の設定で作ります。
同じ位置へ複数を重ねないよう、どの方法を使うか先に決めてください。
動く見本と表示条件
このページを幅768px以下で開くと、画面下に「WordPressで作りたいものを探す」という案内が出ます。
「閉じる」を押すと、そのページを表示している間は非表示のままです。
再読み込みすると再表示されます。
PC幅では表示しません。
この実装が確保する余白はページ末尾です。
固定バナーは画面上のコンテンツに重なるため、他の固定メニュー・チャット・広告・ページ上部へ戻るボタンとの重なりは、導入先で別途確認してください。
この見本を追加しても、既存広告の設定は変わりません。
検証では、390px幅で閉じるボタンをEnterとSpaceで操作し、閉じたあとに幅を変えても再表示されず、再読み込みすると表示が戻ることを確認しました。
表示の境界は768pxと769pxで確認し、非表示時の末尾余白は0へ戻りました。
実機のソフトウェアキーボードや端末のセーフエリアは別途確認してください。
追加前の準備とコードを貼る場所
PHPを使うため、変更前のコードを保存し、まず検証用のページで試します。
子テーマのfunctions.php、またはCode SnippetsのPHPスニペットへ追加します。
親テーマのファイルは直接編集しません。
コードはどちらか一方に1回だけ追加してください。
旧版のmotoki_footer_bannerを使っている場合は、旧コードを残したまま追加せず、控えを保存してから置き換えてください。
Code SnippetsのPHP欄ではPHPの開始タグは不要です。
functions.phpへ追記する場合も、既にPHPの開始タグがある場所へ重ねて書かないでください。
編集ミスに備え、管理画面に入れなくなった場合にファイルやスニペットを元に戻せる手段を確認しておきます。
閉じるボタン付き固定バナーのコード
次のコード内の22671を対象の投稿IDへ、リンク先と表示文を自分の案内へ置き換えます。
記事の編集画面を開いたURLのpost=に続く数値が投稿IDです。
add_action('wp_footer', function () {
// 22671を表示したい投稿IDへ変更してください。
if (!is_single(22671)) {
return;
}
echo <<<'WAZA_BANNER'
<div id="waza-banner-space" aria-hidden="true"></div>
<aside id="waza-fixed-banner" aria-label="サイトのご案内" hidden>
<div class="waza-fixed-banner-inner">
<a href="https://motoki-design.co.jp/wordpress/swell-customize-matome/">WordPressで作りたいものを探す</a>
<button type="button" class="waza-fixed-banner-close" aria-label="案内バナーを閉じる">閉じる</button>
</div>
</aside>
<style>
#waza-fixed-banner[hidden] { display: none !important; }
#waza-fixed-banner {
position: fixed;
inset: auto 0 0;
z-index: 100;
box-sizing: border-box;
padding: .5rem max(.75rem, env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
background: #fff;
color: #222;
border-top: 1px solid #888;
box-shadow: 0 -2px 8px #0002;
}
#waza-fixed-banner .waza-fixed-banner-inner {
display: flex;
align-items: center;
gap: .75rem;
max-width: 48rem;
margin: 0 auto;
}
#waza-fixed-banner a {
flex: 1;
min-width: 0;
color: #222;
text-decoration: underline;
line-height: 1.5;
overflow-wrap: anywhere;
}
#waza-fixed-banner button {
flex: 0 0 auto;
min-width: 60px;
min-height: 44px;
padding: .5em;
border: 1px solid #555;
border-radius: 4px;
background: #fff;
color: #222;
font: inherit;
cursor: pointer;
}
#waza-fixed-banner :focus-visible { outline: 3px solid #245bba; outline-offset: 2px; }
#waza-banner-space { height: 0; }
</style>
<script>
(function () {
function initBanner() {
const banner = document.getElementById('waza-fixed-banner');
const space = document.getElementById('waza-banner-space');
if (!banner || !space || banner.dataset.wazaReady) return;
const close = banner.querySelector('.waza-fixed-banner-close');
if (!close) return;
banner.dataset.wazaReady = '1';
const media = window.matchMedia('(max-width: 768px)');
let dismissed = false;
function reserveSpace() {
space.style.height = banner.hidden ? '0px' : Math.ceil(banner.getBoundingClientRect().height) + 'px';
}
function update() {
banner.hidden = !media.matches || dismissed;
reserveSpace();
}
close.addEventListener('click', function () {
dismissed = true;
update();
});
media.addEventListener('change', update);
window.addEventListener('resize', reserveSpace);
if ('ResizeObserver' in window) new ResizeObserver(reserveSpace).observe(banner);
update();
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initBanner, { once: true });
else initBanner();
})();
</script>
WAZA_BANNER;
});固定ページ・表示幅・再表示の調整
固定ページだけに表示する場合は、冒頭のis_single(22671)を、対象IDを使ったis_page(対象ID)へ置き換えます。
すべてのページに出すために条件を外す前に、フォームや決済画面でも邪魔にならないか確認してください。
表示幅はJavaScript内の(max-width: 768px)で決めています。
この例では閉じた状態を保存しないため、対象投稿を再読み込みすると再表示されます。
別ページへ通常のページ読み込みで移動した場合も、投稿IDと画面幅の両方が表示条件に合うときだけ表示されます。
Pjaxなど、ページ全体を再読み込みしない遷移は検証していません。
一定期間表示しない仕様が必要な場合は、保存期間と解除方法を別途決めて実装します。
高さはResizeObserverと画面サイズ変更時に再計算します。
バナーが非表示になったときは、確保した末尾余白も0へ戻します。
JavaScriptが動かなければバナーは表示されません。
公開前に確認すること
スマホ幅で表示されること、PC幅で非表示になること、閉じるボタンをクリック・Enter・Spaceで操作できることを確認します。
長い表示文で折り返した場合は、ページの最下部までスクロールし、最後のリンクやボタンまで操作できるか確かめてください。
フォーム入力時のソフトウェアキーボード、画面を横向きにした場合、端末下部の操作領域との重なりも確認します。
コードにはsafe-areaの余白を入れていますが、すべての端末で確認できたことを意味するものではありません。
表示されない場合と元に戻す方法
表示されない場合は、投稿ID・投稿と固定ページの区別・画面幅・スニペットの有効化・キャッシュの順に確認します。
同じページで既に閉じている場合は、再読み込みして確認してください。
テーマがwp_footerを出力しない構成では、このコードも出力されません。
戻すときは追加したPHPの範囲を削除するか、Code Snippetsで該当スニペットを無効化します。
このコードから出力するHTML・CSS・JavaScriptと余白がまとめてなくなります。
バナー以外の表示も探す場合は、目的別のカスタマイズ一覧から選べます。
よくある質問：WordPressでスマホに固定バナーを表示するとき
この方法では、スマホでどんなバナーが表示されますか？
記事では、WordPressのスマホ表示で、画面下に閉じるボタン付きの案内バナーを出します。投稿IDを指定して表示するページを限定し、バナーの高さに合わせてページ末尾の余白を確保します。文字が折り返された場合も、固定の高さを想定せず、表示した高さから余白を計算します。
PCでも表示されますか？
表示されません。記事では、PC幅では表示しません。この見本は幅768px以下で表示され、表示の境界は768pxと769pxで確認しています。
「閉じる」を押すと、どうなりますか？
記事では、そのページを表示している間は非表示のままで、再読み込みすると再表示されます。この例では閉じた状態を保存しません。一定期間表示しない仕様が必要な場合は、保存期間と解除方法を別途決めて実装します。
SWELLの固定バナーや固定フッターメニューとは、同じものですか？
別の方法です。記事では、この例はテキストの案内バナーです。SWELLのブログパーツを使う表示はSWELLの固定バナーの記事、テーマ標準の固定フッターメニューはSWELL側の設定で作ります。同じ位置へ複数を重ねないよう、どの方法を使うか先に決めます。
表示する投稿は、どう指定しますか？
記事では、コード内のIDを対象の投稿IDへ、リンク先と表示文を自分の案内へ置き換えます。記事の編集画面を開いたURLに続く数値が投稿IDです。固定ページだけに表示する場合は、冒頭の条件を、対象IDを使ったものへ置き換えます。
ほかの固定表示と、重なることはありますか？
あります。記事では、固定バナーは画面上のコンテンツに重なるため、他の固定メニュー・チャット・広告・ページ上部へ戻るボタンとの重なりは、導入先で別途確認します。フォーム入力時のソフトウェアキーボード、画面を横向きにした場合、端末下部の操作領域との重なりも確認します。
表示されないときは、何を確認しますか？
記事では、投稿ID・投稿と固定ページの区別・画面幅・スニペットの有効化・キャッシュの順に確認します。同じページで既に閉じている場合は、再読み込みして確認します。テーマがwp_footerを出力しない構成では、このコードも出力されません。JavaScriptが動かなければバナーは表示されません。
どこまで検証されていますか？
記事では、390px幅で閉じるボタンをEnterとSpaceで操作し、閉じたあとに幅を変えても再表示されず、再読み込みすると表示が戻ることを確認しています。一方、実機のソフトウェアキーボードや端末のセーフエリア、Pjaxなど、ページ全体を再読み込みしない遷移は未検証です。戻すときは、追加したPHPの範囲を削除するか、Code Snippetsで該当スニペットを無効化します。
