Loading…

Stinger6 Stinger7 WordPress インターネット カスタマイズ テーマ 伝えたいこと 備忘録

ページ表示速度高速化

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

本日の人気記事BEST10

所要時間目安:5


Stinger6 Stinger7 WordPress インターネット カスタマイズ テーマ 伝えたいこと 備忘録

ページ表示速度高速化

以前からページ表示速度が気になっている私です。今回は大きく分けて2つの事を実施しました。
ちょっとなぐり書きですが、備忘録として残しておきたいと思います。

 

スポンサーリンク

アドセンス336pxPC閲覧記事下表示1つ目コード

 

よく読まれている人気記事一覧

ページ速度高速化やサイト表示速度の高速化には大きく以下のようなもの方法があると思います。

 

  • キャッシュの設定。
  • CDNサービスの利用。
  • 画像データの最適化。
  • 利用ウィジェットの見直し。
  • ページのソースの最適化。
  • サーバースペックの向上。

 

上記全部は無理なので、

  1. 画像データの最適化。(圧縮)
  2. テーマのコードの見直し。

の2点をしてみました。

 

しかし、キャッシュ系プラグインなどが使えないサーバーやサービスがあります。
(WPXやWPblogなど…。)

そんな場合は上記のキャッシュの設定はちょっと恐くて使用できにくと思います。

しかし、
少しでも早くしたいと考えると思います。

 

目次に戻る


そこで、まず実施したのは元々テーマ内にある画像データをオンラインの画像圧縮ツール(サイト)で出来るだけ圧縮します。

 

ちなみに、今回私が利用したオンライン画像圧縮サイトは以下になります。

このオンラインイメージ最適化ツールは、画像最適化とファイル圧縮アルゴリズムを組み合わせて、画質を保ったままに、JPEGやPNGイメージを最小サイズに圧縮する賢いツールです。Optimizillaは、可能な限りの画像圧縮率かつ画質維持を実現。他のサービスやソフトウェアを凌ぐパフォーマンスです。
オンラインイメージ最適化ツール

その他にもいくつか画像圧縮のサイトはありますが、
多くのサイトにて紹介されているのでそちらを参考して下さい。

(オンライン 画像圧縮 サイトなどのキーワード検索でいくつか出てくると思います。)

 

上記サイトにてテーマ内にあった.jpg画像と.png画像の圧縮を行いました。
その後、
サーバー上の同じフォルダ内に同じファイル名にてアップロード上書きします。

これだけでも、少しかもしれませんがサイト上に表示される画像の圧縮がされるので若干は速くなるはずです。(理論上は)

 

あとは、私の現在使用しているテーマはStinger6なのですが、

子テーマのスタイルシート(CSS)内の記述内容に@importが指定されています。

 

いけないわけではないのですが(悪いわけではないのですが)、
(STINGER7でも同様です。)

さて、STINGER6子テーマのstyle.cssを見ると、
親テーマのスタイルシートの読み込みに「@import」を使用していますが、
この方法は推奨されていません。

以前は 、
@import;を使用して親テーマのスタイルシートをインポートしたようですが、
これはもはや良い方法ではありませんので注意してください。
(悪いわけでもありませんが…。)

現在の推奨されている親テーマのスタイルシートをキューに入れる正しい方法は、
子テーマのfunction.phpで、
wp_enqueue_script()を使用する方法になっています。

 

参考引用元)

最後のステップでは、親テーマと子テーマのスタイルシートをキューに入れます。以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php でwp_enqueue_script()を使用する方法です。したがって子テーマには functions.php を作成する必要があります。子テーマの functions.php の最初の行は、PHP の開始タグ (<?php) で始め、続けて親テーマと子テーマのスタイルシートをキューに入れます。以下の例は、親テーマが 1つの style.css ファイルを使用してすべての CSS を保持している場合にのみ動作します。テーマが複数の .css ファイルを持つ場合(たとえば、ie.css、style.css、main.css) すべての親テーマの依存関係を管理する必要があります。依存関係に 'parent-style' を設定すると子テーマのスタイルシートは親テーマのあとで読み込まれます。

こっそり…。こんな事もしちゃってます。

 

現在、@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箇所で読み込まれてしまいます。

Stinger6ページ表示速度高速化@import削除後

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

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

 

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

 

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

 

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

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

 

なので、Stinger7の場合は子テーマのスタイルシート(CSS)の、

 

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

を削除後、
子テーマのfunction.phpに以下の推奨されているwp_enqueue_script()コードを追記します。

 

//親テーマ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');
 }

子テーマのfunctions.phpに上記の関数を書き込みます。STINGER7のデザインを司るスタイルシートは、1つしかないので記述はこれでOKです。

 

流れとしては、
まず親テーマのスタイルシートを読み込み、
その後で子テーマのスタイルシートで上書きするようにします。

 

後は子テーマのstyle.cssを使って、がんがんカスタマイズして下さいね。

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

functions.phpの編集を誤ると、
サイトが表示されなくなったり、真っ白になったりする場合があります。

必ずバックアップを取ってから編集しましょう!

 

ちなみに、
Stinger6でも上記したStinger7の方法でも問題なく動作しました。
(なので、どちらの方法でも良いのかな…。だれか教えて・・・・・・くださいませ。)

何か不具合があったら元に戻せるように必ずバックアップは取っておいて下さいね!!

 

WordPressの事を調べてると、
色々な知識が入ってきます。

スポンサーリンク

「@importは非推奨」とか「@importより読み込みが速い」とか書かれてると…。

 

気になってしょうがなくなっちゃいます。^^;
(なにせまだまだ貧弱ブログなので…。)

それにしても、
ENJIさん作のStinger系は流石ですね!!

現在では、無料テーマ「STINGER PLUS」が既にリリースされています。
(ちなみにStingerPLUSでは子テーマには@importは使用されていません。

(すみません、STINGER Plus+ ver20160608bも@importでした。)

 

STINGER Plus+ ver20160608bダウンロード先
(2016年6月10日現在の最新バージョンです。)

このエントリーがお役に立ちましたら、シェアして同じ悩みを持つ方の解決に繋げて下さい!


アドセンス336pxPC閲覧記事下表示1つ目コード

おすすめの記事一部広告

    Multiplex 広告

Stinger6, Stinger7, WordPress, インターネット, カスタマイズ, テーマ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧


関連記事

カテゴリの人気記事一覧画像

WordPress カスタマイズ 伝えたいこと 備忘録

カテゴリの人気記事を表示する方法

  記事を読んで頂いていて該当記事を読み終わった後に、同じカテゴリーに属する人気記事を表示する方法です。 せっかく訪問して頂いて記事を読んでもらった後に同じカテゴリー内で人気のある記事が表示…

もっと読む

インフィード広告アドセンス

BRAUN電気シェーバーシリーズ9とラムダッシュ

伝えたいこと 備忘録 旅行 時事ネタ

電気シェーバーおすすめのBraunシリーズ9替刃F/C90意外と…。

男性の髭って、 あると痛いですよね。 でも、ちょっと濃い目の髭だとなかなか電気シェーバーだと剃り残しや剃り切れないことって多いと思われます。 私の旦那は、ちょっと濃い目の髭になっております。 そんな旦…

もっと読む

インフィード広告アドセンス

スマホの保護フィルムの中に空気の気泡を入れない方法

Android iPhone スマホ 伝えたいこと 備忘録

スマホの保護フィルム貼りを失敗しない貼り方法ガラスザムライのクリップ使用

いまやスマホは当たり前になってきています。そんなスマホの画面保護に保護フィルムを貼る方が多いと思います。 その保護フィルムを貼る際に、多くの場合中に空気が入って気泡が残ってしまうことも多々経験していま…

もっと読む

インフィード広告アドセンス

年賀状

伝えたいこと 備忘録 時事ネタ

ブログの背景のオススメってあるのかなぁ…。基本はやっぱり白で文字が黒かなぁ…。

これまで、いくつかのブログやサイト(ホームページも含め)webデザインについて考えてきたつもりでも…。 毎回毎回、特にWordPressのブログとなるとカスタマイズしやすいということもあるのか、 デザ…

もっと読む

目次に戻る

よろしかったらシェアよろしくお願いします。

-Stinger6, Stinger7, WordPress, インターネット, カスタマイズ, テーマ, 伝えたいこと, 備忘録



この記事が良かったら
いいね!お願いします(#^.^#)

せきららの
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る

目次に戻る


コメントを閉じる
  1. […] ()」を使用した方法をWordPress公式では推奨してますので、その変更方法を紹介します。 ページ表示速度高速化方法で子テーマに@import使用しない方法と画像圧縮 | WordPressデビュー津々浦々 […]

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください