ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2023年7月17日| | 2のコメント

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

Sticklr WP plugin

[この記事は、2016年に作成されたが、最新の情報をもとに再構築されて再発行されました。 ]

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)に追加するようにします。

上記のコードでは、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 끝 */

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

サイドバーの固定

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

    応答
    • こんにちは? その質問は、実際には基本的なHTMLに対応することです。 次のw3schoolsドキュメントのHTML Bookmarks with ID and Linksの部分を参照してください。

      https://www.w3schools.com/html/html_id.asp

      次の記事の記事も参照してください。

      https://mainia.tistory.com/3826

      WordPressに適用するには...

      1.チャイルドテーマを作って
      2. header.phpファイルをチャイルドテーマフォルダにコピーし、
      3. Topボタンを押したときに移動する場所にid = "head"などのCSS IDを追加します。
      4. 次に、ボタンリンクに a href="#head" を追加します。

      CSS IDは一意の値でなければなりません。 WordPressで基本的なCSSを適用する方法については、次の記事を参照してください。 CSSについて少し知っておくと、カスタマイズしたい場合は作業がはるかに簡単になります。 CSSは学ぶのに時間がかかりませんし、難しいこともありません。

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%EC%97%90-css%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EA%B8%B0%EC%B4%88/

      応答