CSS استاندارد در وردپرس


استانداردهای طراحی سایت با وردپرسوردپرس 

CSS استاندارد در وردپرس

در CSS استاندارد در وردپرس به موارد زیر اشاره می کنیم :

یکی از جذابیت هایی که طراح های وب رو با هم دیگه متمایز می کنه در نحوه صحیح کد نویسی و استاندارد نویسی است

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

#ساختار

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

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

  • استفاده از کلید تب برای فرورفتگی کدها به جای کلید فاصله یا اسپیس
  • اضافه کردن دو خط خالی بین بخش ها و یک خط خالی بین بلوک در یک بخش
  • هر عنصر باید خط خود را داشته باشد و با کاما(انگلیسی) یا بستن آکلاد خاتمه می یابد.
  • باید کدهای عنصر را با یک کلید تب بعد از کد عنصر (بعد از دو نقطه تب می زنیم ) و با سمی کالن پایان داد .در هنگام کد نویسی باید به تراز بودن کدها از سمت چپ توجه کرد که همه آن ها باید به صورت تراز برای خوانایی بهتر نوشته شوند .

نحوه صحیح کد نویسی در ساختار

نحوه غلط کد نویسی در ساختار

#انتخاب گرها

این ویژگی شما را در کد نویسی مجاب به دستور مسؤلیت پذیری می کند . انتخاب گرها انتخاب های کارآمد بسیار گسترده ای را در اختیار ما می گذارند اما با عدم آزمایش قبل از استفاده می تواند عواقبی را از جمله بهم ریختگی قالب را دربرداشته باشد ولی استفاده از آن ها به طرح کلی و همچنین DOM کمک می کند .

  • مانند استانداردهای زبان PHP در وردپرس در انتخاب نام آن ها می توانیم از کلمات بزرگ و کوچک و علامت ها استفاده کنیم .
  • از کلمات مرتبط برای نام گذاری انتخاب می کنیم تا به راحتی قابل درک عام باشد .
  • عناصر با جفت کوتیشن در قالب فراخوانی می شوند (class , ID )
  • از انتخاب عناصر بیش از حد اجتناب می کنیم .

صحیح

غلط

#خاصیت ها

مانند انتخاب گرها دادن خواص بیش از حد مانع از طراحی خوب و بهینه است . مطمئن شوید که با خاصیت های یکسان کد بیشتری ندارید اگر این چنین است آن ها را یکی نمایید .

  • خاصیت ها باید با حروف کوچک و با فاصله از هم باشند .
  • تمام خاصیت ها باید با حروف کوچک نوشته شوند به جز فونت یا خاصیت هایی که قبلا تعریف شده است .
  • برای دادن رنگ از حروف هگزادسیمال یا Rgba برای کدورت رنگ استفاده نمایید و هرگز RGB به کار نبرید . حروف کوچک بهتر از حروف بزرگ در هگزادسیمال می باشد .
  • تا جایی که ممکن است از کد نویسی خلاصه استفاده نمایید .

صحیح

غلط

#مرتب سازی ساختار کد

قبل از هر چیز طوری بنویسید که به شما راه و رسم و معنا را می بخشد .مرتب نبودن مانند هرج و مرج در یک شعر است .

در هسته وردپرس انتخاب ما بر اساس سفارش یا گروه بندی است ، تمام خاصیت ها با آن معنا و گروه بندی دستور می گیرند .

خواص درون گروه نیز برای ایجاد انتقال بین دو بخش از دستورات استراتژیک پیروی می کنند برای مثال پس زمینه باید قبل از رنگ دستور بگیرد .

  • نوع نمایش
  • نحوه قرارگیری
  • نوع بلوک،قسمت یا جعبه
  • رنگ و تایپوگرافی
  • بقیه ساختار

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

می توان به جای خاصیت دادن تک تک به عناصر بالا پایین چپ و راست از یک خاصیت مشتق استفاده کرد مانند (بالا/راست/پایین/چپ) یا اگر همه یک مقدار ثابت دارند از یک خاصیت برای همه استفاده کرد .

مثال :

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

#پیشوندهای مرورگرهای اینترنتی

برای راحتی کار ما از پیش فرض های آمده برای مرورگرهای مختلف در کدهای خود به منظور عدم بهم ریختگی پوسته ظاهری استفاده می کنیم

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

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

تمام فاصله های مانده به عنوان استاندارد در نظر گرفته شده و در مرورگر مورد نظر اجرا می شود .

مثال برای مرورگر کروم و فایرفاکس و استاندارد اصلی

#ارزش ها و مقادیر

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

  • فضای قبل از ارزش، بعد از دو نقطه (بعد از دو نقطه یک فاصله می دهیم)
  • به پرانتزها بعد از فاصله ارزش دو نقطه دیگر فاصله ندهید
  • همیشه با سمی کالن کد را به اتمام برسانید
  • استفاده از جفت کوتیشن به جای تک کوتیشن مگر این که بخواهید نام فونت بدهید
  • وزن فونت ها باید با مقادیر عددی مشخص شود .
  • ارزش گذاری نباید در صورت غیر لزوم به صفر منتهی شود .
  • ارتفاع خط باید کم باشد مگر در موارد که به پیکسل ختم شود مطالعه بیشر برای ارتفاع فونت
  • استفاده از صفر پیشرو در مقادیر عدد از جمله استفاده در رنگ بندی با کدورت ()RGBA
  • استفاده از کاما برای جداسازی هم باید خط را به خط جدید منتقل کند یا بعد و قبل از آن فاصله دهید از جمله در رنگ بندی کدر .
  • خطوط جدید برای ارزش گذاری چند بخش طولانی مانند جعبه، سایه، متن سایه مورد استفاده قرار می گیرد .
  • هر مقدار بعد از اولین به خط جدید انتقال پیدا می کند و خط پایین و بالا از سمت چپ باید تراز باشند .

صحیح

غلط

#مدیا کویری

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

  • به طور کلی برای نمایش در تمام دستگاه استفاده از آن توصیه می شود
  • نوع نوشتن کد برای یک اندازه باید با فاصله و در یک خط باشد .

مثال :

#کامنت گذاری یا افزودن توضیحات

  • نظر و اظهار نظر با minify کردن کد از بین میرود و کامنت های طولانی بیش از 80 کاراکتر باید شکسته و به سطر جدید انتقال یابند .
  • با استفاده از اعداد شاخص می توان به آن تکه از کد رفته و آن را مشاهده نمود ( نظر گذاری اول فایل های قالب های استاندارد )
  • کامنت ها باید از سند کامنت های زبان پی اچ پی باشند و سند کدهای آبشاری فعلا مورد قبول نیست مگر اینکه در آینده به توافقاتی برسند .

مثال کامنت تک خطی :

مثال کامنت چند خطی :

#بهترین روش

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

  • اگر شما به مشکلی برخوردید به فکر حذف کدهای اضافی باشید نه افزودن کد .
  • شماره سحر و جادو بخت برگشته است. این اعداد که به عنوان رفع سریع بر اساس یکی کردن استفاده می شود .

مثال

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

مثال

در کد زیر لینک فرزند های لایت می باشد .

  • اکنون دیگر استفاده از ارتفاع را یاد گرفته اید و برای تصاویر هم می توانید از طریق کدهای آبشاری ارتفاع را استاندارد تنظیم نمایید هم چنین برای ارتفاع فونت نیز نکته ای گفتیم .
  • به طور پیش فرض عناصر را خاصیت ها بازگو می کنند به عنوان مثال :

نوع نمایش عنصر را به صورت بلوک معرفی می کند .

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

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

منبع : وردپرس و تجربیات شخصی




مطالب مرتبط با این دسته بندی