【WordPress】初期のstinger8の子テーマを使っている場合は、style.cssの読込方法を修正した方がいいですよ!

Stinger8

現在公開されているstinger8の子テーマでは改善されておりますが、
stinger8が公開されたころに子テーマをダウンロードし、
それを引き続き使用している場合は、
style.cssの読込方法を修正した方がよいです。

読込方法を修正することで、
多少サイトの表示スピードも上がる場合がありますよ!

今回はその読込方法について説明します。

スポンサーリンク

@importでの読込は表示スピードが遅くなる原因

見出しの通り@importによる外部ファイルの読込方法は、
表示スピードに影響を与えます。

@importでの読込方法は、過去のものとなり、
WordPress自体が非推奨としています。
WordPress Codex 日本語版/子テーマ

初期のころにstinger8の子テーマをダウンロードした場合は、
親テーマのスタイルシートを読み込むために@importが使用されております。

なお参考のため、サイト表示スピードを測っておきます。

修正をする前のスピードは、
パソコンでの表示で64でした。
果たして修正すると多少は改善されるのでしょうか?

@importではなく、function.phpで読み込む!

現在は@importではなく、functions.phpで読み込む方法が推奨されております。
そのため、初期の子テーマを使用している方は、
functions.phpで読み込ませるよう修正しましょう。

ちなみにコピペで修正可能です!

functions.phpにコードを追記する!

functions.phpにコードを追記します。
functions.phpを編集に失敗すると、
サイト自体が全く見れなくなってしまうので、
かならずバックアップを取っておきましょう。

functions.phpに以下のコードをコピペしてください。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
}

なおfunctions.phpには以下のコードが初めから記載されております。
必ずこのコードより下に先程のコードをコピペして下さい。
(これより上にコピペするとエラーになります)

<?php
if ( !defined( 'ABSPATH' ) ) {
exit;
}

@importを消去する!

最後にstyle.cssにある以下のコードを消去します。

@import url('../stinger8/style.css');

これですべて完了です。

表示スピードは改善されたのか?

修正後、表示スピードを図ってみると、
以下の様になりました。

67になりました!
表示スピードについてはサイト差があると思われるので、
参考程度にしてください。

@importを修正するだけで、
多少は表示スピードも改善されるようです。

簡単にできますので、
初期にダウンロードをした方は、
修正してみてください!

Stinger8のカスタマイズ記事まとめはこちら!↓
https://plu-plu.net/%e3%80%90wordpress%e3%80%91stinger8%e3%81%ae%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%81%be%e3%81%a8%e3%82%81/

コメント