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

Last Updated:2024年01月30日| | 2のコメント

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

Sticklr WP plugin

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

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を選択します。

GeneratePress テーマフッターセクションにコードを追加する

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というプラグインもあります。

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

参照


2のコメント

コメント

  1. こんにちは、教えてくれた方法で使用して感謝して使用しています。 私は初心者の開発者でもなく、仕事にホームページの制作日を加えてみると知識が全くない状態だと理解が少し難しいのですが、今教えてくれた方法に使う場合、トップボタンをクリックすると上段にスクロール移動になりませんね。

    応答
割引ニュース
アストラテーマで最大40%割引!
期間限定
You This Coupon Code in Checkout
Click the code to Copy