FuelPHPでホームページビルダー17のテンプレートを使う方法

今度のホームページビルダー17はWordPressを使う方には、かなり便利です。そこで、FuelPHPでホームページビルダー17のテンプレートを便利に使う方法を考えてみました。画像やレイアウトの編集は、ホームページビルダー17で行って、プログラムの作成は、今まで通りDreamweaverで行おうと思っています。

1. まずFuelPHP側の準備をします。publicフォルダの下(assetsフォルダと同じ階層)にhpbフォルダ(名前は任意)を作成します。そのフォルダの下にdefault、mobileフォルダを作成します。※この作成したdefaultフォルダの中にホームページビルダーで作成したテンプレート(他、関連ファイル)を保存します。

2. 今回もテーマクラスでビューファイルを使用しますので、themeのConfigファイルを、下記のように修正します。

app/config/theme.php

<?php
$active='default';
//モバイルの場合
if(Agent::is_mobiledevice()){
 $active='mobile';
}
return array(
'active' => $active,
'fallback' => 'default',
'paths' => array(
DOCROOT.'hpb',
 ),
'assets_folder' => 'assets',
'view_ext' => '.php',
'require_info_file' => false,
'info_file_name' => 'themeinfo.php',
);

テーマクラスのパスをドキュメントルートのhpbフォルダ(public/hpb)に指定します。そして、この指定したフォルダの中のdefaultフォルダにPC用ファイル、mobileフォルダにスマートフォン用ファイルを保存します。※mobile用のサイトはjQueryMobileの方が使いやすくて、機能も多いしデザインも割とかっこいいので、jQueryMobileで作成した方がいいかもしれません。只、デザイン的にかぶるのが嫌な方は、ホームページビルダーのフルCSSスマートフォンテンプレートをお奨めします。

3. FuelPHP側の準備が出来たところで、ホームページビルダー17を起動します。ガイドメニューからフルCSSテンプレートを開きます。

4. ①テーマを選択し、②デザインを選んだら、③カラー、④レイアウトを選択します。作成するページの⑤1ページにチェックを入れ、⑥OKをクリックします。

5. データの保存場所と基本情報を入力後、保存をクリックします。ここで、データの保存場所には、先程作成したpublic/hpb/defaultフォルダを指定します。

6. 開いたファイル(blankpage.html)を①ファイル⇛②名前を付けて保存をクリックし、template.php名で保存します。

7. Dreamweaverでtemplate.phpを開き、header部分を下記のように修正します。もちろん、ホームページビルダー17のHTMLソースで編集しても構いませんが、Dreamweaverの方が、コード補完機能がありますので、便利です。私は、コードの修正は、Dreamweaverを使用しています。

public/hpb/default/template.php

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<?php Asset::add_path('hpb/default/','css')?>
<?php if(isset($content)):?>
<?php echo Asset::css('hpbparts.css')?>
<?php echo Asset::css('container_1R_2c_top.css')?>
<?php echo Asset::css('main_1R_2c.css')?>
<?php echo Asset::css('user.css')?>
<?php else:?>
<link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts">
<link rel="stylesheet" href="container_1R_2c_top.css" type="text/css" id="hpbcontainer">
<link rel="stylesheet" href="main_1R_2c.css" type="text/css" id="hpbmain">
<link rel="stylesheet" href="user.css" type="text/css" id="hpbuser">
<?php endif;?>
</head>

8行目でAssetのパスを追加しています。つまり、public/hpb/defaultフォルダ内からcssファイルを簡単に呼び出せるようにセットします。9行目から13行目はFuelPHP上で使うCSSファイルを指定しています。ファイル名は、ホームページビルダーが自動で作成したファイル(15行目から18行目と同じファイル名)を指定します。こうすることにより、レイアウトや画像の編集はホームページビルダー17で行うことができます。

8. コンテンツを表示する部分を下記のように修正します。

public/hpb/default/template.php

<div id="hpb-main">
 <div class="hpb-parts-cnt-01 hpb-parts-cnt-style clearfix">
 <h3>見出し</h3>
 <div class="hpb-parts-cbox-01 hpb-parts-cbox-style clearfix">
<?php if(isset($content)):?>
<?php echo $content?>
<?php else:?>
 文章を入力してください。<br>
 文章を入力してください。<br>
 文章を入力してください。<br>
 文章を入力してください。<br>
 文章を入力してください。<br>
 文章を入力してください。<br>
 文章を入力してください。<br>
 文章を入力してください。<br>
 文章を入力してください。<br>
 文章を入力してください。<br>
<?php endif?>
 </div>
 <div id="pagetop"><a href="#hpb-container">このページの先頭へ</a></div>
 </div>
 </div>
 <!-- main end -->

これ(5~7行目と18行目)も上記のCSSファイルの指定と同様に、ホームページビルダーでエラーを表示させないために記述します。FuelPHP(実際のサイト)では、$contentの内容を表示しますが、ホームページビルダー17上では、<?php else:?>以下の、文章を表示します。

9. Dreamweaverで編集後、ホームページビルダーに戻ると、外部で変更された旨のダイアログが表示されますので、『はい』をクリックします。

10. ホームページビルダーのページ編集画面とブラウザを比較してみます。左奥がホームページビルダーの編集画面、右手前が実際のブラウザ画面です。FuelPHPで作成した$contentがホームページビルダー17で作成したテンプレート内に表示されています。

11. このホームページビルダー17とDreamweaverの両刀遣いで、サイトのレイアウトや画像の作成はホームページビルダーで行い、プログラムの作成や細かい修正は、Dreamweaverで行うことが出来るようになります。

もっとスマートに設定できる方法が見つかったら、又報告します。本日は以上です。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ