۱۲ ترفند برای داشتن سایدبار جذاب

نویسنده : محمد جواد فرکاریان ۴ اردیبهشت ۱۳۹۵

12-wordpress-sidebar-tricks

سلام

امیدوار هستیم که حالتان خوب باشد 😉

شما با کمک ۱۲ ترفندی که قصد معرف انها را در این مطلب داریم به راحتی میتوانید یک سایدبار پیشرفته داشته باشید . پس تا ادامه باما همراه باشید .

sidebartricks

displaywidgets

۱-ابزارک داینامیک برای سایدبار

شما با کمک این افزونه میتوانید این قابلیت را به ابزارک ها اضافه کنید که در چه صفحه ای نمایش داده شوند و در چه صفحه ای نمایش داده نشوند . پس از اینکه این افزونه را نصب و فعال کردید میتوانید از طریق ” نمایش>ابزارک ها ” وارد مدیریت ابزارک ها شوید و سپس در اینجا ابزارکی که میخواهید در صفحه ای نمایش داده شود یا نه را انتخاب کنید ( ابزارک باید فعال باشد ) و با باز شدن قسمت تنظیمات ابزارک یک قسمت جدید خواهید دید با عنوان Show Widget for که میتوانید از اینجا انتخاب کنید که ابزارک در چه صفحه ای نمایش داده شود و در چه صفحه ای نمایش داده نشود.

صفحه افزونه

contentawaresidebars

۲-سایدبار فرعی

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

صفحه افزونه

sticky-widget

۳-سایدبار چسبان

معمولا ستون محتوای سایت ( index ) کمی طولانی تر از ستون سایدبار میباشد و اگر کاربر کمی به سمت پایین حرکت کند دیگر سایدبار را مشاهده نمیکند ولی خب برای اینکه سایدبار را به صورت شناور یا متحرک در بیاورید تنها کافی است که از افزونه Sticky Sidebar Widget استفاده کنید.

صفحه افزونه

بخوانید  نمایش ابر برچسب ها در وردپرس

emailsignup

۴-عضویت در خبرنامه

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

 

popularposts

۵-نمایش برترین مطالب

شما میتوانید بهترین مطالب را در قسمت ابزارک ها در معرض دید دیگران بگذارید و با اینکار میتوانید مطالب محبوب را به کاربران جدید معرفی کنید. شما با کمک افزونه WordPress Popular posts به راحتی میتوانید مطالب برتر را در سایدبار نمایش دهید . تنها کاری که باید انجام بدهید این است که این افزونه را نصب و فعال کنید و سپس از طریق مدیریت ابزارک ها ، ابزارک این افزونه را فعال کنید.

صفحه افزونه

customwplists

۶-لیست های داینامیک سفارشی

چرا اخرین پست ها یا برترین ست ها را نمایش دهید ؟ شما میتوانید به وسیله ی ابزارک متن یک لیست ایجاد کنید که فکر میکنید افراد بیشتری وارد ان میشوند. البته برای اینکار باید کمی دانش HTML داشته باشید( برای اشنا شدن با HTML اینجا کلیک کنید )

imagesinsidebar

۷-استفاده از تصاویر

شما میتوانید در سایدبار خود از تصاویر استفاده کنید . برای این کار دو راه پیش رو دارید : ۱-بدون کمک افزونه ۲-با کمک افزونه

۱-برای اینکار شما میتوانید ابتدا تصویر خود را بارگذاری کنید و سپس ادرس تصویر را بردارید و با استفاده از کد زیر ان را در ابزارک متن جایگذاری کنید :


<img src="link" width="100" height="100" alt="picture"/>

به جای link ادرس تصویر را وارد کنید

بخوانید  غیر فعال کردن ارسال ایمیل بروز شدن خودکار وردپرس

به جای width و height طول و عرض تصویر را وارد کنید

و به جای alt نیز یک متن جایگزین بنویسید که اگر تصویر نمایش داده نشد متن نمایش داده شود

۲-حالا اگر نمیخواهید از کد استفاده کنید شما میتوانید از افزونه Image Widget استفاده کنید و تنها باید این افزونه را نصب و فعال کنید و از طریق بخش مدیریت ابزارک ها ابزارک این افزونه را فعال کنید.

صفحه افزونه

socialproof

۸-نمایش دنبال کنندگان در شبکه های اجتماعی

شما با کمک افزونه socail count plus میتوانید تعداد افرادی که شما را در شبکه های اجتماعی دنبال میکنند را در سایدبار نمایش دهید.

صفحه افزونه

recentcomments-thumbnails

۹-ابزار های کاربردی

شما میتوانید در سایدبار خود اخرین دیدگاه ها ، فرم نظر سنجی ، رتبه بندی کاربران و… نمایش دهید . ( جهت دریافت هر یک از افزونه ها روی نام افزونه کلیک کنید )

fadein

۱۰-محو شدن اخرین نوار ابزارک

برای اینکه قسمت ابزارک ها را کمی جذاب تر کنید میتوانید از قابلیت محو شدن اخرین نوار ابزارک استفاده کنید.برای اینکار باید ابتدا یک فایل جدید با فرمت js ایجاد کنید . مثلا : fade.js به جای fade میتوانید یک نام دیگر به دلخواه خود بگذارید و سپس کد زیر را در این فایل قرار دهید :

<pre>jQuery(document).ready(function($) {
/**
* Configuration
* The container for your sidebar e.g. aside, #sidebar etc.
*/

var sidebarElement = $('div#secondary');


// Check if the sidebar exists
if ($(sidebarElement).length > 0) {

// Get the last widget in the sidebar, and its position on screen

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
	
// Hide the last widget
$(lastWidget).hide();
	
// Check if user scroll have reached the top of the last widget and display it
$(document).scroll(function() {

// If the widget has been displayed, we don't need to keep doing a check.

if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;  
}
}
});
}
});</pre>

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

بخوانید  قالب وردپرس protopress

توجه : به جای /js/fade.js ادرس فایل را وارد کنید
و در اخر شما باید کد زیر را به فایل css خود اضافه کنید :

<pre>.wpbstickywidget { 
position:fixed;
top:0px; 
}</pre>

before-after
۱۱- استایل سفارشی برای ابزارک ها

شما با کمک افزونه widget css classess میتوانیداستایل ابزارک ها را به دلخواه تغییر دهید.وقتی که شما این افزونه را نصب و فعال کردید یک قسمت جدید به قسمت مدیریت ابزارک ها اضافه میشود که میتوانید css خود را در انجا وارد کنید.

صفحه افزونه

۱۲-فعال کردن کد کوتاه در ابزارک ها

شما با اضافه کردن کد زیر به فایل functions.php میتوانید کد های کوتاه را در قسمت سایدبار اضافه کنید :

add_filter('widget_text','do_shortcode');

امیدوار هستیم که این ترفند ها برای شما کاربردی داشته باشه .
موفق باشید 😉
منبع : www.wpbeginner.com

محمد جواد فرکاریان

علاقه مند به سیستم مدیریت محتوای وردپرس هستم و اموزش ها ی در رابطه با سیستم مدیریت محتوای وردپرس را با شما عزیزان به اشتراک میگذارم . لبخند را هیچ وقت فراموش نکنید ;-)

4 دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *




    مثبت بینان شریف

    پنج شنبه ۰۷ بهمن ۱۳۹۵

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

      محمد جواد فرکاریان

      دوشنبه ۳۰ اسفند ۱۳۹۵

      سلام
      برای چسبان کردن سایدبار باید مقدار position:fixed; به سایدبار در css بدهید.
      موفق باشید
      لبخند هم فراموش نکنید 😉

    حسن

    یکشنبه ۱۴ خرداد ۱۳۹۶

    سلام، دستتون درد نکنه …میشه امکان چسبان کردن سایدبار هم تو مطالبتون قرار بدین ….

      محمد جواد فرکاریان

      سه شنبه ۱۳ تیر ۱۳۹۶

      سلام
      از افزونه افزونه Sticky Sidebar Widget میتونید استفاده کنید یا در کد های css سایت مربوط به قسمت سایدبار position:fixed رو اعمال کنید تا سایدبار چسبان شود
      تشکر
      لبخند هم فراموش نکنید 😉