WordPressテーマを自作しよう！まずは基本をおさえる

前回までに２つの無償テーマをカスタマイズしながら試してみましたが、いずれもあまり満足の行くものではありませんでした。この先、更に違うテーマを探し続けてもいいのですが、せっかくHTMLやCSS, PHPの知識もあるので、どうせなら自分の気に入るデザインになるようにテーマを自作しようかなと。

とは言っても、何から始めていいか悩みますが、ネットでいろいろ調べてもいきなりそれなりのデザインに一気に仕上げるようなサイトばかりで、要素要素でどのような役割があるのかよくわかりませんでした。なので、まずは最小単位のファイル構成で、どのような役割なのか基本を押さえておこうと思います。

作ったファイルは３つ。index.php, style.css, screenshot.png の3個だけ。test1という名前のフォルダ内に入れてあります。

index.php, style.cssはファイルの中はとりあえず空っぽです。ただし、style.cssの中は以下のコメントアウトが入っています。コメントアウト部分ですが、WordPress側が認識してダッシュボード上で現れるので重要な部分です。

/*
Theme Name: WordPressテーマのテスト
Theme URI: http://
Description: これはWordPressのテーマを作るためのテストです。
Version: 0.01
Author: Satoshi
Author URI: http://pineplanter.moo.jp/non-it-salaryman/
Tags: WordPress
*/

Theme Name:	テーマのタイトル
Theme URI:	テーマのWebサイトのURL
Description:	テーマの説明
Version:	バージョン
Author:	作者
Author URI:	作者のWebサイトのURL
Tags:	タグ

 

FFFTPなどのFTPソフトを使ってWordPressにアップロードします。アップロード先は「(自分のWordPressフォルダ)－wp-content－themes」の中です。すでにインストール済みのテーマのフォルダが入っていると思います。

 

次に、index.php, style.cssのパーミッションを「755」に変更します。これはダッシュボード上で編集できるようにするためです。

 

ダッシュボードから「外観－テーマ」をクリックして覗いてみると、たしかにアップロードした自作テーマが存在しています。先ほどのscreenshot.png の画像がこのように見えるわけです。

 

クリックすると、以下のような画面が現れます。 style.cssで書いたコメント部分を認識して以下のように現れるわけです。ちなみにこの段階で有効化しないよう注意しましょう。まだファイルの中身が空っぽなので。

 

これから、中身を実装していくわけですが、まずはレスポンスデザインを勉強しないと。ドットインストールで勉強するのと、最新の書籍は買っておこうと思います。

 

 - WordPress