چگونه می توان نوار کناری را در وردپرس تغییر داد

اخیراً ، یکی از خوانندگان ما از ما پرسید که چگونه می توان در نوار کناری یک موضوع وردپرس تغییر داد. ما این س whereال را زیاد دریافت می کنیم که کاربران می خواهند نوار کناری خود را از چپ به راست یا راست به چپ تغییر دهند. در این مقاله ، ما به شما نحوه تغییر سمت نوار کناری در وردپرس را نشان خواهیم داد.

Change sidebar side in WordPress

چرا باید نوار کناری را در وردپرس تغییر دهیم h4>

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

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

A WordPress site with sidebar on the left side

اگر به تازگی یک وب سایت راه اندازی کرده اید ، باید یک قالب وردپرس را انتخاب کنید که دارای نوار کناری در مکان مورد نظر شما باشد.

بسیاری از طرح زمینه ها گزینه هایی را دارند که می توانند از نوار کناری از تنظیمات طرح زمینه استفاده کنند. اما اگر طرح زمینه شما از این گزینه برخوردار نیست ، شما باید کناره های نوار کناری را به صورت دستی تغییر دهید.

با بیان این مطلب ، بیایید نگاهی بیندازیم که چگونه می توانید با استفاده از کمی CSS .

تغییر سمت نوار کناری در وردپرس با استفاده از CSS h4>

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

ثانیا ، شما همیشه باید یک پشتیبان گیری از سایت وردپرس خود را .

شما به یک سرویس گیرنده FTP برای ویرایش پرونده های تم خود. به راهنمای مبتدیان ما در نحوه استفاده از FTP برای بارگذاری پرونده در وردپرس .

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

قرار دارد

/ yourwebsite / wp-content / themes / your-theme-folder /

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

در این فایل ، کلاس CSS را برای نوار کناری خود پیدا کنید. این معمولاً .barbar است. در این مثال ، ما از قالب پیش فرض وردپرس Twenty Fifteen استفاده می کنیم که دارای این CSS برای تعریف نوار کناری است:

نوار کناری {
شناور به سمت چپ؛
حاشیه راست: -100٪؛
حداکثر عرض: 413 پیکسل
موقعیت: نسبی؛
عرض: 29.4118٪؛
}

همانطور که مشاهده می کنید نوار کناری در سمت چپ با حاشیه -100٪ به راست شناور است. ما آن را به حالت شناور راست و حاشیه چپ تغییر خواهیم داد:

نوار کناری {
شناور: درست؛
حاشیه چپ: -100٪؛
حداکثر عرض: 413 پیکسل
موقعیت: نسبی؛
عرض: 29.4118٪؛
}

تغییرات خود را ذخیره کرده و فایل style.css را با استفاده از سرویس گیرنده FTP به وب سایت خود بارگذاری کنید. اکنون اگر از وب سایت خود بازدید کنید ، اینگونه به نظر می رسد:

Sidebar moved but content side is still the same

دلیل این است که ما نوار کناری را منتقل کردیم اما منطقه محتوا را منتقل نکردیم. Twenty Fifteen از این CSS برای تعریف موقعیت منطقه محتوا استفاده می کند.

محتوای سایت.
نمایش: بلوک؛
شناور به سمت چپ؛
حاشیه چپ: 29.4118٪؛
عرض: 70.5882٪
}

ما آن را تغییر می دهیم تا محتوا را به سمت راست منتقل کنیم. مانند این:

محتوای سایت.
نمایش: بلوک؛
شناور به سمت چپ؛
حاشیه راست: 29.4118٪؛
عرض: 70.5882٪
}

وب سایت ما پس از استفاده از این CSS به این شکل بود.

A CSS conflict showing an empty white area

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

هنگام کار با CSS با چنین مواردی روبرو خواهید شد. برای کشف اینکه چه عواملی باعث آن شده است و چگونه می توان آن را تنظیم کرد ، کار کارآگاهی طول می کشد.

برای مشاهده کد منبع از ابزار “بازرسی” مرورگر خود استفاده کنید. ماوس را به سمت منطقه آسیب دیده در مرورگر هدایت کنید ، کلیک راست کرده و از فهرست مرورگر Inspect را انتخاب کنید.

Inspect tool

هنگامی که ماوس خود را در نمای کد منبع حرکت می دهید ، مناطقی را که تحت تأثیر قرار می گیرد در پیش نمایش زنده مشاهده خواهید کرد. در پنجره سمت راست ، می توانید CSS مورد استفاده برای آن عنصر انتخاب شده را مشاهده کنید.

فهمیدیم که این CSS در صفحه سبک ما نیاز به تنظیم دارد.

صفحهmedia و (عرض حداقل: 59.6875em) {
بدن: قبل از {
background-color: #fff؛
box-shadow: 0 0 1px rgba (0 ، 0 ، 0 ، 0.15) ؛
محتوا: ""؛
نمایش: بلوک؛
قد: 100٪
حداقل قد: 100٪
موقعیت: ثابت
بالا: 0؛
سمت چپ: 0؛
عرض: 29.4118٪؛
z-index: 0؛ / * رفع اشکال چشمک زن با پیمایش در سافاری * /
}

این کد CSS یک بلوک محتوای خالی با عرض 29.4118٪ و عرض 100٪ به سمت چپ بالا اضافه می کند. در اینجا نحوه حرکت آن به سمت راست آورده شده است.

صفحهmedia و (عرض حداقل: 59.6875em) {
بدن: قبل از {
background-color: #fff؛
box-shadow: 0 0 1px rgba (0 ، 0 ، 0 ، 0.15) ؛
محتوا: ""؛
نمایش: بلوک؛
قد: 100٪
حداقل قد: 100٪
موقعیت: ثابت
بالا: 0؛
راست: 0؛
عرض: 29.4118٪؛
z-index: 0؛ / * رفع اشکال چشمک زن با پیمایش در سافاری * /
}

پس از ذخیره و بارگذاری صفحه سبک به سرور ، وب سایت ما به این شکل است.

sidebar moved to the other side

کار با CSS برای مبتدیان گیج کننده است. اگر نمی خواهید همه کارهای کد دستی را انجام دهید ، ممکن است بخواهید قهرمان CSS . این امکان را به شما می دهد تا CSS را بدون نوشتن کدی ویرایش کنید ، و با هر موضوع وردپرس کار می کند.

امیدواریم این مقاله به شما کمک کند تا نوار کناری را در وردپرس تغییر دهید. همچنین ممکن است بخواهید لیست 12 ترفند نوار کناری وردپرس برای کسب حداکثر نتیجه .

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/wp-themes/how-to-change-the-sidebar-side-in-wordpress/.

دیدگاهتان را بنویسید