サイトは一部アフィリエイトを含みます。
マガジン「沖縄で家づくり」読んでみてね!

barba.jsをWordPressで導入してみた。非同期画面遷移で体感速度アップ

もう古いのかもしれないけど、barba.jsってやつが素敵だったので導入してみました。

関連Barba.js

非同期に画面遷移をおこなえるようにするjs。
どんなものかは、公式のデモを見てください。すぐわかります。

Barba.js Demos Circles Demo

いいですよね。
読み込み時パッと白くなるような野暮なインタラクションがなくなり、スムーズに画面が遷移していますね。URLのとこもちゃんと変わってるからブログみたいなページものサイトでも使えるし。

オサレやーん

スポンサーリンク

Barba.jsをWordpressに導入

というわけで本番たたき台でもある、私の個人Wordpressブログ(みなみのひげブログってのが昔あった)で試しました。

参考にしたのはこの辺のページ。

ドキュメントの日本語翻訳!
英語だとすぐ集中力が切れる私にはありがたいです。

あと個人的には最後のQiitaのページ、javascriptについたコメントが理解しやすかったです。

細かな調整は大変ですが、とりあえず動くようにすること自体はそこまで難しくないです。

基本的には公式のドキュメントを見ながらやるとできるかと思います。

Barba.js メリット・デメリット

先に導入して感じたメリデメを。

メリット
・非同期でシームレスな画面遷移を実現
・URLもちゃんと変わる。ページものでもアプリライクなアニメーションに
・体感的にページの遷移速度が上がる
デメリット
・title以外のheadのメタデータが更新されない
・barba.js以外のスクリプトがページ遷移時に読み込まれない
・ページ遷移しても自動でページトップに行かない(スクロールしたところにとどまっている)

ウェブページがシームレスな遷移になる。何といっても魅力はこれ。

一方で、デメリットは「更新」関係。
他のスクリプトが読まれなかったり、head内のメタタグが更新されなかったりします。

デメリットはbarba.js側にカスタムのjavascriptを書くことで解決できます。ちなみに便利なカスタムのスニペットが、こちらのページにまとめられていました。

世の中はは優しさがあふれています..。ジーン。

Barba.jsはenque_scriptで読み込む

読み込むファイルは2種類。

  • barba.min.js
  • barba-custom.js(自分で作る)

WordPressの場合、wp_enque_scriptってのがあるので、「function.php」にそれを書いて読み込みます。

barba.jsはテーマ内に”js”フォルダをつくって、そこから読み込んでいます。

WordPressはプラグインとかテーマで色々読み込むのでwp_enque_scriptt(エンキュースクリプト)ってやつで読み込み管理できるようになってますから、それを使う方が良いでしょう。

使ってない場合は、一応、普通に外部スクリプトとして読み込んでも大丈夫です。

非同期で読み込みたいところをタグで囲う

以下のタグで囲った部分が非同期に読み込みされます。

WordPressのテーマだと、この辺が対象のページなります。

  • index.php
  • home.php
  • page.php
  • single.php
  • archive.php
  • category.php
  • tag.php
  • search.php

要はこんな感じの構造ですね。

もちろんテーマのHTML構造によって変わってくるので、とりあえず非同期で読み込みたい部分をタグで囲うと覚えればOKです。

タグは複数指定できない

DOM上に同じIDが重複して存在するようにはできません。barba.jsは重複させても先に指定したタグの中身しか更新しないです。

barba-custome.jsにカスタマイズのjavascriptを書く

barba.jsを読み込ませて、タグを入れたらカスタマイズのjsを書きます。こんな感じ。

jQueryとjsがごちゃってるのは私の拙さです。すみません。

ページ遷移時のスクリプトの処理がけっこう大変

「getWritten」のfunctionは、記事中の「Gistの埋め込みスクリプト」が動かなくて、追加で書いたものです。

こういう画面遷移時のスクリプトをもう一度動かす処理がけっこう大変でした。

こちらの記事に詳しく書いていますので、同じような状況が起きたかたは読んでみてください。

※記事で紹介したコードは動作を保証するものではございません。必ず自己責任で使用してください。コードを使う際はテストを行い、動作検証をおこなってください。

閉じる