آموزش شبکه
  • کاربر گرامی ، برای مطرح کردن سوالات و مشکلات مرتبط با ووکامرس از انجمن "پرسش و پاسخ ووکامرس" و برای مطرح کردن سایر مشکلات (وردپرس ، PHP و سایر اسکریپت ها) از انجمن "پرسش و پاسخ" اقدام کنید. برای دریافت پاسخ حداقل 48 ساعت منتظر باشید.

Mohammad

آموزش طراحی و تبدیل قالب html به قالب whmcs

4 پست در این موضوع قرار دارد

در این تاپیک قصد داریم به زبان ساده به شما آموزش بدیم که چطور یک قالب HTML رو تبدیل به قالب WHMCS کنید

همون طور که میدونید سیستم whmcs یکی از محبوبترین سیستم های مدیریت امور مالی و فروش هاستینگ هست.

مواد اولیه :d:

  1. نرم افزار محبوب Notepad++ -
    این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

  2. یا نرم افزار DreamWeaver -
    این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

پیش نیاز ها برای درک این آموزش:

  1. آشنایی با CSS و HTML در حد معمولی

مقدمه:

برای تبدیل و طراحی یک قالب html به سیستم whmcs ما کلا با دو فایل کار داریم.(یعنی 95% کار تقریبا با این دو فایل هست)

فایل header.tpl و footer.tpl در مسیر قالب موجود در پوشه templates

در ادامه قصد داریم یک قالب html رو مرحله به مرحله تبدیل به whmcs کنیم...

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

خب دوستان

من یک قالب html خارجی از

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.
دانلود کردم و یکسری تغییرات جزئی علاوه بر راست چین کردن بهش دادم تا زیبا تر بشه

قالب رو به صورت HTML میتونید از این لینک دریافت کنید

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.
این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

مرحله دوم: تبدیل قالب - فایل header.tpl

اساس تبدیل قالب به whmcs به صورت زیر هست. به تصویر دقت کنید

whmcs-base.jpg

در ابتدا از قالب پیش فرض whmcs یک نسخه کپی میگیریم. و اسمش رو تغییر میدیم به persiantheme

مسیر قالب پیشفرض اینجاست: templates/default

همچنین پوشه images و js و فایل style.css رو داخل پوشه persiantheme کپی می کنیم.

خب حالا وارد فایل header.tpl موجود در پوشه persiantheme میشیم و با یک ویرایشگر مناسب مانند notepad++ باز میکنیم.

در ابتدا تمامی محتویات موجود در header.tpl رو حذف می کنیم.

در مرحله بعد کد های قالب جدیدمون که html هست رو داخلش paste میکنیم! نه همه کد ها رو. فقط این قسمت ها رو:

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

خب. حالا میرسیم به جایگزین کردن بعضی قسمت ها

در ابتدا دنبال خط زیر می گردیم: (این قسمت, عنوان صفحه هست.)

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

کد زیر رو جایگزین می کنیم (این کد عنوان رو بر میگردونه. همچنین یک شرط هم گذاشته شده که اگه وارد بخش "مرکز آموزش" شده بود, عنوان اون آموزش رو در کنار نام سایت نمایش بده

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

--------------

در مرحله بعد ما باید مسیر فایل های تصاویر, java و استایل قالب رو به مسیر قالب سیستم تغییر میدیم.

برای مثال:

به دنبال کد های زیر می گردیم: (این کد ها مربوط به مسیر فایل های استایل و java قالب هست)

<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery.js"></script>

کد زیر رو جایگزین میکنیم: (ما در اینجا به ابتدای مسیر فایل ها templates/{$template} رو اضافه میکنیم. متغیر template$ نام پوشه قالب که persiantheme هست رو برمیگردونه)

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

------------

همچنین در ادامه به دنبال خط های زیر میگردیم:

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

جایگزین می کنیم با:

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

و...

با تمامی تصاویر موجود در قالب همین کار رو میکنیم تا مسیر اونها تنظیم بشه

-----------

شرط های ورود کاربر:

ما در بعضی از قسمت ها نیاز داریم که از این شرط ها استفاده کنیم.

برای مثال: در صورتی که کاربر وارد شده بود عبارت "به بخش کاربری خود خوش آمدید" رو چاپ کنه در غیر اینصورت (وقتی کاربر وارد نشده بود) عبارت "کاربر مهمان , برای استفاده از امکانات سایت باید وارد شوید" رو نمایش بده...!

این مثال رو به صورت کد نمایش میدم:

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

خب حالا همین رو میخوایم در منوی بالای سایت پیاده کنیم: (منوی افقی بالای سایت)

به دنبال خط زیر می گردیم:

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

کد زیر رو جایگزین می کنیم.

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

------------------

در ادامه به دنبال این کد می گردیم

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

کد زیر رو جایگزین می کنیم. (برای بارگزاری تصویر در قالب)

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

-------------------

خب! کار ما با فایل header.php تموم شد!...

فایل header.tpl پیوست شد

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

در ادامه مبحث و پایان فایل header.tpl میرسیم به footer.tpl

خب حالا وارد فایل footer.tpl موجود در پوشه persiantheme میشیم و با یک ویرایشگر مناسب مانند notepad++ باز میکنیم.

در ابتدا تمامی محتویات موجود در footer.tpl رو حذف می کنیم.

در مرحله بعد ادامه ی کد های قالب جدید که html هست رو داخل footer.tpl پیست میکنیم.(منظور از ادامه باقیمانده کد های موجود در فایل قالب html هست. چون مقادیر اولیه قالب رو ما داخل header.tpl ریختیم)

کد های موجود در footer.tpl به شرح زیر هست:

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

خب. در ابتدا ما میرسیم به sidebar یا همون منوی سمت راست سایت:

به دنبال این کد ها می گردیم

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

کد زیر رو جایگزین میکنیم: (با استفاده از همون شرط ورود کاربر که در header.tpl استفاده کردیم)

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

-------------------

در ادامه چند عکس داریم که باید مسیرش با متغیر template$ تعیین بشه.

به دنبال کد زیر می گردیم:

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

کد زیر رو جایگزین می کنیم:

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

و همچنین

به دنبال کد های زیر می گردیم:

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

کد های زیر رو جایگزین می کنیم:

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

خب کار footer.tpl هم تموم شد! یعنی کار ما با کد نویسی قالب کلا به پایان رسید! قالب آماده هست.

فقط چند نکته هست که در تاپیک بعدی راجع به اونها توضیح میدم

فایل footer.tpl پیوست شد

این قسمت تنها برای اعضای تالار قابل نمایش می باشد. برای مشاهده لینک ها و... در تالار ثبت نام کنید.

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر
مهمان
این موضوع برای عدم ارسال قفل گردیده است.