WordPressで、画面に沿って下に下がる要素（バナー/メニュー/ウィジェットなど）を作成し

ページ領域の外側にバナーやメニューなどを固定して、ユーザーがマウスをスクロールしても、画面に沿って下に下がる効果を実装しようとする場合：

非反応型サイトでの要素の固定する

非反応型（Non-responsive）サイトでは、以下のようなCSSコードで比較的容易にdiv要素を固定することができます。 たとえば、ページの幅が1,000pxである場合、次のようなコードを使用することができます。

position: fixed;
top: 0;
left: 50%;
margin-left: 505px;
margin-top: 225px; 
z-index: 100;

ここでmargin-topの値は、その要素の垂直方向の位置に対応し、margin-leftはページ境界とその要素間の間隔に対応します。 ページの幅が1,000pxの場合は、ページの中央からの要素の左マージンがmargin-leftとなります。 したがって、上記のコードは、バナーなどの要素がページの外に5px離れた場所に配置されます。

反応型サイトでの要素の固定する

WordPressの場合、反応型（Responsive）である場合があります。 つまり、画面の解像度に応じてページ/サイドバーの幅が変わるようになります。 ページの幅が固定されていないため、上記のCSSコードを使用することができません。 上記のコードで translateXを追加すると、サイドバーの横に目的の要素を固定することができます。

position: fixed;
top: 5px;
left: 50%;
transform: translateX(1000%); 
margin-left: 50px;

上記のコードでは、 transform：translateX（1000％）;が新たに追加されました。 そしてmargin-leftの値は、テーマに応じて適宜調整して、要素の水平位置を決定します。 この値は、テーマごとに異なる可能性がありますので、複数の値をテストして、使用中の WordPress テーマに最適な値を見つけるようにします。 この方法を使用すると、別のプラグインをインストールせずにバナー、メニュー、画像、テキストなど目的の要素をテーマ外部に固定することができます。 テストでは、コードを使用して、サイドバーの横にヘルプ（？）記号を追加したところです：

マウスをスクロールしても、このヘルプのシンボルは、サイドバーの横に固定されて、画面に沿って一緒に降りて行くされます。

応用

上記の方法を使用すると、バナー、画像、メニュー、ウィジェットなどを別のプラグインなしで固定が可能です。 div要素のコードをheaderの適切な場所に追加して、上記のコードを適切に変形して、スタイルシートファイルに追加するようにします。 CSSコードを WordPress テーマのスタイルシートファイルに追加する方法は、 ここを参照してください。

バナーや画像は、単純なHtmlコードで実装が可能です。 その後、ウィジェットやメニューはどのように追加すると、いいですか？ ウィジェット領域を新たに作って、ヘッダーの適切な場所に追加した後、上記のCSSコードを適用する方法でメニューやウィジェットをテーマ外部領域に固定することができます。 ウィジェット領域を追加する方法は、下記を参考にして適切なウィジェット領域を追加して、新たに追加したウィジェット領域コードをheaderファイルの適切な場所に挿入します。

예:
<div class="mycustom_child">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('mycustom_outside_widget') ) :
endif; ?>
</div>

その後、伝言板で ルックス>ウィジェットに新たに追加されたウィジェット領域が表示され、そのウィジェットエリアにウィジェットを追加するようにします。 メニューを追加する場合には、 ルックス>メニューでメニューを作成し、「カスタムメニュー」を新しく作成したウィジェット領域に追加し、新しく作成したメニューを指定します。

ウィジェット領域を追加例示

初めて WordPressに接しPHPなどについてよく知らないユーザーの場合、ウィジェット領域を作成し、メニューに追加することが困難な場合があります。 WordPress Codexページの How to Register a Widget Area 部分を参照して使用されている WordPress テーマファイル（functions.php）にウィジェット領域を登録して WordPress Codexページの How to display new Widget Areas 部分に出てくる方法に基づいて登録されたウィジェット領域のPHPコードをテーマファイル（ここでは、header.php）に追加すると、ウィジェット領域がダッシュボードのウィジェットのページに表示されます。

functions.phpに追加するコード

function mycustom_child_widgets_init() {

register_sidebar( array(
'name' => 'New Widget',
'id' => 'mycustom_child_widget',
'before_widget' => '<div>',
'after_widget' => '</div>',
) );
}
add_action( 'widgets_init', 'mycustom_child_widgets_init' );

テーマファイル（例：header.php、index.php、footer.php...）に追加するコード

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('mycustom_child_widget') ) :

endif; ?>