آموزش طراحی قالب نیوک نسخه 8.4

[ircfc]

آموزش تبدیل قالبهای نسخه 8.3 به نسخه 8.4

در نسخه 8.4 تغییرات خیلی خوبی در بخش قالبها صورت گرفته که موارد رو یکی یکی خدمتتون عرض میکنم.

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

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

1. پوشه blocks. این پوشه برای قالبهایی هست که به هر دلیلی از پکیج اصلی نیوک ویرایش شدن. برای اینکه پکیج اصلی نیوک بدون دستکاری باقی بمونه میتونین اون فایل بلوک رو تو این پوشه بریزید و نتیجه تغییرات رو مشاهده کنین. این عملیات برای همه بلوکها قابل انجام هست. درون این پوشه یک پوشه دیگری هست به نام themes که کاربردش در نمایش بلوک در سایت هست. شما با توجه به ساختار کدینگ قالبهای نسخه جدید فایل htmlی رو به دلخواه خودتون طراحی میکنین و متغیرهای به کار رفته در بخش بلوکها رو داخلش استفاده میکنین. فایلهای این پوشه باید به این شکل نام گذاری بشن: nuke-blockname.html و این کلمه blockname در مدیریت بلوکها خودشون نشون میده که شما مثلا ً میگین میخوام بلوک آخرین 10 خبر ارسالی با این قالب نمایش داده بشه در غیر این صورت با قالب پیشفرض که در مراحل بعدی در موردش صحبت میکنیم نشون داده میشه.

2. پوشه fonts که با توجه به فونت استفاده شده در قالبتون میتونین ازش استفاده کنین. وجودش الزامی نیست و همونطور که گفتم بسته به نظر طراح در قالب قرار میگیره.

3. پوشه images. این پوشه مربوط به عکسهای قالب هست که حداقل باید فایلهای زیر رو داخلش داشته باشید.
like_dislike.png برای آیکون امتیاز دهی لایکی
pn_icon.png برای آیکون امتیاز دهی مثبت و منفی
small.png , stars.png برای آیکون امتیاز دهی ستاره ای
پوشه MTForumBlock و محتویاتش برای نمایش بلوک آخرین ارسالهای تالار گفتمان

4. پوشه language که مربوط به فایلهای زبان برای سایتهای چند زبانه هست. در این نسخه دو فایل farsi.php و english.php در پکیج قرار دارن که میتونین از اونا الگو بگیرین و فایلهای زبانتون رو تکمیل کنین.

5. پوشه script که حتماً باید فایل script.js رو از قالب پیشفرض نیوک بگیرین و داخلش بزارین. این فایل اجرا کننده بسیاری از قسمتها در نسخه 8.4 هست. بقیه فایلهای جاواتون رو با توجه به نیازتون میتونین تو این پوشه بزارید. توجه کنین که اکثر فریم ورک های پرکاربرد در خود پکیج نیوک در پوشه includes/Ajax/jquery قرار گرفتن که همه هم بروز هستن.

6. پوشه style. وجود چند فایل در این پوشه الزامی هست.
jRating.jquery.css که برای بخش امتیاز دهی به پستها ازش استفاده میشه.
ltr.css که برای سایتهایی که قراره چپ چین باشن ازش استفاده میشه.
print.css که برای قالب بخش چاپ ازش استفاده میشه.
style.css که فایل اصلی این قسمت هست و برای استایل کلی قالب ازش استفاده میشه.

اما فایلهایی که در پوشه قالب باید وجود داشته باشن.
mail_themes.php که مربوط به قالب ایمیلهای ارسالی از سایت به کاربران هست.
theme.php که فایل اصلی قالب هست و کل توابع و کدهای html در این قسمت قرار میگیرن.
theme_setup.php که در این نسخه اضافه شد و بسیار پرکاربرد هست و مربوط به تنظیمات قالب شما هست.

اما از فایل theme_setup.php شروع کنیم.
ما آموزش رو بر اساس قالب پیشفرض نیوک یعنی کاسپین قرار میدیم.
در ابتدای همه فایلهای پکیج نیوک باید این کدها رو بزارید تا دسترسی به فایل به طور مستقیم امکان پذیر نباشه و سایتتون با مشکل امنیتی روبرو نشه.

 

if (!defined('NUKE_FILE')) { die ("You can't access this file directly..."); }

 

بعدش کد برای اینکه تنظیمات اصلی سیستم رو بتونیم فراخونی کنیم.

 

global $nuke_configs;

 

یک متغیر آرایه ای در این قسمت داریم که حتماً باید به همین نام یعنی

 

 

$theme_setup

باشه.

اولین عنصر این آرایه default_css هست. این عنصر خودش به صورت یک آرایه تعریف شده و شامل کلیه فایلهای css هست که قراره در بالای قالب فراخونی بشن. شما میتونی هر تعداد فایل css که قراره فراخونی بشن رو تو این قسمت اضافه کنین. همچنین اگر کد استایلی به صورت مستقل هم دارید میتونین در همین بخش اضافه کنین. در نسخه های قبل فایلهایی که در header قالب فراخونی میشدن تقریباً هیچکدوم دلخواه نبودن و شما مجبور بودین این فایلها رو در هیدرتون داشته باشین مگر اینکه فایل includes/javascript.php رو دستکاری کنین. ما تو این نسخه تمام تلاشمون رو کردیم که دستکاری کردن فایلهای اصلی پکیج نیوک رو به حداقل برسونیم.

عنصر بعدی default_js هست که مثل عنصر قبلی مربوط به فراخونی فایلهای جاوا اسکریپت قالب هست. نکته اینکه فایلهای فراخونی شده در این عنصر در بالای header قرار میگیرن.

عنصر بعدی defer_js هست که تفاوتش با عنصر default_js در اینه که فایلها و کدهای این عنصر در انتهای سایت و قبل از پایان تگ </body> قرار میگیرن.

عنصر بعدی default_link_rel هست که برای تگهایی هست که ......

عنصر بعدی default_meta هست که برای متا تگهای پیشفرضی هست که قراره بالای هیدر سایت قرار بگیرن. البته این متا تگها رو میتونین در بخش تنظیمات سئو هم وارد کنین.

عنصر بعدی theme_nav_menus که به نیوک اعلام میکنه که این قالب دو محل برای نمایش فهرست یا همون منو ها داره. شما به هر تعداد که بخواین میتونین این لیست رو پر کنین. مثلا در قالب کاسپین محل primary و footer تعریف شده که اولی مربوط به منوهای بالا سایت و محل دومی مربوط به منوهای فوتر یا همون ته برگ سایت هست. شما مثلا میتونین یه محل جدید تعریف کنین و براش یه بلوک هم بسازین و بگین فلان منو در این محل نمایش داده بشه. تشکیل فهرستها هم از منوی مدیریت به راحتی امکان پذیر هست با کلی امکانات متنوع.

عنصر بعدی theme_widgets هست. این به نیوک اعلام میکنه که کجا ها از مجموعه تعدادی از بلوکها میتونه استفاده کنه. مثلا شما سه بلوک دارید به نام آخرین مطالب ، پر بازدید ترین مطالب و داغترین مطالب. معمولاً این بلوکها رو میزارن تو فوتر سایت. خوب طبق این عنصر ما اعلام میکنیم که یک جایگاهی در قالب تعبیه شده به نام bottomcenter. تو مدیریت بلوکها شما اول یه باکس یا مجموعه بلوک جدید ایجاد میکنید و اسمشو مثلا میزارید footer_blocks بعد این سه تا بلوک رو میارید داخل باکس. بعد تو تنظیمات باکس گزینه جایگاه در قالب رو میزارید نام ترجمه شده همین bottomcenter. در مورد کار کردن با بلوکها یه بحث مفصلی داریم که تو آموزش های دیگه ارائه میدم.

عنصر بعدی عنصر مهم theme_boxes_templates که مربوط به چیدمان بلوکها در حالتهای مختلف سه ستونه ، دو ستونه و تک ستونه هست. شما باید یه مقدار علم کار با bootstrap رو داشته باشید که بتونید نحوه چیدمان بلوکها رو تنظیم کنید. چیدمان اصلی بلوکهای هر ماژول و بعضاً هر قسمت از یک ماژول رو میتونید تو مدیریت ماژولها انجام بدید. مثلاً تو مدیریت ماژول Articles میتونید برای فایلهای article-seo ، archive ، index ، category و send-article هر کدوم جدا جدا چیدمان دلخواهتون رو بزارید. تو نسخه های قبل ادامه مطلب یه سری بلوک ثابت داشت که نمیشد دست بهشون بزنی مگر اینکه تو فایلهای اصلی نیوک مثل article-seo دست ببری که دردسرهای زیادی داشت مثل اینکه باید برنامه نویسی رو خوب یاد گرفته باشی. ولی تو این نسخه با یکم کار کردن با مدیریت باکسها و بلوکها و مدیریت ماژولها میتونین بهترین چیدمان ها رو برای خودتون انجام بدید.

این عنصر رو توضیح میدم.
modules_boxes مربوط به محتوای یک ماژول چه با بلوک چه بی بلوک هست. یعنی میشه گفت body سایت.
top_full_moldule_boxes مربوط به محتوای بالای ماژول هست که هر چیزی میتونه باشه و عرض کامل صفحه رو هم شامل میشه.
right_module_boxes مربوط به زمانی هست که در قالب شما ستون سمت راست فعال باشه که شامل بلوکهای اون قسمت میشه. باز این قسمت شامل چند زیر عنصر هست.
اولیش extra_class هست که مربوط به کلاس کلی ستون سمت راست هست.
_r یعنی اگر قالب دو ستونه (راست و وسط) بود چه کلاسی داشته باشه.
_l_r یعنی اگر قالب سه ستونه بود (راست و وسط و چپ) بود چه کلاسی بگیره.

دومیش order هست که ترتیب نمایش رو حالتهای مختلف مانیتورها و دستگاه های مختلف نشون میده. که مثلا اگر رفتیم تو حالت موبایل اول ستون سمت راست نشون داده بشه یا بقیه قسمتها به همین ترتیب.

سومیش pull هست و چهارمیش push که باید باز هم علم bootstrap داشته باشید تا بتونین با اینها کار کنین. که مربوط به بازم حالتهای مختلف دستگاه های مختلف مثل موبایل . این چهار قسمت به هم ارتباط مستقیم دارن و باید طوری تنظیم بشن که قالب بهترین چیدمان رو در دستگاه های مختلف داشته باشه.

middle_module_boxes مربوط به محتوای وسط ماژول میشه که شامل سه قسمت هست: 1 بلوکهای وسط و بالای محتوای اصلی که همون top_middle_moldule_boxes هست در عنصر بعدی. 2 محتوای اصلی ماژول یا همون main_middle_moldule_boxes میشه. 3 بلوکهای وسط و پایین محتوای اصلی که همون bottom_middle_moldule_boxes میشه مثلا در ماژول Articles فایل article-seo بلوک نظرات یا مطالب مرتبط اگه یادتون باشه تو این قسمت قرار میگرفت. اینجا هم باز همون چهار عنصر خودشونو نشون میدن.

left_module_boxes مربوط به ستون سمت چپ میشه.

bottom_full_moldule_boxes که مربوط به بلوکهای پایین و وسط میشه و عرض صفحه رو کامل در بر میگیره. شکل زیر نمای کلی این حالتها رو نشون میده.

 

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

در قسمت بعدی تابعی داریم تحت عنوان caspian_theme_config که شباهت کاملی به توابع فایل admin/modules/settings.php داره و مربوط به تنظیمات قالب هست. نام این تابع مهم نیست چی باشه مهم محتویاتش هست که میتونین از قالب کاسپین الگو بگیرین و تو قالبهاتون ازش استفاده کنین. مهم خط آخر این فایل هست که معرفی کننده این تابع به سیستم نیوک هست و با تعریف این تابع به سیستم نیوک میتونین در بخش تنظمیات سیستم -> قسمت قالب این تنظیمات رو ببینین و بدون اینکه هر بار برای تغییر در قالب به فایل قالب مراجعه کنین از این قسمت برای تغییرات استفاده کنین.

در مورد فایل theme.php تو پست بعدی توضیح میدم.