WordPressの初期テーマの確認とゼロからのテーマを作成方法｜WordPressでビジネスサイトをつくろう【第5回】

前回までにWordPressの設定する内容についてまとめてきましたが、ここから実際にゼロからビジネスサイトを作成する際に行う「テーマ」の作成やアップロード方法などを見ていきたいと思います。

ブログなどで日記的な記事を書く場合などは、ゼロから作成しないでも自分の好みの「テーマ」をインストールすればすぐブログを書くことができますが、ビジネスサイトはブログのように一つのフォーマットで記事が書けるということはなく、それぞれのサイト毎に載せたい内容がありますので、ゼロからの作成方法を覚えた方が効率よく作成することができますし、別のサイトやオリジナルブログの作成でも一度作ると次から簡単に作成できますので是非覚えていきましょう。

WordPressの「テーマ」とは？

WordPressにおいてのテーマとは、テンプレートファイルと呼ばれる複数のphpファイルとスタイルシート（style.css）からなり、それにレイアウト用の画像やjavascriptのjsファイルなどを格納したものになります。

テーマにはブログフォーマットだけでなく、通常サイトのフォーマットなど、さまざままものが有料・無料共に海外サイトなどで配布されています。

初めからクオリティの高いテーマが無料で使えるというのもWordPressの人気のひとつでもありますが、少し内容をアレンジして使おうとした際に、どこを修正するのか？どのように投稿すればテーマどおりの動きをするのか？など初めての人は迷う部分がたくさんありますので、見た目が気に入ったテーマもなかなか使いこなすことができない場合があります。

WordPress3.xのデフォルトのテーマである「Twenty Ten」「Twenty Eleven」もブログというよりは通常サイトの構成を意識したテーマとなっておりますが、初めてWordPressに触る人がゼロからこのテーマを理解するのはなかなか難しいです。

WordPressを使いこなすためには、初めは時間がかかるかもしれませんが、テンプレートファイルの種類と使い方を理解して、テンプレートタグを覚えて、ゼロからテーマを作り、ページを作成してく形でまずは基本の使い方を覚えるのがよいと思います。

またコーポレートサイトなどの場合はブログのようにフォーマットがひとつというわけではなく、ページ毎に違うフォーマットが複数ありますので、それらをどのように分けて使っていくのかなどのサイト設計の考え方は通常のサイト設計＋CMSを意識したサイト設計が必要になります。これらは制作者がそれぞれカスタマイズしていくので公開されているテーマファイルも作り方がさまざまありますので難しいものもあります。

WordPressのデフォルトのテーマ

自分のインストールしたWordPressのURLをブラウザで見るとデフォルトのテーマでページが表示されます。

※WordPressのバージョンにより『Twenty Eleven』『Twenty Ten』など若干テーマが変わります。

「自分が今どのテーマを使用しているか？」や「テーマの切り替え」をするには、
左側の『外観』→『テーマ』をクリックすることで見ることができます。

※クリックして大きな画像をみる

テーマの中のファイルと記述の確認方法

まずデフォルトでインストールされているテーマから、どのようなファイル構成でどのような記述をしているのかを見てみます。

テーマに使用されている情報を見るには『外観』→『テーマ編集』をクリックします。

クリックすると右側にそのファイルで使用しているファイルと左側の選択したファイルの中身を見る画面があります。

※クリックして大きな画像をみる

ここで記述を変更することで、コードの修正をすることができますが、一つ注意しなければいけないことがあります。

他のソフトやFTPソフトなどでアップロードしないでも修正が出来るのは便利なのですが、修正の際に記述ミスなどをすると内容によってはWordPressの管理画面が真っ白になってなにもできなくなってしまう場合があります。

WordPress初心者の人はそこでなにもできなくなってしまい、ゼロからインストールしなおしたり、挫折してしまう人が多くいます。

ですのでサイト製作時にはローカル環境で構築したものをFTPソフトでアップロードしていく形でローカルにバックアップを持つ形で作成していくほうが良いでしょう。

特に複雑なサイトを作成する場合は一度静的にHTMLでページのデザインを完成させてからWordPressのタグを埋め込むなどして構築していく方法をおすすめします。

そうすることによって仮にアップロード時にミスがあり、破損した場合でもローカル側から取り消しをして間違う前の段階まで戻りエラーを回避することなどができますので安心です。

またどちらにせよ、新規のテーマをアップロードする際にはFTPソフトなどが必要ですので、ゼロからビジネスサイトを構築する場合はこちらの方法で行いましょう。

また書籍『WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作』の方でもサイト構築する前に知っておきたいことや基本設定などをまとめております。

WordPressでコードを修正する方法

WordPressでの修正は他のソフトの使用がないので楽ですが間違えた際に復旧が難しくなるので注意が必要です。

WordPressに新しいテーマをアップロードする

それでは、ゼロからビジネスサイトを作るために、インストールしたWordPress内に新しいテーマをアップロードしてみます。

テーマのアップロード場所は決まっておりますので簡単です。

オリジナルテーマの作成ではまず任意の名前のフォルダを作成します。

サンプルとして「xxxcompany」という名前のフォルダを作ります。

この中に最低限入れるファイルがあり、「index.php」と「style.css」の2つのファイルと、テーマ用のサムネイル画像を作成します。

画像サイズは「300×225」ピクセルのサイズで作成します。画像の名前は、
「screenshot」とつけて拡張子を「PNG・JPEG・GIF」の3種類から選びます。

「index.php」は空のファイルで何も記述しなくても大丈夫ですが、
「style.css」には下記のようにテーマの説明を記述をします。

これらをご自身のインストールしたWordPressの場所にFTPソフト（FFFTPなど）でアクセスしてアップロードさせます。

テーマフォルダのアップロード場所

作成した「xxxcompany」テーマフォルダをWordPressのインストール場所にある「wp-content」フォルダ内の「themes」フォルダの中に作成したテーマフォルダをFTPソフトを使用してアップロードします。

WordPressのテーマを切り替える

アップロードしたテーマに切り替えます。

管理画面の[外観 → テーマ]から現在使用できるテーマが一覧で表示されます。先ほどアップロードしたテーマ「xxxcompany」のサムネイル下の「有効化」をクリックしてテーマを切り替えます。

空のファイルに置き換わりましたので、先ほど確認したURLを見てみると真っ白になり、なにも表示されなくなりますが問題ありません。

このように一度なにもない状態にしてゼロからサイトを作成していく形になります。

ゼロから作成に不安に思えるかもしれませんが、はじめに基本をやりながら行うと思った以上に簡単に構築することができます。

今回までで、ビジネスサイト構築前の設定は終了になります。

これでサイト構築のイメージがわかったので、すぐに作り始めたいという方は是非書籍の方で作ってみてください。

書籍では初歩的な部分から一切のコードの省略はなくすべてのコードを紙面に掲載しているので省略されてわからないということなく進めていけます。

ブログの方に書籍の内容についての説明もありますので是非WordPressでビジネスサイトを作ってみてください。

書籍の詳しい内容を見る

次回はこの真っ白な状態からWordPressの基本のタグの書き方などを学び、自分のWordPressのサイト情報を取得するbloginfoタグを使ってWordPressの仕組みをすこしづつ勉強していきます。