PROGRAMMING

WordPressで画像をふわっと表示する「ScrollReveal」を導入する方法【web制作にも】


Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

もんしょー(@sima199407)です。

WordPressの表示で「ふわっと出てくる表示したい」と考えたことありませんか?

今回はこれの導入方法をやってみようと思います。

使うのはjavascriptのライブラリ「ScrollReveal」を使います。

プラグイン以外でWordPressのカスマイズをしたことがなくても簡単にできますのでご参考くださいませ。

導入理由→比較的簡単にできる

理由はシンプルで導入コストがかなり低いんですよね。

単体でスクリプトを読み込めばできるし、カスタマイズができるから思うように動かすことも可能です!

導入手順

ソースコードを編集するので、念の為バックアップをとっておくことをおすすめします。

①スクリプトを記述する

方法その1

header.php内の~に以下を追加します。

例)

追加できたら「ファイルを更新」を押します。

参考:header.phpを編集しないで読み込む場合はこちらが参考になります

方法その2

functions.phpに記入する

「wp_enqueue_script()」という関数を使うと読み込みが可能です。

②動作のターゲットを作成します

ターゲットはクラス名によって判別されますので、今回はいくつかテストできるクラスを作っておきます。

③スクリプトを実行させます

次に実行用のスクリプトに記入します

方法は2つご用意しました。

方法その1

footer.phpの直下に記入する

一番シンプルなやり方です。

簡単にできる反面、スクリプトがおおくなるとfooter.phpが長くなります。

例)

にするとスクロール時にイベントが繰り返されます。

方法その2

別途でjsファイルを作成する

~wp-content/[テーマ名]/js内に新規で編集用のファイルを作り読み込む方法です。

1 jsフォルダ内に新規ファイルを作成します。

基本の形

2 読み込みをするためのイベントをfooter.phpに追加します。

という感じに書いてみます。

get_theme_file_uri を使ってみる手法

「〜/js/scroll-reveal.js〜」を別の書き方をすると

こっちのほうがスマートですかね?笑

④記述方法

参考程度に記述方法を書いていきます

scroll-reveal.js

してみます。

確認用のDEMO

オプション

オプションを使って細かい所のカスタマイズができますね

例)

参考:公式ドキュメント

日本語でしたらこちらがわかりやすいです。

もしプラグインでやるなら?

Shortcodes Ultimate」というのがあるみたいです。

こちらが参考になります。
アニメーションの種類が多すぎですね。笑

ブログ書くくらいなら特にいらないかなと思います。

簡単に導入し適度にカスタマイズができるのでおすすめ!

今回は「ScrollReveal」を導入してみました。

WordPressじゃなくても十分役に立つと思います!