اخیراً یکی از خوانندگان ما از ما پرسیده است که چگونه می توان نوار کناری یک قالب وردپرس را تغییر داد؟

ما معمولاً این سؤال را از کاربرانی دریافت می کنیم که می خواهند مکان نوار کناری خود را از چپ به راست یا از راست به چپ تغییر دهند.

در این آموزش نحوه تغییر مکان نوار کناری در وردپرس را به شما نشان خواهیم داد.

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

سپس به این دلیل که چرا ما اینجا هستیم

نحوه تغییر مکان نوار کناری در wordpress e1568058176266

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

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

فهمید که آیا باید وبلاگ وردپرس شما دارای ستون های ستونی باشد

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

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

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

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

نوار کناری را با CSS تغییر دهید

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

کشف چگونه یک نوار کناری متفاوت برای هر مقاله در وردپرس نمایش داده شود

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

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

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

 / Yoursite / فایل wp-content / themes در / خود را-تم-پوشه / 

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

کشف نحوه مدیریت پرونده ها و پوشه های WordPress

در این پرونده کلاس CSS نوار کناری خود را پیدا کنید. به طور کلی این کلاس " نوار کناری ". در این مثال ، ما از تم پیش فرض وردپرس استفاده می کنیم " بیست و پانزده چه کسی این کلاس را برای نوار کناری دارد:

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

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

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

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

در واقع ، ما نوار کناری را حرکت دادیم ، اما منطقه محتوا را جابجا نکردیم. " بیست و پانزده از این CSS برای تعریف موقعیت منطقه محتوا استفاده می کند.

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

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

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

در اینجا به نظر می رسد وب سایت شما پس از استفاده از این کد CSS چگونه خواهد بود.

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

با کشف بیشتر پیش بروید نحوه مدیریت پرونده ها و پوشه های WordPress

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

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

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

کشف ما افزونه های 5 وردپرس به صورت بصری CSS را در وبلاگ خود ویرایش کنید

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

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

این کد CSS بلوک خالی از عرض 29,4118٪ و عرض 100٪ را به قسمت بالا سمت چپ اضافه می کند. در اینجا چگونه می خواهیم آن را به سمت راست حرکت کنیم.

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

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

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

همچنین برخی از افزونه های برتر WordPress را کشف کنید  

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

ما در اینجا برخی از افزونه های برتر وردپرس را به شما پیشنهاد می دهیم که در انجام این کار به شما کمک می کنند.

1. Zxeion

Zxeion قدرتمند است پلاگین وردپرس حق بیمه مسئول بهبود امنیت وب سایت شما است. این افزونه شامل مجموعه ای از ابزارهای حفاظتی و امنیتی است که از وب سایت شما در برابر حملات احتمالی محافظت می کند.

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

ما را نیز کشف کنید 7 افزونه برای تقویت ستون های فرعی خود در WordPress

ویژگی های آن عبارتند از: حفاظت از زمان واقعی ، پشتیبانی عالی از مشتری ، به روزرسانی منظم ، مسدود کننده آدرس IP ، مستندات عالی ، رابط کاربری مدرن و حرفه ای ، پشتیبانی اختصاصی مشتری و سایر موارد

دانلود | نسخه ی نمایشی | میزبانی وب

2. Slaido 

اسلایدو یک است پلاگین وردپرس Premium که به شما امکان می دهد از بین تقریباً 320 قالب کشویی پاسخگو انتخاب کنید و تنها با چند کلیک یکی از آنها را به وب سایت خود وارد کنید. این یک بسته کامل از الگوها است، مناسب برای انقلاب کشویی. بنابراین برای استفاده کامل از آن ابتدا باید آن را نصب کنید پلاگین وردپرس

ویژگی های اصلی آن عبارتند از: طرح واکنشی از لغزنده های آن ، سهولت واردات یا صادرات اسلایدر ، به روزرسانی های منظم ، پشتیبانی مشتری 24 ساعته 7 روز ، انیمیشن های روان و بسیار جالب ، در دسترس بودن آموزشهای ویدئویی برای شروع سریع ، پشتیبانی از Google Fonts و موارد دیگر.

دانلود | نسخه ی نمایشی | میزبانی وب

3. فرم تماس با ما

Contact Us Form یک افزونه وردپرس پاسخگوی برتر و ابزاری ساده اما غنی از گزینه های سفارشی سازی است که به شما امکان می دهد یک فرم شفاف و دلگرم کننده نمایش دهید ، بازدید کنندگان می توانند با گذاشتن پیام خود با آن تماس بگیرند.

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

همچنین شما را به خواندن دعوت می کنیم: افزونه های 10 وردپرس برای ایجاد و مدیریت یک وب سایت رستوران

کافیست آدرس ایمیل را در جایی تنظیم کنید که می خواهید پیام ها را دریافت کنید و از آن استفاده کنید تا بتوانید تجارت خود را در سود آورترین مسیر رشد دهید.

دانلود | نسخه ی نمایشی | میزبانی وب

منابع پیشنهادی

درباره سایر منابع پیشنهادی برای کمک به شما در ساخت و مدیریت وب سایت خود اطلاعات کسب کنید.

نتیجه

وجود دارد! این برای این آموزش است. امیدواریم به شما کمک کند سمت نوار جانبی وبلاگ وردپرس خود را تغییر دهید. در صورت تمایل به این مقاله را با دوستان خود در شبکه های اجتماعی مورد علاقه خود به اشتراک بگذارید

با این حال، شما همچنین می توانید با ما مشورت کنید ressourcesاگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس.

اگر پیشنهادی یا اظهار نظر دارید ، آنها را در بخش ما بگذارید نظر.

...  

پین آن در Pinterest