タグ別アーカイブ: JQuery

bootstrap4のタブで別ページから直接特定のタブにリンクする方法

本当に苦労しました。

結論から言うと、jqueryのバージョンアップ時に気を付けないといけないよね!ってことなのですが笑

では、参考にさせていただいたサイトはこちら

ハッシュ付きURLリンクでの訪問時にBootstrapの適切なタブを開く&スクロールする|ENTEREAL様

入力するコードはこちら
適当なjsファイルを名前を付けて保存してfooterで呼び出します。

$(document).ready(function() {
    // #(ハッシュ)指定されたタブを表示する
    var hashTabName = document.location.hash;
    if (hashTabName) {
        $('.nav-tabs a[href=' + hashTabName + ']').tab('show');
    }
});

おおむねこちらで動作します。JQueryのバージョンが低ければ・・・・

ただ、bootstrap4を使うとたぶんjquery3.○.○を使うと思うんですよね。そうすると、なぜか、タブが切り替わらい?!

そこからいろいろとトライ&エラーの繰り返しで、
jQueryのバージョンが原因だと突き止めたあと、
(サイトのデザインが完成している)いまさらバージョンを変えるわけにもいかずJQueryのサイトを見ていると、、

あるじゃん、「jQuery Migrate Plugin」なんて便利なものが!

google先生の翻訳で日本語になったサイトを読むと
そのプラグインを使うと失われた機能を取り戻すとかなんとか

とにかく、Download the compressed, production jQuery Migrate 1.4.1をダウンロード!

jQuery本体の下に呼び出してサイトにアップすると

動いた!!

とりあえず、わすれないうちに記録をしておきます。

Masonryをwordpressで動作させる方法

最近多いタイル状に配置をするjQueryのプラグインにMasonryがありますね!
トップページなどでMasonryを配置する際に、
次のように設定をするとOKです!

まず、functions.phpに以下のコードを記述するとMasonryがつかえるようになります。
(最近のwordpressにはMasonryが内包されているそうです。)

function my_scripts() {
wp_enqueue_script('jquery-masonry');
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

加えて別で設定用に以下のようなjsファイルを作ります。

jQuery(window).load(function(){
  jQuery( '#wakugumi' ).masonry({
    itemSelector: '.parts'
  });
});

ポイントは$をjQueryに変更すること。
あと、ここで設定した#wakugumiと.partsはソースに記述する際に使います。
そして、header.phpで作成したjsファイルを読み込みます。

あとは、CSSでデザインを固めて、以下の様に記述すればOK!

<div id="wakugumi">
<div class="parts">
コンテンツ内容
</div>
・・・・・
<div class="parts">
コンテンツ内容
</div>
</div

ぜひお試しください。