ساخت قالب وردپرس: طراحی یک قالب وبلاگی مینیمال از صفر تا صد

احتمالاً شما هم مقالات زیادی درباره ساخت قالب وردپرس خوانده‌اید که پُر از مفاهیم انتزاعی و کدهای پراکنده بوده‌اند. اما بیایید این بار یک مسیر متفاوت را امتحان کنیم. سؤالی که احتمالاً در ذهن شماست این است: «چگونه قالب وردپرس را طراحی کنم که هم زیبا باشد و هم سریع و بهینه؟» امروز ما قصد داریم تا با رویکردی کارگاهی، یک قالب وبلاگی واقعی، سریع و مینیمال به نام «تم ساده» (SimpleTheme) را به‌منظور طراحی قالب سایت وردپرسی به شما آموزش دهیم.

در پایان آموزش طراحی قالب وردپرس، شما علاوه‌بر اینکه دانش و اعتمادبه‌نفس کافی لازم برای طراحی قالب وردپرس اختصاصی خود خواهید داشت، یک قالب واقعی و آماده نیز روی سیستم خود دارید که می‌توانید آن را توسعه دهید یا از آن به‌عنوان پایه‌ای برای پروژه‌های آینده استفاده کنید.

معرفی پروژه: چه چیزی قرار است بسازیم؟

قبل‌از اینکه وارد کدنویسی و ساخت قالب وردپرسی شویم، بیایید ببینیم مقصد نهایی ما کجا است. داشتن یک تصویر روشن از محصول نهایی، فرایند طراحی قالب wordpress را بسیار ساده‌تر و لذت‌بخش‌تر می‌کند.

معرفی «تِم ساده» (SimpleTheme): قالبی که قرار است بسازیم

پروژه ساخت قالب wordpress ما، «تِم ساده»، یک قالب وبلاگی به سبک مینیمالیسم است. درشرایطی که خیلی از قالب‌های موجود پُر از امکانات غیرضروری و کدهای سنگین هستند، ما اصولی مثل سرعت، خوانایی و تمرکز بر محتوا را سرلوحهٔ کار خود قرار می‌دهیم.

ویژگی‌های اصلی «تِم ساده» عبارت‌اند از:

• صفحه اصلی تمیز: لیستی ساده و بهینه از آخرین مقالات برای دسترسی سریع کاربر
• صفحه داخلی خوانا: طراحی‌ای که در آن محتوای مقاله (متن و تصاویر) بدون هیچ عامل حواس‌پرتی، در مرکز توجه قرار می‌گیرد.
• کاملاً واکنش‌گرا: ظاهری ایدئال در تمام دستگاه‌های پخش تصویر

نقشه راه ما برای ساخت قالب وردپرس: مروری بر ۴ فاز اصلی پروژه

ما فرایند ساخت قالب wordpress را به چهار فاز اصلی تقسیم کرده‌ایم تا مسیر کاملاً شفاف باشد.

• فاز ۱: آماده‌سازی و طراحی استاتیک ⬅ نصب ابزارها و طراحی ظاهر اولیه قالب با HTML و CSS
• فاز ۲: تبدیل به قالب داینامیک وردپرس ⬅ جان‌بخشی به طرح استاتیک با PHP و توابع وردپرس
• فاز ۳: حرفه‌ای‌سازی و بهینه‌سازی ⬅ افزودن قابلیت‌های پیشرفته واکنش‌گرایی و بهینه‌سازی سرعت
• فاز ۴: استقرار روی سرور قدرتمند ⬅ انتقال قالب از محیط تست به یک سرور ابری سریع و مطمئن

آماده‌سازی ابزارها و پیش‌نیازهای ساخت قالب وردپرس

قبل‌از شروع عملیات ساخت قالب وردپرس تمِ ساده، باید پیش‌نیازها و ابزارهایی را آماده کنیم. البته نگران نباشید، قرار نیست با لیست پیچیده‌ای از ابزارها مواجه شوید. تنها چیزهایی که نیاز داریم، دانش پایه و چند نرم‌افزار رایگان است.

دانش فنی موردنیاز:

لازم نیست در این زبان‌ها یک متخصص تمام‌عیار باشید. درک مفاهیم اولیه کافی است تا بتوانید این پروژه را با موفقیت به پایان برسانید. همانطور که در راهنمای توسعه‌دهندگان وردپرس هم اشاره‌شده، این‌ها سنگ‌بنای کار ما هستند.

زبان برنامه‌نویسی	چرا به آن نیاز داریم؟
HTML	برای ایجاد ساختار و اسکلت صفحات وب (مثل هدر، متن اصلی، فوتر)
CSS	برای استایل‌دهی و زیباسازی ساختار HTML (مثل رنگ‌ها، فونت‌ها و چیدمان)
PHP (پایه)	برای داینامیک کردن قالب و ارتباط با هسته وردپرس (مثل فراخوانی پست‌ها از دیتابیس)

نرم‌افزارهای لازم برای ساخت قالب وردپرس

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

نوع ابزار	نمونه‌های پیشنهادی	کاربرد در پروژه ما
سرور محلی (Local Server)	XAMPP (برای ویندوز و لینوکس)، MAMP (برای مک)	یک وردپرس خام روی کامپیوتر شخصی شما نصب می‌کند تا بدون نیاز به خرید هاست و دامنه، قالب را به‌صورت آفلاین طراحی، تست و عیب‌یابی کنید.
ویرایشگر کد (Code Editor)	Visual Studio Code (پیشنهاد ما)، Sublime Text، Atom	محیطی برای نوشتن و ویرایش کدهای HTML, CSS, و PHP قالب. این ابزارها با رنگی کردن کدها (Syntax Highlighting) باعث خوانایی بیشتر و کاهش بروز خطا در کد می‌شوند.

فاز اول ساخت قالب وردپرس: ساخت اسکلت استاتیک با HTML و CSS

همان‌طور که اشاره کردیم، اسکلت اولیه ما در ساخت قالب وردپرس کدهای HTML هستند و نمای قالب را نیز با CSS طراحی می‌کنیم. چرا مستقیم سراغ PHP نمی‌رویم؟ چون جدا کردن کارها فرایند را فوق‌العاده ساده‌تر می‌کند. در این فاز، ما یک صفحه وب ساده و استاتیک می‌سازیم که دقیقاً شبیه ظاهر نهایی قالب ماست. بعد از اینکه از طرح بصری راضی بودیم، در فاز بعدی آن را به یک قالب وردپرسی داینامیک تبدیل می‌کنیم.

قدم ۱: ایجاد پوشه و فایل‌های simpletheme

اولین قدم ساخت قالب وردپرس، این است که فایل‌ها را در مکان درست آن ایجاد کنید:

1. به پوشه‌ای که وردپرس را در آن نصب کرده‌اید بروید.
2. وارد پوشه wp-content و سپس themes شوید.
3. در آن‌جا یک پوشه جدید با نام simpletheme بسازید. تمام فایل‌های قالب ما داخل این پوشه قرار می‌گیرند.
4. حالا وارد پوشه simpletheme شوید و دو فایل خالی در آن ایجاد کنید:
   • index.html (این فایل موقتی است و بعداً به index.php تبدیل می‌شود).
   • style.css (این فایل اصلی استایل‌های ما خواهد بود).

قدم ۲: کدنویسی ساختار اولیه در index.html

حالا فایل index.html را با ویرایشگر کد خود باز کنید و کدهای زیر را در آن قرار دهید. این کدها، ساختار اصلی و معنایی (Semantic) صفحه وبلاگ ما را با استفاده از تگ‌های استاندارد HTML5 تعریف می‌کنند. اگر با تگی آشنا نیستید، این راهنمای جامع از freeCodeCamp می‌تواند مرجع خوبی باشد.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تِم ساده - یک قالب وبلاگی مینیمال</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <header class="main-header">
            <h1>وبلاگ من</h1>
            <nav>
                <a href="#">خانه</a>
                <a href="#">درباره ما</a>
                <a href="#">تماس با ما</a>
            </nav>
        </header>

        <main class="main-content">
            <article class="post">
                <h2>عنوان اولین پست وبلاگ</h2>
                <p>این یک متن آزمایشی برای اولین پست وبلاگ ماست. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است...</p>
                <a href="#">ادامه مطلب...</a>
            </article>

            <article class="post">
                <h2>آموزش ساخت قالب وردپرس</h2>
                <p>در این مقاله ما به صورت قدم به قدم یک قالب وردپرسی را از صفر طراحی می‌کنیم. این یک مسیر جذاب برای خلق یک تجربه کاربری منحصر به فرد است...</p>
                <a href="#">ادامه مطلب...</a>
            </article>
        </main>

        <footer class="main-footer">
            <p>تمامی حقوق برای وبلاگ من محفوظ است. © 2025</p>
        </footer>
    </div>

</body>
</html>

اگر این فایل را ذخیره کرده و در مرورگر خود باز کنید، یک صفحه بی‌روح و بدون استایل می‌بینید. نگران نباشید در قدم بعدی به آن جان می‌دهیم.

قدم ۳: استایل‌دهی اولیه در style.css

وقت آن است که درادامه فاز اول ساخت قالب وردپرس به اسکلت بی‌جان HTML خود، ظاهری زیبا ببخشیم. فایل style.css را باز کنید و کدهای زیر را در آن قرار دهید. این کدها استایل‌های پایه‌ای برای خوانایی، چیدمان و رنگ‌بندی را به قالب ما اضافه می‌کنند.

/*
Theme Name: SimpleTheme
Author: Your Name
Description: A minimalist and fast blog theme created based on the Ferdowsi.Cloud tutorial.
Version: 1.0
*/

body {
    font-family: 'Vazirmatn', sans-serif; /* فرض بر اینکه فونت وزیرمتن در دسترس است */
    line-height: 1.7;
    background-color: #f8f9fa;
    color: #343a40;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* --- Header Styles --- */
.main-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 20px;
    margin-bottom: 30px;
    text-align: center;
}

.main-header h1 {
    margin: 0;
    font-size: 2.5rem;
}

.main-header nav a {
    margin: 0 15px;
    text-decoration: none;
    color: #007bff;
}

/* --- Main Content & Post Styles --- */
.main-content .post {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.main-content .post:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.post h2 {
    margin-top: 0;
}

.post a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

/* --- Footer Styles --- */
.main-footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
    font-size: 0.9rem;
    color: #6c757d;
}

نکته: خطوط اول این کد (که بین /* و */ قرار دارند) به هدر شیت استایل معروفند. این بخش در فاز بعدی برای وردپرس اهمیت حیاتی دارد، چون شناسنامه قالب شماست. حالا فایل index.html را دوباره در مرورگر خود باز یا رفرش کنید.

تبریک! شما با موفقیت در فاز اولِ ساخت قالب وردپرس، اسکلت استاتیک قالب خود را ساختید. این صفحه نقطه شروع ما برای تبدیل شدن به یک قالب وردپرسی کاملاً داینامیک است. در فاز بعدی به سراغ PHP می‌رویم تا این صفحه را زنده کنیم.

فاز دوم ساخت قالب وردپرس: جان‌بخشی به قالب با PHP و توابع وردپرس

تا اینجا ما یک ماکت زیبا و استاتیک از قالب‌مان ساخته‌ایم. حالا وقت آن است که این ماکت را به یک ساختمان هوشمند تبدیل کنیم. در این فاز با استفاده از PHP و توابع وردپرس، به قالب‌مان یاد می‌دهیم که چطور محتوا را مستقیماً از دیتابیس وردپرس بخواند و نمایش دهد. اسکلت HTML ما به یک موجود زنده و داینامیک تبدیل خواهد شد.

قدم ۴: تبدیل index.html به index.php و شناساندن قالب به وردپرس

اولین قدم برای اینکه وردپرس قالب ما را به رسمیت بشناسد بسیار ساده است:

1. فایل index.html را به index.php تغییر نام دهید. پسوند .php به سرور می‌فهماند که این فایل ممکن است حاوی کدهای PHP باشد.
2. فایل style.css را باز کنید. همانطور که در فاز قبل اشاره شد، اطلاعاتی که در بالای این فایل (بین /* و */) نوشتیم، شناسنامه قالب ما برای وردپرس است.

تکمیل اطلاعات شناسنامه در style.css

مطمئن شوید که هدر فایل style.css شما حداقل شامل این خطوط است. وردپرس از این اطلاعات برای نمایش قالب شما در بخش «نمایش > پوسته‌ها» استفاده می‌کند.

-/css/-

/*
Theme Name: SimpleTheme
Theme URI: https://ferdowsi.cloud/blog/
Author: Your Name
Author URI: https://your-website.com/
Description: A minimalist and fast blog theme created based on the Ferdowsi.Cloud tutorial.
Version: 1.0
Requires at least: 5.8
Tested up to: 6.2
Requires PHP: 7.4
Tags: blog, minimalist, simple, custom-menu
Text Domain: simpletheme
*/

حالا لحظه موعود ساخت قالب وردپرس فرا رسیده است!

وارد پیشخوان وردپرس خود شوید و به مسیر نمایش > پوسته‌ها (Appearance > Themes) بروید. شما باید «تِم ساده» را در کنار دیگر قالب‌های پیش‌فرض وردپرس ببینید.

روی قالب «SimpleTheme» کلیک کنید و دکمه «فعال کردن» (Activate) را بزنید. اگر الان سایت خود را باز کنید، احتمالاً یک صفحه سفید یا بهم‌ریخته می‌بینید. کاملاً طبیعی است! چون هنوز ارتباط کامل با توابع وردپرس برقرار نشده. در قدم بعدی این مشکل را حل می‌کنیم.

قدم ۵: ماژولار کردن طرح با header.php و footer.php

بخش هدر (لوگو و منو) و فوتر (کپی‌رایت و لینک‌ها) تقریباً در تمام صفحات سایت شما تکرار می‌شوند. به جای کپی کردن این کدها در هر فایل الگو، آن‌ها را در فایل‌های جداگانه قرار می‌دهیم و هر جا نیاز بود، فراخوانی‌شان می‌کنیم. این اصل DRY (Don’t Repeat Yourself) نام دارد و یکی از اصول مهم برنامه‌نویسی تمیز است.

جدا کردن کدها و فراخوانی با get_header() و get_footer()

1. ساخت header.php:
   • یک فایل جدید به نام header.php در پوشه قالب خود بسازید.
   • به فایل index.php برگردید و تمام کدها را از ابتدای فایل (<!DOCTYPE html>) تا پایان تگ <header> (یعنی </header>) بُرش (Cut) دهید.
   • کدهای بُریده شده را در فایل header.php چسبانده (Paste) و ذخیره کنید.
   • نکته حیاتی: درست قبل از تگ پایانی </head> در فایل header.php، این تابع وردپرس را اضافه کنید: <?php wp_head(); ?>. این تابع به وردپرس و افزونه‌ها اجازه می‌دهد تا کدهای لازم (مثل CSS و JS) را در هدر سایت تزریق کنند.
2. ساخت footer.php:
   • یک فایل جدید دیگر به نام footer.php بسازید.
   • دوباره به index.php بروید و تمام کدها را از ابتدای تگ <footer> تا انتهای فایل (</html>) بُرش (Cut) دهید.
   • این کدها را در فایل footer.php چسبانده (Paste) و ذخیره کنید.
   • نکته حیاتی: درست قبل‌از تگ پایانی </body> در فایل footer.php، این تابع را اضافه کنید: <?php wp_footer(); ?>. این تابع نیز برای تزریق اسکریپت‌ها توسط افزونه‌ها ضروری است.
3. پاک‌سازی index.php:

حالا فایل index.php شما باید بسیار خلوت شده باشد. کدهای حذف شده هدر و فوتر را با توابع مخصوص فراخوانی وردپرس جایگزین کنید. کد index.php نهایی شما باید به این شکل باشد:

-/php/-

<?php get_header(); ?>

    <main class="main-content">
        <article class="post">
            <h2>عنوان اولین پست وبلاگ</h2>
            <p>این یک متن آزمایشی برای اولین پست وبلاگ ماست. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است...</p>
            <a href="#">ادامه مطلب...</a>
        </article>

        <article class="post">
            <h2>آموزش ساخت قالب وردپرس</h2>
            <p>در این مقاله ما به صورت قدم به قدم یک قالب وردپرسی را از صفر طراحی می‌کنیم. این یک مسیر جذاب برای خلق یک تجربه کاربری منحصر به فرد است...</p>
            <a href="#">ادامه مطلب...</a>
        </article>
    </main>

<?php get_footer(); ?>

اکنون کار ساخت قالب وردپرس ما بسیار تمیزتر و حرفه‌ای‌تر انجام شد. حالا اگر سایت خود را رفرش کنید، باید دوباره همان ظاهر قبلی را ببینید، ولی با این تفاوت که این بار صفحه شما از سه فایل جداگانه (header.php, index.php, footer.php) ساخته شده‌است.

قدم ۶: نمایش داینامیک پست‌ها با حلقه وردپرس (The Loop)

تا این لحظه از آموزش طراحی قالب وردپرس، محتوای صفحه اصلی ما ثابت (Hard-coded) است. اما ما می‌خواهیم وردپرس به صورت خودکار آخرین نوشته‌ها را از پایگاه داده بخواند و نمایش دهد. این کار با استفاده از قدرتمندترین و مشهورترین بخش در ساخت قالب وردپرس یعنی حلقه یا The Loop انجام می‌شود.

حلقه وردپرس را کارگری فرض کنید که بی‌وقفه به انبار محتوای شما (دیتابیس) می‌رود، جعبه‌های نوشته‌ها را یکی‌یکی برمی‌دارد و تا زمانی که جعبه‌ای باقی مانده باشد، محتویات آن (عنوان، متن، تاریخ و…) را برای شما نمایش می‌دهد.

جایگزین کردن محتوای آزمایشی با حلقه معروف وردپرس در index.php

وقت آن است که کدهای HTML استاتیک پست‌ها را حذف و حلقه واقعی وردپرس را جایگزین آن کنیم. فایل index.php خود را باز کنید و بخش <main> را با کد زیر تغییر دهید.

-/php/-

<main class="main-content">

    <?php if ( have_posts() ) : ?>

        <?php while ( have_posts() ) : the_post(); ?>

            <article class="post">
                <h2>
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                    </a>
                </h2>
                <div class="post-excerpt">
                    <?php the_excerpt(); ?>
                </div>
            </article>

        <?php endwhile; ?>

    <?php else : ?>
        <p>متاسفانه هیچ نوشته‌ای برای نمایش وجود ندارد.</p>
    <?php endif; ?>

</main>

توضیح کد:

• if ( have_posts() ): اول بررسی می‌کند که آیا اصلاً نوشته‌ای در دیتابیس برای نمایش وجود دارد یا نه.
• while ( have_posts() ) : the_post();: این خود حلقه است. تا زمانی که پستی وجود داشته باشد، آن را برای نمایش آماده می‌کند.
• the_title(): عنوان پست فعلی را نمایش می‌دهد.
• the_permalink(): آدرس اینترنتی (URL) منحصربه‌فرد پست فعلی را برمی‌گرداند. ما آن را در تگ <a> قرار دادیم تا عنوان قابل‌کلیک باشد.
• the_excerpt(): خلاصه‌ای از متن نوشته را نمایش می‌دهد.
• else: اگر هیچ پستی پیدا نشد، یک پیام مناسب به کاربر نمایش داده می‌شود.

حالا اگر به صفحه اصلی سایتتان بروید، به‌جای دو پست آزمایشی، لیست تمام نوشته‌هایی را که در پیشخوان وردپرس خود ایجاد کرده‌اید خواهید دید.

قدم ۷: ساخت صفحه داخلی مقالات با single.php

تا اینجای آموزش ساخت قالب وردپرس، اگر روی عنوان یکی از مقالات کلیک کنید، دوباره به همان صفحه اصلی (index.php) برمی‌گردید. چرا؟ چون ما هنوز به وردپرس نگفته‌ایم که برای نمایش یک نوشته تکی باید از چه طرحی استفاده کند. اینجاست که سلسله‌مراتب قالب‌های وردپرس (Template Hierarchy) به‌کارمان می‌آید. وقتی کاربر می‌خواهد یک پست تکی را ببیند، وردپرس ابتدا به‌دنبال فایلی به نام single.php می‌گردد. اگر آن را پیدا نکند از index.php به‌عنوان الگوی جایگزین استفاده می‌کند.

کپی کردن محتوای index.php و شخصی‌سازی آن برای single.php

1. در پوشه قالب خود، یک رونوشت از فایل index.php ایجاد کنید.
2. نام فایل جدید را به single.php تغییر دهید.
3. فایل single.php را باز کنید. هدف ما در این صفحه، نمایش متن کامل مقاله است نه خلاصه آن. پس تنها کاری که باید بکنید این است که تابع the_excerpt() را با تابع the_content() جایگزین کنید.

کد نهایی بخش <main> در فایل single.php شما باید به این شکل باشد:

-/php/-

<main class="main-content">

    <?php if ( have_posts() ) : ?>

        <?php while ( have_posts() ) : the_post(); ?>

            <article class="post">
                <h2><?php the_title(); ?></h2>

                <div class="post-content">
                    <?php the_content(); ?>
                </div>
            </article>

        <?php endwhile; ?>

    <?php endif; ?>

</main>

    تغییرات کلیدی:

• the_excerpt() با the_content() جایگزین شد تا محتوای کامل پست نمایش داده شود.
• لینک را از دور the_title() حذف کردیم، چون کاربر هم‌اکنون در همان صفحه قرار دارد و نیازی به کلیک مجدد نیست.

حالا سایت خود را رفرش کنید و به صفحه اصلی بروید و روی عنوان یکی از مقالات کلیک کنید. شما به صفحه‌ای جدید هدایت می‌شوید که متن کامل آن مقاله را نمایش می‌دهد. شما با موفقیت دو الگوی نمایشی متفاوت برای سایت خود ساختید!

قدم ۸: فعال کردن قابلیت‌های کلیدی در functions.php

تابه‌حال ما برای ساخت قالب وردپرس با فایل‌هایی کار کردیم که مسئولیت نمایش و ظاهر قالب را بر عهده داشتند. اما فایل functions.php متفاوت است؛ این فایل مسئول اضافه کردن قابلیت‌ها و ویژگی‌های فنی به قالب شما است. ابتدا یک فایل جدید به نام functions.php در پوشه قالب (simpletheme) خود ایجاد کنید. هر کدی که در ادامه می‌نویسیم، داخل این فایل قرار می‌گیرد. فراموش نکنید که ابتدای فایل را با تگ <?php شروع کنید.

افزودن پشتیبانی از منوهای داینامیک

منوی ما درحال‌حاضر به‌صورت استاتیک در header.php کدنویسی شده‌است. این اصلاً ایدئال نیست. ما می‌خواهیم مدیر سایت بتواند به‌راحتی و ازطریق پیشخوان وردپرس (بخش «نمایش > فهرست‌ها») منوها را مدیریت کند.

۱. ثبت موقعیت منو: کد زیر را در functions.php اضافه کنید تا یک موقعیت منو به نام «منوی اصلی» در وردپرس ثبت شود.

<?php

function simpletheme_register_nav_menu() {
    register_nav_menus(array(
        'primary_menu' => 'منوی اصلی',
    ));
}
add_action('after_setup_theme', 'simpletheme_register_nav_menu');

۲. نمایش منو در هدر: حالا به header.php بروید و کدهای HTML استاتیک منو (تگ‌های <a>) را حذف کرده و تابع wp_nav_menu() را جایگزین آن کنید. کد بخش <nav> در header.php شما باید به این شکل درآید:

<nav>
    <?php
    wp_nav_menu(array(
        'theme_location' => 'primary_menu',
        'container'      => false, // برای جلوگیری از ایجاد div اضافه
        'menu_class'     => 'main-menu' // یک کلاس CSS برای استایل‌دهی
    ));
    ?>
</nav>

حالا اگر به بخش «نمایش > فهرست‌ها» در پیشخوان بروید، می‌توانید یک منو بسازید و موقعیت نمایش آن را «منوی اصلی» تعیین کنید.

فعال کردن تصاویر شاخص (Post Thumbnails)

تصویر شاخص (Featured Image) همان تصویری است که به‌عنوان نماینده اصلی یک نوشته عمل می‌کند. برای اینکه در این مرحله از ساخت قالب وردپرس، این قابلیت را در قالب خود فعال کنیم. کافیست کد زیر را به فایل functions.php اضافه کنید.

// افزودن پشتیبانی از تصویر شاخص
add_theme_support('post-thumbnails');

به همین سادگی! حالا می‌توانید هنگام ویرایش یک نوشته، یک تصویر شاخص برای آن انتخاب کنید. برای نمایش این تصویر در قالب، فایل index.php را باز کنید و کد the_post_thumbnail() را داخل حلقه، معمولاً قبل‌از عنوان اضافه کنید:

// کد به‌روز شده حلقه در index.php
<article class="post">
    <?php if (has_post_thumbnail()) : ?>
        <a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail('medium'); // می‌توانید از اندازه‌های دیگر مثل 'large' یا 'full' هم استفاده کنید ?>
        </a>
    <?php endif; ?>
    <h2>
        <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>
        </a>
    </h2>
    <div class="post-excerpt">
        <?php the_excerpt(); ?>
    </div>
</article>

این کد ابتدا بررسی می‌کند که آیا پستی تصویر شاخص دارد (has_post_thumbnail) و اگر داشت آن را نمایش می‌دهد.

فراخوانی صحیح style.css با wp_enqueue_style

تا الان ما فایل style.css را با یک تگ <link> ساده در header.php فراخوانی کرده‌ایم. این روش کار می‌کند، اما روش استاندارد و حرفه‌ای برای ساخت قالب وردپرس نیست. روش صحیح، استفاده از سیستم صف یا Enqueue وردپرس است. این کار به وردپرس اجازه می‌دهد تا مدیریت بهتری روی فایل‌های CSS و JS داشته باشد و از تداخل بین قالب و افزونه‌ها جلوگیری کند.

۱. ساخت تابع Enqueue: کد زیر را به انتهای فایل functions.php خود اضافه کنید.

function simpletheme_enqueue_styles() {
    wp_enqueue_style(
        'simpletheme-main-style', // یک نام منحصر به فرد
        get_stylesheet_uri() // آدرس فایل style.css قالب فعلی را برمی‌گرداند
    );
}
add_action('wp_enqueue_scripts', 'simpletheme_enqueue_styles');

۲. حذف لینک استاتیک: حالا که وردپرس مسئولیت بارگذاری style.css را بر عهده گرفته است، باید کد استاتیک قبلی را حذف کنید. به فایل header.php بروید و این خط را پیدا و کاملاً پاک کنید:

<link rel="stylesheet" href="style.css">

با انجام این سه مرحله، فایل functions.php شما از یک فایل خالی به مرکز کنترل قالب تبدیل شده‌است و قالب شما چندین قدم به استانداردهای حرفه‌ای نزدیک‌تر شده‌است.

فاز سوم: حرفه‌ای‌سازی «تِم ساده»

تبریک می‌گویم! شما موفق به ساخت قالب وردپرسی کاملاً کاربردی شده‌اید. اما تفاوت یک قالب خوب با یک قالب عالی در جزئیات آن‌ها است. در این فاز ما «تِم ساده» را از یک محصول کارراه‌انداز به یک محصول حرفه‌ای و بهینه تبدیل می‌کنیم؛ پس حالا که قالب کار می‌کند، وقت آن است که آن را صیقل دهیم.

واکنش‌گرا کردن «تِم ساده» برای موبایل و تبلت

امروزه بیش‌از نیمی از ترافیک وب ازطریق دستگاه‌های موبایل است. اگر قالب شما در موبایل به‌درستی نمایش داده نشود، بخش بزرگی از مخاطبان خود را از دست می‌دهید. واکنش‌گرایی (Responsive Design) یعنی طراحی و ساخت قالب وردپرس به‌گونه‌ای که ظاهر و چیدمان آن به‌صورت هوشمند با اندازه صفحه نمایش کاربر (دسکتاپ، تبلت یا موبایل) تطبیق پیدا کند.

خوشبختانه ما با افزودن تگ <meta name=”viewport” …> در header.php، اولین قدم را قبلاً برداشته‌ایم. حالا باید با استفاده از Media Queries در CSS به مرورگر بگوییم که در هر اندازه‌ای، چه استایلی را اعمال کند.

Media Query مثل یک دستور شرطی برای CSS عمل می‌کند: «اگر عرض صفحه نمایش کمتر از ۷۶۸ پیکسل بود، آنگاه این استایل‌ها را اعمال کن.»

کد زیر را به انتهای فایل style.css خود اضافه کنید:

/* ==========================================================================
   Media Queries for Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    /* این استایل‌ها فقط روی دستگاه‌هایی با عرض ۷۶۸ پیکسل یا کمتر اعمال می‌شوند */

    body {
        padding: 0;
    }

    .container {
        width: 100%;
        padding: 20px;
        border-radius: 0;
        box-shadow: none;
    }

    .main-header h1 {
        font-size: 2rem; /* کاهش اندازه عنوان اصلی در موبایل */
    }

    .main-header nav a {
        margin: 0 10px; /* کاهش فاصله بین لینک‌های منو */
    }

    /* کاهش اندازه عنوان پست‌ها در موبایل */
    .post h2 {
        font-size: 1.5rem;
    }
}

این کد چه کاری انجام می‌دهد؟

• @media (max-width: 768px): شرط اصلی ماست.
• body { padding: 0; }: فاصله اضافی دور صفحه را در موبایل حذف می‌کند.
• .container: عرض کانتینر اصلی را ۱۰۰٪ می‌کند تا تمام صفحه را بپوشاند و فاصله‌های داخلی (padding) آن را کم می‌کند تا محتوا فضای بیشتری داشته باشد.
• font-size: اندازه فونت عنوان اصلی سایت و عنوان پست‌ها را برای صفحه‌های کوچک‌تر کاهش می‌دهد تا خواناتر باشند.

حالا سایت خود را در مرورگر باز کنید و با کوچک و بزرگ کردن پنجره مرورگر نتیجه را ببینید. وقتی عرض صفحه از ۷۶۸ پیکسل کمتر شود، استایل‌ها به‌صورت آنی تغییر می‌کنند و قالب شما ظاهری عالی در موبایل پیدا می‌کند.

بهینه‌سازی سئوی داخلی قالب (On-page SEO)

سئوی یک سایت به دو بخش تقسیم می‌شه: محتوا و ساختار فنی. وظیفه نویسنده محتوا است که از کلمات کلیدی درست استفاده کند، اما وظیفه کسی که کار ساخت قالب وردپرس را بر عهده دارد این است که یک ساختار تمیز، قابل‌فهم و بهینه برای موتورهای جستجو فراهم کند. یک قالب با سئوی فنی خوب به گوگل کمک می‌کند تا محتوای شما را بهتر درک و رتبه‌بندی کند.

در ادامه دو تا از مهم‌ترین تکنیک‌های سئوی داخلی در طراحی قالب وردپرس را روی «تِم ساده» پیاده می‌کنیم.

۱. استفاده صحیح از تگ‌های هدر (H1, H2,…)

تگ‌های <h1> تا <h6> فقط برای بزرگ کردن متن نیستند؛ آن‌ها ساختار و سلسله‌مراتب محتوای شما را به گوگل نمایش می‌دهند. یک قانون مهم در سئو این است که «هر صفحه باید فقط یک تگ <h1> داشته باشه» تا به‌عنوان «عنوان اصلی» آن صفحه عمل کند.

• در صفحه اصلی (Homepage): عنوان اصلی سایت باید <h1> باشد.
• در صفحه داخلی مقالات (Single Post): عنوان خودِ مقاله باید <h1> باشد.

بیایید قالب‌مان را اصلاح کنیم:

۱. اصلاح header.php: درحال‌حاضر، عنوان سایت ما در تمام صفحات با تگ <h1> نمایش داده می‌شود. این اتفاق برای صفحات داخلی خوب نیست. کد زیر را در header.php جایگزین تگ <h1> قبلی کنید:

```php
<?php
if ( is_front_page() ) : // اگر در صفحه اصلی بودیم
    echo '<h1>' . get_bloginfo('name') . '</h1>';
else : // در غیر این صورت
    echo '<p class="site-title"><a href="' . esc_url( home_url( '/' ) ) . '">' . get_bloginfo('name') . '</a></p>';
endif;
?>
```

این کد به‌صورت هوشمندانه باعث می‌شود که اگر کاربر در صفحه اصلی بود، عنوان را با <h1> و در غیر این صورت آن را داخل یک تگ `<p>` قرار می‌دهد.

2. اصلاح single.php: حالا که <h1> اصلی را از هدر صفحات داخلی حذف کردیم، باید عنوان مقاله را به <h1> تبدیل کنیم. فایل single.php را باز کنید و تگ <h2> دور عنوان را به <h1> تغییر دهید.

// کد به‌روز شده در single.php
<h1><?php the_title(); ?></h1>

۲. داینامیک کردن تگ <title> صفحه

تگ <title> (متنی که در تب مرورگر نمایش داده می‌شه) یکی از مهم‌ترین فاکتورهای سئو است. عنوان ما درحال‌حاضر در header.php استاتیک و ثابت است. ما باید این کار را به خود وردپرس بسپاریم.

۱. افزودن پشتیبانی از تگ عنوان: کد زیر را به فایل functions.php خود اضافه کنید:

```php
// فعال کردن مدیریت تگ عنوان توسط وردپرس
add_theme_support('title-tag');
```

2. حذف تگ استاتیک: حالا به header.php بروید و کل خط زیر را کاملاً حذف کنید:

<title>تِم ساده - یک قالب وبلاگی مینیمال</title>

از این به بعد، وردپرس به‌صورت خودکار بهترین عنوان ممکن را برای هر صفحه (صفحه اصلی، نوشته‌ها، دسته‌بندی‌ها و…) ایجاد می‌کند. مثلاً: “نام نوشته – نام سایت”.

با این دو تغییر ساده، ساختار قالب شما بسیار برای گوگل بهینه‌تر و قابل فهم‌تر شد.

افزایش سرعت با بهینه‌سازی کدهای CSS و JS

سرعت بارگذاری سایت یکی از مهم‌ترین عوامل در تجربه کاربری (UX) و رتبه‌بندی سئو است. یک ثانیه تأخیر بیشتر می‌تواند منجر به از دست رفتن کاربر شود. یکی از روش‌های مؤثر برای افزایش سرعت، کاهش حجم فایل‌های CSS و JavaScript قالب است. این کار از طریق فرایندی به نام Minification (فشرده‌سازی) در هنگام ساخت قالب وردپرس انجام می‌شود.

Minification چیست و چرا اهمیت دارد؟

فشرده‌سازی یا Minify کردن کد، به‌معنی حذف تمام کاراکترهای غیرضروری از فایل کد (مانند فاصله‌های خالی، خطوط جدید، و کامنت‌ها) بدون تغییر در عملکرد آن است. این کار حجم نهایی فایل را به‌شکل چشمگیری کاهش می‌دهد و درنتیجه، مرورگرِ کاربر آن را سریع‌تر دانلود می‌کند.

چگونه کدهای خود را فشرده کنیم؟

انجام این کار به صورت دستی زمان‌بر و مستعد خطا است. بهترین راه، استفاده از ابزارهای خودکار است.

1. استفاده از ابزارهای آنلاین: برای پروژه‌های ساده‌ای مانند «تِم ساده»، ابزارهای آنلاین بهترین گزینه هستند. وب‌سایت‌هایی مانند CSS Minifier به شما اجازه می‌دهند کد خود را وارد کرده و نسخه فشرده آن را تحویل بگیرید.
2. پیاده‌سازی در پروژه:
   • تمام محتوای فایل style.css خود را کپی کنید.
   • به یک ابزار آنلاین مثل CSS Minifier بروید و کد را در آنجا جای‌گذاری کنید.
   • خروجی فشرده شده را کپی کنید.
   • در پوشه قالب خود، یک فایل جدید به نام style.min.css بسازید و کد فشرده را در آن ذخیره کنید.
3. فراخوانی فایل فشرده در وردپرس:

آخرین قدم این است که به وردپرس بگوییم به‌جای فایل اصلی از نسخه فشرده و کم‌حجم استفاده کند. برای این کار، فایل functions.php را باز کنید و تابعی که برای فراخوانی استایل‌ها نوشتیم (simpletheme_enqueue_styles) را به‌شکل زیر اصلاح کنید:

function simpletheme_enqueue_styles() {
    wp_enqueue_style(
        'simpletheme-main-style',
        get_template_directory_uri() . '/style.min.css' // آدرس فایل فشرده شده
    );
}
add_action('wp_enqueue_scripts', 'simpletheme_enqueue_styles');

تغییر مهم: ما get_stylesheet_uri() را با get_template_directory_uri() . ‘/style.min.css’ جایگزین کردیم تا مستقیماً فایل .min را آدرس‌دهی کنیم.

نکته بسیار مهم: همیشه فایل style.css اصلی و خوانا را برای توسعه و ایجاد تغییرات آینده نگه دارید و فقط نسخه فشرده (.min) را در سایت نهایی بارگذاری کنید.

تبریک می‌گویم! فاز سوم از ساخت قالب وردپرس با موفقیت به پایان رسید. شما اکنون یک قالب وردپرسی دارید که هم کاربردی و داینامیک است و هم برای موبایل، موتورهای جستجو و سرعت نیز بهینه‌سازی شده‌است. این یک پایه محکم و حرفه‌ای برای هر نوع پروژه وردپرسی است.

بااینکه باهم یک قالب ساده ساختیم اما شما در این مقاله فرایند کامل ساخت قالب وردپرس را از ایده تا یک محصول نهایی با نام «تم ساده» آموخته‌اید و اکنون ابزارهای لازم برای شروع هر تجربه‌ آنلاینی را در اختیار دارید. در ادامه می‌توانید محصول فعلی را از لحاظ بصری توسعه بدهید و یک محصول تجاری کامل ایجاد کنید.

فاز نهایی: انتخاب بهترین بستر برای اجرای قالب

شما تا به اینجای آموزش ساخت قالب wordpress توانستید یک قالب سبک، بهینه و کاملاً سفارشی و در یک کلام، یک اثر هنری خلق کرده‌اید. اما یک اثر هنری ارزشمند را در یک انبار تاریک آویزان نمی‌کنند، بلکه آن را در یک گالری با نورپردازی و امنیت مناسب به نمایش می‌گذارند. ما داریم درباره بستر میزبانی یا سرور صحبت می‌کنیم. انتخاب بستر اشتباه می‌تواند تمام زحماتی را که در سه فاز گذشته کشیده‌اید را بی‌اثر کند.

چه بستری برای نمایش «تِم ساده» به جهان خوب است؟

محیط لوکال‌هاست (Localhost) که تا به امروز از آن استفاده کردیم، یک کارگاه توسعه فوق‌العاده است. به ما اجازه داد بدون هزینه و با سرعت بالا، مراحل ساخت قالب وردپرس خود را انجام دهیم و آن را تست کنیم. اما یک کارگاه، محل دائمی نمایش محصول به مشتریان نیست. لوکال‌هاست چند محدودیت ذاتی دارد:

• عدم دسترسی عمومی: فقط شما روی کامپیوتر شخصی خودتان می‌توانید سایت را ببینید. برای اینکه تمام جهان به سایت شما دسترسی داشته باشند، باید روی یک سرور آنلاین قرار بگیرد.
• عملکرد غیرواقعی: لوکال‌هاست برای تحمل بار ترافیک واقعی کاربران طراحی نشده‌است و نمی‌تواند معیاری برای سنجش سرعت واقعی سایت شما در دنیای وب باشد.
• پایداری و اطمینان: عملکرد آن به کامپیوتر شخصی شما وابسته است. اگر سیستم خود را خاموش کنید، سایت شما نیز از دسترس خارج می‌شود.

لوکال هاست وظیفه خود را به‌خوبی انجام داده‌است؛ اکنون زمان انتقال محصول نهایی به یک ویترین جهانی و حرفه‌ای است.

سرعت و امنیت: هدیه سرور ابری به قالب دست‌ساز شما

شما ساعت‌ها برای بهینه‌سازی کدها، فشرده‌سازی فایل‌ها و پیاده‌سازی اصول سئو و ساخت قالب وردپرس وقت گذاشته‌اید. اکنون سرور ابری (Cloud Server) می‌تواند انتخاب منطقی شما برای آنلاین‌سازی پروژه «ساخت قالب وردپرس تم ساده» که انجام دادیم باشد.

سرور ابری برخلاف هاست اشتراکی، منابع سخت‌افزاری (CPU, RAM, SSD) را به‌صورت اختصاصی در اختیار شما قرار می‌دهد.

• سرعت بالا: منابع اختصاصی به این معناست که سرعت سایت شما تحت تأثیر وب‌سایت‌های دیگر قرار نمی‌گیرد. این موضوع سرعت بارگذاری قالب بهینه شما را به حداکثر می‌رساند که تأثیر مستقیمی بر رضایت کاربر و رتبه سئو دارد.
• امنیت در سطح بالا: سرورهای ابری فردوسی در یک محیط ایزوله عمل می‌کنند و با دیواره‌های آتش (Firewall) پیشرفته و امکان تهیه نسخه‌های پشتیبان خودکار، امنیت داده‌ها و کدهای ارزشمند شما را تضمین می‌کنند.
• مقیاس‌پذیری و انعطاف‌پذیری: اگر وبلاگ شما رشد کند و ترافیک آن افزایش یابد، می‌توانید منابع سرور ابری خود را تنها با چند کلیک ارتقا دهید. دیگر نگران از دسترس خارج شدن سایت در زمان اوج بازدید نخواهید بود.

در واقع تمام بهینه‌سازی‌هایی که در فاز سوم انجام دادیم، پتانسیل واقعی خود را تنها روی یک زیرساخت قدرتمند مانند سرور ابری فردوسی نشان می‌دهند.

 ساخت قالب وردپرس: سخن پایانی ابر فردوسی

اگر تا اینجای کار همراه ما بوده‌اید به شما تبریک می‌گوییم. شما ساخت قالب وردپرس را از یک پوشه خالی شروع کردید و یک قالب قالب وردپرسی کاملاً کاربردی، بهینه و حرفه‌ای طراحی کردید. شما دیگر یک مصرف‌کننده صرف قالب‌های آماده نیستید؛ شما اکنون یک «خالق» هستید که توانایی تبدیل ایده‌های خود به یک محصول دیجیتال واقعی را دارید.

در این راهنما، ما با هم «تِم ساده» را ساختیم، اما دانش واقعی که به دست آوردید، بسیار فراتر از این پروژه است. شما یاد گرفتید که چطور:

• یک طرح استاتیک را به یک قالب داینامیک وردپرسی تبدیل کنید.
• با حلقه وردپرس و توابع کلیدی، محتوا را به‌صورت پویا نمایش دهید.
• قالب خود را برای موبایل، موتورهای جستجو و سرعت بهینه‌سازی کنید.

به یاد داشته باشید، ساخت قالب در وردپرس یک مهارت ارزشمند و پایان‌ناپذیر است. این راهنما نقطه شروع شماست. اکنون می‌توانید با افزودن قابلیت‌های جدید، قالب خود را گسترش دهید و پروژه‌های پیچیده‌تری را تعریف کنید. موفقیت نهایی شما در گرو ترکیب دو عنصر کلیدی است: یک کد تمیز و بهینه و یک زیرساخت میزبانی قدرتمند

اکنون که با یکی از مهم‌ترین جنبه‌های فنی وردپرس آشنا شدید، برای درک بهتر اکوسیستم آن، مطالعه مقاله «وردپرس چیست؟ جامع‌ترین معرفی + مزایا و کاربردهای WordPress» می‌تواند دید شما را کامل‌تر کند.

سؤالات متداول درباره «ساخت قالب وردپرس»