WordPress自作テーマ関連トラブルシューティング×2
いつの間にか勝手に入っている「style.min.css」を消す(WordPressバージョン5.x以降対象)
厳密には該当ファイルを消すのではなく、テーマ側で読み込ませない方法。
style.min.cssはバージョン5.xで実装されたGutenbergエディタで出力されるHTMLに対応したスタイルシート…だそうですが、これが自作テーマのスタイルシート(CSSファイル)より後に読み込まれる可能性が高いので、肝心な自作テーマのデザインが反映されないのです。
解決法
functions.phpに「wp_dequeue_style」関数を使い、当該スタイルシートを読み込ませないようにする。
add_action('wp_enqueue_scripts', 'remove_block_library_style'); function remove_block_library_style() { wp_dequeue_style('wp-block-library'); wp_dequeue_style('wp-block-library-theme'); }
wp_enqueue_scripts関数を実行する際、邪魔な(失礼)style.min.cssを読み込ませないようwp_dequeue_style関数入りのユーザー関数remove_block_library_styleも一緒に実行します。
(参考記事)
スタイルシート読み込みは「we_enqueue_style」関数を使うのですが、逆の機能を持つ「wp_dequeue_style」関数もあることを知りました。
jQueryのバージョン問題
WordPressは初期設定でjQueryを使えるのですが、使用しているバージョンが古い(1.12.4)です。
ちなみにjQueryの最新バージョンは3.4.1です…。
解決法
最初から読み込まれているjQueryをwp_dequeue_script→wp_deregister_scriptで消してから、使用したいバージョンのjQueryをwp_enqueue_scriptで加え、デフォルトより高い優先順位でそれらが実行されるようadd_action関数の設定をする。
add_action('wp_enqueue_scripts', 'load_scripts', 100); function load_scripts(){ wp_dequeue_script('jquery'); wp_deregister_script('jquery'); wp_enqueue_script('jquery', 'https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js', false, null, true); wp_enqueue_script('jquery-scrollto', 'https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js', false, null, true); wp_enqueue_script('ct-main-script', get_template_directory_uri() . '/js/main.js', false, null, true); }
自作テーマでjQueryを使ったスクリプト(ライブラリ含む)に対応しているバージョンのjQueryを改めて読み込ませる必要があります。
多くの場合、WordPress側のバージョンでどうにかなるはずですが、動かない場合もあります。
そういうとき「wp_deregister_script」や「wp_dequeue_script」関数でWordPress側で読み込むことになっているjQueryバージョン1.12.4を消したくなります。
例えばこんな感じ。
(悪い例)
function load_scripts(){ wp_dequeue_script('jquery'); wp_enqueue_script('jquery', 'https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js', false, null, true); }
しかし、最新版jQueryをwp_enqueue_script関数を使っても、肝心なscriptタグで出力されておらず使えなかった、というオチになりました。
むしろ、jQueryが消えた…!🙀
wp_dequeue_scriptのあとにwp_deregister_scriptを加えても駄目でした。
stackoverflowの回答(URL後述)によれば、wp_dequeue_script→wp_deregister_scriptの順番で実行しなければ駄目で、なおかつdefault(=add_action / do_actionの優先順位初期設定は10)より高い優先順位で実行されなければならないそうな。
(参考URL)
上記の内容に従ってfunctions.phpに加えたところ、最新版jQueryに変えることができました。
ただ、どうしてもjQueryをheadタグに置きたがる問題だけは解決できず。
※注意※
WordPressのデフォルトjQueryのバージョンが古いため、最新バージョンjQueryに変えた結果、もともとWordPressに実装されているスクリプトが動かなくなる可能性はあります。