Loading…

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

ページ表示速度高速化

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

このセッションは  IPv4  で確立しています

本日の人気記事BEST10

所要時間目安:5

This session is using  IPv4  is established in

この記事は2016年6月10日のものです。現在は状況が異なる可能性がありますのでご注意ください。

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日現在の最新バージョンです。)

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

55


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

関連記事

記事上に人気記事表示

Stinger6 WordPress カスタマイズ

アイキャッチ画像設定し忘れプラグインなし自動設定方法Stinger6

WordPressを使用すると、 アイキャッチ画像の設定が簡単に可能になります。 中でも人気のテーマStingerシリーズだとなおさらいろいろな機能が元々色々あってとても便利です。 そのStinger…

もっと読む

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

HDDファームウェアのアップデート後

PC カスタマイズ ツール 伝えたいこと 備忘録

Seagate製HDDファームウェアのアップデートをしてみた方法

今回は、これまでに使用いていたラップトップHDDでSeagate社製のST1000lm014のハイブリッドHDDすなわちSSHDです。 このHDD(SSHD)はハイブリッドHDDと言われNAND機能を…

もっと読む

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

ブログ画像

PC Windows10 カスタマイズ 不具合 伝えたいこと 備忘録 設定

ブログランキングなんて関係ない書く楽しみと喜び悦びと嬉しさはお礼のコメント頂いた時…。

ブログはある意味趣味でもあり、続けている人にとっては日常のひとコマだと思われます。 苦痛やきついといった思いが(強すぎると)あると、なかなか続けられないものだと思います。本当に日課に自然となっているよ…

もっと読む

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

熊本地震本震

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

熊本県熊本地震本震か?阿蘇山近くが震源、噴火しなければいい

一昨日の熊本県熊本地震に続いて本日午前1:26分頃震源地が異なる場所で、 マグニチュード7.3で震度6強という非常に強い揺れの地震がありました。 前回投稿させて頂いた記事では触れませんでしたが、 安否…

もっと読む

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


おすすめの記事一部広告

    Multiplex 広告

アクセスランキング

目次に戻る

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

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

目次に戻る

目次に戻る


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

comment

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

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