気になる

アフェリエイト旅行

自動車

家庭菜園

« iphone 用 ホームページ。。。 input type="file"は使えないw | トップページ | AUのiphone5をテザリングで家のパソコンにも設定 win8 & Mac »

2013/02/19

スマホのホムペ作り用に Dreamweaverとwordpressを連携  にしてみた

Dreamweaver CS6を購入してから早半年経過。w
wordpressは、前々から興味があったけど文字コードがちょっと難しいかなぁ(日本のガラケー向けにshiftJISでやっているので・・)と思ってましたが、DWと連携しすることでDW上で色々とテストが出来ると紹介しているブログさんを見つけたので、やってみました♪ヾ(=^▽^=)ノ

<用意する物>

  • XAMPP
  • wordpress

上2つをネット上からダウンロードして、PC上で設定。
おぉ!便利になったかもぉぉぉ。w

<補足>

windows8で動くのかしら?とか、簡単にインスト出来るかしら?とか、ちょっと情報が足りなかったので、他ブロガーさんのも参考にしました。

「http://localhost/wordpress/」にアクセスするとちゃんと稼働して、wordpressが使えることを確認。やったー♪(管理画面へのログインとブログの確認 - WordPressの使い方

━━━━━━━━━━━━━━━━━━━━━━━━━━━ 

連携させて使う用意 (自分用メモ)

───────────────────────────

XAMPP

  1. デスクトップに「XAMPP Control Panel」ショートカットがあるのでWクリック
  2. パネルの「Apache」と「MySQL」の右側にあるstartボタンをクリック

DW

  1. ファイル→テストサーバ→更新ボタン
  2. index.phpをWクリック
  3. 「依存ファイルを転送に含めますか」ポップ画面出るのでOKボタン
  4. 画面上に「このページにはサーバーのみによって検索される動的関連ファイルがある可能性があります」の後の「検索」ボタンをクリック
  5. スクリプト警告ポップ画面出るのではいをクリック
  6. 画面上に「このページには、デザインビューで表示出来ないサーバ処理ディレクティブがあります」の後の「ライブビュー」をクリック

・・あれ?面倒だ。w ( ̄▽ ̄*)ゞ
長い間DW使ってきたけど、テストサーバー設定を初体験しました。w

━━━━━━━━━━━━━━━━━━━━━━━━━━━

使ってみる

───────────────────────────

・・使い方が分からん。w

関連ファイル一覧の右端の[>>]ボタンもしくは[表示]メニュー→[関連ファイル]を選択し、表示されるメニューの一番下までスクロールして「template-loader.php」を見て、その下にあるindex.phpファイルを開く。。。と、説明のPHP内容が書かれたファイル。

<?php bloginfo('name') ?>と書いて、保存して、[表示]メニュー→[デザインビューの更新]。おぉ!反映されている♪w で、もちろんローカル内での作業時点なので、ブラウザの「http://localhost/wordpress/」にアクセスしても反映はされていませんよ。/localhost/wordpress/鯖にファイルをコピーすれば反映されますよ。と。。。(/。\)(/。ヽ)

<DWでコードヒントが出るように設定>
コードヒントの設定を行うには、[サイト]メニュー→[サイト固有のコードヒント]を選択し、表示されるパネルの[構造:WordPress]が選択されているのを確認し[OK]。

「( 」で、コードヒントが出るようになった。(←の前はCtrl+speaseキーで半分?表示。)

 

━━━━━━━━━━━━━━━━━━━━━━━━━━━

wordpressが初体験なので、それの使い方を調べてみる

───────────────────────────

第1回 Twenty Twelveの特徴とファイル構成 | ADC - Adobe Developer Connection

・・別にwordpressをやりたければ、web上でいくらでも編集作業が簡単に出来るようになっているものなのねー。そりゃ、普及しますよねー。( ̄▽ ̄*)ゞ

 

━━━━━━━━━━━━━━━━━━━━━━━━━━━

PHPも初体験なので、それの使い方を調べてみる

───────────────────────────

━━━━━━━━━━━━━━━━━━━━━━━━━━━

DWは・・jQuery Mobileを利用してのスマホサイト作成???

───────────────────────────

Learn Dreamweaver CS6 | Adobe TV

  1. Dreamweaver CS5.5 マスターシリーズ 第2回 jQuery Mobile Widgetでスマートフォン対応サイトを作ろう その1 | デベロッパーセンター
  2. Dreamweaver CS5.5 マスターシリーズ 第3回 jQuery Mobile Widgetでスマートフォン対応サイトを作ろう その2 | デベロッパーセンター
  3. jQuery Mobileを使ったスマートフォンサイト制作に役立つスニペット | デベロッパーセンター

DWで簡単にスマホサイトを作れることは理解出来た。。。
でも、もちっと基礎も知らないと困りますよね、表示が変だけどどこがおかしい?って。w

後の飾り付けは・・ここらへんを参考に?

━━━━━━━━━━━━━━━━━━━━━━━━━━━

DWは・・可変グリッドレイアウトを利用してのスマホサイト作成???

───────────────────────────

可変グリッドレイアウトで実現するレスポンシブWebデザイン(前編) | ADC - Adobe Developer Connection

可変グリッドレイアウトで実現するレスポンシブWebデザイン(後編) | ADC - Adobe Developer Connection

━━━━━━━━━━━━━━━━━━━━━━━━━━━

DWは・・メディアクエリーを利用してのスマホサイト作成???

───────────────────────────

Dreamweaver CS5.5 マスターシリーズ 第1回 メディアクエリー機能を使ったスマートフォン&タブレット対応 | デベロッパーセンター

━━━━━━━━━━━━━━━━━━━━━━━━━━━

*DWでガラケー作り

───────────────────────────

□□□□□□□□□□□□□□□□□□□□□□□□□□□

折角、環境が整ったので・・書籍を購入して

WordPressをお勉強してみようと思います。ヾ(=^▽^=)ノ 続く→

□□□□□□□□□□□□□□□□□□□□□□□□□□□

« iphone 用 ホームページ。。。 input type="file"は使えないw | トップページ | AUのiphone5をテザリングで家のパソコンにも設定 win8 & Mac »

PC+モニター+他・電化」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/114130/56798156

この記事へのトラックバック一覧です: スマホのホムペ作り用に Dreamweaverとwordpressを連携  にしてみた:

« iphone 用 ホームページ。。。 input type="file"は使えないw | トップページ | AUのiphone5をテザリングで家のパソコンにも設定 win8 & Mac »

google検索

  • Google


    このブログを検索
    ウェブ全体から検索

カテゴリー

ニュース

  • 日経平均(長期)

    株価ミニチャートのブログパーツ
  • 経済指標(発表と内容)へのリンク
    http://jp.investing.com/economic-calendar/
  • 経済指標
  • . . .
  • 日経平均チャート
    by 株価チャート「ストチャ」
  • 株指標
2018年11月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30