作成例: 2つ目のテーマ

    ここでは2つ目の例として、CSS、Javascript、プラグインの対応などBluditのテーマを最初から作る方法を紹介します。

    このテーマはMarsと呼びましょう。

    もし、このチュートリアルに興味がない場合は、こちらからソースコードをダウンロードできます。 Mars theme.

    フォルダー構造

    /bl-themes/フォルダーにテーマのフォルダーを作成します。パスは/bl-themes/mars/のようになります。

    次に言語、CSS、JSフォルダを作成します。

    • /bl-themes/mars/フォルダーにlanguagesフォルダーを作成します。
    • /bl-themes/mars/フォルダーにcssフォルダーを作成します。
    • /bl-themes/mars/フォルダーにjsフォルダーを作成します。
    /bl-themes/mars/
        css/
        js/
        language/

    名前と情報

    テーマ情報を含むファイルを作成します。このファイルはテーマのルートフォルダーにあり、metadata.jsonという名前にする必要があります。以下のJSONコードを含めてください。

    {
        "author": "Bludit",
        "email": "",
        "website": "",
        "version": "1.0",
        "releaseDate": "2019-01-01",
        "license": "MIT",
        "compatible": "3.0",
        "notes": ""
    }

    en.jsonというテーマの名前と説明を書いたファイルも作成します。下のJSONコードを記述して/bl-themes/mars/languages/フォルダーに配置します。

    {
        "theme-data":
        {
            "name": "Mars",
            "description": "これは2番目のBluditテーマです。"
        }
    }

    Index.php

    それではindex.phpの作業をしましょう。/bl-themes/mars/フォルダーに下のHTMLコードを記述したファイルを作成します。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
    
    </body>
    </html>

    CSSファイル

    CSSファイルを追加します。CSSファイルの追加には2つ方法があります。

    • Theme::css()ヘルパーオブジェクトを使用する
    • またはHTMLタグを使う`

    今回は、ヘルパーを使ってCSSファイル/bl-themes/mars/css/style.cssを追加します。ヘルパーを使用すれば、絶対パスを指定する必要はありません。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    
        <!-- CSS -->
        <?php echo Theme::css('css/style.css') ?>
    </head>
    <body>
    
    </body>
    </html>

    Javascriptファイル

    JavaScriptファイルを追加します。JavaScriptファイルの追加には2つ方法があります。

    • Theme::js()ヘルパーオブジェクトを使用する
    • またはHTMLタグを使う`

    ここでは、ヘルパーを使ってJavascriptファイル/bl-themes/mars/js/mars.jsを追加します。ヘルパーを使用すれば、絶対パスを指定する必要はありません。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    
        <!-- CSS -->
        <?php echo Theme::css('css/style.css') ?>
    
        <!-- Javascript -->
        <?php echo Theme::js('js/mars.js') ?>
    </head>
    <body>
    
    </body>
    </html>

    プラグインサポートの追加

    プラグインのサポートを追加するには、Theme::plugins()ヘルパーを使用します。

    サイトのプラグインフックは以下のとおりです。

    • siteHeadにはすべてのプラグインが含まれており、<head>...</head>タグ内のコードを返します。
    • siteBodyBeginにはすべてのプラグインが含まれており、上部の<body>...</body>タグ内のコードを返します。ウェルカムバナーやページ上部にあるツールバーに利用できます。
    • siteBodyEndにはすべてのプラグインが含まれており、下部の<body>.</body>タグ内のコード(JavaScriptコードなど)を返します。
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    
        <!-- CSS -->
        <?php echo Theme::css('css/style.css') ?>
    
        <!-- Javascript -->
        <?php echo Theme::js('js/mars.js') ?>
    
        <!-- siteHeadフックでプラグインをロード -->
        <?php Theme::plugins('siteHead') ?>
    </head>
    <body>
        <!-- siteBodyBeginフックでプラグインをロード -->
        <?php Theme::plugins('siteBodyBegin') ?>
    
        <!-- ここに残りすべてのHTMLコード -->
    
        <!-- siteBodyBeginフックでプラグインをロード -->
        <?php Theme::plugins('siteBodyEnd') ?>
    </body>
    </html>

    サイトロゴ、タイトル、スローガン

    Site-Objectを使ってロゴやタイトル、スローガンを取得できます。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    
        <!-- CSS -->
        <?php echo Theme::css('css/style.css') ?>
    
        <!-- Javascript -->
        <?php echo Theme::js('js/mars.js') ?>
    
        <!-- siteHeadフックからプラグインをロード -->
        <?php Theme::plugins('siteHead') ?>
    </head>
    <body>
        <!-- siteBodyBeginフックからプラグインをロード -->
        <?php Theme::plugins('siteBodyBegin') ?>
    
        <img src="<?php echo $site->logo() ?>" alt="" width="128">
        <h1><?php echo $site->title() ?></h1>
        <h2><?php echo $site->slogan() ?></h2>
    
        <!-- siteBodyBeginフックからプラグインをロード -->
        <?php Theme::plugins('siteBodyEnd') ?>
    </body>
    </html>

    私はどこ

    では、サイトのコンテンツを操作してみましょう。

    ユーザーがサイトのどのページを参照しているかを特定するには変数$WHERE_AM_Iを使用します。たとえば、ユーザーがページを閲覧している場合、変数の値はpageという文字列を持ち、ユーザーがフロントページ(ホームページ)を閲覧している場合は、変数の値はhomeになります。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    
        <!-- CSS -->
        <?php echo Theme::css('css/style.css') ?>
    
        <!-- Javascript -->
        <?php echo Theme::js('js/mars.js') ?>
    
        <!-- siteHeadフックからプラグインをロード  -->
        <?php Theme::plugins('siteHead') ?>
    </head>
    <body>
        <!-- siteBodyBeginフックからプラグインをロード  -->
        <?php Theme::plugins('siteBodyBegin') ?>
    
        <h1><?php echo $site->title() ?></h1>
        <h2><?php echo $site->slogan() ?></h2>
    
        <?php if ($WHERE_AM_I=='page'): ?>
            <p>ユーザーは特定のページを見ています</p>
        <?php elseif ($WHERE_AM_I=='home'): ?>
            <p>ユーザーはホームページを見ています</p>
        <?php endif ?>
    
        <!-- siteBodyBeginフックからプラグインをロード -->
        <?php Theme::plugins('siteBodyEnd') ?>
    </body>
    </html>

    メインコンテンツ

    ユーザーがホームページにいる場合、Bluditはすべての公開ページを含むグローバル配列$pagesを生成します。各ページは Page Object です。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    
        <!-- CSS -->
        <?php echo Theme::css('css/style.css') ?>
    
        <!-- Javascript -->
        <?php echo Theme::js('js/mars.js') ?>
    
        <!-- siteHeadフックからプラグインをロード  -->
        <?php Theme::plugins('siteHead') ?>
    </head>
    <body>
        <!-- siteBodyBeginフックからプラグインをロード  -->
        <?php Theme::plugins('siteBodyBegin') ?>
    
        <h1><?php echo $site->title() ?></h1>
        <h2><?php echo $site->slogan() ?></h2>
    
        <?php if ($WHERE_AM_I=='page'): ?>
            <p>ユーザーは特定のページを見ています</p>
        <?php elseif ($WHERE_AM_I=='home'): ?>
            <?php foreach ($content as $page): ?>
                <h3><?php echo $page->title(); ?></h3>
            <?php endforeach ?>
        <?php endif ?>
    
        <!-- siteBodyBeginフックからプラグインをロード  -->
        <?php Theme::plugins('siteBodyEnd') ?>
    </body>
    </html>

    ユーザーが特定のページを表示している場合、BluditはグローバルPage-Object$pageを生成します。この例では、タイトルとコンテンツを表示します。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    
        <!-- CSS -->
        <?php echo Theme::css('css/style.css') ?>
    
        <!-- Javascript -->
        <?php echo Theme::js('js/mars.js') ?>
    
        <!-- siteHeadフックからプラグインをロード  -->
        <?php Theme::plugins('siteHead') ?>
    </head>
    <body>
        <!-- siteBodyBeginフックからプラグインをロード  -->
        <?php Theme::plugins('siteBodyBegin') ?>
    
        <h1><?php echo $site->title() ?></h1>
        <h2><?php echo $site->slogan() ?></h2>
    
        <?php if ($WHERE_AM_I=='page'): ?>
            <h3><?php echo $page->title(); ?></h3>
        <?php elseif ($WHERE_AM_I=='home'): ?>
            <?php foreach ($pages as $page): ?>
                <h3><?php echo $page->title(); ?></h3>
            <?php endforeach ?>
        <?php endif ?>
    
        <!-- siteBodyBeginフックからプラグインをロード  -->
        <?php Theme::plugins('siteBodyEnd') ?>
    </body>
    </html>
    ダウンロード
    Marsテーマのソースコードをダウンロード。

    Copyright © 2021Powered by Bludit