خلاصه‌نویسی در CSS و استانداردهای کدنویسی HTML در وردپرس

با قسمت چهارم از سری آموزش «استانداردهای طراحی قالب وردپرس» در خدمت شما هستیم. در دو قسمت قبلی به بررسی استانداردهای زبان برنامه نویسی CSS پرداختیم. در این قسمت خلاصه نویسی های این زبان را بررسی می کنیم و در ادامه به سراغ زبان HTML می رویم.

خلاصه نویسی های CSS مورد تایید وب سایت وردپرس

خلاصه نویسی به معنای کوتاه سازی و تراکم کدهای CSS، به شکل منظم است. خلاصه نویسی باعث می شود که حجم قایل استایل شیت پایین بیاید و در نتیجه زود تر لود شود. همچنین خلاصه نویسی باعث خوانایی بیشتر کد نیز می شود.

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

کدنویسی معمولی:

h1 {margin:0; font-weight:bold; font-size:130%; color:blue;
       padding-left:5px; padding-top:10px}
h2 {margin:0; font-weight:bold; font-size:120%;
       color:navy; padding-left:5px}
h4 {margin:0; font-weight:bold; font-size:105%;
       font-style:italic; color:blue; padding-top:1.5em}

کدنویسی خلاصه:

h1, h2, h4 {font-weight:bold}
h1, h4 {color:blue}
h1, h2 {padding-left:5px}
h1, h2, h4 {margin:0}
h1 {font-size:130%;padding-top:10px}
h4 {padding-top:1.5em;font-size:105%;font-style:italic}
h2 {font-size:120%;color:navy}

خلاصه نویسی پراپرتی ها

مقادیر (value) برای پراپرتی هایی مثل padding و margin و border به شکل ساعت گرد نوشته می شود. یعنی از چپ به ترتیب بالا، راست، پایین و چپ نوشته می شوند.

.box {margin-top: 10px; margin-right: 20px; 
     margin-bottom: 10px; margin-left: 20px; }

.box {margin: 10px 20px 10px 20px; }

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

.box {margin: 10px 20px}

در کد بالا، 10 برای بالا و پایین است و 20 برای چپ و راست.

اگر می خواهید به شکل بالا عمل کنید ولی margin-bottom نداشته باشید، آنگاه باید کد خود را به صورت زیر بنویسید:

.box { margin: 10px 20px 0; }

برای خلاصه نوشتن پراپرتی border نیز می توانید به روش های زیر عمل کنید:

.box {border-top: 1px; border-right: 1px; border-bottom: 1px; 
     border-left: 1px; border-color: blue; border-style: solid}

.box {border: 1px blue solid}

توجه کنید که همه ی کدهای CSS، مثل کدهای بالا، امکان خلاصه نویسی را ندارند. ما در اینجا صرفا معمول ترین و پرکاربردترین خلاصه نویسی ها را بررسی کردیم.

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

در این ادامه به بررسی استانداردهای ارائه شده برای کدنویسی HTML قالب ها و افزونه های وردپرسی خواهیم پرداخت. استانداردهایی که رسما از طریق خود وب سایت وردپرس ارائه شده است.

برای اطمینان از کدنویسی صحیح، باید تمام صفحات اچ تی ام ال در سنجشگر W3C مورد بررسی قرار بگیرند (W3C validator). این ابزار نشان دهنده ی صحت کامل کدهای HTML نیست اما برای بررسی این موضوع می تواند مفید واقع شود. دقت کنید که ابزار W3C validator شما را از بررسی کد بی نیاز نمی کند و حتما باید خودتان هم کد را بررسی و خطایابی کنید.

عناصر یا تگ های خودبسته (Self-closing Elements)

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

صحیح:

<br />

غلط:

<br/>

صفت ها یا اتریبیوت ها و تگ ها

همه ی تگ ها و اتریبیوت ها (صفت ها یا attributes) باید با حروف کوچک انگلیسی نوشته شوند. همچنین مقادیر مربوط به اتریبیوت ها هم باید با حروف کوچک نوشته شوند.

استفاده از کوتیشن ها

طبق گفته ی W3C، تمام اتریبیوت ها باید دارای مقدار باشند و مقادیر آن ها نیز درون دابل کوتیشن یا تک کوتیشن قرار داشته باشد.

کدنویسی صحیح:

<input type="text" name="email" disabled="disabled" />
<input type='text' name='email' disabled='disabled' />

کدنویسی غلط:

<input type=text name=email disabled>

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

تو رفتگی (indentation)

همانند تورفتگی در PHP، باید در اچ تی ام ال هم تو رفتگی ها نشان دهنده ی یک ساختار منطقی باشند.

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

کدنویسی صحیح:

<?php if ( ! have_posts() ) : ?>
<div id="post-1" class="post">
<h1 class="entry-title">Not Found</h1>
<div class="entry-content">
<p>Apologies, but no results were found.</p>
<?php get_search_form(); ?>
</div>
</div>
<?php endif; ?>

کدنویسی غلط:

<?php if ( ! have_posts() ) : ?>
<div id="post-0" class="post error404 not-found">
<h1 class="entry-title">Not Found</h1>
<div class="entry-content">
<p>Apologies, but no results were found.</p>
<?php get_search_form(); ?>
</div>
</div>
<?php endif; ?>

به پایان درس خلاصه‌نویسی در CSS و استانداردهای کدنویسی HTML در وردپرس رسیدیم. در قسمت بعدی «استانداردهای کدنویسی جاوا اسکریپت را برای وردپرس» بررسی می کنیم. با ما همراه باشید.

منبع: سایت WordPress