スクロールヒントが表示されない場合の対処法

スクロールヒントが表示されない場合の対処法をお伝えします。

コンテンツがスクロール可能な場合にヒントを表示する ScrollHintをリリースしました

こちらの記事の通りに

①https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css
②https://unpkg.com/scroll-hint@1.1.2/js/scroll-hint.js
③/js/scrollHint.js
の３つを読み込むと上手くいくはずなのですが、私はつまずいてしまいました。

原因は1つの読み込みを書き忘れていた為でした。

//function.php

<?php
function add_css_js(){
//page-price.phpにscrollHint.cssを読み込み①
  if (is_page('price')) {
    wp_enqueue_style('scrollhintcss', 'https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css');
  }
//page-priceにscrollHint.jsを読み込み②③
  if (is_page('price')) {
    wp_enqueue_script('scrollHintjs', 'https://unpkg.com/scroll-hint@1.1.2/js/scroll-hint.js');
    wp_enqueue_script('myscrollHintjs', get_template_directory_uri() . '/js/scrollHint.js');
  }
}
//add_css_jsをフロントで呼び出す
add_action('wp_enqueue_scripts', 'add_css_js');

私の場合はfunctions.phpに上記のように書いて呼び出しました。

誤りなどございましたらご指摘いただけると幸いです。

参考サイト

コンテンツがスクロール可能な場合にヒントを表示する ScrollHintをリリースしました

CSSの読み込みはどこに書く？WordPress公式マニュアルに書かれている正しい手順。

functions.phpで外部JSファイルをラクラク管理する方法