知っとっけ?ブログ 超初心者がWordPressをはじめてみた(5)~WordPressをDreamweaverで編集~
FC2ブログ

超初心者が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 公式サイト オープンしました。
こちらもどうぞよろしくお願いいたします。


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



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



関連記事
スポンサーサイト



コメントの投稿

非公開コメント

アクセスカウンター

プロフィール

すぎば~

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

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

全ての記事を表示する

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