超初心者がWordPressのテーマを完成させるまでの流れを、ざっくりまとめてみました

code_compressed
Update Web制作メモ >

WordPressのテーマを作ってみようと思い立ってまず困ってしまったのは、いったい何をどんな順番でおこなえばいいのかまったく見当もつかない!ということでした。HTMLの知識もほとんどありませんでしたし、PHPにいたっては存在すら知りませんでしたし、そもそもそういった知識がどの程度必要なのかもわかっていない状態でした。

そんな超初心者ですが、このたび、ものすごくシンプルなテーマをなんとか作り終えることができましたので、テーマ完成までの流れをざっくりまとめてみることにしました。理解が正しくないところも多いかと思いますが、メモとして残しておきます。

独自ドメインの取得、レンタルサーバーの契約、WordPressのインストール

テーマを作るかどうかはともかく、WordPressでブログをはじめるのだからまずはレンタルサーバーを借りよう!と思ったのですが、独自ドメインを使用するならレンタルサーバーを契約する前にドメインを取得しておいたほうがらくちんみたい、ということがわかりました。なので、最初に独自ドメインを取得してしまいました。

いざ取得してみるとテンションあがりますね!自分の好きなドメインでURLとかメールアドレスとかを使えるようになったというだけで、ちょっとすごいことした気分でした。

独自ドメインを取得しました

さて、ここでやることはみっつです。

  • ドメイン取得サービス(例:ムームードメインお名前.comさくらのドメイン取得など)を選びます。わたしはムームードメインで独自ドメインを取得しました。契約したいレンタルサーバーと連携しているドメイン取得サービスを選ぶと、後の作業が楽になると思います。
  • ドメイン名をを決めます。(日本語ドメインというものもあるようですが、取得したことがないので詳しくはわかりません…。)
  • 必要事項を入力して申し込み、おかねをはらいます。

レンタルサーバーを契約しました

こちらも、やることはみっつです。

  • サーバーとプランを選びます。わたしは、安価で評判もいいロリポップに決め、プランは「ロリポプラン」にしました。WordPressを使えるふたつのプランのうち、安価で、容量が小さいほうのプランです。
  • 必要事項を入力して申し込み、おかねをはらいます。
  • 先ほど取得したドメインを使えるよう、設定します。ドメイン名を入力するくらいですので、難しいことはありませんでした。

WordPressをレンタルサーバーにインストールしました

サーバーによって手順は異なりますが、わたしの契約したロリポップには、ぽんぽんとクリックするだけで簡単にインストールすることができる機能がありました。他のレンタルサーバーにも同様の機能(ワンクリックインストールとか、クイックインストールとか呼ばれるもの)があることが多いみたいです。

install

参考にした記事はこちら!

以上の手順については、以下のとってもわかりやすい記事を参考にしました。このふたつの記事のおかげで、ここまでは何ひとつつまづくことなく進めることができました。感謝です!

テーマの作成とアップロード

これでWordPressを触ることができるようになりましたので、いよいよテーマの作成に取りかかります!

管理画面を開いて、ちょっとだけ下準備をしておきました

本格的に作業はじめる前に、ちょっとだけ下準備をしておくとあとでらくちんです。WordPressにログインして管理画面を開きます。

  • ブログの基本情報を入れておくといいです。内容はいつでも変更できます。

    GeneralSetting

  • 内容はなんでもいいので、記事をいくつか投稿しておくといいです。 SnapCrab NoName 201336 181436 No00
  • こちらも内容はなんでもいいので、固定ページ(サイトマップとか自己紹介とかに使うような、記事じゃないページ)をふたつくらい作っておくといいです。 SnapCrab NoName 201336 18151 No00

デザインについておおざっぱに考えてみました

テーマ作成について調べると、まずはワイヤーフレームと呼ばれる設計図を書きましょう。とか、Photoshopなどでデザイン案を作ってみましょう、といったことを教えてくれる記事をたくさん見かけました。

どうやらテーマ作りにおいては、はじめにていねいにデザインを考えておくことが非常に大切なようなのですが、わたしはとにかく早くテーマを作ってみたかったのでさぼってしまいました…。デザインについてあらかじめ考えたのは以下のことくらいです。設計っぽいことと装飾っぽいこともごちゃまぜです。

  • いきなり3カラムのデザインは難しそうなので、2カラムにする。
  • メニューはボタンみたいにしたい。
  • 全体の色はまっしろじゃなくて、うすいグレーっぽくする。
  • くすんだピンクとくすんだみどりをちょっと使う。
  • iPhoneから見ても同じようなデザインにしたい(レスポンシブという言葉は知らなかった)。

さすがにもう少し考えておくべきだったかなと思わなくもないですが、こんなんでもなんとかなるものです。

テーマの元となるHTMLファイルとCSSファイルを用意しました

必要なものはテキストエディタとブラウザ!

テーマ作成についての書籍(2冊買った)といくつかのブログを読み、まずはindex.htmlなどの名前がついているHTMLファイルと、style.cssなどの名前がついているCSSファイルが必要だということがわかりました。どうせなら勉強のために、配布されているサンプルなどを使わず自分で用意したいなあと考えたのですが、どうやって用意すればいいのかわからない!というところでストップしてしまいました。「書き方」はもちろん知らなかったわけですが、そもそも「何に」書くのかなんてことは初歩的すぎてあんまり解説されないみたいです…。

結局、テキストエディタブラウザがあればHTMLファイルとCSSファイルを作ることができるとわかりましたので、Windowで使用できるCrescent Eveというテキストエディタを用意しました。ブラウザはGoogle Chromeを使用しています。

HTML、CSS、PHPの学習

HTML、CSS、PHPの基礎的な知識を、ドットインストールで2日間かけて学習しました。結果、完全に未知の言語だったPHPなどが、難しいなあと思えるくらいには成長しましたし(成長ですよね!)、ほんとうに自分でHTMLもCSSも、ほんのちょっとのPHPも書けるようになっちゃいましたよ。すごいです。

もちろん、正確に書けているかどうかはちょっとあれですが、とりあえず動く!というくらいのテーマならほんの短期間で作れるようになるものです。超初心者さんにはぜひおすすめしたい学習サイトです。

なお、CSSだけは他のサイトも活用し、もう少し学習しました。はじめてのテーマ作成ですから骨組みはごくシンプルに仕上げてしまいましたが、ボタンつけたいー!とか、ちょっとへこんだラインをひきたいー!とかとか、そういうところはちょっと時間をかけて楽しみましたので、CSSの知識はHTML、PHPよりちょっとだけ多く身につけたかったのです。

作成したHTMLファイルをPHPファイルに書き換え、テーマフォルダにまとめました

この作業については、以下の記事を参考にしました。テーマ作成の参考としてたくさんの人が挙げている記事ですね!どちらもすてきすぎます。

必要なものは先ほどと同じテキストエディタとブラウザですが、わたしはローカル環境を構築しなかったので、この作業からFTPクライアントソフトも使いました。ローカル環境についてはこのあとにちょっと書きます。

テーマのフォルダをサーバーにアップロードしました

作成したCSSファイルとPHPファイルをフォルダに格納し、フォルダごとサーバーにアップロードすれば、テーマの完成です。管理画面の「テーマ」の中にちゃんと反映されます。

アップロードするときにはFTPクライアントソフトを使います(わたしはFileZillaを使っています)。

ローカル環境を構築せずにテーマを作成したことについてのあれこれ

PHPファイルを作成する際のオーソドックスな手法として何度も目にしたのがローカル環境の構築という言葉でした。

ですが、手順はなんだか複雑そうですし、知らない言葉がまたまたたくさん出てきますし、どうしてもやらなきゃいけないことなのかな…と、さぼることを前提に調べてみたところ、ローカル環境を構築しなくてもPHPファイルは作れるということがわかりました。

ほんとうは面倒がらずに構築してしまうのがいいと思いますが、ひとまず今回の方法や、調べてみてわかったことなどを書いてみます。

※なお、つい先日、こんなすてきな記事を見つけてしまいました…。もっと早く出会っていれば!

PHPがローカルでは動かないということについてのメモ

テーマを作成するときにはまず骨組みとなるHTMLを書きます。テキストエディタを開いて、山括弧で囲われたHTMLタグを使って、たとえばこんなふうなことを書くわけです。

<!DOCTYPE html>
<html lang="jp">
<meta charset="utf-8">
<!-- 省略 -->
<h2>みだしみだし</h2>
<p>2013年3月4日</p>
<p>テキストテキストテキストテキスト</p>
<!-- 省略 -->
</html>

書き終わったら「index.html」などの名前を付けて保存します。これが「HTMLファイルを作る」手順です(さきほども書きましたが、それすらわかっていなかったんです)。

保存したファイルをブラウザで開いてみると、表示されるべきところがちゃんと表示されていることを確認できます。アドレスバーに出ているとおり、このファイルはデスクトップに保存しています。

html example

次に、骨組みであるHTMLを、CSSを使って配置を整えたり装飾したりします。

@charset "UTF-8";
/*省略*/
h2{
color:red;
}

書き終わったら「style.css」などの名前を付けて保存します。これが「CSSファイルを作る」手順です。

このCSSを適用しますよ、というひとことをHTMLファイルに追記して、

<!DOCTYPE html>
<html lang="jp">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" media="screen">
<!-- 省略 -->
<h2>みだしみだし</h2>
<p>2013年3月4日</p>
<p>テキストテキストテキストテキスト</p>
<!-- 省略 -->
</html>

もういちどブラウザでHTMLファイルを開いてみると、ちゃんと文字が赤くなっていることが確認できます。

css example

このように、HTMLやCSSはサーバーにアップロードしなくても、ローカルに保存してあるファイルをブラウザで開いて表示される内容を確認することができるのですが、PHPはどうも違うようです。

WordPressのテーマ作成において「PHPファイルを作る」ためには、まず下記のようにHTMLの中身の一部をPHPタグで囲われたコードに置き換えます。

下記の例では、さきほど「2013年3月4日」と表示させていた箇所を「日付を表示してね」というコードに置き換えています。

<!DOCTYPE html>
<html lang="jp">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" media="screen">
<!-- 省略 -->
<h2>みだしみだし</h2>
<p><?php the_time('Y年m月d日') ;?>←表示されない</p>
<p>テキストテキストテキストテキスト</p>
<!-- 省略 -->
</html>

そして「index.php」などの名前を付けて、保存します。これが「PHPファイルを作る」手順です。

手順としてはHTMLファイルやCSSファイルを作るのとそれほど変わらない感じですが、ブラウザで開いてみると「日付を表示してね」の指示が無視され、何も表示されていないのがわかります。

php example2

これが、PHPはローカルでは動かないとか、PHPはサーバーサイドスクリプト言語であるということのごく簡単な意味かな、と解釈しました。

したがって、PHPファイルを開いて表示される内容を確認するためには、ローカルに保存してあるだけのファイルをちゃんと表示できるような環境をつくるか(これがローカル環境の構築)、サーバーにアップロードしてしまうか、いずれかの方法をとる必要があります。

ローカル環境を構築したほうがいいみたい、ということについてのメモ

決まりにそって書かれたindex.phpstyle.cssをフォルダに格納してサーバーにアップロードすれば、未完成ながら「テーマ」としては認識されるようになります。

なので、アップロードしたテーマを自分のブログで有効化して、ブラウザで自分のURLにアクセスすればちゃんと表示されますし、もちろんファイルの追加や修正をすることも可能です。いくつか画像をのせてみますね。

フォルダに必要最低限のファイルを格納してアップロードすれば、

Folder example 2 Folder example

テーマとして認識されます。これを有効化して自分のURLにアクセスすると、

Theme example 2 600x348

ちゃんと日付のところが表示されていますよね!PHPが動いています。

Theme example 4

管理画面から修正もできます。

Theme example 3 600x242

これで問題なくテーマを作成できるような気がするのですが、通常はローカル環境を構築することが推奨されています。今回、ファイルを逐一サーバーにアップロードしながらテーマを作成してみてわかったことを、いくつか書いてみます。

  • ローカル環境を構築せず、上記のような方法をとる場合、PHPファイルを確認するときにいつもインターネット環境が必要です。ローカル環境を構築してテーマを作成すれば、最終的に完成したものをアップロードするまではインターネットなしでも作業できるようです。わたしは自宅でしか作業をしなかったため特に問題ありませんでしたが、いつでもどこでも作業できるほうがうれしいですよね。
  • カラフルで見やすくに表示されるテキストエディタと比べ、管理画面でファイルを開いてみると、コードがちょっと見づらいのです。テキストエディタを使ってコーディングするなら、修正のたびにアップロードする手間がかかります。今回、テーマを作ること自体がはじめてだったので、管理画面での操作には慣れてしまいました。ですが、コードがそれほど長くない(そんなにいろいろな機能がない)このテーマだから耐えられただけで、複雑なテーマを作れるようになったらそれなりにコードも長くなるでしょうし、そうなったら今回の作り方では不便を感じるかもしれません。
  • ブログを読みにきてくれた人に未完成のテーマを見せることになってしまいます。すでに読者のいるサイトをリニューアルする場合、これは大きなデメリットになるかと思います。もちろん読者はいませんので、今回は気にしませんでした。なお、リニューアルなどの際には「Theme Test Drive」というプラグインを使うと便利みたいです。

インストールして試しにちょっと使ってみました。ログインしている状態でのみ作成中のテーマで表示されることがちゃんと確認できました!

さいごに

ざっくり、の割にはずいぶん長くなってしまいましたが、以上がWordPressのテーマを完成させるまでの流れです。

シンプルすぎますし、ファビコンないですし(ほしい!)、PCとiPhone以外のデバイスからの見た目を考慮できていませんし、開くまでにちょっと時間がかかることも気になっているのですが、それでも自分で作ったテーマにはとても愛着わきます。

テーマ作成については、これからもちょこちょこメモを残していこうと思っています。もうすこし簡潔に。。。