WPCMS.jp

Adobe Dreamweaver CS4 の新機能「ライブビュー」を使ってWordPressのテンプレートの編集を”クイック”に行う。

まだあまり模索していないですが、結論から言うと、とりあえず下記のようにすれば出来ています。

1. テストサーバーを用意する（WordPressをインストールする）
   同一サーバーの別階層に別のWPをインストールすればOK。 
2. テンプレート（例：index.php）の冒頭でwp-config.phpを読み込む
   <?php include(‘../../../wp-config.php’); ?>
   <?php get_header(); ?>
   ….. 
3. プレビューの度に「ライブビュー」ボタンをOn/Offする

Adobeの新しいシリーズ「CS4」の中で、Webオーサリングソフトウェア「Dreamweaver CS4」の新機能の１つは「ライブビュー」という機能。

これは、従来ならファイルを編集後FTPでUP→ブラウザでリロード、という手順で行っていた確認作業をDreamweaver内に内蔵されたWebブラウザで行い、作業を効率化を図れる機能。注目すべきはその内蔵ブラウザの描画エンジンが、Safariなどでも採用されている「WebKit」が使われているので、かなり本番に近いプレビューができること。”使える”機能になっています。

ということで、早速WordPressのテンプレート編集につかえないかな〜と考えたわけですが、使う前から薄々懸念されることがあります。

WordPressに限りませんが、CMSのテンプレートって、それ単体では完結していなくて、header.php/index.php/sidebar.php/footer.phpなどに分かれてることが多いですね。なので、index.phpだけ「ライブビュー」でプレビューしたところで、HTMLページを構成するヘッダーもフッターも備えていないのでエラーが発生します。

ではなぜWordPressの本番サイトはエラーを起こさず、ページが生成されるかといえば、index.php内の冒頭get_header()を、ページ下部にてget_sidebar()、get_footer()というWordPress独自の関数が挿入されていて、これをきっかけに各テンプレートがいわば”合体”しているわけです。

「じゃあDreamweaverもget_header()を実行してくれればいいじゃん」

という話が出てきそうですが、そんな関数Dreamweaver自身は知る由もなし。WordPressの独自関数なので。

（この辺、DWの拡張機能として提供されたら便利ですねぇ…ちなみにget_header()をinclude(‘header.php’)に置き換えると無事実行されます、WPではなくPHPの関数なので。ただ弊害があるかどうかはわかりません）

このget_header()…関数がこのindex.phpテンプレート内に定義されていれば無事実行できますが、実際はWordPressの別ファイルに定義されています。結果として、冒頭に書いたように、WordPressの”根っこ”のファイルでもある「wp-config.php」ファイルを読み込んだところ、ページ形成に必要な情報が呼ばれてどうにかページを形成できました。

しかしこれをそのまま本番サイトにアップするとエラーが発生します。

※２のライブビューをOn/Offしないと反映されないのは使い方が間違っているのか仕様なのかバグなのかわかりません。

ということで、実用的な方法を模索したいと思いますが、すでにご存知の方は教えて下さいっ<(__)>

【追記】JavaScriptなどブラウザ側で実行されるスクリプトの編集こそ効果を発揮しそうです。PHPはサーバ側で実行するスクリプトなので、編集後は当然サーバーに何らかのかたちでアップロードしない限り実行できないですから。。。command+shift+u（アップロード）、commant+tab（アプリ切り替え）、command+r（リロード）のほうが早くて確実？

タグ: Adobe, CMS, CS4, Dreamweaver, get_footer(), get_header(), get_sidebar(), include(), PHP, WebKit, WordPress, wp-config.php, アドビ, エラー, テンプレート, ライブビュー, 関数

ツイート