CSSを使用して簡単に下部にDIV要素を固定することができます。
上の図では、 WordPressのfooter.phpファイルの一番下に div要素を中央下に配置した例を示しています。 そのためには、次のようなコードをheader.phpやfooter.phpファイルなどの適当な場所に追加します。 必ずチャイルドテーマを作成作業してください。
<div id="fixedfooter"> <div class="inner">Sticky Bottom DIV element</div> </div>
そして次のようなCSSコードを追加します。
#fixedfooter {
position:fixed;
left:0px;
bottom:0px;
width: 100%;
text-align: center;
}
.inner {
background:#1E299D;
color: white;
width: 200px;
padding: 15px;
display: inline-block;
}
WordPressでテーマファイルを変更せずにテーマ関数ファイルにコードを追加したい場合は、次のようなコードをテーマ関数ファイルに追加することができます。 （この場合も、子テーマを作って作業してください。）
// HTML to wp_footer()에 추가
function child_theme_footer_script() { ?>
<!-- HTML 코드 추가하기 -->
<?php }
add_action( 'wp_footer', 'child_theme_footer_script' );
もしモバイル機器の下部に固定されたバナーを表示したい場合CSSメディアクエリ（media query）を使用して、モバイル機器でのみ表示されるようにして、PCで非表示にすることができます。 次の記事を参照してみてください：
WordPressでのCSSコードを追加したい場合 この記事を参考にして、ユーザーCSSコードを追加することができます。 （テーマファイル内のスタイルシートファイルを変更せずにチャイルドテーマを作成し、CSSを追加したり、 WordPress 伝言板で追加してください。）
コメントを残す