Loading…

Stinger6 WordPress カスタマイズ

記事上に人気記事表示

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

本日の人気記事BEST10

所要時間目安:2

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

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を追加してカスタマイズしていく上ではちょっとめんどい面もあります。

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


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

おすすめの記事一部広告

    Multiplex 広告

Stinger6, WordPress, カスタマイズ」同じカテゴリーの記事一覧


関連記事

RSSフィード画像

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

RSSにアイキャッチ画像を表示させる方法ができると思ったのに再度検証中…。

先程の記事にて、試してみたのですがBloggerのRSSフィードには・・・・・・。 の以前に、ブログ表示上の左上に「続きを読む…。」と表示されてしまいました。orz まだ、時間が経っていないからかBl…

もっと読む

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

WordPress不具合

WordPress 不具合

WordPress4.4ビジュアルエディタで見出しタグ挿入不具合

WordPressにおいて、 ビジュアルエディタとテキストエディタの切り替え時に、 勝手に改行されるなどの不具合はあったということは調べてわかっていました。 ですが、 ちょっとしたプラグインにて対応可…

もっと読む

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

目次作成と設定方法Table of Contents Plus(TOC+)による

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

ブログに目次表示動画解説付きでTable of Contents Plus(TOC+)の設定方法

これまでは、ブログにおいて目次表示は要らないかなぁなんて思っていました。 ですが、 多くのサイトの方々が導入されているということとSEO的にも若干良いということなのと、訪れていただいたユーザーのユーザ…

もっと読む

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

石垣島

WordPress

WordPressアップグレード、バージョンアップできない。

なぜなのかわかりませんが、 WordPressのバージョンアップ通知が来ているのですが、 「今すぐ更新」を何度しても何回か展開しています。 とはなるものの…。 一向にアップグレード?バージョンアップが…

もっと読む

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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