یکی از سوالاتی که ذهن بیشتر افراد را در وردپرس درگیر کرده است این است که چگونه می توان نوار کناری یا سایدبار را در سایت های وردپرسی تغییر داد؟ اکثر کاربران می خواهند سایدبار خود را از چپ به راست یا راست به چپ تغییر دهند. در این مقاله، ما به شما نحوه تغییر سایدبار در وردپرس و همچنین نحوه نمایشsidebar های مختلف برای هر پست و صفحه در وردپرس را نشان خواهیم داد.
چرا باید سایدبار را در وردپرس تغییر دهیم
کارشناسان که رابط کاربری سایت ها بررسی می کنند معتقدند که افراد صفحات را از چپ به راست اسکن می کنند. آن ها توصیه می کنند محتوای مهم را در سمت چپ قرار دهید تا کاربران ابتدا محتوای مهم را ببینند. با این حال، اگر سایت شما به زبانی باشد که به جهت راست به چپ نوشته شده باشد (مثل فارسی) ، این امر می تواند معکوس شود.
بسیاری از سایت های وردپرسی از طرح وبلاگ معمولی با دو ستون استفاده می کنند. یکی برای محتوا، و ستون دیگر برای سایدبار.
اگر به تازگی یک وب سایت وردپرسی را راه اندازی کرده اید، باید یک تم وردپرس را انتخاب کنید که دارای سایدباری در مکان مورد نظر شما باشد.
بسیاری از قالب ها دارای گزینه هایی برای جابجایی سایدبار ها در تنظیمات اصلی خود هستند. اما اگر قالب زمینه شما از این گزینه برخوردار نباشد، شما باید تغییر سایدبار در وردپرس را به صورت دستی انجام دهید.
با این اوصاف، باید ببینیم که چگونه می توانید با استفاده از کمی CSS به راحتی قسمت نوار کناری را در وردپرس تغییر دهید .
تغییر سایدبار در وردپرس با استفاده از CSS
قبل از اینکه در طرح زمینه خود تغییری ایجاد کنید، ابتدا باید یک چایلد تم برای خود ایجاد کنید. با استفاده از طرح چایلد تم، می توانید پوسته والد خود را بدون از دست دادن تغییرات به روز کنید.
ثانیاً، همیشه هنگام ایجاد تغییرات مستقیم در قالب فعال وردپرس خود، باید از سایت وردپرس خود نسخه پشتیبان تهیه کنید .
برای ویرایش پرونده های قالب خود به یک سرویس دهنده FTP نیاز خواهید داشت.
با استفاده از سرویس دهنده FTP به سایت وردپرس خود متصل شوید و به پوشه تم خود بروید. که معمولا در این مسیر می باشد:
/yourwebsite/wp-content/themes/your-theme-folder/
اکنون شما باید فایل اصلی صفحه style قالب خود را در یک ویرایشگر متن ساده مانند Notepad بارگیری و باز کنید. این پرونده در هنگام بالا آمدن سایت فراخوانی می شود و جزء فایل های اصلی قالب در هنگام اجرا به شمار می آید.
در این فایل کلاس CSS را برای سایدبار خود پیدا کنید. که معمولا با.sidebar. در داخل فایل مشخص می شوند در این مثال، ما از قالب پیش فرض وردپرس Twenty Fifteen استفاده می کنیم که دارای این CSS برای تعریف نوار کناری است:
.sidebar {
float: left;
margin-right: -100%;
max-width: 413px;
position: relative;
width: 29.4118%;
}
همانطور که مشاهده می کنید sidebar در سمت چپ با حاشیه -100٪ به راست شناور است. ما آن را به حالت شناور راست و حاشیه چپ تغییر خواهیم داد:
.sidebar {
float: right;
margin-left: -100%;
max-width: 413px;
position: relative;
width: 29.4118%;
}
تغییرات خود را ذخیره کرده و فایل style.css را با استفاده از سرویس دهنده FTP به وب سایت خود بارگذاری کنید. اکنون اگر از وب سایت خود بازدید کنید ، به صورت زیر خواهد بود:
دلیل این امر این است که ما سایدبار در وردپرس را جابجا کرده ایم اما قسمت محتوا را جابجا نکرده ایم. Twenty Fifteen از این CSS برای تعریف موقعیت منطقه محتوا استفاده می کند.
.site-content {
display: block;
float: left;
margin-left: 29.4118%;
width: 70.5882%;
}
ما آن را تغییر می دهیم تا محتوا را به سمت راست منتقل کنیم. مثل این:
.site-content {
display: block;
float: left;
margin-right: 29.4118%;
width: 70.5882%;
}
وب سایت ما پس از استفاده از این CSS به این شکل تبدیل می شود.
همانطور که می بینید ما طرفین خود را برای هر دو قسمت محتوا و سایدبار تغییر داده ایم. با این حال هنوز یک بلوک سفید در سمت چپ وجود دارد.
هنگام کار با CSS با چنین مواردی روبرو خواهید شد. برای کشف اینکه چه عواملی باعث ایجاد آن شده است و چگونه می توان آن را تنظیم کرد، کار کمی طولانی می شود و نیاز است کد ها را بررسی کنید
برای مشاهده کد منبع از ابزار “inspect” مرورگر خود استفاده کنید. ماوس را به سمت منطقه آسیب دیده در مرورگر هدایت کنید، کلیک راست کرده و از فهرست مرورگر Inspect را انتخاب کنید
هنگامی که ماوس خود را در نمای کد منبع حرکت می دهید، مناطقی را که تحت تأثیر قرار می گیرد در پیش نمایش زنده مشاهده خواهید کرد. در پنجره سمت راست، می توانید CSS مورد استفاده برای آن عنصر انتخاب شده را مشاهده کنید.
ما فهمیدیم که این CSS در صفحه سبک ما نیاز به تنظیم دارد.
@media screen and (min-width: 59.6875em) {
body:before {
background-color: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
content: “”;
display: block;
height: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
width: 29.4118%;
z-index: 0; /* Fixes flashing bug with scrolling on Safari */
}
این کد CSS یک بلوک محتوای خالی با عرض 29.4118٪ و عرض 100٪ در بالا سمت چپ اضافه می کند. در اینجا نحوه حرکت آن به سمت راست آورده شده است.
@media screen and (min-width: 59.6875em) {
body:before {
background-color: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
content: “”;
display: block;
height: 100%;
min-height: 100%;
position: fixed;
top: 0;
right: 0;
width: 29.4118%;
z-index: 0; /* Fixes flashing bug with scrolling on Safari */
}
پس از ذخیره و بارگذاری شیوه نامه به سرور، وب سایت ما به این شکل است.
کار با CSS می تواند برای مبتدیان گیج کننده باشد. اگر نمی خواهید همه کارهای کد دستی را انجام دهید ، ممکن است بخواهید CSS Hero را امتحان کنید . این افزونه این امکان را به شما می دهد تا CSS را بدون نوشتن یک خط کد ویرایش کنید، و با هر موضوع وردپرس نیز به درسیتی کار می کند.
چه زمانی به سایدبارهای مختلف در وردپرس نیاز دارید؟
به طور پیش فرض، ستون های فرعی توسط قالب وردپرس شما تعریف می شوند. هر قالب وردپرس دارای چند سایدبار یا مناطق آماده برای افزونه ها است که به شما امکان می دهد ابزارک ها را اضافه کنید.
به طور معمول یک سایدبار در وردپرس در وبلاگ در سراسر سایت شما در همه پست ها، صفحات، دسته ها و صفحات بایگانی نمایش داده می شود. با این حال، گاهی اوقات ممکن است بخواهید محتوای سایدبار شما براساس پست یا صفحات خاص تغییر کند.
به عنوان مثال، شما می توانید محتوای برجسته مختلف را در ساید بار محبوب ترین پست های خود نشان دهید، فرم های مختلف ثبت نام ایمیل را اضافه کنید یا تبلیغات دلخواه خود را نمایش دهید .
با گفتن این موارد، بیایید ببینیم که چگونه می توان برای هر پست و صفحه در سایدبار های مختلفی ایجاد کرد و نمایش داد.
نمایش سایدبار های مختلف برای هر پست و صفحه در وردپرس
اولین کاری که باید انجام دهید نصب و فعال سازی افزونه Easy Custom Sidebars است.
پس از فعال سازی، برای ایجاد ستون های فرعی سفارشی باید به صفحه Theme Sidebar در قسمت نمایش مراجعه کنید.
ابتدا باید نامی برای سایدبار در وردپرس ثبت کنید و سپس بر روی دکمه ایجاد نوار کناری کلیک کنید.
اکنون این افزونه سایدبار وردپرس ، نوار کناری شما را ایجاد می کند و شما می توانید ویژگی های سایدبار در وردپرس را انتخاب کنید.
پس از آن شما باید انتخاب کنید که کدام سایدبار قالب با ساید بار سفارشی شما جایگزین شود و توضیحی برای آن ارائه دهید.
بعد، باید مکانی را انتخاب کنید که می خواهید سایدبار سفارشی خود را جایگزین نوار کناری موضوع کنید. پست ها، صفحات، دسته ها و برچسب های خود را در ستون سمت چپ صفحه مشاهده خواهید کرد.
به سادگی مناطقی را که می خواهید سایدبار در وردپرس در آن نمایش داده شود انتخاب کنید و سپس بر روی دکمه “افزودن به نوار کناری” کلیک کنید.
مشاهده خواهید کرد که موارد انتخاب شده در زیر تنظیمات نوار کناری سفارشی ظاهر می شوند. فراموش نکنید که برای ذخیره تنظیمات نوار کناری خود بر روی دکمه ذخیره کلیک کنید.
سایدبار سفارشی آسان به شما این امکان را می دهد به همان اندازه که دوست دارید ستون کناری سفارشی ایجاد کرده و هر نوار کناری را به صفحات مختلف سایت وردپرس اختصاص دهید.
افزودن ابزارک به سایدبار سفارشی شما
هنگامی که ستون های فرعی سفارشی ایجاد کردید و آنها را به مناطق مختلف وب سایت خود اختصاص دادید، وقت آن است که ابزارک های خود را به سایدبار دلخواه خود اضافه کنید.
به صفحه نمایش و سپس ابزارک ها بروید. شما سایدبارهای تازه ایجاد شده خود را در میان ستون های فرعی پیش فرض تم خود مشاهده خواهید کرد.
می توانید پیش بروید و ابزارک ها را به ستون های فرعی سفارشی خود اضافه کنید. اکنون این افزونه بر اساس تنظیمات شما ستون های فرعی را نشان می دهد. می توانید از صفحات انتخابی خود دیدن کنید تا نتیجه کار را مشاهده کنید.
امیدواریم این مقاله از بلاگ ZedWP به شما کمک کرده باشد که بتوانید سایدبار در وردپرس را اضافه کنید و با توجه به زبان وب سایت وردپرسی خود سمت آن ها را تغییر دهید.
