現在公開されている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のカスタマイズ記事まとめはこちら!↓
コメント