ページ表示速度高速化方法で子テーマに@import使用しない方法と画像圧縮

現在、@importに変わる「wp_enqueue_script()」を使用した方法をWordPress公式では推奨してますので、その変更方法を紹介します。

順番としては以下の順番で実施しました。

1. 子テーマの@importを削除する。
2. functions.phpに「wp_enqueue_script()」を記述する。

1）子テーマの以下の部分の@import以降を削除します。

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

WordPressダッシュボードの「外観」⇒「テーマの編集」で、子テーマのstyle.cssを開きます。
@importのある行を削除します。

※@importを削除すると親テーマのスタイルシートが読み込まれないので、デザインが崩れますが慌てないように・・・。

次に、子テーマのfunction.phpに以下のコードを追加します。
（functions.phpに「wp_enqueue_script()」を記述する。）

Stinger6の場合

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

そして、Stinger6の場合はheader.php内に以下のようにコードが記載されています。
（一部抜粋です。30行目辺りです。）

<?php elseif ( is_category() && trim($GLOBALS["stdata15"]) !== ''): ?>
 <meta name="robots" content="noindex,follow">
 <?php endif; ?>

 <link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/css/normalize.css">
 <link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" media="screen" >
 <link rel="alternate" type="application/rss+xml" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?> RSS Feed" href="<?php bloginfo( 'rss2_url' ); ?>" />
 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" >
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

上記の下線黄色部分を削除します。
（子テーマ内にheader.phpをコピーして子テーマ内のheader.phpを上記下線黄色部分を削除後上書きします。）

この下線黄色部分は削除しなくても大丈夫ですが、
親テーマと子テーマのCSSが以下の画像のように2箇所で読み込まれてしまいます。

まぁ、それでも問題ないといえばないのですが、
2回も読み込む必要はありません。

ので、
上記header.phpの下線黄色部分を削除すると良いと思います。

これで、CSSでの@import指定読み込みではなくなり現在の推奨されているwp_enqueue_script()による読み込みになり、巷で言われているように少しは読み込みが速くなります。

この方法は、@importで読み込むよりも速いというメリットもあるのでオススメですよ。

次に、
同じようにStinger7においても子テーマのスタイルシート（CSS）内を見ると@importが使用されています。

しかし、
Stinger6の時と若干構成？構造？が異なっています。

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

//親テーマCSS⇒子テーマCSSを読み込む
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
 }