چرتک بلاگ

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

+ واقعا نمیدونم چرا دارم این پست رو مینویسم در حالیکه هم کامیونیتی و هم خود شرکت بیان از حال و حوصله افتادن ولی خوب هر چه بادا باد :) بیش از یک سال میشه میخوام این پست رو بنویسم و هنوز ننوشتم! 

نشانه‌ها چی هستن؟

فرض کنین پست‌های شما قوچ هستن و میخواین چند تا از این قوچ‌های خاص رو که چاق و چله‌ان جدا کنین تا هر زمان خواستین اونا رو ببرین جلوی همسایه‌ها و مخ مردمو باهاشون بزنین (روانپزشک هستم، نویسنده این متن کاملا در سلامت جسمی و روانی است و جای نگرانی نیست) چیکار میکنین؟ احسنت... یک ضربدر بزرگ روی پشت قوچ بیچاره میزنین تا بعدا با دیدن ضربدر بدونین اون قوچ‌های خاص کدوماست! نشانه‌ها در بیان هم همینطورین. در حقیقت یک نوع دسته بندی هستش برای پست‌های خاص که نمیخواین توی قسمت دسته‌بندی موضوعی نشون داده بشه و علاوه بر اون میتونین هر کجا که خواستین کل یا بخشی از این پست‌ها رو نمایش بدین (نوار کنار، پایین سربرگ، بالای پابرگ... هر جا که فکرشو بکنین!) و میتونین محدودیت بزارین که مثلا ۵ پست آخر رو نشون بده و نه کل پست‌ها رو یا مثلا فقط یک پست رو نشون بده و این ویژگی باعث میشه که کلی چیز جالب بسازین.

چه چیزهایی با نشانه‌ها شدنی هست؟

۱. میتونین یک نشانه به اسم side بسازین تا هر پستی که با این نشانه بود توی نوار کناری وبلاگتون یا همون سایدبار نشون داده بشه (فکر کنم توی سایر سیستم‌های وبلاگ‌نویسی این امکان با اسم ویجت بوده که مثلا شما میتونستین فال حافظ یا همچین چیزهایی رو اضافه کنین). این ویژگی خیلی کاربردی هستش علی‌الخصوص در مواردی که میخواین راه‌های ارتباطی و لینک‌های شبکه اجتماعیتون رو قرار بدین یا اصلا یک اسلایدر یا متن و شعر دلخواه داشته باشین. اگر امکان جاوا اسکریپت هم خریده باشین که میشه مثلا شعر رندمی از گنجور نمایش بدین.
بعضی از قالب‌ها مثل قالب نوین آیکون‌هایی برای شبکات اجتماعی دارن ولی برای اینکه اونا رو لینک کنین یا لینک موجودشون رو آپدیت کنین باید برین سراغ ویرایش قالب و دردسر پیدا کردن لینک‌ها. در حالیکه با استفاده از نشانه‌ها کافیه برین و پست مد نظر رو که شامل لینک شبکات اجتماعی هستش رو آپدیت کنین. کد اچ تی ام الش رو هم خیلی راحت میشه از ابزاری ساخت و نوشتن ابزارش اصلا سخت نیست! مسلما آپدیت کردن یک پست خیلی راحت‌تر از آپدیت کردن یک قالبه و ریسکش هم به مراتب کمتره!

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

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

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

۵. میشه با نشانه‌ها لندینگ پیج طراحی کرد. اگر نمیدونین لندینگ پیج همون صفحه اول وبسایت هستش که اون صفحه اصلی برای مثال شرکت رو معرفی میکنه و نظرات مشتریان و ویژگی‌های شرکت توش هست. یعنی کافی هستش صفحه رو قسمت بندی کنیم و برای هر قسمتی یک نشانه اختصاص بدیم تا صاحب شرکت اگر خواست قسمتی رو به صورت پست بنویسه (مثل قسمت معرفی شرکت) و توی صفحه اول سایت اون پست به عنوان معرفی شرکت نمایش داده بشه. ایده واقعا جذابی هستش و با ترکیب تگ شرطی checkif برای بررسی بودن توی صفحه اول وب سایت کاملا شدنیه.

۶. به صورت پیشفرض پست‌هایی که با امکان پیامکی ارسال شدند نشانه mobile رو دارن و میشه آخرین پیامک یا لیست پیامک ها رو نشون داد ولی مشکل اینه سامانه کار نمیکنه برای من :) بعله... مرسی بیان!

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

و کلی احتمالات دیگه... تنها چیزی که محدوده ذهن آدم هستش.

چطور در وبلاگ نشانه‌ها را اضافه کنیم؟

در پنل مدیریت بلاگ به قسمت تنظیمات، تنظیمات پیشرفته برین، تیک گزینه استفاده از نشانه برای مطالب رو بزنین و در پایین روی دکمه نشانه جدید کلیک کنین. یک نام برای نشانه بدین (زبان مهم نیست ولی انگلیسی بهتره) و یک شناسه به زبان انگلیسی که بدون فاصله و کاراکترهای غیرمجاز باشه. میتونین از کلمات ساده استفاده کنین. روی دکمه ذخیره کلیک کنین و برگردین.

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

چطور در قالب از نشانه‌ها استفاده کنیم؟

خوب خودتونو گرم کنین که میریم سر کدنویسی :) واقعا چیز پیچیده‌ای نداره و با یکمی توضیح و تحقیق میتونین حتی قالب خودتونم تغییر بدین. بزارین یک نمونه از قالب خودم رو بهتون نشون بدم (همین کد توی قالب فروتن باعث میشه مطالبی که نشانه side دارن توی سایدبار نمایش داده بشه و همون امکانات ساخت ویجت رو در اختیارمون میزاره)

<!-- start of side posts  -->
<box:post_list flag="side">
    <view:post_list>
    <div class="sideitem about">
        <div class="sidetitle"><span>(*post_title*)</span></div>
        <div class="sidemain">
            <div>
                (*post_full_content*)
            </div>
        </div>
    </div>
    </view:post_list>
</box:post_list>
<!-- end of side posts  -->

خوب اگر موقعیت این کد رو بررسی کنین میبینین که این قطعه کد توی div با کلاس sidebar هستش و بعد باکس معرفی وبلاگ اومده پس قراره مطالب اونجا نمایش داده بشن. توی خط اول بر طبق راهنمای کدهای وبلاگ  برای نمایش لیستی از پست‌ها از تگ <box:post_list> استفاده میکنیم و چون میخوایم مطالب از نشانه‌های خاصی رو نمایش بدیم شناسه لاتین شناسه رو به صورت flag="..." مینویسیم.

تگ <view:post_list> به ازای هر پست تکرار میشه. این یعنی چی؟ بر فرض مثال شما سه تا پست از یک نشانه رو دارین. خوب این سه پست هر کدوم عنوان و متن و لینک خودشون رو دارن دیگه درسته؟ ما کافیه فقط ساختار یک نمونه از این پست رو داخل همین تگ بنویسیم تا پست‌هامون بر اساس اون ساختار نشون داده بشن. توی کد بالا میتونین ببینین که من کل محتویات رو داخل یک div با کلاس sideitem قرار دادم که در حقیقت همون جعبه‌های سایدبارم هستش. داخل اون هم sidetitle و sidemain هستن که به ترتیب هدر و بدنه اصلی همون سایدبار آیتمم هستش.

تگ‌هایی که من استفاده کردم (*post_title*) و (*post_full_content*) هستش که به ترتیب برای نمایش عنوان پست و محتویات پست استفاده میشن (در حقیقت متن عنوانتون به جای اون تگ میشینه).  اینجا میتونین به همون راهنمای کدهای وبلاگ مراجعه کنین تا ببینین از چه تگ‌های دیگه میشه استفاده کرد. به عنوان نمونه (*post_image*) برای تصاویر استفاده میشه و لینک تصویر رو به ما میده.

میتونین به باکستون یک مشخصه max هم بدین که مثلا فقط پنج پست آخر رو نمایش بده به این حالت:

<box:post_list flag="side" max="5">
...

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

‫<check:if not index_page1_selected>
<box:post_list flag="side">
...
</check:if>

علاوه بر اون میتونین از index_page_selected هم استفاده کنین که فرقش رو میتونین توی همون صفحه راهنمای کد بخونین.

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

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

شاد و خندون باشین!