Loading…

Stinger6 WordPress カスタマイズ

WordPress,css外部ファイル化方法Stinger

本日の人気記事BEST10

所要時間目安:2


Stinger6 WordPress カスタマイズ

記事上に人気記事表示

昨今…。
といっても、
ここ数年ページ表示速度SEO対策のひとつにもなります。

また、
検索してくれた方がそのサイトが表示されるのになかなか表示されないと離脱率どころではなく、
サイトにすら訪れてくれない場合があり得ます。

そんな中で、

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

目次に戻る


スポンサーリンク

cssファイルの外部化やJavaScriptの外部化は知られていると思います。

今回はWordPressを始めてまだ大した記事数もないので、
アクセスなどはほぼない状況ですが備忘録とともに今後の為に…。

と思います。

(参考サイト)

Bloggerブログ CSS外部化する方法。ページ表示速度を高速化 | せきらら白書~備忘録~ JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法 | 海外SEO情報ブログ

スポンサーリンク

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

テーマによってheader内のcssやJavaScriptの数などは違いがあると思います。

また、製作者様がfooter部分に初めから記載されていたりasync、非同期化されていたりするものもあります。

そういうテーマは非常にありがたいですね!!

Stinger6もいくつか既に非同期化されているJavaScriptがありました。

まだWordPressはじめて間もないのでphp言語?とにらめっこしながらcssファイルを外部化してみました。

具体的方法

まずは、
自分のブログ・サイトが表示されてソースの表示をしてみます。

するとheader内にいくつか

<link rel="stylesheet" href=

という部分があります。

こんな感じのところです。

header内のcss読み込み部分

 

この部分をまとまられるものは1つにまとめて外部ファイルに1つのcssファイルを作ります。

無料サービスでいうと、

  • GoogleDrive
  • Googleサイト
  • Github

などがあると思います。

上記中でも速度が早いのはGithubかと思われます。

今回は親テーマのstyle.css内すべてと小テーマの自分でカスタマイズに使ったcss内容を一括して外部ファイル化します。

また、
ただ外部ファイル化するだけではファイル容量に違いがないのでcssファイルを圧縮します。

以下のようなwebツールがあります。

Refresh-SF - Online JavaScript and CSS Compressor
こちらに、
親テーマのcss内すべてと小テーマの自分でカスタマイズに使用したcssの順でコピペして圧縮してもらいます。

すると不要な部分(コメントアウトなど)が削除されて結構な削減率になります。

その圧縮された内容のcssをコピーして外部ファイル化したいサーバー内に任意の.cssファイルを作ります。

とりあえず、

これで下準備は完成です。

あとは、
テーマのどの部分がスタイルシート(.css)を読み込ませにいっているかを確認します。
(概ねheader.php内に記述されていると思います。)

その部分に、
外部ファイル化したURLを記載します。

あとは、
表示の確認をしてみて今まで通り表示されていれば完成です。

それと、
Googleのデベロッパーサービスですが、
pagespeed/insights
で、
レンダリングブロックされているものの数が減っているかどうかを確認してみてください。

今回の方法で複数のcssファイルを1つにしたのであれば、
例えば3つのcssファイルがあったものを外部ファイルに1つにしたとしたらレンダリングブロックされている数は2つ減っているはずです。

あとは、
javascriptも複数ある場合は1つにまとめて外部ファイル化した方がレンダリングブロックする数は減らせます。

さらに、
javascriptの場合は非同期にすればその外部ファイルに1つにしたものはレンダリングブロックされることはなくなります。

次回は、

スポンサーリンク

javascriptの外部ファイル化+非同期にできるものがあればその方法も記載したいと思っています。

 

ただ、
いつになることやら…。(汗)

最後に注意として、
テーマの更新などがあった際や今後cssを追加してカスタマイズしていく上ではちょっとめんどい面もあります。

なので、
外部ファイル化はカスタマイズがほぼ終わってしばらくはカスタマイズしないなぁ。
という時にした方がいいと思われます。

Stinger6, WordPress, カスタマイズ」同じカテゴリ人気記事


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

おすすめの記事一部広告

関連記事

Facebookマイクザッカーバーグ氏アカウント乗っ取られる

WordPress アップグレード 不具合 伝えたいこと 備忘録 時事ネタ

WordPress4.5.2にアップグレード後、不具合なし(今の所)更新した結果…。

アイキャッチ画像:Facebook CEOのマーク・ザッカーバーグ氏 (C) Getty Image…

もっと読む

WordPress テーマ

Stinger6からStinger5にしてみた。

WordPress4.4でStinger5にして、 WordPress4.3.1でStinger6に…

もっと読む

非同期レスポンシブコード

AdSense WordPress カスタマイズ

非同期のAdSenseレスポンシブコードの変更方法

既に、 多くの方が利用されているかと思われます。 Google AdSenseという広告配信サービス…

もっと読む

Stinger6カスタマイズ備忘録

WordPress カスタマイズ メンテナンス

Stinger6カスタマイズアドセンス広告設定備忘録

この度、 これまではBloggerにてブログ運営をしてきて、 カスタマイズもそれなりにして、 アクセ…

もっと読む

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

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

-Stinger6, WordPress, カスタマイズ
-, , , ,



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

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る


コメントを閉じる

comment

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

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