テンプレート作成実習 - 記事ページテンプレート例 -

2026-02-21 09:13:25

記事ページを例に、実際のテンプレートを解説します。

ファイル名

記事テンプレートのファイル名は「template2_article.php」です。
このファイルを編集することで各記事ページのスタイルが変更されます。

コード全体

長くなるため、下記に畳んで記載します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- meta -->
    {PPP INCLUDE:template2_meta_header.php}

    <!-- system header -->
    {PPP INCLUDE:template2_sys_header.php}

    <!-- template resouce -->
    <link rel="stylesheet" href="{PPP:site_url}/user_resource/user.css">
</head>

<body>
    {PPP:admin_header}
    <div class="global-header">
        <a href="{PPP:site_url}/">
            {PPP:site_title}
        </a>
    </div>
    <div class="header">
        <a href="" data-log-return>
            &lt; 戻る
        </a>
    </div>
    <div class="main-container article_container">
        <div class="main-contents">
            <div class="section title" id="title">
                <h1>{PPP:title}</h1>
            </div>
            <div class="section caption" id="caption">{PPP:caption}</div>
            <div class="section tag" id="tags">{PPP:tag_links_html}</div>
            <div class="section created-at" id="created_at">{PPP:created_at} {PPP:views_html}</div>
            <div class="section contents">
                {PPP:contents}
                {PPP IF:simple_mode}
                {PPP LOOP:media}
                {PPP:media.thumbnail_html}
                {/PPP LOOP}
                {/PPP IF}
            </div>

            <div class="control">
                {PPP IF:settings['use_feedback']}
                {PPP IF:settings['show_likes']}{PPP IF:likes}
                <div class="section">{PPP:likes_html}</div>
                {/PPP IF}{/PPP IF}
                <div class="section"><span class="p-button-like-it" data-like-it>いいね！</span></div>
                {PPP IF:settings['show_share_button']}
                <div class="section"><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" target="_blank" class="twitter-share-button" data-show-count="false">Tweet</a></div>
                <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                {/PPP IF}
                {/PPP IF}

                {PPP IF:settings['move_link_type'] != 0}
                <div class="section move_control">
                    <span class="move_next">{PPP:next_link}</span><span class="move_separator"> | </span><span class="move_prev">{PPP:prev_link}</span>
                </div>
                {/PPP IF}
                <button id="return-button" class="p-button p-button-normal" data-log-return>戻る</button>
            </div>
        </div>
        <div class="global-footer">
            {PPP:powered_info} <a href="{PPP:base_url}/edit/{PPP:id}"><i class="fa-regular fa-pen-to-square"></i></a>
        </div>
    </div>
    {PPP:csrf}
</body>
</html>

先頭～ヘッダー部分

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- meta -->
    {PPP INCLUDE:template2_meta_header.php}

    <!-- system header -->
    {PPP INCLUDE:template2_sys_header.php}

    <!-- template resouce -->
    (ここに任意のCSSへのリンクやJSへのリンクを記述)

    <link rel="stylesheet" href="{PPP:site_url}/user_resource/user.css">
</head>

ほとんどが「おやくそく」部分になるので、ほぼコピー＆ペーストで問題ありません。
ヘッダー内には{PPP INCLUDE:template2_meta_header.php}、{PPP INCLUDE:template2_sys_headerlphp}を記述してください。
また、</head>の直前に<link rel="stylesheet" href="{PPP:site_url}/user_resource/user.css">を記述してください。

必要に応じて、CSSやJSへのリンクを記述します。

ポイント

<link rel="stylesheet" href="{PPP:site_url}/user_resource/user.css">

上記の{PPP:site_url}部分はサイトのURLに置換されます。サイト内のファイルにリンクするときは基本的にこの記述を使用してください。

デザインに使用するファイルなどは基本的に「user_resource」ディレクトリ内に配置してください。

body部分前半

<body>
    {PPP:admin_header}
    <div class="global-header">
        <a href="{PPP:site_url}/">
            {PPP:site_title}
        </a>
    </div>
    <div class="header">
        <a href="" data-log-return>
            &lt; 戻る
        </a>
    </div>
    <div class="main-container article_container">
        <div class="main-contents">
            <div class="section title" id="title">
                <h1>{PPP:title}</h1>
            </div>
            <div class="section caption" id="caption">{PPP:caption}</div>
            <div class="section tag" id="tags">{PPP:tag_links_html}</div>
            <div class="section created-at" id="created_at">{PPP:created_at} {PPP:views_html}</div>

<body>の直下には{PPP:admin_header}を記述してください。
それ以降、任意のデザインを行います。
各{PPP:(変数名)}は記事データの内容に置き換えられます。

使用できる変数（一部抜粋）

変数	内容
id	記事のID番号
title	タイトル
created_at	作成日時
created_at_date	作成日
updated_at	更新日時
updated_at_date	更新日
contents	記事本体
tag_links_html	整形済みタグHTML
view_html	整形済み表示数（カウンター)

戻るボタンの設置

「戻る」ボタンを設置することができます。これはこの記事を開くもととなった目次ページへ戻る動作を行います。

<a href="" data-log-return>
            &lt; 戻る
        </a>

上記のように、「戻る」ボタンのHTMLに「data-log-return」を記述してください。

BODY中段コンテンツ・画像表示

<div class="section contents">
 {PPP:contents}

 {PPP IF:simple_mode}

     {PPP LOOP:media}
         {PPP:media.thumbnail_html}
     {/PPP LOOP}

{/PPP IF}
</div>

記事本文および画像を表示します。
{PPP:contents}は記事本文に置き換わります。

その後ろに、画像表示部分があります。
記事が詳細モードの場合、画像はcontents内で表示されますが、シンプルモードの場合はここに表示されます。

{PPP IF:simple_mode}
    (①)
{/PPP IF}

{PPP IF:simple_mode}記述により、記事がシンプルモードかどうかを判断しています。
シンプルモードの場合だけ、上記①部分が表示されます。

{PPP LOOP:media}
    {PPP:media.thumbnail_html}　←　②
{/PPP LOOP}

{PPP LOOP}記述は繰り返し部分を記述します。上記②部分が繰り返し表示されます。
{PPP LOOP:media}の場合、記事に添付された画像・動画の数だけ繰り返されます。（画像・動画がない場合は何も表示されません）
{PPP:media.thumbail_html}は画像の大サムネイルを表示します。

BODY 後半部分

<div class="control">
                <!-- フィードバック設定が有効？ -->
                {PPP IF:settings['use_feedback']}

                <!-- いいね数を表示 -->
                {PPP IF:settings['show_likes']}{PPP IF:likes}
                <div class="section">{PPP:likes_html}</div>
                {/PPP IF}{/PPP IF}

                <!-- いいねボタン。ボタンには data-like-it を記述する -->
                <div class="section"><span class="p-button-like-it" data-like-it>いいね！</span></div>

                <!-- シェアリンクボタン -->
                {PPP IF:settings['show_share_button']}
                <div class="section"><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" target="_blank" class="twitter-share-button" data-show-count="false">Tweet</a></div>
                <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                {/PPP IF}

                {/PPP IF}
                 
                <!-- 前後移動表示 -->
                {PPP IF:settings['move_link_type']}
                <div class="section move_control">
                    <span class="move_next">{PPP:next_link}</span><span class="move_separator"> | </span><span class="move_prev">{PPP:prev_link}</span>
                </div>
                {/PPP IF}

                <button id="return-button" class="p-button p-button-normal" data-log-return>戻る</button>
            </div>
        </div>
        <div class="global-footer">
            {PPP:powered_info} <a href="{PPP:base_url}/edit/{PPP:id}"><i class="fa-regular fa-pen-to-square"></i></a>
        </div>
    </div>
　　{PPP:csrf} <!-- ←お約束で記述しておいてください -->
</body>
</html>

いいねボタンやシェアボタン、前後移動コントロールを記述します。
</body>の前には{PPP:csrf}を記述します。

いいねボタンやシェアボタンなどは設定により表示有無をコントロールする必要があります。
{PPP IF:settings['〇〇']}記述によりコントロールします。

設定値の判断項目(一部抜粋)

変数	内容
settings['use_feedback']	フィードバックを使用するか
settings['show_likes']	記事にいいね数を表示するか
settings['show_share_button']	シェアボタンを表示するか
settings['move_lnk_type']	前後移動リンクを表示するか

まとめ

このような形で、HTMLの中に{PPP:変数名}記述で記事の内容を埋め込んだり、{PPP IF:〇〇}記述で表示する内容を変更するような記述を行うことでテンプレートを作成します。
各テンプレートのは一部「こう書いてください」というお約束がありますので、解説をもとにテンプレートを作成してください。