テーマの最小構成〜フルスクラッチでWordPressテーマを開発するプロジェクト(1)

1日の時間割を作るようになってから、少しずつ日々の活動が効率化できるようになってきた気がします!(参照:日常生活のスケジュールを時間割として考えてみたらいい感じだった件

昨日宣言した、「『マイWordPressテーマ』の作成をちょっとずつ進めるよー」というプロジェクトをさっそく始めました!(プロジェクトを始めることにした経緯はこちらを参照:ブログをSSL対応したら自分でテーマを作りたくなった話

WordPressのテーマとは?〜テーマ開発の要件

では、さっそく「テーマ」を開発していきましょう!

そのまえに、まずWordPressの「テーマ」とは何か。

別のブログシステムでは「テンプレート」などとよばれていることもあります。WordPressブログでは、さまざまな「テーマ」があり、テーマを切り替えることで、ブログの見た目が変わります。

こうした、ブログのデザインほか、様々な機能を提供するひとまとまりのファイル群をWordPressでは「テーマ」と呼んでいます。

テーマを作成するには、下記の知識が必要です。

  1. HTML
  2. CSS
  3. PHP
  4. Javascript ( optional )

参考サイト

WordPressは、全世界に広く普及しているので、ネット上にも書籍にも、さまざまな情報があります。当ブログでは、公式サイトのテーマ制作に関する部分を、おもに参考にしていきたいと思っています。

日本語公式↓

ハンドブック(チュートリアル)

テーマの最小構成ファイル

テーマを開発するのに必ず必要になるファイル(最小構成ファイル)は以下の2つのファイルのみです。

  1. style.css
  2. index.php

というわけで、この2つから作っていくことにします。

ファイルを配置する場所は、インストールしたWordPressのフォルダの中にある

/wp-content/themes

この中に、自分の作りたいテーマ名のフォルダを作成し、これから開発するテーマはその中に入れていきます。わたしはテーマ名を「geecrat」にしたいので

/wp-content/themes/geecrat

となります。

作業001.スタイルシートの定義を書く

スタイルシート(style.css)の最初には、まず作成するテーマの情報を書きます。

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

こんな感じのやつ。

テーマ名や作者、URLなどを書きます。

配布しないのであればライセンス以下についてはさほど気にしなくていいのかな?

本日の作業予定と進捗

ローカル開発環境(自分のmac)に、ワードプレスはインストールしてあったので、そこにテーマファイルを作って、style.cssを配置し、上記の記載をします(このブログを投稿してからやる予定)。所要時間5〜15分を目標にします。

所感

時間割を作ってブログを書くようにしたら、なんとか更新できるようになりました。

プロジェクトを進めるというやり方で、迷わずにネタをひろえるようにもなりました。

ただ、プロジェクト的に、「遅れてきて、やばいな」というネーム大賞企画については、なかなか進みません!!うっ!!

なんとか手を打ちたいなあ。