WordPressで "Sticky "フローティングフッターバーを作成する方法

WordPressでスティッキーなフローティング・フッターバーを作成する方法をお探しですか?

スティッキーなフローティングフッターバーは、ユーザーがページをスクロールしても、常にウェブサイトの下部に表示されます。このようにして、オファーやソーシャルメディアアカウントを宣伝し、ユーザーを長く滞在させ、コンバージョンを増やすために使用することができます。次に、このスティッキーなフローティングフッターバーをWordPressで簡単に作成する方法をステップバイステップでご紹介します。

画像[1]-WordPressで "sticky "フローティングフッターバーを作成する方法 - Photon Flux|WordPress修理のプロフェッショナル、ワールドワイド、迅速な対応!

WordPressのフローティング・フッターバーとは?

粘着性のあるフローティングフッターバーを使用すると、重要なコンテンツやニュースをユーザーに目立つように表示できます。

画像[2]-WordPressで "sticky "フローティングフッターバーを作成する方法 - Photon Flux|WordPress修理のプロフェッショナル、ワールドワイド、迅速な対応!

フローティングフッターバーを使うことができる:

  • 他のブログ記事へのクリックを増やす。
  • リードを生成し、メールリストを構築します。
  • 特別クーポンや割引キャンペーン、セールに注目。
  • ソーシャルメディアアカウントを宣伝する。
  • ブランドの認知度を高める。
  • WordPressサイトの重要なリソースへのアクセスを提供します。

それでは、WordPressでスティッキーなフローティングフッターバーを簡単に作成する方法を見ていきましょう。これには主に2つの方法があります:

方法1:OptinMonsterを使用して、粘着性のあるフローティングフッターバーを作成する(推奨)

スティッキーフローティングフッターバーは、OptinMonsterを使用して簡単に作成することができます。これは、あなたのウェブサイトの訪問者を非常に簡単に購読者に変換することができる市場で最高のリード生成およびコンバージョン最適化ツールです。

OptinMonsterには、ドラッグ&ドロップビルダーとプリメイドテンプレートが付属しており、コードを使用せずにフローティングフッターバー、スライドインポップアップ、バナーを作成することができます。

この方法は、OptinMonsterが非常に使いやすく、無料プラグインの方法よりも多くのカスタマイズオプションを提供しているため、推奨されます。

ステップ1:ウェブサイトにOptinMonsterをインストールする

まず最初に、以下のページで「今すぐOptinMonsterを入手する」ボタンをクリックする必要があります。オプチンモンスターウェブサイトから登録

画像[3] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

次に、あなたのウェブサイトに無料のOptinMonster Connectorプラグインをインストールして有効化します。有効化すると、OptinMonsterのセットアップウィザードが画面に表示されますので、「既存のアカウントを接続する」ボタンをクリックしてください。これで、WordPressウェブサイトがOptinMonsterアカウントに接続されます。

画像[4] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

そうすると、画面に新しいウィンドウが開きます。

ここで、"Connect to WordPress "ボタンをクリックして続行する。

画像[5] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

ステップ2:フローティングフッターバーの作成とカスタマイズ

OptinMonsterがあなたのウェブサイトに接続されたので、次はスティッキーなフローティングフッターバーを作成しましょう。WordPressの管理サイドバーからのアクセスが必要です。OptinMonster " テンプレートページで、アクティビティタイプとして「フローティングバー」を選択します。

これを行うと、フローティング・バーにあるすべてのテンプレートが画面に読み込まれます。ここから、使用したいテンプレートの「テンプレートを使用」ボタンをクリックします。

画像[6] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

キャンペーンを作成」画面が表示され、作成するフローティングフッターバーの名前を追加できます。この名前はウェブサイトの訪問者には表示されませんので、お好きな名前を付けてください。

その後、「ビルド開始」ボタンをクリックします。

画像[7] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

OptinMonsterのドラッグアンドドロップビルダーが画面に表示され、フローティングフッターバーのカスタマイズを開始することができます。ここでは、右側にフローティングバーのプレビュー、左側の列にブロックが表示されます。

フローティングフッターバーで割引キャンペーンを宣伝する場合は、カウントダウンタイマーブロックを使いましょう。これにより、ユーザーに切迫感を与え、行動を促すことができます。CTA、動画、ソーシャルメディアブロックもフッターバーに追加できます。

画像[8] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

フッターバーのテキストをクリックして編集することもできます。左のカラムにブロックの設定が表示されますので、お好みに合わせて調整してください。

例えば、テンプレート内の割引オファーを変更したい場合、ボタンテキストを変更することができます。その後、「URLにリダイレクト」オプションを選択し、ボタンをクリックした後にユーザーを誘導したいページへのリンクを追加することができます。

画像[9] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

ステップ3:フローティングフッターバーの表示ルールを設定する

フッターバーのカスタマイズに満足したら、ページ上部の「表示ルール」タブをクリックするだけです。

ここでは、フッターバーを表示する条件を設定することができます。フローティングフッターを常に表示させたい場合は、左のドロップダウンメニューから「滞留時間」を選択してください。

次に、右側のドロップダウンメニューから「今すぐ」を選択します。こうすることで、フッターバーが常にページに表示され、ユーザーがいつでも簡単に閲覧できるようになります。

画像[10] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

特定のページにのみフローティング・フッターバーを表示させたい場合は、右側のドロップダウンメニューから「ページ・ポジショニング」オプションを選択する必要があります。

次に、真ん中のドロップダウンメニューから「完全一致」を選択し、フッターバーを表示させたいページのURLを入力します。この設定により、フローティング・フッターバーは指定したページにのみ表示されます。

画像[11] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

さらに、"Exit Intent "オプションを選択することで、ユーザーがサイトを離れようとしたときに、自動的に粘着性のあるフローティングフッターが表示されます。この機能の感度を設定し、フッターを表示するデバイスを選択できます。サイトからの離脱ユーザーを減らしたい場合に非常に便利です。

デスクトップデバイスからの訪問者にのみフローティングフッターを表示させたい場合は、「訪問者のデバイス」オプションを選択できます。これにより、訪問者が使用しているデバイスの種類に応じて、フッターの表示方法を柔軟に調整することができます。

画像[12] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

左の列から「When」オプションを選択することで、日付、時間、スクロール距離に基づいて表示ルールを設定することもできる。

ステップ4:フローティングフッターバーの発行

フッターバーの表示条件を定義したら、上から「Publishing」タブに切り替えます。

ここから、Publishボタンをクリックするだけです。

画像[13] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

その後、変更を有効にするためにSaveをクリックすることを忘れないでください。

方法2:無料プラグインでスティッキーフローティングフッターバーを作成する

粘着性のあるフローティング・フッターバーを無料で作成する方法をお探しならFirebox ポップアップビルダーこのプラグインはFirebox Popup Builderプラグインをインストールし、有効化します。

有効化されると、WordPressのダッシュボードからアクセスできます。Firebox " マーケティング・キャンペーンページで「+新規キャンペーン」ボタンをクリックします。

画像[14] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

クリックすると、Fireboxアクティビティライブラリが表示されます。このライブラリには、あらかじめデザインされたスティッキーフローティングバーのテンプレートが多数含まれており、その中から選択することができます。

お気に入りのフローティング・フッター・テンプレートが見つかったら、その下にある「挿入」リンクをクリックするだけです。ただし、タイトルバーテンプレートを選択した場合、その位置は変更できない場合がありますのでご注意ください。そのため、選択したテンプレートがフッターバーに適していることを確認してください。

画像[15] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

これでブロック・エディターが画面に開き、フローティング・バーに名前を付け始めることができる。

フッターのテキストを編集するには、それをクリックするだけです。何か新しいものを追加したい場合は、「+」ボタンをクリックするとブロックメニューが表示されます。メニューでは、画像、タイトル、段落、動画、引用、リストを追加できます。

例えば、ソーシャルメディアのアカウントを追加したい場合は、「ソーシャルアイコン」ブロックを選択します。そして、ブロックパネルにソーシャルメディアのアカウントとリンクを入力するだけです。

画像[16] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

また、ブロックツールバーのリンクアイコンをクリックすることで、ボタンブロックのテキストを変更したり、ユーザーを誘導するページへのリンクを追加したりすることも可能です。

その後、お好きなURLを入力して「Enter」キーを押してください。

画像[17] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

次に、"Firebox Settings "セクションまでスクロールダウンします。

ここでは、フローティングフッターバーの背景色、テキスト色、配置、サイズ、パディング、マージンを変更できます。

画像[18] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

左の列からBehaviourタブに切り替え、フロートトリガーとしてPage Loadを選択します。

次に、Delayスライダーを使用して、フローティングバーの遅延時間を選択します。例えば、スライダーを15秒にドラッグすると、ユーザーがサイトを訪れてから15秒後にフローティングフッターバーが表示されます。

粘着性のあるフローティングフッターバーをすぐに表示させたい場合は、スライダーを0のままにしておくことができます。

画像[19] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

次に、その他の設定を変更しないか、好みに合わせて設定することができる。

完了したら、上部にある "Publish "ボタンをクリックするのをお忘れなく。

画像[20] - How to create "sticky" floating footer bar in WordPress - Photon Flux|プロのWordPress修理サービス!

あなたが今訪問しているWordPressサイトでは、スティッキーなフローティング・フッターバーが表示されます。


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事はハリーが執筆しました。
終わり
好きなら応援してください。
クドス0 分かち合う
おすすめ
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし