Chappy Tabby

WordPress自作テーマ関連トラブルシューティング×2

Monitor showing programming language photo (from unsplash)
Home »  Blog » WordPress » 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に実装されているスクリプトが動かなくなる可能性はあります。

WordPress制作について相談する

Related Posts

WordPress

»