WordPress サイドにクイックメニュー/クイックバー/クイックビューを追加する

図のように、マウスをスクロールするときに左サイドまたは右サイドに固定され、一緒にスクロールされるクイックメニュー、クイックビュー、またはクイックバーを追加したい場合があります。 WordPressは、プラグインを使用したり、カスタムHTMLコードを使用して簡単に実装できます。

[この記事はずっと前に書かれていましたが、最新の情報に基づいて書き直され、再発行されました。 ]

WordPress サイドにクイックメニュー/クイックバー、クイックビューを追加する

ソーシャルアイコンなどの簡単な要素は、 この 文で紹介した方法を使用して簡単に固定が可能です。 または、 プラグインを使用せずに、ソーシャル共有ボタンを追加する（Naver、カカオストーリー、カカオトーク）に導入されたコードを応用することもできます。

メニュー項目などをクイックメニューまたはクイックバーの形に固定したい場合 Sticklr WP - Sticky Side Panel WordPress Pluginというプラグインを使用できます。 しかし、このプラグインはずっと前に Codecanyonから削除されました。

似たようなプラグインに WPフローティングメニュープロ, 高度なフローティングコンテンツ, フローティングサイドメニュー などがあります。

HTMLコードでサイドバーに固定されたクイックビュー/クイックメニュー/クイックバーを実装するI

HTMLコードでサイドバーに固定されたクイックメニューやクイックバー容易に実現が可能です。

たとえば、次のようなHTMLコードをfooter.phpファイルのすぐ上に追加すると、右サイドに固定されたクイックビューを表示することができます。

エレメンタープロ（Elementor プロ）を使用する場合 Theme Builderでヘッダーテンプレートまたはフッタテンプレートを作成し、HTMLウィジェットを追加して以下のコードを追加します。

<div>
<div class="quickview2" style="right:0px; bottom:60px; position:fixed; z-index:1000;">
<ul class="quickview3" style="list-style:none; margin:0; padding:0;">
<li style="padding:-10; margin:-10;"><a href="https://example.kakao.com/1234/" 
target="_blink">
<img class="quiview5" src="http://example.co.kr/wp-content/uploads/quick/guick_11.png"></a></li> 
<li style="padding:-10; margin:-10;"><a href="http://example.co.kr/board-2/">
<img class="quiview5" src="http://example.co.kr/wp-content/uploads/quick/guick_21.png"></a></li>
 <li style="padding:0; margin:0;"><a href="http://example.co.kr/map/">
<img class="quiview5" src="http://example.co.kr/wp-content/uploads/quick/guick_31.png"></a></li>
 <li style="padding:0; margin:0;"><a href="tel: 02-123-4567">
<img class="quiview5" src="http://example.co.kr/wp-content/uploads/quick/guick_41.png"></a></li>
</ul>
</div>
</div><!-- end -->

画像のURLとターゲットURLなどは、適切に変更するようにします。 この方法で WordPress サイトのサイドにカカオトークなどのアイコンをクイックビュー形式で追加することができます。

チャイルドテーマを作ってfooter.phpファイルをチャイルドテーマのフォルダにコピーして、上記のコードを置くことができます。 または、footer.phpファイルなどのコードを追加する代わりにwp_footerフックを使用してテーマ関数ファイルに追加することも可能です。 例：

// Add HTML to wp_footer() using a WordPress hook
// 액션을 사용하여 wp_footer()에 HTML 추가하기
function child_theme_footer_script() { ?>
 <!-- HTML 퀵뷰 소스 코드 추가하기 -->
<?php }
add_action( 'wp_footer', 'child_theme_footer_script' );

HTMLクイックビューソースコードを追加する部分を上記のHTMLコードに置き換えます。同様に チャイルドテーマ 内の関数ファイル（functions.php）に追加します。これを行うには、FTP / SFTPに接続できる必要があります。

上記のコードでは、CSSコードをインラインスタイルとして追加されているが、CSSコードを分離して ルックス » カスタマイズ » 追加 CSS セクションに追加することが後日管理がより良さそうです。

HTML / CSSコードでサイドバーに固定されたクイックビューを実装するII

次のコードを適用することもできます。 以下のコードでは、Font Awesomeをロードしてフォントアサムのアイコンを活用しています。 テーマでFont Awesomeをすでにロードしている場合は、最初の行を削除してください。

HTMLコード：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />

<div class="quick_menu">
  
<a href="https://open.kakao.com/o/XXXXXXXX" target="_blank">
<div class="quick_kakao">
<span class="icon icon1"><img src="http://example.co.kr/wp-content/uploads/kakao.png"></span><br>
      <div class="quick_mini_title">카카오ID</div>
              <div class="discription">
        YOUR ID</div>
</div>

    </a>
 
       
    <a href="tel:010-1234-5678">
    <div class="quick_call">
       <i class="fas fa-phone-alt icon_size"></i><br>
      <div class="quick_mini_title">전화상담</div>
        <div class="discription">
        010-1234-5678</div>
    </div>

    </a>
      
        <a href="http://example.com/inquiry">
    <div class="quick_call">
      <i class="far fa-flag"></i><br>
      <div class="quick_mini_title">서비스상담</div>
        <div class="discription">
        바로가기</div>
    </div>
    </a>
      
       
      
       <a href="">
    <div class="quick_time">
      <i class="fas fa-clock"></i><br>
      <div class="quick_mini_title">운영시간</div><div class="discription"> 09:00~18:00</div>
    </div>
    </a>
    
    
        <div class="quick_bottom">
        <a href="#head" class="quick_btn_color">
       
        <i class="fas fa-caret-up"></i>
        <span class="bottom_text">TOP</span></a>
    </div>
    


</div>

CSSコード

/* 퀵뷰 스타일 */
.quick_menu {
    position:fixed;
    top:50%;
    transform: translateY(-50%);
    right: 10px;
    width:110px;
    display:flex;
    flex-direction:column;
    text-align: center;
  
    font-family:Noto Sans Kr,Sans-Serif;
    z-index: 999;
}

.quick_menu a{
  text-decoration:none;
  color:#333333;
}

a:hover{
  text-decoration:none !important;
  color:#1A2B5C !important;
}

.quick_naver, .quick_call, .quick_time {
  padding: 15px 10px 10px 10px;
  border-top: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  background-color: #fff;
}

.quick_kakao{
    padding: 15px 10px 10px 10px;
  border-top: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  border-radius: 10px 10px 0 0;
   background-color: #fff;
}

.quick_bottom {
  border: 1px solid #e0e0e0;
  padding: 10px 0;
  border-radius: 0 0 10px 10px;
  background-color: #1A2B5C;
}


.quick_mini_title {
  font-size:15px;
    font-weight: 600;
    line-height: 110%;
    letter-spacing: -0.5px;
    color: #44444;
    margin-top:10px;
}

.fa, .fas, .far {
font-size:20px;

}

.discription {
    text-align: center;
    font-size:14px;
    line-height: 1.3em;
    color: #5A5A5A;
    margin-top: 5px;
}


.bottom_text, .fa-caret-up {
  font-family:montserrat;
  font-weight:500;
  color: #ffffff;
}

.bottom_text {
    padding:0px 0px 0px 5px;
}

.fas  {
  color: #55555;
}
/* ユーザー 정의 CSS 끝 */

上記のコードを適用するのが難しい場合 ここでサービス（有料）をご依頼することができます。

GeneratePress テーマにHTMLコードとCSSコードを追加する方法

上記で紹介したHTMLコードはデフォルトでフッタ領域にロードされ、CSSはカスタマイズで追加できます。

JS/CSSファイルのロードコード

上記には、次のようなFontAwesomeスタイルシートファイルをロードするコードがあります。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />

GeneratePress テーマ有料版を使用している場合、 ルックス » Elementsに移動し、新しいElementを追加し、 フックを選択します。

コードを入力して フックから wp_headを選択するようにします。

（各種メタタグ、Google AdSense 自動広告スクリプト、Google Analyticsトラッキングコード、Google /Naver サイトの所有権確認コードなどのコードをヘッダーセクションに追加できます。）

表示ルールで、このコードが読み込まれる場所（ページ）を選択します。サイト全体に表示したい場合 サイト全体を指定します。

HTMLコード/JavaScriptコードを追加する

HTMLタグも同様に追加します。 HTMLコードの場合、フッター領域に追加されるように wp_footerを選択します。

JavaScriptコードを追加する必要がある場合でも、通常はフッター領域に追加するだけです。

CSSコードを追加する

カスタムCSSは ルックス » カスタマイズ » 追加 CSS 또는 チャイルドテーマのスタイルシートファイルに追加できます。

上記の方法の代わりに、チャイルドテーマを作成し、header.phpファイルとfooter.phpファイルにコードを直接追加することも、チャイルドテーマ関数ファイルにwp_footer / wp_headフックを使用してコードを追加することもできます。

サイドバーの固定

ちなみにサイドバー固定したい場合 WP Sticky Sidebar – Floating Sidebar On Scroll for Any Theme プラグインを使用することができます。 この無料のプラグインを使用すると、ユーザーが下にスクロールしても常にサイドバーしたがって下がる固定サイドバーを実装することができます。

プラグインを使用せずにCSSを使用して、サイドバーを固定することも可能です。 このブログで使用された GeneratePress テーマは、次のようなCSSコードを使用して、サイドバーに固定できます。

// Make the GeneratePress theme's sidebar sticky
// GeneratePress 테마 사이드바 고정
@media (min-width: 769px) {
    #right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

クイックメニューとは若干性格が異なりますが、 画面の指示に従って、サイドバースクロールされるようサイドバー固定するTheia Sticky Sidebar for WordPressというプラグインもあります。

プラグインを使用せずにサイドバーを固定したい場合は、次の記事を参照してください。

• GeneratePress テーマサイドバーの固定方法
• アストラテーマサイドバーの固定方法

参照

• WordPress メニューとヘッダーを固定する方法 - Sticky Menu & Sticky Headerプラグインを使用する
• WordPress 携帯電話をダイヤルする（通話）ボタンを作成する