作成例: 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テーマのソースコードをダウンロード。

Collaborate with us and edit this page