GootaのWordPressテーマを自作しました

article-thumbnail

この度、「Goota」を自作テーマにしました!

こんにちは、お読みいただきありがとうございます。 ケン(@gootablog)です。

WordPressを使っているとテーマ何にしようって悩みますよね。
既存のテーマか自作テーマか。

僕は自分のスキルの幅が広がるかなってのと自作のテーマを使いたいっていうところで作ることにしました。

今回作った際のポイントとか感想を備忘録代わりに書いていきます。
また、作ってみて自作するのはオススメできるかっていう疑問もでてきました。それは別の記事で書きたいと思います。

WordPressのテーマを作るのに使ったものたち

使ったツール・ライブラリ等とかですね。リストにするとこんな感じです。

  • Sketch
  • Docker
  • wordmove
  • sass
  • gulp
  • babel
  • webpack
  • highlight.js
  • lazysizes
  • pagespeed insights

デザイン系

Sketch

デザインツール。非デザインナーでも使いやすいです。ただ最低限使い方は覚えないといけないですけどね。
僕はUdemyという動画学習サイトを使って覚えました。

そこから今回初めてWebサイトをデザインしたのですが難しかった・・・。どういうデザインにしていくかを悩みに悩みました。いろんなブログのデザインを参考にしましたが最終的にはベーシックでシンプルな感じに仕上がりました。

自分で作ってので愛着も湧くし読みやすいと思うので、初めてにしてはまぁいんじゃないかなと。

これからもマイナーアップデート的な感じで機能を増やしていく予定です。

プログラミング系

Docker

コンテナ型の仮想環境を作れるやつです。業務や個人開発はローカル環境でDockerを使って開発しています。なので今回のテーマ作成も使用しました。サクッと作れて壊せるのでとても使いやすいです。

WordPress用の公式リポジトリが出ているのでそれを使用しました。

DockerのWordpressリポジトリ(公式)

Wordmove

これはWordPress用のツールで、テーマファイル、データベース、プラグイン、WordPressのコアファイルなどWordPress周りのデータをローカル環境と本番環境でやりとりができるツールです。バックアップ代わりにも使えるので使い勝手はいいです。

設定も接続情報などを記述するだけなので手軽にセッティングできます。

GitHub – welaika/wordmove

Sass

CSSを拡張したメタ言語ですね。

Sassはこれまで書いたことがなかったので使いました。プログラムみたいに書けたり、変数を書けたり、ファイル分割などもしやすいので書いていて楽しかったです。これからCSSを書くときはSassを使っていきたい。

Sassの記法は「SASS記法」と「SCSS記法」の2つがありますが書き方が割とCSSに近いSCSS記法で書きました。

Sass: Syntactically Awesome Style Sheets

Gulp, Babel, Webpack

フロントエンドツール。これまでPHPをメインで使ってたのでフロントエンドはド素人です。なので聞いたことある組み合わせで試しに使いました。

BabelはブラウザにサポートされていないES6というJavaScriptの機能(書き方)をサポートしているES5に変換するツール。

webpackはモジュールバンドラーといってJSなどのファイルを一つにまとめたりすることができます。

Gulpはフロントエンド周りのタスクを自動で実行してくれるタスクランナー

今回はGulpを中心にしてビルドを行いました。

SASSを変換する際に自動でベンダープレフィックスを付けて圧縮して出力、GulpのタスクからBabelでJSを変換してwebpackで指定のファイルにまとめる。という流れでフロントエンドのファイルを出力しています。

最初の設定は手こずりましたが使い出すと便利でした。開発時はファイルの変更を検知してビルドできるし、開発用と本番用でファイルと出力設定を変更できたりと自分がやりやすいように自由に設定できるのもいいですね。

ページ表示速度の高速化にこだわりました

ページ速度が遅いと読む人にとってストレスになります。なので少しでも速く表示されるようにしました。

実装した項目は3つ。

  • CSS・JSファイルの軽量化
  • JSファイルやCDNファイルの遅延読み込み
  • 画像の遅延読み込み

スコア計測はGoogleのPage speed insightで行ってます。作ったテーマの高速化前は50点くらいでしたが高速化後は80点以上になりました。70点以上なら遅く感じないかなってところだったので満足の出来です。

トップページのモバイル 91点

トップページのPC 83点

CSS・JSファイルの軽量化

読み込むファイルサイズは小さければ小さい方が読み込みも早くなります。

CSSやJSファイルは開発時には読みやすいように改行していますが、本番環境では改行は必要ないので改行や余分な空白を無くし1行にするべきです。軽量化したほうがいいです。

軽量化はフロントエンドツールかWebサイトでできます。Webサイトのリンクを貼っておくので興味ある方は試してみてください。

JavaScript minify : JSCompress – The JavaScript Compression Tool
CSS minify : CSS Minifier

JSファイルやCDNファイルの遅延読み込み

CSSやGoogle Analyticsのスクリプトなど<head>タグで読み込む必要があるもの以外は<body>タグの最後にJSファイルを読み込み、HTMLが読み込み終わったらJSファイルの処理でその他の必要ファイルを読み込むようにしています。

そうすることでページのHTMLを読み込んだあとにその他のCSS・JSファイルの読み込みが実行されるので表示される速度が速くなります。

遅延読み込みしているファイルはCSSだとFont AwesomeというアイコンセットのCDNファイル。JSだとコードをきれいに表示するHighlight.jsや画像を遅延読み込みするlazysizesというライブラリファイルです。

Font Awesome
highlight.js
lazysizes

遅延読み込みの方法は別途記事で公開予定

画像の遅延読み込み

通常だとページを読み込むと同時にimgを全て読み込んでます。それだとサイズが大きい画像ばかりだと表示されるまで時間がかかります。
それを遅延読み込みの処理を追加すると、画面に見えている部分は読み込むようにしてまだ見えていない部分についてはスクロールして近くなったら読み込んでいこうという処理になります。こうすることで表示速度が速くなります。

WordPressだとほとんどは画像の読み込みのせいで表示が遅くなってるかと思います。

僕のこのサイトも画像の遅延読み込みを追加したら表示速度が上がりスコアも向上しました。

ちなみに使用したのはlazysizesというライブラリです。jQueryも使用していなくて、軽量なファイルで操作も簡単そうだったので導入しました。おすすめです。

こちらの方法も別途記事で公開します。

作ってみて

最低限の機能ですが作りきれたのでよかったです。
これで一通りのWordPressのテーマづくりは知れたので仕事も請けれそうだなって感覚です。

今回作ったテーマは気が向いたら公開もしたいなぁとも思います。いつか公開できたらいいね。

とりあえず自分のサイトに適用する段階までは作れましたが、まだ追加したい機能やレイアウトもあるのでちょっとずつ作り込んでいきたいと思います。変わっていくのをお楽しみに。

ケン(@gootablog)のヒトコト
テーマづくりを中心にやってたせいで記事が全然書けなかった・・・
Wordpress
Wordpress Wordpressテーマ