راهنمای طراحی قالب Dima CMS

معرفی

Dima CMS از سیستم قالب‌بندی ساده و انعطاف‌پذیری استفاده می‌کند که به شما امکان طراحی قالب‌های زیبا و کاربردی را می‌دهد.

                    ویژگی‌های کلیدی:
                    ساختار ساده و قابل فهم
پشتیبانی کامل از RTL
ریسپانسیو و موبایل‌فرندلی
بهینه‌سازی SEO
قابلیت سفارشی‌سازی پیشرفته

                

ساختار قالب

هر قالب در Dima CMS شامل فایل‌های زیر است:

templates/
├── your-theme/
│   ├── header.php
│   ├── footer.php
│   ├── home.php
│   ├── post.php
│   ├── page.php
│   ├── blog.php
│   ├── search.php
│   ├── 404.php
│   ├── style.css
│   └── config.json
                

فایل‌های ضروری:

header.php: هدر سایت و منوها
footer.php: فوتر سایت
home.php: صفحه اصلی
style.css: استایل‌های قالب

فایل‌های قالب

1. header.php

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($settings['site_name'] ?? 'Dima CMS'); ?></title>
    <link href="styles/bootstrap.rtl.min.css" rel="stylesheet">
    <link href="styles/bootstrap-icons.css" rel="stylesheet">
    <link href="templates/<?php echo $settings['theme']; ?>/style.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="index.php">
                <?php echo htmlspecialchars($settings['site_name'] ?? 'Dima CMS'); ?>
            </a>
            <!-- منوها -->
        </div>
    </nav>
                

2. home.php

<div class="container mt-4">
    <div class="row">
        <div class="col-lg-8">
            <?php
            // دریافت پست‌های اخیر
            $stmt = $pdo->prepare("SELECT * FROM posts WHERE status = 'published' ORDER BY created_at DESC LIMIT 10");
            $stmt->execute();
            $posts = $stmt->fetchAll();
            ?>
            
            <?php foreach ($posts as $post): ?>
                <article class="card mb-4">
                    <div class="card-body">
                        <h2 class="card-title">
                            <a href="post.php?slug=<?php echo urlencode($post['slug']); ?>">
                                <?php echo htmlspecialchars($post['title']); ?>
                            </a>
                        </h2>
                        <p class="card-text"><?php echo htmlspecialchars($post['excerpt']); ?></p>
                    </div>
                </article>
            <?php endforeach; ?>
        </div>
        
        <div class="col-lg-4">
            <!-- سایدبار -->
        </div>
    </div>
</div>
                

3. footer.php

    <footer class="bg-dark text-light mt-5">
        <div class="container py-4">
            <div class="row">
                <div class="col-md-6">
                    <p>© <?php echo date('Y'); ?> <?php echo htmlspecialchars($settings['site_name'] ?? 'Dima CMS'); ?></p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p>طراحی شده با Dima CMS</p>
                </div>
            </div>
        </div>
    </footer>
    
    <script src="scripts/bootstrap.bundle.min.js"></script>
</body>
</html>
                

متغیرهای قالب

متغیرهای زیر در تمام فایل‌های قالب در دسترس هستند:

متغیرهای اصلی:

// تنظیمات سایت
$settings['site_name']        // نام سایت
$settings['site_description'] // توضیحات سایت
$settings['theme']           // نام قالب فعلی

// اطلاعات کاربر (اگر وارد شده باشد)
$_SESSION['user_id']         // شناسه کاربر
$_SESSION['username']        // نام کاربری
$_SESSION['role']           // نقش کاربر

// متغیرهای صفحه
$currentPage                 // صفحه فعلی
$pageTitle                   // عنوان صفحه
                

متغیرهای پست:

$post['id']                 // شناسه پست
$post['title']              // عنوان پست
$post['slug']               // نامک پست
$post['content']            // محتوای پست
$post['excerpt']            // خلاصه پست
$post['status']             // وضعیت پست
$post['created_at']         // تاریخ ایجاد
$post['updated_at']         // تاریخ بروزرسانی
                

توابع قالب

توابع مفید:

// پاکسازی متن
htmlspecialchars($text)

// تولید URL
urlencode($slug)

// فرمت تاریخ
date('Y/m/d', strtotime($post['created_at']))

// بررسی وجود فایل
file_exists($filePath)

// تولید توکن CSRF
generateCSRFToken()

// بررسی دسترسی
checkPermission($role)
                

توابع سفارشی:

// تابع نمایش تاریخ فارسی
function persianDate($date) {
    $timestamp = strtotime($date);
    $persianDate = date('Y/m/d', $timestamp);
    return $persianDate;
}

// تابع کوتاه کردن متن
function truncateText($text, $length = 150) {
    if (strlen($text) > $length) {
        return substr($text, 0, $length) . '...';
    }
    return $text;
}

// تابع تولید نامک
function generateSlug($title) {
    $slug = strtolower(trim(preg_replace('/[^A-Za-z0-9-]+/', '-', $title)));
    return trim($slug, '-');
}
                

ریسپانسیو

برای طراحی ریسپانسیو از کلاس‌های Bootstrap استفاده کنید:

<div class="container">
    <div class="row">
        <div class="col-12 col-md-8 col-lg-9">
            <!-- محتوای اصلی -->
        </div>
        <div class="col-12 col-md-4 col-lg-3">
            <!-- سایدبار -->
        </div>
    </div>
</div>
                

نکات ریسپانسیو:

از container برای محتوای اصلی استفاده کنید
از row برای ایجاد ردیف استفاده کنید
از کلاس‌های col-* برای ستون‌ها استفاده کنید
از d-none d-md-block برای مخفی کردن در موبایل استفاده کنید

بهینه‌سازی SEO

متا تگ‌های ضروری:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($pageTitle ?? $settings['site_name']); ?></title>
    <meta name="description" content="<?php echo htmlspecialchars($metaDescription ?? $settings['site_description']); ?>">
    <meta name="keywords" content="<?php echo htmlspecialchars($metaKeywords ?? ''); ?>">
    <meta name="author" content="<?php echo htmlspecialchars($settings['site_name']); ?>">
    
    <!-- Open Graph -->
    <meta property="og:title" content="<?php echo htmlspecialchars($pageTitle ?? $settings['site_name']); ?>">
    <meta property="og:description" content="<?php echo htmlspecialchars($metaDescription ?? $settings['site_description']); ?>">
    <meta property="og:type" content="website">
    <meta property="og:url" content="<?php echo $_SERVER['REQUEST_URI']; ?>">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="<?php echo htmlspecialchars($pageTitle ?? $settings['site_name']); ?>">
    <meta name="twitter:description" content="<?php echo htmlspecialchars($metaDescription ?? $settings['site_description']); ?>">
</head>
                

ساختار داده:

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "<?php echo htmlspecialchars($post['title']); ?>",
    "description": "<?php echo htmlspecialchars($post['excerpt']); ?>",
    "author": {
        "@type": "Person",
        "name": "<?php echo htmlspecialchars($post['author_name']); ?>"
    },
    "datePublished": "<?php echo $post['created_at']; ?>",
    "dateModified": "<?php echo $post['updated_at']; ?>"
}
</script>
                

سفارشی‌سازی

فایل config.json:

{
    "name": "نام قالب",
    "description": "توضیحات قالب",
    "version": "1.0.0",
    "author": "نام نویسنده",
    "author_url": "https://example.com",
    "license": "MIT",
    "supports": {
        "customizer": true,
        "widgets": true,
        "menus": true
    },
    "options": {
        "primary_color": "#007bff",
        "secondary_color": "#6c757d",
        "font_family": "Vazirmatn, Arial, sans-serif"
    }
}
                

فایل style.css:

/*
Theme Name: نام قالب
Description: توضیحات قالب
Version: 1.0.0
Author: نام نویسنده
*/

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
}

body {
    font-family: 'Vazirmatn', Arial, sans-serif;
    line-height: 1.6;
    color: var(--dark-color);
}

.navbar-brand {
    font-weight: bold;
    color: var(--primary-color) !important;
}

.card {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}
                

مثال‌های عملی

قالب ساده:

// templates/simple/header.php
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($settings['site_name'] ?? 'Dima CMS'); ?></title>
    <link href="../styles/bootstrap.rtl.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <header class="bg-primary text-white">
        <div class="container">
            <h1 class="text-center py-4">
                <?php echo htmlspecialchars($settings['site_name'] ?? 'Dima CMS'); ?>
            </h1>
        </div>
    </header>
                

قالب پیشرفته:

// templates/advanced/header.php
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($pageTitle ?? $settings['site_name']); ?></title>
    <meta name="description" content="<?php echo htmlspecialchars($metaDescription ?? $settings['site_description']); ?>">
    <link href="../styles/bootstrap.rtl.min.css" rel="stylesheet">
    <link href="../styles/bootstrap-icons.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <?php if (isset($customCSS)): ?>
        <link href="<?php echo $customCSS; ?>" rel="stylesheet">
    <?php endif; ?>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="../index.php">
                <i class="bi bi-house-door"></i>
                <?php echo htmlspecialchars($settings['site_name'] ?? 'Dima CMS'); ?>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="../index.php">صفحه اصلی</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../blog.php">وبلاگ</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../page.php">درباره ما</a>
                    </li>
                </ul>
                
                <ul class="navbar-nav">
                    <?php if (isset($_SESSION['logged_in']) && $_SESSION['logged_in']): ?>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
                                <i class="bi bi-person-circle"></i>
                                <?php echo htmlspecialchars($_SESSION['username']); ?>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="../dashboard.php">داشبورد</a></li>
                                <li><a class="dropdown-item" href="../logout.php">خروج</a></li>
                            </ul>
                        </li>
                    <?php else: ?>
                        <li class="nav-item">
                            <a class="nav-link" href="../auth.php">ورود</a>
                        </li>
                    <?php endif; ?>
                </ul>
            </div>
        </div>
    </nav>
                

نکات مهم:

همیشه از htmlspecialchars() برای نمایش متن استفاده کنید
از کلاس‌های Bootstrap برای طراحی ریسپانسیو استفاده کنید
فایل‌های CSS و JS را در پوشه‌های مناسب قرار دهید
از متغیرهای قالب برای نمایش اطلاعات پویا استفاده کنید
برای SEO از متا تگ‌های مناسب استفاده کنید

فهرست مطالب