آموزش طراحی بلوکهای نیوک

نمایه کاربر
iman64
مدیر کل سایت
مدیر کل سایت
پست: 3461
تاریخ عضویت: شنبه 18 اسفند 1386, 8:30 pm
محل اقامت: ایران سرافراز - بوشهر - دلوار
تشکر کرده: 389 دفعه
تشکر شده: 4741 دفعه

آموزش طراحی بلوکهای نیوک

پست توسط iman64 »

تو این موضوع قصد دارم آموزش کار با بلوکهای نیوک و به طور کامل تر کار با ویجت ها، باکسها و بلوکها رو براتون توضیح بدم.

تو نیوک ما پوشه ای داریم به نام blocks که از روز اول نیوک تا الآن بوده. این پوشه حاوی فایلهایی هست که اسمشون به شکل block-name.php هست.
بلوکها بیشتر برای نمایش محتوای ماژولها به کار میرن. البته میتونن مستقل باشن و محتوای دلخواهی داشته باشن.
تو نیوک دو راه برای اضافه کردن بلوک به سیستم وجود داره.آپلود فایل تو پوشه blocks یا پوشه ای به همین نام در پوشه قالب که برای فالب پیشفرض نیوک میشه :

کد: انتخاب همه

themes/Mashhadteam-Caspian/blocks/
اگه فایل رو تو پوشه blocks اصلی نیوک قرار بدید با همه قالبهای احتمالی که در آینده قصد تغییر رو داشته باشین قابل استفاده هستن. ولی اگر تو پوشه قالب بزارید فقط برای همون قالب قابل استفاده هست و با تغییر قالب از کار میفتن.
محتوای بلوکها خیلی ساده هستن. به عبارتی فقط کافیه یه متغیر به نام content داشته باشه تا قابل نمایش بشه.
نکته اول:
ما وقتی تو بخشهای مختلف نیوک میچرخیم ممکنه نیاز داشته باشیم تا محتوای بلوکمون بر اساس اون صفحه تنظیم بشه. مثلا تو ادامه مطلب بخوایم بلوکمون مطالب مرتبط با موضوع اون مطلب رو نشون بده. در این صورت نیاز هست تا از مطلب مورد نظر اطلاعاتی رو در اختیار داشته باشیم. به عنوان مثال حداقل شماره موضوع مورد نظر رو لازم داریم.

کد: انتخاب همه

$block_global_contents = array();
$block_global_contents = $hooks->apply_filters("global_contents", $block_global_contents);
در مورد این فی.لت.ر در بخشی که به همین منظور در حال تکمیل هست توضیح میدم.
متغیر block_global_contents مقادیری رو در خودش ذخیره کرده که از اطلاعات یک صفحه استخراج شده.

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

کد: انتخاب همه

$hooks->add_filter("site_theme_headers", function ($theme_setup) use($nuke_configs)
{
    $theme_setup = array_merge_recursive($theme_setup, array(
        "default_css" => array(
            "<link rel=\"stylesheet\" href=\"...................\">",
        )
        "defer_js" => array(
            "<script src=\".............\"></script>",
        )
    ));
    return $theme_setup;
}, 10);

در این صورت استاندارد قرارگیری این تگها در کدهای html هم رعایت میشه. در مورد این فی.لت.ر و متغیر theme_setup در بخش آموزش کار با قالب توضبح میدم.

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

تم بلوکها رو میشه از فایل فالب و تابع blocks_box_theme طراحی کرد. اما در صورتی که بخواین برای بلوکهاتون تم های مختلفی داشته باشین میتونین فایلهایی با پسوند html تو پوشه بلوک های قالبتون بریزید. برای قالب پیشفرض نیوک میشه :

کد: انتخاب همه

themes/Mashhadteam-Caspian/blocks/themes/
این فایلها حداقل باید دو متغیر title و content رو داشته باشن و در مغیر contents خروجی بدیم به این شکل:

کد: انتخاب همه

<?php
$contents = "$content";

?>
که فقط محتوای بلوک رو نشون میده و هیچ قالب خاص و عنوانی براش نمیاره
یا

کد: انتخاب همه

<?php
$contents = "<div class=\"freebox\"><div class=\"freebox-title\">$title</div><div class=\"freebox-contents\">$content</div></div>";

?>
که یه قالب جدا از قالب اصلی برای بلوک تعریف کردیم.

نکات مهمی برای طراحان قالب:
تو نیوک ما سه مفهوم داریم:
1. block : همون بلوک ساده ای هست که قبلتر در موردش صحبت کردیم.
2. box : مجموعه ای از بلوکهاست
3. widget : جایگاه هایی هست که یه طراح قالب برای مجموعه بلوکها یا همون box ها تعریف میکنه.

در مورد بلوکها و نحوه طراحیشون صحبت کردیم.

وفتی وارد مدیریت بلوکها میشیم چند قسمت رو میبینیم:
اول : بلوکهای موجود  : شامل بلوکهایی میشه که تو پوشه هایی که قبلتر ذکر کردم به صورت فایل قرار داده شدن. بلوکهای html و rss رو شامل نمیشه. این بلوکها ممکنه تو مجموعه های استفاده شده باشن یا هنوز بلا استفاده موندن.
دوم لیست مجموعه ها : که هر مجموعه شامل چند بلوک میشه.
میشه با انجام عملیات drag & drop بلوکهای موجود رو تو هر کدوم از این مجموعه ها اضافه کرد.
نکته : ممکنه یه بلوک تو چند مجموعه حضور داشته باشه و الزامی نیست که حتماً فقط یه جای سایت ازش استفاده بشه. مثلا ممکنه ما دوست داشته باشیم برای صفحه ای از سایتمون مجموعه ای با 3 بلوک داشته باشیم. ولی برای صفحه دیگه دو تا بلوک دیگه هم به همون بلوکها اضافه کنیم.
برای این کار یه مجموعه بلوک جدید تعریف میکنیم و بلوکهای مورد نظرمون رو بهش اضافه میکنیم. این کار به طور نامحدود امکان پذیره.
نکته : اسم مجموعه بلوکها باید حتما انگلیسی و متشکل از حروف و اعداد و _ باشه.
نکته : تو نیوک پنج مجموعه به طور پیشفرض وجود داره و غیر قابل حذف شدن هستن. topcenter, bottomcenter, left, right, comments.
تو نسخه 8.4.x اون الزام تعیین مکان برای بلوکها برداشته شده و اون مفاهیم بلوکهای بالا و پایین و چپ و راست دیگه معنی نداره ولی با توجه به اینکه ممکنه کسی از نسخه های پایینتر بروزرسانی کرده باشه ما این مجموعه ها رو به همون قوت نگه داشتیم هر چند در ساختارهای وبلاگی این مفاهیم استفاده میشه پس بودنش خالی از لطف نیست. به هر حال توجه داشته باشید که اگر تعیین کردیم که مثلا بلوک آمار کاربران تو مجموعه left باشه به این معنی نیست که این بلوک جای دیگه ای نمیتونه باشه یا خود مجموعه left حتما باید سمت چپ سایت باشه. همه این اسامی و رفتاری که بهشون نسبت داده میشه مطلق نیست.

تا اینجای کار به صورت پیشفرض تو هسته نیوک تعریف شده و از طریق مدیریت ماژولها -> ویرایش ماژول مورد نظر -> چیدمان بلوکها میتونیم مجموعه هایی که تعریف شده رو تو صفحات سایت به نمایش در بیاریم.

اما تصور کنید ما میخوایم قالبی طراحی کنیم و به فروش برسونیم. حالا اگه بخوایم تو این قالب جایگاهی برای نمایش یک بنر تبلیغاتی تعبیه کنیم یه مشکلی پیش میاد.
ما چطور به سیستم بفهمونیم که مثلا تو هیدر سایت قسمتی برای نمایش بلوک تبلیغات تعبیه کردیم؟
یا مثلا بین پستها یا توی فوتر سایت و به طور خلاصه هر جایی که تو چهار جایگاه اصلی top, left, right, bottom نیستن. برای این کار تو فایل

کد: انتخاب همه

themes/Mashhadteam-Caspian/theme_setup.php
در متغیر theme_setup عنصر theme_widgets رو ببینید. این عنصر از چهار عنصر دیگه تشکیل شده:

کد: انتخاب همه

    "theme_widgets" => array(
        "right" => _RIGHT_BLOCKS,
        "left" => _LEFT_BLOCKS,
        "topcenter" => _TOPCENTER_BLOCKS,
        "bottomcenter" => _BOTTOMCENTER_BLOCKS,
    ),
یه عنصر جدید اضافه میکنیم. مثلا بین پستها بخواین یه جایگاه بلوکی تعریف کنیم:

کد: انتخاب همه

    "theme_widgets" => array(
        "right" => _RIGHT_BLOCKS,
        "left" => _LEFT_BLOCKS,
        "topcenter" => _TOPCENTER_BLOCKS,
        "bottomcenter" => _BOTTOMCENTER_BLOCKS,
        "posts_ads" => _POSTS_BETWEENN_ADS,
    ),
حالا کافیه تو تابع پستها این کد رو اضافه کنیم:

کد: انتخاب همه

boxes('posts_ads')

حالا تو مدیریت سایت -> مدیرت بلوکها بالای هر مجموعه چند آیتم هست که گزینه ویرایش رو میزنیم و مجموعه مورد نظر رو به جایگاه posts_Ads تخصیص میدیم.
blocks.jpg
با این روش محدودیتی در تعیین جایگاه برای بلوکهای قالب نداریم و میشه قالبهای خیلی منعطف تری طراحی کرد.
اگر سؤالی در مورد بلوکها، نحوه طراحیشون و تنظیماتشون دارید میتونین در ادامه همین تاپیک مطرح کنید.
شما دسترسی جهت مشاهده فایل پیوست این پست را ندارید.


Phpnuke.ir

بازگشت به “آموزش های نیوک”