OthloBlog - オスロブログ -

名古屋のIT系学生コミュニティOthloTechのブログです。

初めてWordPressテーマを自作したときに便利だったサービス7つ

f:id:othlotech:20170828172507p:plain

こんばんは!MasuqaT(@occar421)です。普段はWindowsを使ってC#を使ったり数値計算をしたりしています。今週のテーマとしては、そうした情報を載せてきたブログを作り直した際に、役立ったサービスについて書いてみました。ということで、この記事はWordPressテーマ初級者向けに書いています。

今まではFlatoというテーマを改造して使っていましたが、いろいろと装飾をつけていくうちに、コード管理が雑になって保守が難しくなっていた問題がありました。何より、SCSSに触れた身としてはCSSを生でたくさん書くのはちょっと辛い…

こういう背景があったので、サーバーを変えるのを機にテーマを1から構築してみることにしました。

Instant WordPress (or BitNami)

まずはローカル環境にWordPressを構築しましょう。Xamppをインストールしてサーバー建ててWordPressを入れて…というのも以前の話、今は便利なものがあります。
WindowsであればInstant WordPressをインストールすると、1発で構築・起動・停止できます。非常に便利です。MacにはBitNamiというものがあるようです(未検証)。

Bones

WordPress環境ができたはいいが、1からテーマを作るために何をしたらいいかわからない…という場合はBonesを試してみるのがオススメ。すでに最低限の構築ができているので、少し色やフォントを弄るのもいいですし、跡形が無いくらい変えていってもいいです。

うれしい(?)ことに、デザインはすべてSCSSで、しかもレスポンシブデザインに対応して書かれているため、バージョン管理をしっかりしていればかなり保守しやすいです。Gulp等タスクランナーやCompassなどのSCSSを自動コンパイルする機能があるものと組み合わせると良いでしょう。
たまに色が変数を使わず生で書いてあったり、レスポンシブの設定で自由が利かないころもあったりしたので、いろいろ弄っていると負担になることもあります。

Google Fonts

Google Fontsは、言わずと知れたWebフォントを利用できるサービス。これは知っている方が多いかもしれないですね。

Webフォントを利用できるだけでなく、プレビューや比較などもできちゃいます。タイトルに使うような装飾フォントもあるので、いろいろ試してみましょう。
あれもこれも使い過ぎるとページ読み込み時間が増えてしまいますので、入れ過ぎにはご注意を。

Webフォントには他にもサービスがあるようですので、Google Fontsの中に気に入るものがなければ探してみるといい出会いがあるかもしれません。

Font Awesome

Font Awesomeも、有名なWebフォントのアイコンを使えるサービスです。利用にメールの登録が必要なのが少し面倒(になった)ですが、使うのは本当に簡単です。

ここで用意されているアイコンを使うだけで、このリンクは何を示しているのかということが一目でわかるようになります。そして、サイズ変更や重ね合わせなどの技を使えば少しは応用も利きます。

数が多いのでお目当てのものを探し出すのに苦労しますが、彩りを添える良きアイコンなので是非。

Adobe Color CC

Adode Color CCは、色を入力すると配色ルールに従い他の色を生成してくれます。
配色の方法にはいろいろと種類がありますが、これを使えば好きな色から手っ取り早く色を作ることができます。メイン色をドラッグすると他の色も自動的に変化するので見ていても綺麗です。

どの色をどこに使うのは我々次第…ではありますが、色遣いに対する心配は和らぐのではないかと思います。

好きな色が見つからない…という方は「色見本」や「~の色」で検索してみると参考になるかもしれません。私は「和色」とか「日本の色」とかで調べることが多いです。

WP Pusher

WP Pusherは、GitHubやBitbucketのリポジトリを更新する度に、テーマやプラグインをデプロイしてくれるWordPressプラグインです。
Freeで使える対象はpublicリポジトリに限られますが、WordPressのページ上で編集して管理が難しくなってしまうことや、手動でのデプロイを忘れていて更新されていなかった、という問題はほとんど解決してしまいます。

趣味のページであれば、publicリポジトリにしてしまって、見られるつもりできれいなコードを書く、更新の管理をしっかりしてデザインする、Issueで描画の不具合を報告してもらう、というのもいい方法ではないでしょうか。

Easy FancyBox

Easy FancyBoxは、記事内の画像をポップアップ表示してくれるWordPressプラグインです。私が使っているのでこれを挙げましたが、Lightboxなどなど似たプラグインがあるので、エフェクトやデザインを比べて好きなものを選ぶといいと思います。

記事にはサムネイルを使ってクリックで高解像度の画像を見られるようにする…(メディアを挿入で、「リンク先:メディアファイル」を選択)という方法がありますが、この状態では画像だけのページに移動することになります。
このタイプのプラグインを使えば、記事の上にポップアップ表示してくれます。

おわりに

この記事ではデザインに関する話題を取り上げましたが、WordPressのテーマではPHPファイルやJavaScriptファイルを編集・追加することで結構な部分の動作を変えることができます。プラグインを作ればさらに変えられます。

Webページを作ってみるといい見た目の結果を手に入れやすいので、プログラミングにまだ自信が無い方でもモチベーションを保ちトライしやすい分野だと思います(※個人の感想です)。
ページの色を変えてみることから始まり、デザインに凝ってみる、外部に情報発信してみる、PHPJavaScriptを変えて動的なページに挑戦してみる、自分でサーバーを建ててみる、ソースコード管理をしてみる、グループで作品を制作する、…と広がりのある分野でもあります。

この記事が新たな一歩のきっかけになれれば嬉しいです。