WordPress前回の「知識はないけどこれからホームページ制作に携わりたい人向きのWordPressの説明(導入の検討編)」の続きです。前回はWordPressはどのようなものか、メリットとデメリットなどを中心に説明しましたが、今回はWordPressでホームページを構築する時の実際の流れを説明していきます。構築する時は、自分でオリジナルのデザインを作るのであればDreamweaverなどのホームページ制作用ソフトやHTML、CSSの知識が要りますが、それらがなくてもできますし、この説明ではソフトの使い方などの詳しいことを省いて、手順と仕組みだけ説明していきます。使う前段階...WordPressを始めるにはどういった手順を踏むのか、構築するために何が必要かという流れを分かっていただけたらと思います(^^)。・独自ドメイン(自分の好きなホームページのアドレス)でするなら、ドメインを取得する必要があります。ドメインの取得はムームードメイン、お名前.comなどが有名です。ファイルを自分のパソコンからサーバーにアップロードするためのソフトです。WindowsではFFFTP、MacではFilezillaが有名です。前回の記事で、WordPressはPHPという言語でできているので、PHPに対応したサーバーを使ってくださいね、という話をしたのですが、WordPressはMySQLというデータベースも使って動いています。MySQLにも対応したサーバーが必要です。これだけあれば、まず始めることはできます。WordPressをサーバーにインストールするまずはWordPressをサーバーにインストールします。ダウンロードしたWordPress本体を解凍し、解凍後に出来たフォルダをそのまま全部サーバーにアップロードするだけ!このアップロード作業にFTPソフトを使います。最近はレンタルサーバーなどに「WordPressかんたんインストール機能」なるものがついていることが多く、それを使えばFTPソフトを使用しなくてもWordPressをインストールすることができます。インストールしたら、先ほどアップロードしたフォルダにアクセスします。上の画像の例で言うと、http://自分のホームページのアドレス/wordpress/とブラウザのアドレスバーに入力すればアクセスできます。するとWordPressの設定画面が表示されますので、サーバーを契約した際に教えられた設定やパスワード等を入力すれば、WordPressが始められます。WordPressのインストールについては、こちらの記事で詳しく説明されています。unpcoインストールすると、こんな画面になります。この画面からデザインや機能などの設定を行っていきます。作り方は2種類あるWordPressでホームページを作るためには、まず全体のデザイン(テーマ、と呼ばれています)を決めなければいけません。これは後から変更もできます。・あらかじめ用意されているものを使う・自分で作るの2種類あります。・Photoshopなどの画像処理ソフト・Dreamweaver、ホームページビルダーなどのホームページ制作ソフトかテキストエディタ・WordPressの「テンプレートタグ」が載っている本(エビスコム著の「Wordpressレッスンブック」が有名です。日本語版」にも載っています。最初にやるなら本の方が分かりやすいかも...です(^_^;))も加えて必要になってきます。ホームページを作ったことのある方ならお馴染みのものばかりだと思います。この2つの方法でやる構築の手順を順番に見ていきます。用意されているテーマを使うこれはすぐに始められて、自分で一から作らなくてもできるやり方です。Dreamweaverなどのホームページ制作ソフトはあればいいですが、なくても大丈夫です。WordPressには「テーマ」という、ホームページのデザインテンプレートなるものが世界各国で配布されています。無料のものもあります。テーマはWordPressの設定画面(ダッシュボード、といいます)の《外観→テーマ》からダウンロードしたり設定したりできます。Twelve」というテーマを使って、何ができるかを見ていきます。「カスタマイズ」をクリックすると...デザインの編集こんな画面になります。左側のメニューから、ホームページのタイトルや背景の色、トップページの画像などを変更したりできます。記事の編集は「固定ページ」や「投稿」から行います。HTMLやCSSで記述する必要はなく、Wordなどで文書を打つ感覚で文字を打って、「メディアを追加」ボタンから画像を挿入して、ページを保存すると、更新がページに反映されます。ここからページを増やしたりなどの操作もできます。既存のテーマからホームページを作る場合は、こうやってページを作っていきます。複雑なことはできないのですが、オシャレなテーマが沢山配布されていますし、ホームページに関する知識などもほとんどいらないので、Web制作にあまり詳しくない方でも簡単に運営することができます。子テーマもあるよ!また、使用しているテーマを元に、自分で書いたCSSファイルを読み込んでデザインなどをカスタムしていく「子テーマ」という使い方もできます。自分の理想に近いテーマがあって、それを少し変えたいとか、一から作るのが面倒だけど、自分の好みは反映したいとか、そういったものがあるなら子テーマで構築しても良いと思います。子テーマに必要なのは基本的にCSSのみです。CSSはデザイン担当の文書です。自分の作ったCSSを読み込むことで、元のテーマの機能はそのままに、デザインだけを自由に変更できるってことですね。CSSとHTMLの知識は必要になってきます。子テーマに関してはこちらのブログで丁寧に解説されています。Webourgeon自分でテーマを作るHTMLやCSSが分かる人であれば、自分でデザインをしたものをベースに、そこにWordPressの機能を取り込んで作っていく...という方法もあります。画像なども作らないといけないので、Photoshopなどの画像処理ソフトもあれば便利です。ページを組み立てるためにDreamweaverなどのホームページ制作ソフトも使います。デザインする通常のホームページ制作と同じ流れなのですが、まずはデザインをします。モックアップっていうんですね...完成したページをそっくりそのまま目指して、Photoshopなどでデザインしていきます。これは私のブログのトップページですが、こうやって本物そっくりにデザインした後...使う画像をパーツごとに切り分けて、それぞれ別々に保存していきます(スライス作業)。パーツができました!これをHTMLで組み立てていきます。この辺はWordPressじゃないホームページを作る時と一緒の手順ですね!コーディングするパーツができたら、HTMLとCSSを使ってページを組み立てていきます。Dreamweaverやホームページビルダー、MacならCodaなどのホームページ制作ソフト(テキストエディタ)を使用します。画面はCodaのものです。こんな風にアルファベットの羅列を書いていきます。́・ω:;.:...。通常のホームページと同じようにコードを書いていけばいいのですが、ちょっとだけ違うところがあります。WordPress独自の「テンプレートタグ」を使って「パーツテンプレート」を作る、というやり方で進めていきます。テンプレートタグ?テンプレートタグとは、WordPress独自のPHP構文です。この構文は定型文なので、ホームページを作る時にコピペして入れていきます。PHPが分かる人なら構文をカスタマイズすることができますが、カスタムしなくても十分使えます。PHPが分からない人はコピペで!テンプレートタグを使うことによって、ホームページに必要な情報を呼び出して表示してくれます。一般設定でできる様々な設定項目。これらに書き込んだ内容をPHP構文で呼び出してくることができます。オレンジの吹き出し内に書いたPHP構文がテンプレートタグになります。これをHTML文書内に書き込むと、ブラウザで表示された時に、PHP構文がサイトのタイトルやキャッチフレーズに置き換わります。PHPはページにアクセスされた時に働き、その時の情報を取得してページを生成します。HTML文書を作って公開した後にサイトのタイトルやキャッチフレーズなどを変更しても、PHPが常に新しい情報をとってきてくれるので、元のHTML文書を変更しなくても、随時変更が反映されていきます!テンプレートタグ色々サイトのタイトルやキャッチフレーズ、URLの他にも、日付、カテゴリー(ブログなどで投稿した記事の種類。お知らせとか商品紹介とか)、投稿した文章など色々なものを取得するテンプレートタグがあります。投稿のタイトルを表示などです。WordPressはこれらのテンプレートタグを使ってページを完成させていきます。基本的に、表示させたい部分にコピペするだけです。テンプレートタグはページを構成する部品みたいなものですかね...。これらのタグは普通のHTMLと同じように、CSSで装飾もできます!パーツテンプレートパーツテンプレートとは、テンプレートタグのような決まったPHP構文ではなくて、PHPで出来た文書そのもののことです。このブログのトップページはこのようなパーツテンプレートで出来ています。このブログは、トップページがhome.phpという文書です。URLにアクセスがあれば、このページを表示します。home.phpは中に3つのphpで出来たページを読み込んでいます。このphpのページ達が「パーツテンプレート」と呼ばれるものです。見れば分かると思うんですが、それぞれのページで役割が違います。ホームページのトップ部分にナビゲーションや決まった画像などを表示させる「header.php」、ブログ記事の抜粋とアイキャッチ画像を一覧で表示させる「content-excerpt.php」、右横でカテゴリー一覧や検索窓などを表示させる「sidebar.php」...これらは全て別々のPHPファイルになっています。トップページであるhome.phpにこれらの文書を呼び出すタグを書き込んで表示させます。パーツテンプレートはあらかじめファイル名が決まっています。そのファイル名でPHP文書を保存して、専用タグ(インクルードタグ、という呼び名がついています)で呼び出して使っていきます。似たような名前の単語がずらずら出てきてややこしいですね...(^_^;)パーツに分ける理由どうしてhome.phpに直接コードを書き込まず、テンプレートタグでパーツテンプレートを呼び出すのか...。ヘッダー用のHTMLとCSSをページ毎につらつらと書き連ねなくても良いのです...!他のパーツテンプレートも比較的短いPHP構文で呼び出せます。やって、あらかじめ設定した文章や作ったHTMLなどを、テンプレートタグとパーツテンプレートで必要に応じて読み込ませていきます。読み込ませる際は常に最新の情報を取ってきてくれるので、変更があってもすぐに全ページに変更が反映されます。自分でテーマを作る際は、まずHTMLとCSSで作って、後からテンプレートタグなどを挿入していって、そしてパーツテンプレートに切り分けていく...といった手順でされている方が多いと思います。テンプレートタグ、パーツテンプレートを理解できれば、WordPressでのホームページはかなり作りやすくなると思います。Codexにテンプレートタグ一覧やパーツテンプレートの階層表などがあるので、最初は意味がわからないかも知れませんが、慣れてきたら見てみると便利です。なるこの設定を使って、パーツテンプレートにテンプレートタグを書いていきます。SAMPLE」と「初心者にも優しいパソコン教室SAMPLE」が呼び出されました。タグにつけたh1、h2がCSSで装飾されて、タイトルは赤色の48pxの文字に、キャッチフレーズは黒色の20pxの文字になりました。ややこしいですけど、こんな仕組みでページが出来上がっていきます。メニューをつけるどこのページにも「TOPへ」「商品一覧」「このサイトについて」「お問い合わせ」などのメニューがどこかについていますよね。ヘッダー部分などについていて、大きく目立つナビゲーションメニューを「グローバルナビ」というのですが、これをつけるのも簡単にできます。前回の記事で、メニューの内容などをHTMLやCSSが分からない人でも変えることができる、という話をしたのですが、その補足的な感じです。メニューを作るには...左側の《外観→メニュー》から設定します。列の真ん中の、メニューと大きく書いてある下の項目からメニューに加えたいものをを選択して「メニューに追加」ボタンを押せば、右側の大きな枠の中に選んだ項目が追加されます。メニューの表示名を変えたりすることもできます。メニューは複数作ることができるので、ヘッダー用の大きなメニュー、フッター用の小さなメニューと言う風に別々に作って使い分けることもできます。作ったメニューは挿入用のタグがあるので、それを挿入したい箇所に書き込めばOKです!メニューの他に簡単につけられる機能として、ウィジェットがあります。これは画面を見てもらえれば分かると思うのですが、RSS(ブログなどの情報をフィード配信するもの)やカレンダー、カテゴリー、検索窓などの機能を簡単につけるものです。真ん中の「利用できるウィジェット」の中からつけたい機能を選んで、右側の「サイドバー1」などとか書かれているエリアにドラッグ&ドロップします。設定はこれで終わりです。「サイドバー1」などの名称は変更できます。?>を挿入したい箇所に書けば、サイドバー1で設定した項目が表示されます。ウィジェットはいくらでもつけられますし、内容の入れ替えもこの画面から簡単にできます。HTMLとCSSとテンプレートタグ、パーツテンプレートでページを作り、メニューとウィジェットで機能をつければ、オリジナルデザインで高機能なホームページが作れます。自分でテーマを作る時は大丈夫ですが、既存のテーマからホームページを構築する時は、テーマによってメニューやウィジェットの機能が使えないものもあります。忘れちゃいけないfunctions.php上に書いたメニューやウィジェットの機能を使うには「function.php」というPHP文書に、メニューを使います、ウィジェットを使います、といった記述をしなくてはいけません。これもPHPの定型文で、関数と呼ばれています。関数表もあるのですが、初心者さんには分かりづらいと思うので、最初は本などを見て書いたほうが無難なような気がします...。必要に応じて、functions.phpに関数を書き込んで、機能をつけていきます。この手順が、自分で一から作っていく時の基本的な流れになります。これらの作業を終えるとホームページが完成します!でもこれだけじゃありません、まだまだ便利な機能がつけられる...プラグイン。プラグインはここで紹介した基本的な作りの上に、更に便利な周辺機能を備えることができます。プラグインはあらかじめ用意されているテーマでも、自分で作ったテーマでも、同じように使うことができます。プラグイン紹介すると長くなりそうなので、別記事でまとめることにします...。長い...本当に長い...。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。