ایران ، تهران ، خیابان آزادی
ساختمان اداری مهیا
0213333333
09354333878
info@codeinwp
davood.jafary@yahoo.com

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

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

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

امیدوارم حالتون خوب باشه، در این مقاله میخواهم که کل آنچه که مربوط به راستچین کردن پوسته های وردپرس است رو براتون شرح دهم.

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

 
<div style="text-align:left;"><pre> CODE </pre></div>
wp-content/themes/YOUR_THEME

به مسیر فوق برید جایی که پوسته شما قرار دارد، اسم پوسته در پیشخوان > نمایش  > پوسته ها موجود است YOUR_THEME اسم پوسته شما است در هر پوسته وردپرس یه چیزی رو خوب میفهمه فایل style.css  هیچ فایل دیگه ایی نباشه فقط همین فایل موجود باشه یعنی شما یک پوسته دارید.

یه چیز دیگه هم اینه rtl.css – این همون فایلی هست که وقتی وردپرس راستچین (به هر زبانی) نصب کردید درک میکنه پس اگر وردپرستون فارسی نیست اون رو از تنظیمات خودِ وردپرس فارسی کنید از اونجایی که هیچ پوسته ای فقط دارای style.css  نیست در نتیجه فایل های دیگری نیز موجود است شما باید بگردید و فایل های سی اس اس اصلی پوسته رو پیدا کنید شاید فولدر های زیر کمکتان کند.

/assets
/source
/css
/library

یا هرجای دیگر در پوسته اون رو پیدا کنید و بخاطر داشته باشید که کجا هستند. البته اگر پیدا نکردید نگران نباشید در پایین تر روشی دیگر نیز وجود دارد

خب سریع اصل مطلب رو باز میکنم کلاً راستچین کردن سه قسمت داره

1- تغییر در متغیر های کد بدست اومده

2- اینسپکت کردن (Inspect Element) و یافتن کد مورد نظر

3- تست و تقویت کد ها در صورت عدم عملکرد صحیح تمام یا قسمتی

خب بعضی ها ممکن است با سی اس اس آشنایی نداشته باشند خیلی یه آشنایی دو خطی  میکنم بقیه کار دستشون میاد

کلاس ها با نقطه ( . ) شروع میشوند و آی دی ها با علامت شارپ یا هشتگ ( # )

داخل {  } گیومه نیز ما مقادیر لازم رو داریم که هر اتفاق ظاهری تو سایتتون میافته از داخل این گیومه ها شکل میگیره و هرچیزی که هست و ما هم تو این مقاله میذاریم داخل گیومه قرار میدهیم

 

 

 

چه چیز هایی نیاز داریم برای راستچین کردن؟

کلاً این مقادیر زیر رو به یاد داشته باشید

;direction: rtl
;float: right
;text-align: right
;padding: xx
;margin: xx
;top: yy
;bottom: yy
;right: yy
;left: yy
;font-family: FONT_NAME

نیاز کلی ما همین موارد است در موارد بالاست که لازم میدونم چند نکته رو بگم اونجایی که ازyy استفاده شده است که به معنی مقادیر auto و یا 0 و یا 1px به بالا میباشد علائم % em نیز معتبر است. همینطور از xx نیز استفاده کردم. علت این است که به چند صورت میشه نوشت این موارد رو پس اگر جایی دیدید کپ نکنید؛ مقدار رو در زیر میبینید عدد 0 میتونه px  نداشته باشه میتونه هم داشته باشه

 
0
0   0
0   0   0
0   0   0   0

7px 7px 7px 7px
7px 7px 7px
7px 7px
7px

خب 4 تایی داریم 3تایی داریم 2تایی داریم و یک دانه ایی هم داریم توضیح کلی رو عکس زیر نشون میده

 

 

خلاصه اینکه با توجه به عکس بالا 4تایی رو این نواحی تاثیر میگذارد: بالا راست پایین چپ

3تایی رو این نواحی تاثیر میگذارد: بالا راست و چپ با هم پایین

2تایی رو این نواحی تاثیر میگذارد: بالا و پایین با هم چپ و راست باهم

یک دانه ایی هم رو همه نواحی تاثیر میگذارد

padding نواحی داخلی و margin نواحی خارجی است

ضمناً علائم % em نیز معتبر است.

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

عملاً شما میبایست در کل پروژه (پوسته ایی که دارید) مقادیر پررنگ شده که در بالا گفتیم به آنها نیاز داریم رو جستجو و جایگزین مخالف آن کنید یعنی در کلی CSS های پروژه مقدار left رو جستجو کنید و به آنها را با right  جایگزین نمایید

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

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

فلش قرمز نشان میدهد که ما میخواهیم رو المنت های صفحه کار کنیم

کادر قرمز رنگ رو نیز ببینید

ما اینجا میخواهیم ببینیم چه المنت هایی از صفحه چپ چین هستند تا آنها رو راست چین کنیم

حال موارد زیر رو مشاهده کنید :

روی 1 کلیک کنید با موس اون المنتی از صفحه رو که میخواهید ببینید چه وضعیتی دارد روش کلیک نمایید
مورد 2 رنگ سبز padding و رنگ نارنجی margin رو نشان میدهد

بلافاصله با کلیک روی المنت 2 کد های مربوط به شماره 3 که نشان دهنده ی همین المنت است را مشخص میکند

توجه داشته باشید که من هنوز کلیکی نکردم اکنون کلیک میکنم و پس از آن روی علامت + که با رنگ سبز مشخص شده در تصویر بالا آماده انجام راستچین میکنم

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

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

گاهاً پیش امده است که برخی از کد ها کار نمیکند از فرمان !important استفاده کنید. در تصویر زیر میتونید نمونه ی آن راببینید

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

اگر سی اس اس نیز پیدا نکردید که بعید میدونم از اپلیکیشن اون رو بیابید

 

اینسپکت به شما کمک میکنه تا بتونید برخی از مقادیری که نتوانستید آنها را درست راستچین کنید، راستچین کنید.

فراموش نکنید که اگر در اینسپکت المنت شما کدی رو پیدا نوشتید آن را در فایل rtl.css قرار دهید.


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

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

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

18 − دوازده =