誰かに見てもらうための、簡単なデザイン

これからホームページ制作に携わりたい人向きのWordPressの説明(実際の構築編)

前回の「知識はないけどこれからホームページ制作に携わりたい人向きのWordPressの説明(導入の検討編)」の続きです。
更新がすっかり遅くなってしまったのですが…(;´Д`)。

前回はWordPressはどのようなものか、メリットとデメリットなどを中心に説明しましたが、今回はWordPressでホームページを構築する時の実際の流れを説明していきます。
構築する時は、自分でオリジナルのデザインを作るのであればDreamweaverなどのホームページ制作用ソフトやHTML、CSSの知識が要りますが、それらがなくてもできますし、この説明ではソフトの使い方などの詳しいことを省いて、手順と仕組みだけ説明していきます。

使う前段階…WordPressを始めるにはどういった手順を踏むのか、構築するために何が必要かという流れを分かっていただけたらと思います(^^)。

11_wordpressmaking_02

 

WordPressを始めるために必要なもの

  • ・最新のWordPress(http://ja.wordpress.org/でダウンロードします)
  • ・PHPとMySQL(データベース)に対応したサーバー
  • ・独自ドメイン(自分の好きなホームページのアドレス)でするなら、ドメインを取得する必要があります。ドメインの取得はムームードメインお名前.comなどが有名です。
  • ・FTPソフト。ファイルを自分のパソコンからサーバーにアップロードするためのソフトです。WindowsではFFFTP、MacではFilezillaが有名です。

11_wordpressmaking_06

前回の記事で、WordPressはPHPという言語でできているので、PHPに対応したサーバーを使ってくださいね、という話をしたのですが、WordPressはMySQLというデータベースも使って動いています。なので、MySQLにも対応したサーバーが必要です。
これだけあれば、まず始めることはできます。

WordPressをサーバーにインストールする

まずはWordPressをサーバーにインストールします。やり方は簡単です。ダウンロードしたWordPress本体を解凍し、解凍後に出来たフォルダをそのまま全部サーバーにアップロードするだけ!このアップロード作業にFTPソフトを使います。
11_wordpressmaking_10
最近はレンタルサーバーなどに「WordPressかんたんインストール機能」なるものがついていることが多く、それを使えばFTPソフトを使用しなくてもWordPressをインストールすることができます。

インストールしたら、先ほどアップロードしたフォルダにアクセスします。
上の画像の例で言うと、http://自分のホームページのアドレス/wordpress/とブラウザのアドレスバーに入力すればアクセスできます。
するとWordPressの設定画面が表示されますので、サーバーを契約した際に教えられた設定やパスワード等を入力すれば、WordPressが始められます。

WordPressのインストールについては、こちらの記事で詳しく説明されています。
WordPressインストール・超初心者向け – unpco

インストールすると、こんな画面になります。

dashboardimg

この画面からデザインや機能などの設定を行っていきます。

作り方は2種類ある

WordPressでホームページを作るためには、まず全体のデザイン(テーマ、と呼ばれています)を決めなければいけません。これは後から変更もできます。

テーマは、

  • ・あらかじめ用意されているものを使う
  • ・自分で作る

の2種類あります。
自分で作ったデザインでホームページを始めたいのであれば、

  • ・HTML、CSSの知識
  • ・Photoshopなどの画像処理ソフト
  • ・Dreamweaver、ホームページビルダーなどのホームページ制作ソフトかテキストエディタ
  • ・WordPressの「テンプレートタグ」が載っている本
    (エビスコム著の「Wordpressレッスンブック」が有名です。また、WordPress公式オンラインマニュアル「テンプレートタグ – WordPress Codex 日本語版」にも載っています。最初にやるなら本の方が分かりやすいかも…です(^_^;))

も加えて必要になってきます。ホームページを作ったことのある方ならお馴染みのものばかりだと思います。
この2つの方法でやる構築の手順を順番に見ていきます。

あらかじめ用意されているテーマを使う

これはすぐに始められて、自分で一から作らなくてもできるやり方です。
Dreamweaverなどのホームページ制作ソフトはあればいいですが、なくても大丈夫です。
WordPressには「テーマ」という、ホームページのデザインテンプレートなるものが世界各国で配布されています。無料のものもあります。テーマはWordPressの設定画面(ダッシュボード、といいます)の《外観→テーマ》からダウンロードしたり設定したりできます。

11_wordpressmaking_13

ここでは、WordPressをインストールしたら最初から入っている「Twenty Twelve」というテーマを使って、何ができるかを見ていきます。
「カスタマイズ」をクリックすると…

デザインの編集

11_wordpressmaking_17

こんな画面になります。左側のメニューから、ホームページのタイトルや背景の色、トップページの画像などを変更したりできます。

記事の編集

11_wordpressmaking_20

記事の編集は「固定ページ」や「投稿」から行います。
HTMLやCSSで記述する必要はなく、Wordなどで文書を打つ感覚で文字を打って、「メディアを追加」ボタンから画像を挿入して、ページを保存すると、更新がページに反映されます。
ここからページを増やしたりなどの操作もできます。

既存のテーマからホームページを作る場合は、こうやってページを作っていきます。
あまり複雑なことはできないのですが、オシャレなテーマが沢山配布されていますし、ホームページに関する知識などもほとんどいらないので、Web制作にあまり詳しくない方でも簡単に運営することができます。

子テーマもあるよ!

また、使用しているテーマを元に、自分で書いたCSSファイルを読み込んでデザインなどをカスタムしていく「子テーマ」という使い方もできます。
自分の理想に近いテーマがあって、それを少し変えたいとか、一から作るのが面倒だけど、自分の好みは反映したいとか、そういったものがあるなら子テーマで構築しても良いと思います。
子テーマに必要なのは基本的にCSSのみです。CSSはデザイン担当の文書です。自分の作ったCSSを読み込むことで、元のテーマの機能はそのままに、デザインだけを自由に変更できるってことですね。なので、CSSとHTMLの知識は必要になってきます。

子テーマに関してはこちらのブログで丁寧に解説されています。
子テーマやカスタマイズの基本の基本についてちょっとおさらいしてみる | Webourgeon

自分でテーマを作る

HTMLやCSSが分かる人であれば、自分でデザインをしたものをベースに、そこにWordPressの機能を取り込んで作っていく…という方法もあります。
画像なども作らないといけないので、Photoshopなどの画像処理ソフトもあれば便利です。また、ページを組み立てるためにDreamweaverなどのホームページ制作ソフトも使います。

まずはデザインする

通常のホームページ制作と同じ流れなのですが、まずはデザインをします。
モックアップっていうんですね…完成したページをそっくりそのまま目指して、Photoshopなどでデザインしていきます。

kandezascreenps

これは私のブログのトップページですが、こうやって本物そっくりにデザインした後…

kandezascreenpsslice

使う画像をパーツごとに切り分けて、それぞれ別々に保存していきます(スライス作業)。

11_wordpressmaking_23

パーツができました!これをHTMLで組み立てていきます。この辺はWordPressじゃないホームページを作る時と一緒の手順ですね!

コーディングする

パーツができたら、HTMLとCSSを使ってページを組み立てていきます。Dreamweaverやホームページビルダー、MacならCodaなどのホームページ制作ソフト(テキストエディタ)を使用します。

headerphpcoda

画面はCodaのものです。こんな風にアルファベットの羅列を書いていきます。私はこれが苦手でもう…(´・ω:;.:…。
通常のホームページと同じようにコードを書いていけばいいのですが、ちょっとだけ違うところがあります。
WordPress独自の「テンプレートタグ」を使って「パーツテンプレート」を作る、というやり方で進めていきます。

テンプレートタグ?

テンプレートタグとは、WordPress独自のPHP構文です。この構文は定型文なので、ホームページを作る時にコピペして入れていきます。PHPが分かる人なら構文をカスタマイズすることができますが、カスタムしなくても十分使えます。なのでPHPが分からない人はコピペで!
テンプレートタグを使うことによって、ホームページに必要な情報を呼び出して表示してくれます。

例えば、一般設定でできる様々な設定項目。これらに書き込んだ内容をPHP構文で呼び出してくることができます。

11_wordpressmaking_26

オレンジの吹き出し内に書いたPHP構文がテンプレートタグになります。これをHTML文書内に書き込むと、ブラウザで表示された時に、PHP構文がサイトのタイトルやキャッチフレーズに置き換わります。
PHPはページにアクセスされた時に働き、その時の情報を取得してページを生成します。つまり、HTML文書を作って公開した後にサイトのタイトルやキャッチフレーズなどを変更しても、PHPが常に新しい情報をとってきてくれるので、元のHTML文書を変更しなくても、随時変更が反映されていきます!

テンプレートタグ色々

サイトのタイトルやキャッチフレーズ、URLの他にも、日付、カテゴリー(ブログなどで投稿した記事の種類。お知らせとか商品紹介とか)、投稿した文章など色々なものを取得するテンプレートタグがあります。

・get_the_date … 投稿日を取得
・get_the_category … カテゴリー情報を取得
・get_the_title … 投稿のタイトルを表示

などです。WordPressはこれらのテンプレートタグを使ってページを完成させていきます。基本的に、表示させたい部分にコピペするだけです。テンプレートタグはページを構成する部品みたいなものですかね…。
これらのタグは普通のHTMLと同じように、CSSで装飾もできます!

パーツテンプレート

パーツテンプレートとは、テンプレートタグのような決まったPHP構文ではなくて、PHPで出来た文書そのもののことです。
例えば、このブログのトップページはこのようなパーツテンプレートで出来ています。

11_wordpressmaking_29

このブログは、トップページがhome.phpという文書です。URLにアクセスがあれば、このページを表示します。
そしてhome.phpは中に3つのphpで出来たページを読み込んでいます。
このphpのページ達が「パーツテンプレート」と呼ばれるものです。

見れば分かると思うんですが、それぞれのページで役割が違います。
ホームページのトップ部分にナビゲーションや決まった画像などを表示させる「header.php」、ブログ記事の抜粋とアイキャッチ画像を一覧で表示させる「content-excerpt.php」、右横でカテゴリー一覧や検索窓などを表示させる「sidebar.php」…これらは全て別々のPHPファイルになっています。
トップページであるhome.phpにこれらの文書を呼び出すタグを書き込んで表示させます。

パーツテンプレートはあらかじめファイル名が決まっています。そのファイル名でPHP文書を保存して、専用タグ(インクルードタグ、という呼び名がついています)で呼び出して使っていきます。
似たような名前の単語がずらずら出てきてややこしいですね…(^_^;)

パーツに分ける理由

どうしてhome.phpに直接コードを書き込まず、テンプレートタグでパーツテンプレートを呼び出すのか…。このようにパーツ分けすることによって、ページごとに表示する項目を簡単に組み替えることができるのですね( ´∀`)

11_wordpressmaking_33

ちなみにヘッダーのパーツテンプレートであるheader.phpを呼び出すタグは、<?php get_header(); ?>これ一行です。
ヘッダー用のHTMLとCSSをページ毎につらつらと書き連ねなくても良いのです…!
他のパーツテンプレートも比較的短いPHP構文で呼び出せます。

こうやって、あらかじめ設定した文章や作ったHTMLなどを、テンプレートタグとパーツテンプレートで必要に応じて読み込ませていきます。読み込ませる際は常に最新の情報を取ってきてくれるので、変更があってもすぐに全ページに変更が反映されます。
自分でテーマを作る際は、まずHTMLとCSSで作って、後からテンプレートタグなどを挿入していって、そしてパーツテンプレートに切り分けていく…といった手順でされている方が多いと思います。

テンプレートタグ、パーツテンプレートを理解できれば、WordPressでのホームページはかなり作りやすくなると思います。
WordPress Codexテンプレートタグ一覧パーツテンプレートの階層表などがあるので、最初は意味がわからないかも知れませんが、慣れてきたら見てみると便利です。

つまりはこうなる

11_wordpressmaking_37

この設定を使って、パーツテンプレートにテンプレートタグを書いていきます。

11_wordpressmaking_41

home.phpに書いたヘッダーを読み込むタグ<?php bloginfo(‘name’); ?>でheader.phpが呼び出され、header.phpの中に書いたサイトのタイトルとキャッチフレーズを呼び出すタグ<?php bloginfo(‘description’); ?>で、「PC SCHOOL SAMPLE」と「初心者にも優しいパソコン教室SAMPLE」が呼び出されました。
そして、タグにつけたh1、h2がCSSで装飾されて、タイトルは赤色の48pxの文字に、キャッチフレーズは黒色の20pxの文字になりました。
ちょっとややこしいですけど、こんな仕組みでページが出来上がっていきます。

メニューをつける

どこのページにも「TOPへ」「商品一覧」「このサイトについて」「お問い合わせ」などのメニューがどこかについていますよね。
例えばヘッダー部分などについていて、大きく目立つナビゲーションメニューを「グローバルナビ」というのですが、これをつけるのも簡単にできます。
前回の記事で、メニューの内容などをHTMLやCSSが分からない人でも変えることができる、という話をしたのですが、その補足的な感じです。
まずメニューを作るには…

11_wordpressmaking_45

左側の《外観→メニュー》から設定します。
列の真ん中の、メニューと大きく書いてある下の項目からメニューに加えたいものをを選択して「メニューに追加」ボタンを押せば、右側の大きな枠の中に選んだ項目が追加されます。メニューの表示名を変えたりすることもできます。

メニューは複数作ることができるので、ヘッダー用の大きなメニュー、フッター用の小さなメニューと言う風に別々に作って使い分けることもできます。

作ったメニューは挿入用のタグがあるので、それを挿入したい箇所に書き込めばOKです!

メニューの他に簡単につけられる機能として、ウィジェットがあります。
これは画面を見てもらえれば分かると思うのですが、RSS(ブログなどの情報をフィード配信するもの)やカレンダー、カテゴリー、検索窓などの機能を簡単につけるものです。

真ん中の「利用できるウィジェット」の中からつけたい機能を選んで、右側の「サイドバー1」などとか書かれているエリアにドラッグ&ドロップします。
設定はこれで終わりです。「サイドバー1」などの名称は変更できます。

そして、「サイドバー1」の挿入用タグ<?php dynamic_sidebar(1); ?>を挿入したい箇所に書けば、サイドバー1で設定した項目が表示されます。
ウィジェットはいくらでもつけられますし、内容の入れ替えもこの画面から簡単にできます。

HTMLとCSSとテンプレートタグ、パーツテンプレートでページを作り、メニューとウィジェットで機能をつければ、オリジナルデザインで高機能なホームページが作れます。

自分でテーマを作る時は大丈夫ですが、既存のテーマからホームページを構築する時は、テーマによってメニューやウィジェットの機能が使えないものもあります。

忘れちゃいけないfunctions.php

上に書いたメニューやウィジェットの機能を使うには「function.php」というPHP文書に、メニューを使います、ウィジェットを使います、といった記述をしなくてはいけません。
これもPHPの定型文で、関数と呼ばれています。関数表もあるのですが、初心者さんには分かりづらいと思うので、最初は本などを見て書いたほうが無難なような気がします…。
必要に応じて、functions.phpに関数を書き込んで、機能をつけていきます。

この手順が、自分で一から作っていく時の基本的な流れになります。

これらの作業を終えるとホームページが完成します!でもこれだけじゃありません、まだまだ便利な機能がつけられる…プラグイン。
プラグインはここで紹介した基本的な作りの上に、更に便利な周辺機能を備えることができます。
プラグインはあらかじめ用意されているテーマでも、自分で作ったテーマでも、同じように使うことができます。
プラグイン紹介すると長くなりそうなので、別記事でまとめることにします…。
長い…本当に長い…。

それでは!Have a nice design!