kohanaのテスト12・・・WordPressの画面を再現してみる

　kohana でコミュニティサイト系サイトを構築する基本的な要素が揃ったので、画面構成の勉強を進めています。教材としては WordPress を使い、kohana 上で WordPress を再現してみる方針です。

　先ずは WordPress の最初の画面を再現します。手順の概要は次のようになります。
　・htdocs/wordpress にWordPress 日本語版がインストールしてあることが前提です。
　・ブラウザで WordPress にアクセスしてソースの HTML をゲットします。
　・HTML の構成要素ごとにビューを作り、ビューを表示するコントローラを書きます。

コントローラ

・kohana/application/classes/controller/test12.php
・構成要素の一覧表みたいな感じです。構成要素ごとにビューのフォルダを作っていることが分かると思います。

<?php defined('SYSPATH') OR die('No direct access allowed.');

class Controller_Test12 extends Controller {

    public function action_index() {

        $view = view::factory('test12/test12');
        $view->head01 = view::factory('test12/head/head01');
        $view->header01 = view::factory('test12/header/header01');
        $view->primary01 = view::factory('test12/main/primary01');
        $view->primary01->nav_above = view::factory('test12/main/nav_above');
        $view->primary01->article01 = view::factory('test12/main/article01');
        $view->primary01->nav_below = view::factory('test12/main/nav_below');
        $view->secondary01 = view::factory('test12/aside/secondary01');
        $view->secondary01->search_2 = view::factory('test12/aside/search_2');
        $view->secondary01->recent_posts_2 = view::factory('test12/aside/recent_posts_2');
        $view->secondary01->recent_comments_2 = view::factory('test12/aside/recent_comments_2');
        $view->secondary01->archives_2 = view::factory('test12/aside/archives_2');
        $view->secondary01->categories_2 = view::factory('test12/aside/categories_2');
        $view->secondary01->meta_2 = view::factory('test12/aside/meta_2');
        $view->footer01 = view::factory('test12/footer/footer01');

        $this->response->body($view);
    }

}

?>

ビュー

　全部例示してもきりがないので、一部だけ示します。残りは上記コントローラーに従って自分で作ってみてください。

・kohana/application/views/test12/test12.php
　骨格となる最上位のビューです。body の $secondary01 はサイドメニューです。

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="ja">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="ja">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="ja">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html dir="ltr" lang="ja">
    <!--<![endif]-->
    <head>
        <?php echo $head01 ?>
    </head><!-- <head> -->
    <body class="home blog two-column right-sidebar">
        <div id="page" class="hfeed">
            <?php echo $header01 ?>
            <div id="main">
                <?php echo $primary01 ?>
                <?php echo $secondary01 ?>
            </div><!-- #main -->
            <?php echo $footer01 ?>
        </div><!-- #page -->
    </body>
</html>

・kohana/application/views/test12/aside/secondary01.php
　サイドメニューは各種のスニペットで構成されています。

<div id="secondary" class="widget-area" role="complementary">
    <?php echo $search_2 ?>
    <?php echo $recent_posts_2 ?>
    <?php echo $recent_comments_2 ?>
    <?php echo $archives_2 ?>
    <?php echo $categories_2 ?>
    <?php echo $meta_2 ?>
</div><!-- #secondary .widget-area -->

・kohana/application/views/test12/aside/search_2.php
　検索用のスニペットです。現状では実行すると WordPress に行っちゃいます。

<aside id="search-2" class="widget widget_search">      
    <form method="get" id="searchform" action="http://localhost/wordpress/">
        <label for="s" class="assistive-text">検索</label>
        <input type="text" class="field" name="s" id="s" placeholder="検索" />
        <input type="submit" class="submit" name="submit" id="searchsubmit" value="検索" />
    </form>
</aside>

結果

　当然といえば当然なんですが、全く同じ HTML が生成されるので、WordPress と瓜二つの画面が表示されます。このままでは全く静的な画面なので、メインのコンテンツや動的なスニペット部分はコントローラを書いてやって、動的な表示をさせていくことになります。

dari88's diary

これから趣味にするプログラミング/PHP/javascript/kohana/CMS/web design/

kohanaのテスト12・・・WordPressの画面を再現してみる