سیستم اتوماسیون هاستینگ WHMCS از پوسته‌ها (Theme) و قالب‌های (Template) مجزایی برای نمایش محتوا به مشتریان و کارکنان استفاده می‌کند. پوسته پیش‌فرض این سیستم (مانند twenty-one) تمام قابلیت‌های پایه را برای مدیریت سرویس‌ها و صورت‌حساب‌ها دارد، اما برای هماهنگی با هویت بصری برند و زبان فارسی، به سفارشی‌سازی یا جایگزینی با یک قالب اختصاصی نیاز خواهد داشت.
بسیاری از شرکت‌های هاستینگ برای تفکیک بار پردازشی، بخش وبلاگ و سایت اصلی را از پرتال فروش جدا می‌کنند. در این الگو، مدیران با تکیه بر آموزش وردپرس سایت اصلی را مدیریت کرده و اتوماسیون مالی WHMCS را روی یک هاست لینوکسی مجزا نگه می‌دارند؛ بنابراین هماهنگ‌سازی ظاهری این دو بخش اهمیت پیدا می‌کند. در این راهنما، مراحل نصب قالب آماده، یکپارچه‌سازی کدها با سایت اصلی و ویرایش قالب ایمیل و فاکتور را بررسی می‌کنیم.
ساختار قالب‌ها در WHMCS چگونه کار می‌کند؟
پیش از دستکاری و ویرایش فایل‌ها، باید به تفاوت نوع میزبانی این اسکریپت توجه کنید:
- نسخه خودمیزبان (Self-hosted): تمام مراحل آپلود، کدنویسی و ویرایش فایل‌های قالب به‌صورت دستی روی هاست یا سرور شما انجام می‌شود.
- نسخه ابری (WHMCS Cloud): نصب و پیکربندی اولیه خودکار است و برای سفارشی‌سازی پوسته باید از ماژول افزونه Theme Editor استفاده کنید.
در جدول زیر، چهار بخش ظاهری قابل ویرایش در نسخه خودمیزبان WHMCS و محل مدیریت آن‌ها مقایسه شده است:
| نوع قالب | کاربرد | مسیر فایل‌ها در هاست / محل تنظیم در پنل |
|---|---|---|
| پوسته ناحیه کاربری (System Theme) | کنترل رابط کاربری و ظاهر پنل مشتریان (Client Area) | پوشه /whmcs/templates/ تنظیم در: Configuration > System Settings > General Settings |
| قالب فرم سفارش (Order Form) | تعیین ظاهر سبد خرید و مراحل ثبت سفارش | پوشه /whmcs/templates/orderforms/ تنظیم در تب Ordering یا بخش Products/Services |
| قالب ایمیل (Email Templates) | طراحی ظاهر و متن ایمیل‌های ارسالی سیستم | بدون نیاز به دستکاری فایل‌های هاست تنظیم در: Setup (System Settings) > Email Templates |
| قالب فاکتور (Invoice) | تغییر ظاهر نمایش آنلاین، نسخه چاپی و خروجی PDF صورت‌حساب‌ها | نصب به‌صورت مکمل روی قالب‌های موجود در پوشه قالب فعال |
تفاوت پوسته سیستم (System Theme) و قالب فرم سفارش (Order Form)
در ساختار WHMCS، ظاهر رابط کاربری مشتریان به دو بخش مستقل تقسیم می‌شود که هرکدام وظیفه و محل تنظیم مجزایی دارند:
- پوسته سیستم (System Theme): این بخش، رابط کاربری عمومی و ظاهر کل ناحیه کاربری (Client Area) را کنترل می‌کند تا با سایر بخش‌های وب‌سایت شما هماهنگ باشد. برای تغییر پوسته سیستم باید از مسیر Configuration > System Settings > General Settings وارد تب General شوید.
- قالب فرم سفارش (Order Form Template): این قالب صرفاً ظاهر و تجربه کاربری فرایند سبد خرید و مراحل ثبت سفارش را مشخص می‌کند. شما می‌توانید قالب فرم سفارش پیش‌فرض کل سیستم را از تب Ordering در General Settings تغییر دهید، یا از مسیر Configuration > System Settings > Products/Services برای گروه‌های محصولی خاص، قالب سبد خرید مجزایی انتخاب کنید.
اگر قصد دارید پوسته‌ها یا قالب‌های فرم سفارش پیش‌فرض WHMCS را سفارشی‌سازی کنید، ابتدا یک کپی از مخازن رسمی Git این پلتفرم در GitHub تهیه کرده و تغییرات خود را روی آن اعمال کنید.
تفاوت قالب WHMCS با ماژول‌های WHMCS
قالب‌های WHMCS صرفاً بر بهبود طراحی و ظاهر پرتال تمرکز دارند و عملکرد فنی سیستم را تغییر نمی‌دهند. در مقابل، ماژول‌های WHMCS قابلیت‌های عملیاتی و اتوماسیون را به هسته پلتفرم اضافه می‌کنند. اتصال به کنترل‌پنل‌های هاست مانند cPanel، DirectAdmin و Plesk، راه‌اندازی درگاه‌های پرداخت بانکی، ثبت و تمدید دامنه یا افزودن ابزارهای جانبی از طریق WHMCS Marketplace (مانند ماژول بکاپ‌گیری CodeGuard) همگی توسط ماژول whmcs انجام می‌شوند.
این تفاوت در نحوه توسعه و ویرایش آن‌ها نیز دیده می‌شود. برای تغییر فایل‌های قالب (.tpl)، آشنایی با HTML، CSS و متغیرهای ساده Smarty کافی است و نیازی به دانش PHP ندارید. اما ساخت یا سفارشی‌سازی ماژول های whmcs و نوشتن فایل‌های هوک (includes/hooks) مستقیماً با منطق سیستم درگیر است و به تسلط بر زبان PHP و گذراندن آموزش برنامه نویسی PHP نیاز دارد.
آموزش نصب قالب WHMCS به‌صورت گام‌به‌گام
نصب یک قالب کامل و راست‌چین در WHMCS فراتر از آپلود یک پوشه ساده است؛ زیرا قالب‌های آماده معمولاً شامل فایل‌های فرم سفارش، هوک‌ها و متغیرهای زبان نیز هستند. عدم نصب صحیح هر یک از این بخش‌ها می‌تواند ظاهر سایت را به هم بریزد یا عملکرد قابلیت‌های ضروری را مختل کند. در ادامه، مراحل دقیق نصب قالب را به تفکیک دایرکتوری‌های مربوطه در هاست مرور می‌کنیم.
گام اول: آپلود فایل‌های پوسته در پوشه templates
از طریق File Manager کنترل‌پنل هاست یا ابزارهای FTP وارد دایرکتوری اصلی نصب WHMCS شوید و به مسیر /whmcs/templates/ بروید. فایل فشرده (ZIP) پوسته اصلی یا نسخه راست‌چین (-rtl) قالب خود را در این پوشه آپلود کنید.
پس از پایان بارگذاری، روی فایل فشرده راست‌کلیک کرده و گزینه Extract را بزنید تا از حالت فشرده خارج شود. در نهایت باید پوشه اختصاصی قالب شما (مانند hostim، kohost یا kohost-rtl) مستقیماً درون پوشه templates قرار گرفته باشد.
گام دوم: افزودن قالب فرم سفارش (Order Forms)
بسیاری از قالب‌های آماده، یک قالب اختصاصی برای سبد خرید و فرم سفارش (مانند themetags_cart) ارائه می‌دهند تا مراحل خرید نیز با ظاهر جدید هماهنگ باشد. برای نصب این بخش، در فایل‌منیجر هاست یا FTP به مسیر زیر بروید:
/<your-public-root-directory>/whmcs/templates/orderforms/
فایل فشرده (ZIP) مربوط به فرم سفارش قالب را در پوشه orderforms آپلود و استخراج (Unzip) کنید. پس از استخراج، مطمئن شوید پوشه فرم سفارش اختصاصی قالب مستقیماً در کنار سایر قالب‌های پیش‌فرض این دایرکتوری قرار گرفته است.
گام سوم: قرار دادن فایل‌های هوک (Hooks) و زبان (Language Overrides)
فایل‌های هوک (Hooks) ارائه‌شده در بسته نصبی قالب را به مسیر /whmcs/includes/hooks/ منتقل کنید. اگر این فایل‌ها به‌صورت فشرده هستند، آن‌ها را در همین مسیر استخراج (Unzip) کرده و مطمئن شوید که کل پوشه هوک به این دایرکتوری اضافه شده است، نه فقط فایل‌های تکی.
در مرحله بعد، پوشه overrides را به دایرکتوری زبان در مسیر /whmcs/lang/overrides/ انتقال دهید. این پوشه شامل فایل‌های زبان (مانند english.php) است که متغیرهای متنی جدید مورد نیاز قالب را به سیستم اضافه یا جایگزین می‌کند تا عبارات اختصاصی پوسته بدون خطا نمایش داده شوند.
گام چهارم: پیش‌نمایش و فعال‌سازی قالب در پنل مدیریت
پیش از فعال‌سازی عمومی پوسته برای مشتریان، می‌توانید ظاهر آن را بدون تغییر تنظیمات اصلی بررسی کنید. برای پیش‌نمایش قالب جدید، نام پوشه آن (مثلاً template1) را به انتهای آدرس پرتال خود اضافه کنید:
https://www.yourwebsite.com/whmcs/index.php?systpl=template1
پس از اطمینان از نمایش صحیح اجزا، وارد پنل مدیریت WHMCS شوید، روی آیکون تنظیمات (آچار) در نوار بالایی کلیک کنید و به بخش General Settings بروید:
- تغییر پوسته اصلی: در تب General، نام قالب جدید را از لیست انتخاب کنید.
- تغییر قالب سبد خرید: وارد تب Ordering شوید، قالب فرم سفارش اختصاصی (مانند Themetags Cart یا Kohost Cart) را علامت بزنید و تغییرات را ذخیره کنید.
آموزش ساخت و یکپارچه‌سازی قالب WHMCS با سایت اصلی (Integration)
قالب‌های وردپرس یا HTML مستقیماً روی WHMCS قابل نصب نیستند و سیستم نیازمند پوسته اختصاصی خود است. به همین دلیل، طراحانی که با گذراندن دوره آموزش طراحی سایت ویترین اصلی سایت هاستینگ را ساخته‌اند، برای هماهنگ‌سازی ظاهری پرتال مشتریان با وب‌سایت، باید از فرایند یکپارچه‌سازی (WHMCS Integration) استفاده کنند.
در این روش، ساختار ظاهری فایل‌های هدر و فوتر در WHMCS شبیه به قالب سایت اصلی کدنویسی می‌شود تا کاربر هنگام جابه‌جایی بین صفحات سایت و ناحیه کاربری، تغییر ظاهری احساس نکند. در ادامه، مراحل فنی این یکپارچه‌سازی و قطعه کدهای موردنیاز را بررسی می‌کنیم.
پیش‌نیازها و آماده‌سازی پوشه قالب جدید
برای شروع یکپارچه‌سازی، به یک کلاینت FTP رایگان (مانند FileZilla)، یک ویرایشگر متن (مانند Notepad++)، فایل‌های قالب سایت اصلی (HTML) و دانش پایه در ویرایش و کد نویسی html به زبان ساده نیاز دارید.
ابتدا با استفاده از FileZilla یک کپی از پوشه قالب پیش‌فرض خود را روی کامپیوتر دانلود کنید. برای جلوگیری از بازنویسی فایل‌های اصلی، نام این پوشه را به یک عبارت منحصربه‌فرد مانند template1 تغییر دهید و آن را دوباره در مسیر /whmcs/templates/ روی هاست آپلود کنید.
در گام بعد، پوشه‌های مربوط به استایل‌ها (css) و تصاویر (images) قالب سایت اصلی خود را کپی کرده و به داخل پوشه قالب جدید در مسیر /whmcs/templates/template1/ منتقل نمایید. نیازی به آپلود فایل‌های HTML نیست، اما قرار دادن یک کپی مجزا از فایل‌های CSS و تصاویر در پوشه قالب WHMCS اهمیت زیادی دارد؛ به‌ویژه اگر روی WHMCS از گواهی امنیتی SSL استفاده می‌کنید تا در بارگذاری استایل‌ها و تصاویر اختلالی ایجاد نشود.
ساختار فایل‌های کلیدی در موتور قالب‌ساز Smarty
بخش ظاهری و فرانت‌اند WHMCS (آنچه مشتریان شما می‌بینند) بر پایه سیستم قالب‌ساز Smarty طراحی شده است. با گذراندن دوره آموزش فرانت اند و برای ساخت یا یکپارچه‌سازی قالب در این سیستم، نیازی به دانش برنامه‌نویسی PHP ندارید؛ زیرا Smarty به شما اجازه می‌دهد از متغیرهای آماده و دستورات شرطی (IF statements) در کنار کدهای HTML استفاده کنید.
هنگامی که پوشه قالب جدید خود (مانند template1) را باز می‌کنید، پوشه تصاویر و فایل‌های متعددی را با پسوند .tpl مشاهده خواهید کرد. برای هماهنگ‌سازی ظاهر پرتال با وب‌سایت اصلی، تنها باید روی سه فایل کلیدی تمرکز کنید:
- فایل header.tpl: بخش بالایی قالب WHMCS (سربرگ و شروع کادر محتوا) را کنترل می‌کند.
- فایل footer.tpl: نوار کناری (سایدبار) و بخش پایینی قالب (پاورقی) را مدیریت می‌کند.
- فایل style.css: استایل‌ها و کدهای CSS قالب WHMCS را در بر می‌گیرد.
ویرایش فایل‌های header.tpl و footer.tpl
برای هماهنگ‌سازی ظاهر پرتال، ابتدا یک صفحه از قالب HTML سایت اصلی (ترجیحاً صفحه‌ای مانند blank.html که دارای باکس محتوا و سایدبار است) و فایل header.tpl را در ویرایشگر متن باز کنید. تمام محتویات پیش‌فرض header.tpl را پاک کرده و کدهای بالای صفحه HTML را تا نقطه‌ای که باکس اصلی محتوا شروع می‌شود (بدون قرار دادن متن داخل باکس)، در آن کپی کنید.
سپس فایل footer.tpl را باز کرده و کدهای قبلی آن را حذف کنید. این بار کدهای قالب HTML را از جایی که باکس محتوای اصلی تمام می‌شود (شامل کدهای سایدبار و فوتر) تا انتهای سند کپی کرده و در footer.tpl قرار دهید.
برای اینکه WHMCS فایل‌های استایل و تصاویر قالب جدید را پیدا کند، باید مسیر فایل‌های CSS (در ویژگی href) و تصاویر (در تگ‌های تصویر) را داخل بخش <head> فایل header.tpl اصلاح کرده و به پوشه قالب جدید خود ارجاع دهید. همچنین، برای بارگذاری صحیح اسکریپت‌های جاوااسکریپت و استایل‌های پایه محتوای WHMCS، قطعه کد زیر را در بخش <head> فایل header.tpl قرار دهید:
<title>{$companyname} - {$pagetitle}{if $kbarticle.title} - {$kbarticle.title}{/if}</title>
{if $systemurl}<base href="{$systemurl}" />{/if}
{$headoutput}
{if $livehelpjs}{$livehelpjs}{/if}پس از آپلود فایل‌های ویرایش‌شده در سرور، اگر با به‌هم‌ریختگی ظاهری مواجه شدید، به دلیل تداخل استایل‌های قالب HTML با فایل style.css پیش‌فرض WHMCS است. برای رفع این مشکل، کدهای CSS متضاد را از فایل style.css پوشه قالب WHMCS حذف کرده و فایل را مجدداً آپلود کنید.
تنظیم منوی ناوبری و دستورات شرطی (IF Statements)
برای نمایش منوهای متفاوت به کاربران واردشده و کاربران مهمان، از دستورات شرطی Smarty بدون نیاز به دانش PHP استفاده می‌شود. ساختار کلی این شرط بر پایه متغیر $loggedin کار می‌کند:
{if $loggedin}
Content here will be shown to users who are logged in.
{else}
Content here will be shown to everyone, unless the user is logged in to their account.
{/if}از این ساختار می‌توانید برای نمایش پیام خوش‌آمدگویی یا اطلاعات حساب کاربری به مشتریان واردشده نیز استفاده کنید. برای پیاده‌سازی منوی ناوبری پویا در سایدبار قالب (که در فایل footer.tpl قرار دارد)، لینک‌های پیش‌فرض HTML را با کد زیر جایگزین کنید:
{if $loggedin}
{$LANG.clientareanavhome}
{$LANG.clientareanavdetails}
{$LANG.clientareanavservices}
{$LANG.clientareanavdomains}
{$LANG.quotestitle}
{$LANG.invoices}
{$LANG.clientareanavsupporttickets}
{$LANG.affiliatestitle}
{$LANG.clientareaemails}
{$LANG.ordertitle}
{$LANG.logouttitle}
{else}
{$LANG.globalsystemname}
{$LANG.clientregistertitle}
{$LANG.clientareatitle}
{$LANG.announcementstitle}
{$LANG.knowledgebasetitle}
{$LANG.supportticketssubmitticket}
{$LANG.downloadstitle}
{$LANG.ordertitle}
{/if}با اجرای این کد، اگر کاربر وارد حساب خود شده باشد، عناوین بخش‌های اختصاصی ناحیه کاربری مانند سرویس‌ها (clientareanavservices)، دامنه‌ها، فاکتورها (invoices)، تیکت‌های پشتیبانی و خروج به او نمایش داده می‌شود. در مقابل، کاربران مهمان فقط عناوین بخش‌های عمومی مانند ثبت‌نام (clientregistertitle)، ورود به ناحیه کاربری، اخبار، پایگاه دانش (knowledgebasetitle) و ثبت سفارش را مشاهده می‌کنند و بخش‌های حساب کاربری برای آن‌ها مخفی می‌ماند. متغیرهای $LANG نیز عنوان هر بخش را بر اساس فایل زبان فعال سیستم فراخوانی می‌کنند.
سفارشی‌سازی قالب فاکتور و قالب ایمیل در WHMCS
تغییر پوسته ناحیه کاربری و فرم سفارش به تنهایی کافی نیست؛ برای یکپارچه ماندن ظاهر پرتال، باید ایمیل‌های سیستمی و صورت‌حساب‌های ارسالی نیز با هویت بصری برند شما هماهنگ شوند. شخصی‌سازی قالب ایمیل و قالب فاکتور در WHMCS از طریق تنظیمات پنل مدیریت، ویرایش کدهای Smarty یا افزودن قالب‌های مکمل انجام می‌شود.
تغییر و ساخت قالب ایمیل جدید (Email Templates)
برای شخصی‌سازی قالب ایمیل WHMCS نیازی به دستکاری فایل‌های روی هاست نیست و تمام تغییرات از مسیر Setup (System Settings) > Email Templates در پنل مدیریت انجام می‌شود. پیش از ویرایش تک‌تک پیام‌ها، برای یکپارچه‌سازی ظاهر کلی مکاتبات به مسیر Setup (System Settings) > General Settings و زبانه Mail بروید. در این بخش می‌توانید کدهای CSS عمومی (Global Email CSS Styling)، ساختار HTML هدر (Global Email Header Content)، فوتر (Global Email Footer Content) و امضای سراسری را برای ایمیل‌هایی که از تگ {$signature} استفاده می‌کنند، تنظیم کنید.
برای ساخت یک قالب ایمیل سفارشی، در صفحه Email Templates روی گزینه Create New Email Template کلیک کنید، نوع ایمیل (General، Product، Domain یا Invoice) و یک نام منحصربه‌فرد را انتخاب نمایید. از انتخاب نام Mass Mail Template خودداری کنید؛ زیرا این عبارت برای ارسال ایمیل‌های انبوه در سیستم رزرو شده است.
در صفحه ویرایش هر قالب، امکان ترکیب متن ساده و کدهای HTML، غیرفعال کردن ارسال آن ایمیل با تیک Disable یا افزودن فایل ضمیمه از بخش Attachments وجود دارد. همچنین چون متون پیش‌فرض سیستم انگلیسی هستند، باید آن‌ها را به فارسی برگردانید یا از پایین صفحه Email Templates، زبان جدید را از لیست کشویی Add اضافه کنید تا ایمیل‌ها متناسب با زبان انتخابی هر کاربر ارسال شوند.
پویاسازی ایمیل‌ها با فیلدهای ادغامی (Merge Fields) و شروط
برای درج خودکار اطلاعات کاربر یا سرویس در متن ایمیل، از فیلدهای ادغامی (Merge Fields) استفاده کنید. فهرست متغیرهای مجاز هر قالب در پایین ویرایشگر و در بخش Available Merge Fields قرار دارد؛ با قرار دادن نشانگر ماوس در محل دلخواه و کلیک روی نام فیلد (مانند Client Name)، تگ مربوطه در متن درج می‌شود.
برای فراخوانی فیلدهای سفارشی مشتریان از الگوی {$client_custom_field_fieldnamehere} (مثلاً برای کد مالیاتی به شکل {$client_custom_field_vatnumber}) و برای فیلدهای سفارشی محصول از {$service_custom_field_fieldnamehere} استفاده کنید و نام فیلد را به‌جای fieldnamehere قرار دهید. همچنین برای نمایش فهرست تمام فیلدهای سفارشی یک سرویس، حلقه Smarty زیر را به کار ببرید:
{foreach from=$service_custom_fields item=customfield}
{$customfield.name}: {$customfield.value}
{/foreach}امکان تعریف شروط برای نمایش متن‌های اختصاصی نیز در قالب ایمیل وجود دارد. برای نمونه، اگر می‌خواهید در قالب ایمیل باز شدن تیکت (Support Ticket Opened) پیام مشخصی فقط برای تیکت‌های دپارتمان فروش نمایش داده شود، از شرط زیر استفاده کنید:
{if $ticket_department eq "Sales"}
The sales department is open 9-5pm Monday-Friday so you will only receive a response between these times. We thank you for your patience.
{/if}شخصی‌سازی ظاهر فاکتورها در WHMCS
قالب فاکتور WHMCS یک پوسته کامل برای تغییر ظاهر کل ناحیه کاربری نیست؛ بلکه به‌عنوان یک بخش مکمل و مجزا، مستقیماً به قالب اصلی شما اضافه می‌شود. این قالب‌ها که ماژول محسوب نمی‌شوند (مانند قالب فاکتور پاکت)، با تمامی قالب‌های WHMCS و نسخه‌های مختلف PHP سازگار هستند و بدون دستکاری ساختار کلی پرتال روی سیستم قرار می‌گیرند.
با نصب قالب فاکتور، طرح پیش‌فرض و ساده صورت‌حساب‌ها جایگزین شده و ظاهر نمایش آنلاین فاکتور، نسخه چاپی و خروجی PDF به‌صورت مستقل تغییر می‌کند. این قالب‌های راست‌چین و واکنش‌گرا به شما اجازه می‌دهند رنگ‌بندی صورت‌حساب و نمایش فیلدهایی مانند مالیات بر ارزش افزوده، تخفیف‌ها و پرداخت از کیف پول را شخصی‌سازی کنید.
نکات امنیتی و نگهداری از قالب‌های WHMCS
برای جلوگیری از بروز خطا در بارگذاری صفحات یا ایجاد حفره امنیتی در پوشه‌های مرتبط با قالب، این دو اقدام را در هاست خود انجام دهید:
- تنظیم دسترسی نوشتن (Writable) برای پوشه کش قالب: سیستم WHMCS فایل‌های کامپایل‌شده قالب را در پوشه templates_c ذخیره می‌کند. این پوشه (به‌همراه پوشه‌های attachments و downloads) باید دسترسی نوشتن داشته باشد تا ذخیره کش قالب‌ها و بارگذاری صفحات بدون اختلال انجام شود.
- انتقال پوشه templates_c به خارج از روت وب: برای قطع دسترسی مستقیم مرورگر به فایل‌های کش قالب و داده‌های حساس، پوشه templates_c را به همراه پوشه‌های attachments و downloads به مسیری خارج از public_html منتقل کنید. پس از انتقال، مسیر جدید پوشه templates_c را در فایل configuration.php تعریف نمایید (مسیر جدید دو پوشه دیگر نیز از بخش Configuration > System Settings > Storage Settings در پنل مدیریت ثبت می‌شود).
با رعایت ساختار دایرکتوری‌ها هنگام نصب قالب آماده و استفاده از متغیرهای Smarty در فایل‌های .tpl و ایمیل‌ها، می‌توانید ظاهر پرتال مشتریان، مراحل سفارش و صورت‌حساب‌های WHMCS را بدون اختلال در هسته سیستم، با وب‌سایت اصلی خود هماهنگ کنید.
