知っとっけ?ブログ WordPress

超初心者がWordPressをはじめてみた(5)~WordPressをDreamweaverで編集~

■関連記事
超初心者がWordPressをはじめてみた(1)~WordPressのインストール~(2012.01.31)
超初心者がWordPressをはじめてみた(2)~XAMPPのインストール(その1)~(2012.02.01)
超初心者がWordPressをはじめてみた(3)~XAMPPのインストール(その2)~(2012.02.02)
超初心者がWordPressをはじめてみた(4)~ローカルにWordPressをインストール~(2012.02.03)
超初心者がWordPressをはじめてみた(5)~WordPressをDreamweaverで編集~(2012.02.06)

前号の段階でローカル環境でWeb開発ができる環境を構築。WordPressのインストールも完了し、私の目指す「WordPress使い」への道をひた走る基本的な環境が整いました。今後かなりの試行錯誤が続くかと思われますが、一日でも早く、人様にスキルを披露できるレベルにまで引き上げていきたいと決意しております。

現状、自身の開発環境ですが、先述のローカル環境を構築した以外に、ソースはDreamweaver CS5、画像系はFireworks CS5で制作しています。
ですので、WordPressも使い慣れたDreamweaver CS5で編集ができれば!と思うのが自然の流れと言うものです。
私自身、キャリアが長くないこともあり、さすがにソースだけでは実際のサイトを想像することはできません。できればプレビュー画面を見ながら試行錯誤を繰り返しながらサイトを構築していったのが今までのやり方でした。
ですので、ここでは、アドビ社のDreamweaver デベロッパーセンターのサイトに掲載されている

Dreamweaver CS5とWordPressを連携させる方法

を元に、WordPressをDreamweaver CS5で編集できる環境を整えていきます。


サイト定義


「サイト」⇒「新規サイト」、「サイト設定」ダイヤログを表示させます。サイト名は任意、ローカルサイトフォルダーには下の図のように「Cドライブ」⇒「xampp」⇒「htdocs」⇒「wordpress」とローカルフォルダ内の「wordpress」のインストール先を指定増します。

1dw


テストサーバーの定義


「サーバー」を選択し、左下にある「+」ボタンを押し新規にサーバーを追加します。
項目別の入力内容は以下の通りです

・サーバー名:xampp(任意の名前でOK)
・使用する接続:ローカル/ネットワーク
・サーバーファルダ―:C:/xampp/htdocs/wordpress/
・Web URL: http://localhost/wordpress



2dw

新規サーバーを登録したら、リモートのチェックを外し、テストにチェックを入れます。
「保存」ボタンを押すと設定は完了です。


WordPressを開いてみる


「ウィンドウ」⇒「ファイル」からサイトのメインページのファイルであるindex.phpを開きます。

3dw

上部に「このページにはサーバーのみによって検索される動的関連ファイルがある可能性があります」というメッセージが表示されますので、「検索」をクリックします。

4dw

「検索」をクリックすると報じされる「スクリプト警告」も構わず「はい」をクリックしてください。

5dw

上部に、「このページには、デザインビューで表示できないサーバー処理ディレクティブがあります。ライブビューに切り替えてください」というメッセージが表示されますので仰せのとおり「ライブビュー」に切り替えてください。

6dw

これでWordPressのビューが表示されました。


テーマの編集


上部に表示されるPHPファイルが、このサイトに関連しているファイルの数々です。WordPressの外観をつかさどるテーマ(テンプレート)に関連するファイルは「>>」の先、「template-loader.php」以降に表示されます。「>>」を押してスクロールしていくと「index.php」には「header.php」「loop.php」「sidebar.php」「footer.php」「sidebar-footer.php」が読み込まれているのがわかります。

7dw

これらのファイルを編集して、「表示」⇒「デザインビューの更新」を選択すると編集が実際どのように反映されているのかが分かります。

WordPressはhtmlファイルのようにそれぞれのページごとに作られているのではなく、「index.php」ファイルに「header.php」「loop.php」「sidebar.php」「footer.php」「sidebar-footer.php」を呼び出して画面上では一つのページとして見せる構造になっています。
ですので、編集を行うには関連ファイルに追加、変更を加えてそれが「index.php」なりのメインページにどのように反映されるかを確認しながら進めていく必要があります。
その辺りが私のように超初心者には高い壁となっているようです。

--------------------------------------------

これで完全にWordPressを学び、研究していく環境が整いました。
以降は不定期になるかと思いますが、学習の成果を当ブログにてアップしていきたいと思いっています。
私のように「超初心者だがWordPressをやってみたいっ!」という方々のお役に立てれば幸いです。





-----------------------------------------------------------------

カラーコンサルタントRosa 公式サイト オープンしました。
こちらもどうぞよろしくお願いいたします。


よろしければクリックお願いします。励みになります。



ブログランキング・にほんブログ村へ
にほんブログ村
人気ブログランキングへ



スポンサーサイト

超初心者がWordPressをはじめてみた(4)~ローカルにWordPressをインストール~

■関連記事
超初心者がWordPressをはじめてみた(1)~WordPressのインストール~(2012.01.31)
超初心者がWordPressをはじめてみた(2)~XAMPPのインストール(その1)~(2012.02.01)
超初心者がWordPressをはじめてみた(3)~XAMPPのインストール(その2)~(2012.02.02)
超初心者がWordPressをはじめてみた(4)~ローカルにWordPressをインストール~(2012.02.03)
超初心者がWordPressをはじめてみた(5)~WordPressをDreamweaverで編集~(2012.02.06)

XAMPPのインストールに成功し、ローカル環境でのWeb開発ができる環境が整いました。
あとはWordPressのインストールが成功すれば、ローカル環境でWordPressの編集ができるようになります。

まずはWordPress | 日本語から最新のWordPress(2012年1月現在バージョン3.3.1)をダウンロードします。.zip形式で圧縮されていますので、あらかじめ解凍しておきます。

XAMPPを起動する


XAMPPコントロールパネルを立ち上げ、Apache、MySqlのスタートボタンを押します。これでApache、MySqlが動いている状態です。

xampp10.jpg

上記の画面のようになっていればOKです。
そしてブラウザを開いてhttp://localhost/にアクセスしてください。

xampp15.jpg

上記の画面が表示されていればOKです。

新規データベースを作成する


WordPressはPHPというプログラム言語を用いて開発されているブログソフトウェアで、記事などの情報はMySQL(データベース)から呼び出す方式になっています。ですので、ローカル環境でWordPressを動かすには新規にデータベースを作成しなければなりません。

http://localhost/の画面左にある「phpMyAdmin」にアクセスして新規にデータベースを作成しましょう。

xamp6.jpg

「phpMyAdmin」にアクセスし、「データベース」をクリック、新規データベースを作成します。データベース名は任意で構いませんが、ここでは分かりやすく「wordpress」としました。

xampp6.jpg

これでWordPressをインストールする準備が整いました。

いよいよWordPressのインストール!


あらかじめ、ダウンロードし解凍しておいたWordPressのフォルダを、「Cドライブ」⇒「xampp」フォルダ内の「htdocs」に浮かべます。
そして、http://localhost/wordpress/にアクセスすると設定画面が出てきます。

xampp7.jpg

構わず進めます。

xampp8.jpg

・データベース名 wordpress (MySQLで作成したデータベース名)
・ユーザー名   root (インストール完了後変更しましょう)
・パスワード   空欄でOK (インストール完了後設定しましょう)
・データベースのホスト名 localhost
・テーブル接頭辞 wp_


これで「作成する」ボタンをポチっと押せば、あっさりとインストールが完了します。

当初、パスワードを設定した場合、インストールがうまくいきませんでした。そこで空欄のまま試してみたらうまくいきました。
これでローカルにWordPressのインストールが完了しました!

次回は、せっかくDreamweaver CS5を使ってサイト制作を行ってきたので、ローカル環境でインストールしたWordPressをDreamweaver CS5で使えるようにしたいと思います。






-----------------------------------------------------------------

カラーコンサルタントRosa 公式サイト オープンしました。
こちらもどうぞよろしくお願いいたします。


よろしければクリックお願いします。励みになります。



ブログランキング・にほんブログ村へ
にほんブログ村
人気ブログランキングへ



超初心者がWordPressをはじめてみた(3)~XAMPPのインストール(その2)~

■関連記事
超初心者がWordPressをはじめてみた(1)~WordPressのインストール~(2012.01.31)
超初心者がWordPressをはじめてみた(2)~XAMPPのインストール(その1)~(2012.02.01)
超初心者がWordPressをはじめてみた(3)~XAMPPのインストール(その2)~(2012.02.02)
超初心者がWordPressをはじめてみた(4)~ローカルにWordPressをインストール~(2012.02.03)
超初心者がWordPressをはじめてみた(5)~WordPressをDreamweaverで編集~(2012.02.06)

前号にてXAMPPのダウロードが完了。「ポート80問題」を解決したところでいよいよインストール開始です。
デスクトップなどにダウンロードしたファイル(xampp-win32-1.7.7-VC9-installer)をポチっと押してインストールを開始しましょう!

XAMPPのインストールを進めていくと英語での警告画面が出てきます。これは、かいつまんで言えば「Programfiles内にインストールすると不具合が起こる可能性がありますので、別の場所にインストールすることをお勧めします」という意味の警告文です。どうやらWindows Vista以降はProgramfiles内にインストールしてしまうとApacheがうまく作動しないことがあるようです。
しかし、何もしなくてもCドライブ内に、xamppというフォルダを作ってくれるのでそのまま気にせずガンガン進めてしまってOKです。
前のバージョンでは、操作を求められましたが、現在(2012年1月)の段階では勝手にインストールを進めてくれます。

xampp1.jpg

xampp2.jpg

無事にインストールは完了しましたか?

XAMPPを立ち上げてみましょう!


インストールが完了したらXAMPPをコントロールパネルを立ち上げましょう。
しかし、ダウンロードしたファイルとコントロールパネルのアイコンがそっくりなので押し間違えないように注意してください。
念のため、前者は再インストールでもしなければ用はありませんので、どこかに移しておいた方が賢明だと思います。

コントロールパネルのアイコン

xampp4.jpg

ダウンロードしたファイルのアイコン(こちらを移動させましょう)

xampp3.jpg

コントロールパネルを立ち上げると下記の画面が現れます。

xampp9.jpg

WordPressをインストール、起動する際はApache、MySqlのスタートボタンを押してそれらが起動している状態にしておきましょう。
ApacheとMySqlがオンになって初めてローカル環境にWebサーバを構築できている状態と言えます。
下の画像のようにApache、MySqlの左に「Runnning」という表示が出ていれば正常に起動しています。

xampp10.jpg

ただ、この場合もApacheが「ポート80がビジー状態」で立ち上がらない場合もあります。

xampp14.jpg

この場合は、恐らくブラウザが立ちあがっていると思いますので、全て閉じた上で再びスタートボタンを押せば立ち上がるはずです。これは、「ブラウザが立ちあがっている状態=ポート80が塞がっている状態」と認識される場合があるからなのだそうです。

http://localhost/でアクセスしてみましょう!


ブラウザを立ち上げてhttp://localhost/にアクセスしましょう!すると次のような画面が現れます。

xampp5.jpg

右側の「日本語」と記されたリンクをPush!

xampp15.jpg

おめでとうございます!上記の画面が現れればインストールが完了です!

セキュリティに対応!


トップページの「セキュリティ」のリンクを押すと、セキュリティに関しておどろおどろしい画面が現れます。

xampp16.jpg

それぞれにパスワードを設定すればそれで済むのですが、現状多くの人たちが自分で管理できないほどのIDやパスワードを抱えており、できれば増やしたくないというのが正直な気持ちではないかと思います。少なくとも私はそうです。ましてや、面倒なので全て同じIDとパスワードを設定しがちですが、そんなことをやったら、ひとつ流出すれば一巻の終わりです。注意しましょう。

セキュリティに関しては、株式会社イメージウェーブ代表の馬場 誠氏の運営している独学!未経験からWebデザイナーになる!!XAMPPのインストール for Windowsにセキュリティ設定の方法が記されていましたのでこちらを実行します。馬場様、ありがとうございます。

「Cドライブ」⇒「xampp」⇒「apache」と辿っていくと、「httpd.conf」というファイルが見つかります。こちらをテキストエディタで開いて47、48行目を下記のように書き換えてください!

xampp18.jpg

-------------------------------------------

xampp17.jpg

この設定により、このサーバーはローカルPCのみでしかアクセスができなくなります。セキュリティ画面ではおどろおどろしい警告表示が踊っていると思いますが基本的にはこれで大丈夫だと思います。

次回は無事に設定が終わったローカルサーバにWordPressをインストールしてみます。






-----------------------------------------------------------------

カラーコンサルタントRosa 公式サイト オープンしました。
こちらもどうぞよろしくお願いいたします。


よろしければクリックお願いします。励みになります。



ブログランキング・にほんブログ村へ
にほんブログ村
人気ブログランキングへ



超初心者がWordPressをはじめてみた(2)~XAMPPのインストール(その1)~

■関連記事
超初心者がWordPressをはじめてみた(1)~WordPressのインストール~(2012.01.31)
超初心者がWordPressをはじめてみた(2)~XAMPPのインストール(その1)~(2012.02.01)
超初心者がWordPressをはじめてみた(3)~XAMPPのインストール(その2)~(2012.02.02)
超初心者がWordPressをはじめてみた(4)~ローカルにWordPressをインストール~(2012.02.03)
超初心者がWordPressをはじめてみた(5)~WordPressをDreamweaverで編集~(2012.02.06)

WordPressをレンタルサーバにインストール。Googleなどのロボットに引っかからないように設定し色々と触ってみました。
頭ではその仕組みなどは理解しているつもりでも実際にソースを読んでみると何がどうなっているのか皆目見当がつきません。

元々WordPressは、本体ではなくサイトのデザインを決定づけるテーマ(テンプレート)をカスタマイズしていくものです。
テーマのファイルはWordPress本体のあるフォルダの「wp-content」⇒「themes」と辿っていったところに入っています。
下図の、「twentyeleven」「twenryten」はデフォルトで入っているテーマです。

xampp11.jpg

私はデフォルトで設定されている「twentyten」をフォルダごとコピーして、名前を「mytheme」なり適当な名前をつけて保存。そのテーマを管理画面で有効化して色々と触ってみました。

いちいちサーバーにアップロードするのが手間


「mytheme」の「header.php」なり「footer.php」なりを触ってみてそれが実際の画面でどのように反映されるのかをサーバーにアップロードして確認しました。
一般的なhtmlのサイトならDreamweaver CS5上ではデザイン画面、もっと詳細ならライブビュー画面で、ブラウザではF12ボタンを押せばすぐに確認できますが、この場合、Dreamweaver CS5では画面は呼び出せませんし、テキストエディタで加工を加えた後、サーバーにアップロードしてブラウザで確認するより方法がありませんでした。
正直かなりの手間ですし、時間がかかります。Webサイトを制作する際は、ちょっと変えてみてどうなるかといった結果を即座に確認したいものです。もし、うまくいかなければすぐに元に戻したい心理も働きます。
Facebookの創設者、マーク・ザッカーバーグ氏のような天才的な頭脳の持ち主なら自身の脳内でサイトを構築し、プログラム言語を借りて形にするに過ぎないのでしょうが、少なくとも私はそういうわけにはいきません。
また、検索には引っかからないようにはしているものの、外部のサーバーにファイルを浮かべている以上、他の人に作りかけのお恥ずかしいサイトを見られてしまう可能性もゼロではないわけです。


Adobe CS5 - in an infographic / pcsiteuk


ですので、ローカル環境にWebサーバを構築することにしました。つまり、自身のPCに外部のサーバーと同じ仕事をさせる環境を作ることにしたのです。
そうすれば、ファイルを少しいじっては実際にどうブラウザで反映されるのかを即座に確認できるます。ある程度、サイトができたら外部サーバにエクスポートすればいいのです。

Webに携わっている方なら普通にやっていることでしょうが、私にとっては初めての試みでした。

Windows環境ではXAMPPをインストールすれば、ローカル環境でのWeb開発ができるようになります。
XAMPPはウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたものでMySQLやPHPやPerlを含んだApache(Webサーバーのソフトウェアです)を(割と)簡単に インストールすることができます。

XAMPP for Windows Ver 1.7.7をインストール。でもその前に!


xampp12.jpg

XAMPPにアクセスすると上記の画面がでてきますので、赤で囲ったXAMPPをクリックしてデスクトップなど任意の箇所にダウンロードしましょう!

このままXAMPPをインストールすればローカル環境でのWeb開発ができると思いきや、私の場合はコントロールパネルからApacheを立ち上げても、下の画面が出てしまい、全く動きませんでした。
解決までに半日を要しましたので、インストールの前に手を打っておけばトラブルを未然に防ぐことができると思います。

xampp14.jpg

「ポート80がビジー状態って何ぞやぁぁぁ?」と思い調べた結果、ポート80は、ウェブサイト用に割り当てられているポート番号らしく、この番号を塞いでいるのは、

(1)Skype
(2)インターネットインフォメーションサービス(IIS)

であることが分かりました。
そこで、Skypeは念のため削除、IISは「コントロールパネル」⇒「プログラム」⇒「Windowsの機能の有効化または無効化」より下の画面の通りインターネットインフォメーションサービスのチェックを外してOKを押します。

xampp13.jpg

これで、ポート80に関する問題は解決されました。後はXAMPPをインストールします。

超初心者がWordPressをはじめてみた(2)~XAMPPのインストール~(その2)をご覧ください。(2/1up予定)


※ポート番号の意味については今さら訊けないインターネットのキホンとしくみ ポート番号をご参照ください。





-----------------------------------------------------------------

カラーコンサルタントRosa 公式サイト オープンしました。
こちらもどうぞよろしくお願いいたします。


よろしければクリックお願いします。励みになります。



ブログランキング・にほんブログ村へ
にほんブログ村
人気ブログランキングへ



超初心者がWordPressをはじめてみた(1)~WordPressのインストール~

■関連記事
超初心者がWordPressをはじめてみた(1)~WordPressのインストール~(2012.01.31)
超初心者がWordPressをはじめてみた(2)~XAMPPのインストール(その1)~(2012.02.01)
超初心者がWordPressをはじめてみた(3)~XAMPPのインストール(その2)~(2012.02.02)
超初心者がWordPressをはじめてみた(4)~ローカルにWordPressをインストール~(2012.02.03)
超初心者がWordPressをはじめてみた(5)~WordPressをDreamweaverで編集~(2012.02.06)

WordPress LogoWordPress Logo / Phil Oakley


IT、とりわけWebに関しては頼ることはあっても自ら作り出すことに関してはずぶの素人であった私が、Dreamweaver CS5を手にし、Webの世界に足を踏み込んだのが昨年、これまで自社のWebサイトやFacebookページ、スマートフォン専用サイトなどを構築してきました。
しかし、スキルに関してはまだまだ不安もあり、テクノロジーが日進月歩で進化するこの世界において学び続けること、腕を磨き続けることが如何に大事であるかを実感しています。

そこで2012年、私の新たなる挑戦は「WordPress使いになる」ことです。
今やサイト制作の話題でWordPressが上がらないことはありませんし、近い将来はサイト制作の主流になるのではと考えられます。
また、WordPressの構築にあたってはPHP(ピー・エイチ・ピー ハイパーテキスト プリプロセッサー)というプログラム言語の習得が必要となります。PHPが今まで私がWordPressを遠ざけていた理由なのですが…
とにかく、今年一日でも早くWordPressを使ってCMSを構築できるようになることを目標に勉強していきます。
ですので、当ブログでは、私のようなWordPress超初心者が「WordPress使い」になっていくプロセスを、

超初心者がWordPressをはじめてみた

というシリーズで不定期に更新していきたいと思います。
私の学習の記録、備忘録として、また、私と同じように「WordPressやってみよう!」と思った方のために少しでもお役にたてればと考えています。

WordPressについて


WordPressは、オープンソースで提供されているブログシステムです。
個人、商用利用に関わらず無料で使用することができる上、カスタマイズの仕方によってはブログサイトばかりでなく、CMSサイトにも生まれ変わります。
現に、WordPressは多くの企業やショッピングサイトとしても採用されています。

コスメ、美容情報を発信している美的.comも「右クリック」⇒「ソースの表示」で辿るとWordPressで制作されたサイトだということがわかります。

biteki.jpg

いや~すごい!最近のWebサイトは、ヘッダーやナビゲーションバーなどが四角いパーツできているのが多いですが、これらもWordPressで作られたサイトなのでしょうか?
WP Design Galleryを見ればかなり多くのサイトがWordPressによって作られていることが分かります。

ただ、AmebaやFC2などのように無料で使用が始められるわけではありません。レンタルサーバーなどにインストールしなければ何も始まらないのがWordPressのようなブログシステムです。
AmebaやFC2などの無料のブログであればすぐに始められますし、広告表示に目をつぶれば、お金をかけずに気軽に書いていけるのでしょうが、これらのブログシステムでは、カスタマイズにも制約がありますし、独自ドメインを使用できない欠点があります。

以前は、レンタルサーバーを借りたり、独自ドメインを取得するのに随分と金額が張っていた記憶がありますが、最近は随分と安くなりました。
私が使っているのは、さくらのレンタルサーバで月額500円(年額一括5,000円)、容量10GBのスタンダードプランです。
もう一つ下のライトではPHPが使用できないのでスタンダードプランが最も安いコースです。





また、さくらのレンタルサーバ経由で.com、.org、.net、.info、.bizなどのgTLDドメインを取得、年額1,800円です。

とするとコストは年額6800円、月額に換算すると567円。567円で自分だけのサイトが運営できるのならそう高くはないと思います。

ですが、WordPressが使えるようになるのか分からないのに、お金を払えるか!という方には、WindowsであればXAMPPを使ってローカル環境(自身のマシン)にWebサーバを構築することができます。
こうしてある程度スキルが身に付きサイトができた時点でレンタルサーバーを借りたりドメイン取得を検討するのが良いかと思います。その後にサイトをインポートすれば即、ウェブサイトとして機能します。


XAMPP works on Windows 7 / inacentaurdump


なお、XAMPPのインストールについては別記事で書いていきたいと思います。

WordPressのインストール


さくらのレンタルサーバでのインストールはインストールマニュアルに沿って行えば、拍子抜けするほどあっさりと完了します。そしてWordPress一式をアップロードしたフォルダのURLにアクセスすると既にページが公開されています。

WordPressはヘッダーや記事、サイドバーをそれぞれPHPで呼び出してindexに表示させるシステムなのでこれまでのWebサイトとは勝手が異なります。そして記事や写真などはページではなくデータベースとしてMySQLに蓄積されていく仕組みになっています。

つまり、サーバーからパーツとデータを呼び出して、PC上では一枚のページになっているように見せる仕組みなのです。


Wordpress forums / adria.richards


前置きが長かった割には、あっさりとインストールが完了してしまいました。
しかし、この環境では何かするたびにファイルをアップロードしてサイトを確認しなければなりません。そしてそのサイトは人目に触れる可能性もゼロではないのです。

ですので、早くもローカル環境にWebサーバを構築する必要性を感じてきました。
こちらについては後日!





-----------------------------------------------------------------

カラーコンサルタントRosa 公式サイト オープンしました。
こちらもどうぞよろしくお願いいたします。


よろしければクリックお願いします。励みになります。



ブログランキング・にほんブログ村へ
にほんブログ村
人気ブログランキングへ



アクセスカウンター

プロフィール

すぎば~

Author:すぎば~
【知っとっけ?ブログ管理人】
東京都在住・現在40歳
詳しくはこちらをご覧ください。

カテゴリ
最新記事
バックナンバー

全ての記事を表示する

Facebook
Amazon.co.jp
楽天市場 Rakuten Ichiba
RSSリンクの表示
検索フォーム