テンプレート記述解説
2026-02-12 16:10:21
実例をもとに解説します。
最初にトップページ用テンプレートの冒頭を見てみましょう。
<!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}/system_resource/css/recss.css">
<link rel="stylesheet" href="{PPP SITE_URL}/system_resource/def_theme/css/styles.css">
<link rel="stylesheet" href="{PPP SITE_URL}/user_resource/user.css">
</head>stylesheetのURLにある{PPP SITE_URL}はこのサイトのトップURLを指します。
必要に応じてCSSやJSの呼び出しを追記してください。
続けて<body>内に入っていきます。
<body>
{PPP:admin_header} <!-- ←必須 -->
<div class="main-container">
<div class="site-header">
{PPP IF:settings["use_banner"]} <!-- ← バナー画像を使うなら… -->
<img src="{PPP:top_banner}" class="top-banner"> <!-- ←バナーURL -->
{PPP IF:settings["show_title"]} <!-- ← タイトルを文字表示するなら… -->
<div class="top-banner-overlay">
<h1 class="site-title">{PPP:site_title}</h1> <!-- ← サイトタイトル -->
</div>
{/PPP IF}
{PPP ELSE}
<div class="top-banner-noimage"> <!-- ← バナー画像を使わないなら… -->
<h1 class="site-title">{PPP:site_title}</h1> <!-- ← サイトタイトル -->
</div>
{/PPP IF}
</div>
<div class="author-infomation">
{PPP IF:settings["use_icon"]} <!-- ← アイコン画像を使うなら… -->
<div class="author-icon">
<img src="{PPP:site_author_icon}"> <!-- ← アイコン画像URL -->
</div>
{/PPP IF}
<div class="authoer-infomation-inner">
<h2>{PPP:site_author}</h2> <!-- ← 作者名 -->
{PPP LOOP:accounts} <!-- ← SNSアカウント ループ -->
{PPP:accounts.icon_html} <!-- ← SNSアカウント 成形済みリンク -->
{/PPP LOOP}
</div>
</div>続けて、トップ部分に表示されるバナーを構築しています。
設定によりバナーはアップロードされていないことがあるため、{PPP IF:settings["use_banner"]}によりバナーが使えるか確認しています。
バナーが使用できる場合、{PPP IF:settings["use_banner"]}～{PPP ELSE}の部分が採用されます。
バナーが証できない場合は{PPP ELSE}～{/PPP IF}の部分が使用されます。
このように、{PPP IF}～{PPP ELSE}～{/PPP IF}を使用することで、設定などに応じて出力内容を変更することができます。
<div class="home-menu">
<ul class="home-menu">
{PPP LOOP:home_menu} <!-- ← 固定ページメニュー ループ -->
<li class="home-menu-item {PPP:home_menu.class}"><a href="{PPP:home_menu.url}">{PPP:home_menu.title}</a></li> <!-- ← 固定ページリンク -->
{/PPP LOOP}
</ul>
</div>次に、固定ページのメニューを構築します。
固定ページのメニューはユーザーの操作により増減します。
{PPP LOOP:home_menu}～{/PPP LOOP}は登録されている固定ページ分、繰り返し出力されます。
ループ内では{PPP:home_menu.title}のようにタイトルなどを出力します。
ポイント：
LOOPを使用する場合、{PPP LOOP:配列名}~{/PPP LOOP}で囲まれた部分が繰り返されます。
配列内のデータを出力する場合はループ内で{PPP:配列名.データ名}という記述を行います。
<div class="main-contents">
<div class="contents">
{ppp:contents} <!-- ← トップページ案内文 -->
<!-- タグクラウド -->
{PPP IF:setting["use_tag_cloud"]} <!-- ← 設定画面の「タグクラウドを使用する」をチェック -->
<div class="index-tag-cloud">{PPP:tag_links}</div> <!-- ← 成形済みのタグクラウドが出力されます -->
{/PPP IF}続けて、案内文とタグクラウドの構築です。
案内文、タグクラウドはシステム内で構築されたHTMLが出力されます。
<!-- 記事サムネイル一覧 -->
<div class="p-log-list">
<div class="p-thumbnails">
<ul>
{PPP LOOP:articles} <!-- ← 記事一覧をループ -->
<li class="p-thumbnail">
<a href="{PPP:articles.url}"> <!-- ← 記事のURLへリンク -->
<div class="p-thumbnail-item">
<img src="{PPP:articles.thumbnail_path}"> <!-- ← 記事のサムネイル画像 -->
<div class="p-thumbnail-info">
<div>
<span>{PPP:articles.thumbnail_title}</span> <!--← 記事のタイトル。画像付きの場合は空。 -->
<span>
{PPP IF:articles.multi_image} <!-- ← 複数画像付きなら… -->
<span class='p-multi-icon'> </span> <!-- ← 複数画像アイコンを表示 -->
{/PPP IF}
{PPP IF:articles.pin} <!-- ← ピン止め記事なら… -->
<span class='p-pin-icon'> </span> <!-- ← ピン止めアイコンを表示 -->
{/PPP IF}
</span>
</div>
</div>
</div>
<span class="p-thumnail-title">{PPP:articles.title}</span> <!-- ← 記事のタイトル -->
</a>
</li>
{/PPP LOOP}
</ul>
<div class="pagination">
{PPP INCLUDE:template2_parts_pagination.php} <!-- ← ページ送り用のナビゲーション -->
</div>
</div>
</div>
</div>
</div>
<div class="global-footer">
{PPP:powered_info} <a href="{PPP:base_url}/console"><i class="fa-regular fa-pen-to-square"></i></a>
</div>
</div>
</body>
</html>記事情報は{PPP LOOP:artilce}～{/PPP LOOP}により、表示対象となる記事数分ループします。
少々複雑ですが、内容としてはループ内で記事情報を出力しているだけです。
articles配列には次のような情報が含まれています。
| 記述 | 内容 |
|---|---|
| id | 記事ID |
| url | 記事URL |
| created_at | 作成日時 |
| title | 記事タイトル |
| caption | 記事概要(通常は記事先頭100文字) |
| nsfw_type | 0:通常記事 1:NSFW指定記事 |
| nsfw_status | 0:表示同意なし 1:表示同意済み |
| thumbnail_title | 表示用記事タイトル。画像付きの場合は空欄 |
| media_count | 添付画像枚数 |
| multi_image | 0:画像無し or 1枚, 1:複数枚 |
| pin | 0:通常記事 1:PIN止め記事 |
| thumbnail_path | 状態に合わせたサムネイル画像URL |
| raw_thumbanil_path | サムネイル画像URL |
必要に応じてこれらを使用して記事一覧を構築します。
これらの情報はテンプレート仕様に詳しく記載されています。
{PPP INCLUDE:template2_parts_pagination.php} は記事が多い場合にページ送りするためのページネーション操作用の部品を読み込んでいます。
このようにHTML内に{PPP …}というテンプレート記述を書き込むことでテンプレートを作成します。
各テンプレートごとに多少の「お約束」があるため、最初はデフォルトテンプレートをコピーし、それを編集することから始めることをお勧めします。