Webサイトのお困りごとはこちらへ

WordPressの自作テーマを作る練習にはブランクテーマがおすすめ【Underscores】

ハシビィくん

WordPressの自作テーマを作ってみたいっす!

カピーさん

自作テーマは自由に組むことができるから実務向けだし学ぶべきだな。ただいきなり0から取り組むにはハードルが高いな。

ハシビィくん

何か良い方法でもあるんですか?

カピーさん

もちろん!実務でも使うことのある「ブランクテーマ」を使った自作テーマの作り方を紹介しよう。

目次

WordPressの理解を深めるのにもブランクテーマはおすすめ

今までWordPressの無料・有料テーマを利用してきた人には耳馴染みのない単語かと思います。

WordPressのテーマは、全てを自分の手で作ることができます。しかし、0から作り上げるのは結構大変。

そこでブランクテーマ(スターターテーマ)を活用するのがおすすめです。

このブランクテーマは何も装飾がされていないまっさらテーマとなっております。

しかし中身が空っぽというわけではなく、WordPressを構成する必要最低限のファイルやコードが記載されているのです。

このベースからカスタマイズすることができるので、準備をブランクテーマに任せるイメージとなります。

カピーさん

実務的に考えると、初動の準備をブランクテーマに任せるという訳だ。

ブランクテーマをダウンロードしよう

本記事では「Underscores」というテーマをダウンロードしていきます。

Underscoresは余分な装飾がないので、カスタマイズがしやすいので私も使うことがあるテーマです。

またUnderscoresはWordPress開発に携わるAutomattic社が提供しているテーマなので、安心して使えるというの嬉しいポイントです。

ダウンロードは上記リンクのページのフォームに「CREATE YOUR UNDERSCORES BASED THEME 」にテーマ名を入力し、「GENERATE」をクリックするとZipファイルのダウンロードが始まります。

また後述する「style.css」への記述を簡単に終わらせたいという場合は、ダウンロード時に項目を入力することで、入力された状態でダウンロードすることも可能です。

Underscoresダウンロード画面

「Theme Name」にテーマ名を入力します。この項目のみが必須となります。
その他の項目は任意ですので、必要に応じて入力するようにしてください。

「Theme Slug」はテーマに関するスラッグを入力。
「Autor」はテーマの制作者名を入力。
「Autor URl」はテーマ制作者のWebサイトを入力。
「Description」はテーマの説明を入力。

「WooCommerce bolierplate」「_sassify!」の項目は使う場合があればチェックを付けてください。
基本的な利用ではチェックは付けなくても大丈夫です。

ブランクテーマをカスタマイズ

ブランクテーマをカスタマイズするには、大きく分けて以下の作業が必要になります。

  • 上記のファイルを元にカスタマイズ
  • 新規ファイルを作成

基本的にはHTML/CSS、JavaScriptやPHPを記述していく形になります。

style.css

前述したダウンロード時に入力していない場合は、「style.css」に記述して変更させることができます。

/*
Theme Name: テーマの名前(必須)
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前
Version: テーマのバージョン
Tags: テーマの特徴を表すタグ(カンマ区切り/オプション)
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/

「Theme Name」は必須項目ですので、案件に適した名前を付けるのがベストです。

まとめ:ブランクテーマはWordPress理解を加速させる

最後に『WordPressの自作テーマを作る練習にはブランクテーマがおすすめ』に関する結論を。

  • WordPressを構成するファイルを学ぶことができる
  • ベースとなる各プログラミング知識は必要
この記事をシェアする
目次