スクロールしてもついてくるサイドバーのWordPressプラグイン「Q2W3 Fixed Widget」

スクロールしてもついてくる(追尾する)サイドバーのWordPressプラグイン「Q2W3 Fixed Widget」を解説しています。

プラグインのインストール

Q2W3 Fixed Widgetをインストールするには、WordPressをインストールしたウェブサイトのダッシュボードにログインします。

ログイン画面

WordPressをインストールしたウェブサイトにアクセスすると、上のようなログイン画面が表示されます。

例:http://○○○○.○○○/wp-login.php

WordPressをインストールする際に設定したユーザー名とパスワードを入力します。入力後、「ログイン」ボタンをクリックします。

プラグイン

クリックすると、ダッシュボードにログインできます。右メニューから、「プラグイン」ボタンをクリックします。

新規追加

クリックすると、プルダウンメニューが表示されます。こちらで、「新規追加」をクリックします。クリックすると、「プラグインを追加」する画面になります。

右上の検索窓に「Q2W3 Fixed Widget」と入力します。入力後は、キーボードの「ENTER」を押します。

検索結果

「ENTER」を押すと、プラグイン検索で「Q2W3 Fixed Widget」のプラグインが表示されます。このプラグインを「いますぐインストール」ボタンをクリックします。

インストール中

クリックすると、プラグインのインストールが開始されます。その後、インストールが完了します。この画面で「プラグインを有効化」という表示をクリックします。

有効化

クリックすると、プラグインが有効化されます。

有効化の確認

プラグインの「インストール済みプラグイン」を確認してみると、確かに「Q2W3 Fixed Widget」が有効化されています。

確認後、右メニューから「外観」ボタンをクリックします。

q2w3-fixed-widget10

クリックすると、プルダウンメニューが表示されます。このメニューから「Fixed Widget Options」の項目をクリックします。

Fixed Widget Options

クリックすると、「Fixed Widget Options」の設定画面になります。

・General Options(一般のオプション)

Margin Top:スクロール時についてくるウィジェットのマージントップを入力します。初期設定では10pxとなっています。

Margin Bottom:スクロール時についてくるウィジェットのマージンボトムを入力します。初期設定では0pxとなっています。

Refresh interval:スクロール時についてくるウィジェットの更新する間隔を設定します。初期設定では1500milliseconds / Set 0 to disableとなっています。javascriptといったプログラミングを用いているのであれば、変更が必要になってくるかもしれません。動的なコンテンツの場合。

Screen Max Width:ウェブブラウザの幅を入力します。入力したウェブブラウザの幅が小さいと、ウィジェットがスクロール時についてこない恐れがあります。初期設定では0pxとなっています。

・Compatibility(互換性)

Auto fix widget id:自動でウィジェットIDを調整するかどうかのチェックを設定します。初期設定ではチェック済みになっています。

Enable plugin for logged in users only:WordPressにログインしたユーザーのみにプラグインうを有効するかどうかを設定します。

Inherit widget width from the parent:レスポンシブデザインの場合、ウィジェットの幅を継承するかどうか設定します。レスポンシブデザインでもチェックを外します。

Use jQuery(window).load() hook: jQueryを使用した場合などに問題が発生した場合に使用します。

widget_display_callback hook priority:コールバックとフックの優先度を指定をします。初期設定では30となっています。

・Custom IDs(カスタムのID)

Custom HTML IDs(each one on a new line):カスタムIDの設定します。空白でも構いません。

設定が完了した後は、

設定を保存する

「変更を保存」ボタンをクリックします。初期設定でも、スクロールしてもついてくるサイドバーにできます。

保存しました。

クリックすると、「設定を保存しました。」と表示されます。

ウィジェット

設定を保存した後は、右メニューから「外観」の「ウィジェット」ボタンをクリックします。クリックすると、「ウィジェット」画面になります。

テキスト

「ウィジェット」画面から、今回はテストで、「テキスト」をサイドバーに追加します。テキストのウィジェットには、「Fixed widget」という項目があります。こちらにチェックを入れます。

テキストのウィジェット

チェックを入れた後は、タイトルの下にある入力フォームがあります。こちらにテキストなどを入力します。タイトルは入力しなくても構いません。

入力後は「保存」ボタンをクリックします。

広告表示

「ウィジェット」のテキスト部分を変更することで、Google AdSenseや楽天・Amazonなどのアフィリエイト広告も表示できます。

FTP接続で、プラグインを有効化する

FTP接続で、プラグインを有効化する場合は、Q2W3 Fixed Widget (Sticky Widget)(https://wordpress.org/plugins/q2w3-fixed-widget/)にアクセスします。

プラグインページ

アクセスすると、WordPressのプラグインページに移動します。こちらで「Download Version○○○」といったボタンをクリックします。

クリックすると、ローカル上にzip形式のファイルがダウンロードされます。

zip形式ファイル

 

ダウンロードしたファイルを解凍します。解凍するには、Lhaplusといったzipなどの圧縮形式に対応した解凍ソフトを事前にインストールする必要があります。

解凍したファイル

 

解凍ソフトを使い、ファイルを解凍します。

FileZilla

(今回は、無料FTPクライアントソフトの「FileZilla」を使います。環境はWindows8です。)

解凍したファイルは、プラグインを有効化したいウェブサイトのサーバーにアップロードするために、FTPクライアントソフトを起動させます。FTPクライアントソフトは無料のもので対応できます。

サイトマネージャ

起動させた後は、右上にある「ファイル」からプルダウンメニューで「サイトマネージャ」を選択します。選択すると、「サイトマネージャ」が表示されます。

新しいサイトで、プラグインを有効化したいウェブサイトのサーバーのFTP情報(ホスト・ユーザ・パスワード等)を入力します。

接続

入力し設定が完了したら、「接続」ボタンをクリックします。

アップロードする場所

クリックすると、サーバーに接続できます。WordPressにプラグインをアップロードしますので、「wp-content」というフォルダをクリックします。

plugins

 

クリックすると、「wp-content」フォルダの中に「plugins」というフォルダがあります。この中に、ダウンロードした「Q2W3 Fixed Widget」のフォルダをアップロードします。

アップロード

アップロードする際は、「q2w3-fixed-widget.(バージョン名)」というフォルダの中にある「q2w3-fixed-widget」のフォルダをアップロードしなければなりません。

アップロード完了

 

フォルダをドラッグアンドドロップで、サーバーにアップロードできました。

ログイン画面

アップロード完了後、WordPressのダッシュボードにログインします。

プラグイン

 

ダッシュボードから、右メニューで「プラグイン」ボタンをクリックします。

q2w3-fixed-widget有効化

クリックすると、プルダウンメニューが表示されます。こちらで「インストール済みプラグイン」をクリックします。すると、「プラグイン」でインストールされたものが表示されます。

この中に、FTP接続でアップロードした「Q2W3 Fixed Widget」があります。後は、「有効化」の表示をクリックすれば、有効化されます。