it-swarm-ja.com

私のテーマとJqueryの統合

私は私のウェブサイトにスライドサイドウェイjqueryを追加したい、私は次のコードを試してみましたが、動作していないようです

Jqueryコード: -

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

    <script type="text/javascript">
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     
            pathToTabImage: 'images/contact_tab.gif', 
            imageHeight: '122px',                     
            imageWidth: '40px',                       
            tabLocation: 'left',                      
            speed: 300,                               
            action: 'click',                          
            topPos: '200px',                          
            leftPos: '20px',                          
            fixedPosition: false                      
        });

    });

    </script>

部署&CSSコード:

 <style type="text/css">

      .slide-out-div {
          padding: 20px;
          width: 250px;
          background: #ccc;
          border: 1px solid #29216d;
      }      
      </style>
<div class="slide-out-div">
            <a class="handle" href="#">Content</a>
            <h3>Contact me</h3>
            <p>Hello
            </p>
            <p>Welcome to my Blog</p>
        </div>

上記のコードを自分のヘッダーファイルに、そしてフッターファイルのdivコードを試したところ、[DIV]ボックスが外側にスライドしたように見えても内側に移動しなかった場合、jqueryは機能せず私のウェブサイト上の私のグーグルマップはロードされません、私はこれがjqueryの間違った統合のためであることを知っています、しかし私はそれをワードプレスのテーマと統合する方法を知りません

1
Niraj Chauhan

私は主な問題はタブスライドアウトを呼び出すときに競合しないラッパーを使用する必要があることだと思います。ただし、このスクリプトを「The WordPress Way」で機能させるために必要なことをいくつか説明します(つまり、エンキューを使用して適切なフックにフックしてエンキューする)。 。

まず、適切なアクションが必要です。フロントサイドで使用できるカップルがいくつかあります。

私が使用するフックはwp_print_scriptsです、あなたが推測したようにそれがスクリプトを待ち行列に入れるためであるので。

add_action( 'wp_print_scripts', 'enqueue_slideout' );

function enqueue_slideout() {
    wp_enqueue_script( 'jquery-slideout', 'http://tab-slide-out.googlecode.com/svn/trunk/jquery.tabSlideOut.v2.0.js', array('jquery'), '2.0', false );
}

私は行って最新のバージョンの場所を掘り下げました、1.3は最新の2.0より良い年ですので、私はもっと新しいバージョンを指すようにパスを更新しました。

jQueryはエンキュー内の依存関係としてロードされるため、jQueryのために追加のインクルードを行う必要はありません(jQueryスクリプトがGoogleから取得するように再登録されているかどうかにかかわらず)。 - WP人のユーザーが選択した数と同じ).

次に、wp_headをフックして、ドキュメントの準備が整ったときに起動する競合のないラッパーを使用して、スライドアウトタブを設定するスクリプトを出力します(すべてではありませんがほとんどのスクリプトは正常に動作します).

add_action( 'wp_head', 'setup_slideout_tabs' );

function setup_slideout_tabs() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     
            pathToTabImage: '<?php bloginfo('stylesheet_directory'); ?>/images/contact_tab.gif', 
            imageHeight: '122px',                     
            imageWidth: '40px',                       
            tabLocation: 'left',                      
            speed: 300,                               
            action: 'click',                          
            topPos: '200px',                          
            leftPos: '20px',                          
            fixedPosition: false                      
        });
    });
    </script>
    <?php
}

あなたは私が現在のテーマのフォルダで画像パスを指すためにPHPを少し追加したことに注意してください、あなたのテーマの画像フォルダにcontact_tab.gifという名前の画像があることを確認してください。 wp-content/themes/YOUR_THEME/images/contact_tab.gifまたはイメージパスを適切に更新します。

以前に投稿したCSSをテーマのスタイルシートに追加します。実際にはインラインで出力する必要はありません。スタイルシートはとにかく読み込まれるので、そこに貼り付けるのは理にかなっています。

最後に、あなたはこのように見える何かがあるはずです。

Tab collapsedTab open

それが役立つことを願っています...

2
t31os