WordPress個別サポート

Standard Widget Extensionsプラグインを使うと、画面スクロールに合わせてサイドバーを動かすことができます。つまり、長い記事やアーカイブページで下までスクロールしても、常に同じサイドバーが表示されます。サイドバーが固定されると言った方がわかりやすいでしょうか。

プラグインをインストールして有効化し、「設定」‐「Standard WE」メニューから各種設定をすることができます。

コンテンツ、サイドバー、ウィジェットのidを指定する必要がありますが、Twenty Twelve、Twenty Eleven用に設定されているので、そのテーマを使う場合は、ひとまず何もしなくても機能します。

Standard Widget Extensionsの設定画面

Standard Widget Extensionsの設定画面

メインカラムの「primary」、サイドバーの「secondary」は、Twenty TwelveやTwenty ElevenのHTML構造に合わせてあります。メインカラムの中をサイドバーがスクロールするイメージです。Twenty Twelveでは、HTML構造は次のようになっています。「id="primary"」で定義されているコンテンツ領域に合わせて「id="secondary"」のサイドバーが動いていくということです。

<html class="ie ie7" lang="ja">
<body class="home blog">
<div id="page" class="hfeed site">
    <div id="main" class="wrapper">

    <div id="primary" class="site-content">

        <div id="content" role="main">

				<div class="entry-content">
				</div><!-- .entry-content -->

		</div><!-- #content -->

	</div><!-- #primary -->

    <div id="secondary"  … >
    </div><!-- #secondary -->

    </div><!-- #main .wrapper -->

</div><!-- #page -->

</body>
</html>
画面をスクロールしてもサイドバーは消えない

画面をスクロールしてもサイドバーは消えない

「Accordion Widgets」を「有効」(デフォルト)にすると、メニューが折りたたみ形式になります。

サイドバーが折りたたみ形式に

サイドバーが折りたたみ形式に

一時的に無効にしたい場合は、「Sticky Sidebar 機能を有効にする」で「無効」を選択します。

Sticky Sidebar 機能を無効にする

Sticky Sidebar 機能を無効にする

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

部分的にスクロールさせる

ウィジェットに追加した広告など、一部のみをスクロールしたい場合、ウィジェットの定義と連携させます。

まず、「設定」‐「Standard WE」メニューでサイドバーのIDに任意の名前を入力しておきます。

スクロールに合わせる領域の名前を設定

スクロールに合わせる領域の名前を設定

次に、「外観」‐「ウィジェット」メニューでウィジェットにテキストを追加し、任意の広告を追加します。その領域のIDをサイドバーのID(ここでは「widget_ad」)に設定します。

スクロールに連動させる広告を作成

スクロールに連動させる広告を作成

これにより、広告のみがスクロールに連動するようになります。

一部のみがスクロールに連動する

一部のみがスクロールに連動する

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート