第5回 WordPressの初期テーマの確認とゼロからのテーマを作成方法
前回までにWordPressの設定する内容についてまとめてきましたが、ここから実際にゼロからビジネスサイトを作成する際に行う「テーマ」の作成やアップロード方法などを見ていきたいと思います。
ブログなどで日記的な記事を書く場合などは、自分好みの「テーマ」をインストールすればすぐにブログをはじめることができますが、ビジネスサイトはブログのようにひとつのフォーマットで記事が書けるということはありません。それぞれのサイト毎に載せたい内容が違いますので、ゼロから作成する方法を覚えた方が効率よく作ることができます。別のサイトやオリジナルブログの作成でも一度作ってしまえば、次から簡単に作成できるので、ぜひ覚えていきましょう。
解説：（有）ムーニーワークス ハヤシユタカ
ブログなどで日記的な記事を書く場合などは、自分好みの「テーマ」をインストールすればすぐにブログをはじめることができますが、ビジネスサイトはブログのようにひとつのフォーマットで記事が書けるということはありません。それぞれのサイト毎に載せたい内容が違いますので、ゼロから作成する方法を覚えた方が効率よく作ることができます。別のサイトやオリジナルブログの作成でも一度作ってしまえば、次から簡単に作成できるので、ぜひ覚えていきましょう。
解説：（有）ムーニーワークス ハヤシユタカ
●WordPressの「テーマ」とは？
WordPressにおいてのテーマとは、テンプレートファイルと呼ばれる複数のphpファイルとスタイルシート（style.css）からなり、それにレイアウト用の画像やjavascriptのjsファイルなどを格納したものになります。
テーマにはブログフォーマットだけでなく、通常サイトのフォーマットなど、さまざままものが有料・無料共に海外サイトなどで配布されています。
初めからクオリティの高いテーマが無料で使えるというのもWordPressの人気のひとつでもありますが、少し内容をアレンジして使おうとした際に、どこを修正するのか？ どのように投稿すればテーマどおりの動きをするのか？ など初めての人は迷う部分がたくさんありますので、見た目が気に入ったテーマもなかなか使いこなすことができない場合があります。
WordPress3.xのデフォルトのテーマである「Twenty Ten」「Twenty Eleven」もブログというよりは通常サイトの構成を意識したテーマとなっておりますが、初めてWordPressに触る人がゼロからこのテーマを理解するのはなかなか難しいです。
WordPressを使いこなすためには、初めは時間がかかるかもしれませんが、テンプレートファイルの種類と使い方を理解し、テンプレートタグを覚えて、ゼロからテーマを作り、ページを作成してく形でまずは基本の使い方を覚えるのがよいと思います。
また、コーポレートサイトなどの場合はブログのようにフォーマットがひとつというわけではなく、ページ毎に違うフォーマットが複数あります。それらをどのように分けて使っていくのかなどのサイト設計の考え方は通常のサイト設計＋CMSを意識したサイト設計が必要になります。これらは制作者がそれぞれカスタマイズしていくため、公開されているテーマファイルも作り方が様々で難しいものもあります。
テーマにはブログフォーマットだけでなく、通常サイトのフォーマットなど、さまざままものが有料・無料共に海外サイトなどで配布されています。
初めからクオリティの高いテーマが無料で使えるというのもWordPressの人気のひとつでもありますが、少し内容をアレンジして使おうとした際に、どこを修正するのか？ どのように投稿すればテーマどおりの動きをするのか？ など初めての人は迷う部分がたくさんありますので、見た目が気に入ったテーマもなかなか使いこなすことができない場合があります。
WordPress3.xのデフォルトのテーマである「Twenty Ten」「Twenty Eleven」もブログというよりは通常サイトの構成を意識したテーマとなっておりますが、初めてWordPressに触る人がゼロからこのテーマを理解するのはなかなか難しいです。
WordPressを使いこなすためには、初めは時間がかかるかもしれませんが、テンプレートファイルの種類と使い方を理解し、テンプレートタグを覚えて、ゼロからテーマを作り、ページを作成してく形でまずは基本の使い方を覚えるのがよいと思います。
また、コーポレートサイトなどの場合はブログのようにフォーマットがひとつというわけではなく、ページ毎に違うフォーマットが複数あります。それらをどのように分けて使っていくのかなどのサイト設計の考え方は通常のサイト設計＋CMSを意識したサイト設計が必要になります。これらは制作者がそれぞれカスタマイズしていくため、公開されているテーマファイルも作り方が様々で難しいものもあります。
●WordPressのデフォルトのテーマ
自分のインストールしたWordPressのURLをブラウザで見るとデフォルトのテーマでページが表示されます。
※WordPressのverにより『Twenty Eleven』『Twenty Ten』など若干テーマが変わります
※WordPressのverにより『Twenty Eleven』『Twenty Ten』など若干テーマが変わります
デフォルトのテーマでサイトを見た状態 ※サンプル記事が投稿された状態です
（▲クリックして拡大）
「自分が今どのテーマを使用しているか？」や「テーマの切り替え」をするには、左側の『外観』→『テーマ』をクリックすることで見ることができます。
テーマの数はご使用のレンタルサーバーによっては、はじめから多くインストールされている場合もあります
（▲クリックして拡大）
●テーマの中のファイルと記述の確認方法
まずデフォルトでインストールされているテーマから、どのようなファイル構成でどのような記述をしているのかを見てみます。テーマに使用されている情報を見るには『外観』→『テーマ編集』をクリックします。クリックすると右側にそのファイルで使用しているファイルと左側の選択したファイルの中身を見る画面があります。
WordPress内で直接コードを書くことができます （▲クリックして拡大）
ここで記述を変更することで、コードの修正をすることができますが、ひとつ注意しなければいけないことがあります。
他のソフトやFTPソフトなどでアップロードしないでも修正が出来るのは便利なのですが、修正の際に記述ミスなどをすると内容によってはWordPressの管理画面が真っ白になってなにもできなくなってしまう場合があります。WordPress初心者の人はそこでなにもできなくなってしまい、ゼロからインストールしなおしたり、挫折してしまう人が多くいます。
ですので、サイト制作時にはローカル環境で構築したものをFTPソフトでアップロードしていく形でローカルにバックアップを持つ形で作成していくほうが良いでしょう。
特に複雑なサイトを作成する場合は、一度静的にHTMLでページのデザインを完成させてからWordPressのタグを埋め込むなどして構築していく方法がおすすめです。
そうすることによって仮にアップロード時にミスがあり、破損した場合でもローカル側から取り消しをして間違う前の段階まで戻りエラーを回避することなどができるので安心です。またどちらにせよ、新規のテーマをアップロードする際にはFTPソフトなどが必要ですのでゼロからビジネスサイトを構築する場合はこちらの方法で行いましょう。
また書籍『WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作』の方でもサイト構築する前に知っておきたいことや基本設定などをまとめております。
他のソフトや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種類から選びます。 |
古いverのWordPressではこの記述がないと認識しない
場合もあるので記述しましょう （▲クリックして拡大）
「index.php」は空のファイルで何も記述しなくても大丈夫ですが、「style.css」には下記のようにテーマの説明を記述をします。
これらをご自身のインストールしたWordPressの場所にFTPソフト（FFFTPなど）でアクセスしてアップロードさせます。
これらをご自身のインストールしたWordPressの場所にFTPソフト（FFFTPなど）でアクセスしてアップロードさせます。
●テーマフォルダのアップロード場所
作成した「xxxcompany」テーマフォルダをWordPressのインストール場所にある「wp-content」フォルダ内の「themes」フォルダの中に作成したテーマフォルダをFTPソフトを使用してアップロードします。
インストールした場所がわからない場合はお使いのレンタルサーバーなどに問い合わせて確認します
（▲クリックして拡大）
●WordPressのテーマを切り替える
ここでアップロードしたテーマに切り替えます。管理画面の[外観 → テーマ]から現在使用できるテーマが一覧で表示されます。先ほどアップロードしたテーマ「xxxcompany」のサムネイル下の「有効化」をクリックしてテーマを切り替えます。
「themes」フォルダ以外にアップロードすると一覧に表示されません
（▲クリックして拡大）
空のファイルに置き換わりましたので、先ほど確認したURLを見てみると真っ白になり、なにも表示されなくなりますが問題ありません。このように一度なにもない状態で作成していく形になります。ゼロから作成に不安に思えるかもしれませんが、はじめに基本をやりながら行うと思った以上に簡単に構築することができます。
以上になります。
以上になります。
今回でビジネスサイト構築前の設定は終了です。
これでサイト構築のイメージが理解できたと思いますので、すぐに作り始めたいという方は是非書籍の方で作ってみてください。書籍では初歩的な部分から一切のコードの省略はなくすべてのコードを紙面に掲載しているので省略されてわからないということなく進めていけます。
また、ブログの方に書籍の内容についての説明もありますので、是非WordPressでビジネスサイトを作ってみてください。
url: http://www.html5-memo.com/other/wordpress-book/
次回は、この真っ白な状態からWordPressの基本のタグの書き方などを学び、自分のWordPressのサイト情報を取得するbloginfoタグを使ってWordPressの仕組みをすこしづつ勉強していきます。
これでサイト構築のイメージが理解できたと思いますので、すぐに作り始めたいという方は是非書籍の方で作ってみてください。書籍では初歩的な部分から一切のコードの省略はなくすべてのコードを紙面に掲載しているので省略されてわからないということなく進めていけます。
また、ブログの方に書籍の内容についての説明もありますので、是非WordPressでビジネスサイトを作ってみてください。
url: http://www.html5-memo.com/other/wordpress-book/
次回は、この真っ白な状態からWordPressの基本のタグの書き方などを学び、自分のWordPressのサイト情報を取得するbloginfoタグを使ってWordPressの仕組みをすこしづつ勉強していきます。
●本連載で使用しているサンプルサイトをゼロから作成できる書籍
本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサイトを構築する手法をステップ・バイ・ステップ形式で解説しています。作成するサンプルサイトには、ニュースページ、製品情報ページ、会社概要ページ、お問い合せフォームといったクライアントワークに欠かせない要素が盛り込まれています。
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
Profile
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile：http://jquerymobile-memo.co/
【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile：http://jquerymobile-memo.co/
【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)
