آموزش خواندن و نوشتن کدهای HTML و CSS برای وردپرس‌کاران
اگر در طراحی و توسعه ی وب سایت یا قالب های وردپرسی تازه واردید، یکی از مشکلاتی که با آن مواجه هستید نوشتن کد در وردپرس یا این است که با CSS یا Cascading Style Sheets کار کنید. آموزش ها و مقالات زیادی در این زمینه در اینترنت وجود دارد اما این آموزش متفاوت است. زیرا در این آموزش ما قصد داریم تا مطالب گفته شده را مخصوص طراحی و ویرایش قالب های وردپرسی عنوان کنیم؛ یعنی آموزش CSS و HTML برای توسعه دهندگان پوسته ها یا قالب های وردپرسی. برای استفاده و درک این آموزش، باید یک آشنایی اولیه با این زبان ها داشته باشید.
از HTML یا Hyper Text Markup Language برای افزودن محتوا به وب سایت و از زبان برنامه نویسی CSS برای استایل دهی به این محتوا استفاده می شود. یعنی با استفاده از CSS می توان یک ظاهر و حس منحصر به فرد را برای وب سایت یا قالب وردپرسی ایجاد کرد. پس با داشتن دانش کافی از زبان CSS می توانید قالب های وردپرسی را با توجه به سلیقه ی خود دیزاین کنید.
یک قالب وردپرسی مثل Customizr Theme دارای تعداد زیادی المان یا تگ HTML می باشد که می توانید آن ها را در فایل style.css قالب و با استفاده از زبان برنامه نویسی CSS استایل دهی کنید. ما به توسعه دهندگان و طراحان حرفه ای توصیه می کنیم که از Child Theme برای نوشتن کدهای CSS استفاده کنند (البته این مسائل خارج از سطح این دوره آموزشی می باشد)
زبان برنامه نویسی CSS
همانطور که گفتیم آموزش های زیادی برای یادگیری جامع CSS در اینترنت وجود دارد. آموزش هایی مثل دوره های آموزشی موجود در سایت (W3C (World Wide Web Consortium. ما در این آموزش به مسائل ساختاری و بنیادی (پایه) خواهیم پرداخت و روی حداقل ایجاد تغییر در پوسته ی وردپرسی شما تمرکز می کنیم.
اصول نحوی CSS
زمانی می توانید کدهای سی اس اس را مطابق با میل خود سفارشی سازی کنید (ویرایش کنید) که با ساختار این کدها آشنا باشید.
برای استفاده از سی اس اس، باید کدها را به شکل زیر مرتب سازی کرده و بنویسید:
selector {
property1: value;
property2:value;
<more properties here>;
property99:value;
}
نکات:
- هر سلکتور (selector) باید حداقل یک پراپرتی (property) داشته باشد.
- آن پراپرتی باید دارای یک مقدار (value) باشد.
- سلکتورهای مختلف می توانند پراپرتی های مشابهی داشته باشند.
نکات بیشتر:
- علامت ; را سمیکالن می گوییم.
- علامت {} را بریس می گوییم.
- پیشنهاد می شود قبل از نوشتن پراپرتی یک اسپیس (فاصله) بگذارید.
سلکتور چیست؟
در کد بالا، سلکتور می تواند یک تگِ اچ تی ام ال (HTML Tag) باشد، می تواند یک کلاسِ سی اس اس (CSS Class) باشد و نیز می تواند یک آی‌دیِ سی اس اس (CSS Id) باشد. سلکتور همان چیزی است که محتوای HTML را به استایل های CSS مرتبط می سازد. با برقراری این ارتباط، استایل هایی که به عنوان پراپرتی در سلکتور تعریف می شوند، به محتوای HTML مربوطه اختصاص می یابند.
یک تگِ HTML درون براکت <> قرار می گیرد. مثل <div> ، <ul> ، <li> ، <a> و غیره. این تگ ها می توانند یک شناسه ی خاص بگیرند. این شناسه با استفاده از کلاس یا آی دی به این تگ ها اختصاص می یابد. مثال:
<div id=”my-id” class=”my-class”> محتوا </div>
در کد بالا، یک تگِ <div> دو اتریبیوت (attribute) دارد. اتریبیوتِ id و اتریبیوتِ class. این دو اتریبیوت به ترتیب دارای مقدار my-id و my-class هستند.
نکات:
- گاهی به تگ ها، المان های HTML یا عناصر HTML هم می گوییم.
- در بین تگ های بازشونده و بسته شونده ی HTML، محتوای HTML قرار می گیرد. در نهایت استایل ها به این محتوا اعمال خواهد شد.
- id را می توان فقط به یک تگِ HTML اختصاص داد، ولی یک class را می توان برای چندین تگ مختلف استفاده کرد.
پراپرتی و مقدارش
گفتیم که هر سلکتور باید دارای حداقل یک پراپرتی باشد.
در زیر یک مثال زده ایم که در آن سه سلکتور دارای یک پراپرتی هستند. در کد زیر سه سلکتور وجود دارد:
- my-class: که متعلق به یک کلاس بود.
- h1: که نشان دهنده ی یک تگِ اچ تی ام ال است.
- my-id: که متعلق به یک آی‌دی است.
نکته: می بینید که سلکتورها را می توان با علامت نقطه و هشتگ نشان داد. باید بعد از هر سلکتور یک کاما (,) و فاصله گذاشت. همچنین می توانید بعد از گذاشتن علامت کاما به خط بعد بروید و هر سلکتور را در خط مجزا بنویسید.
.my-class, h1, #my-id {
color: black;
}
مفهوم وراثت در سی اس اس (Cascading)
CSS مخفف عبارت Cascading Style Sheet می باشد. منظور از Cascading این است که پراپرتی های درون یک سلکتور به صورت آبشاری از بالا به پایین (پدر به فرزند) به المان های HTML اعمال می شود. مثلا دو تگ <h1> و <body> را در نظر بگیرید. تگ <h1> درون تگ <body> قرار می گیرد. یعنی تگ <body> پدر است و تگ <h1> فرزند می باشد. مفهوم وراثت یا آبشاری (Cascading) در سی اس اس این است که:
اگر یک استایل را با استفاده از سلکتور و پراپرتی به یک تگ پدر اختصاص دهیم، تگ فرزند نیز آن را به ارث خواهد برد (آن استایل به تگ فرزند هم اعمال خواهد شد).
اولویت اعمال استایل در سی اس اس
اگر یک تگ HTML مثل <h1> را دو بار استایل دهی کنیم، آنگاه استایلی اعمال خواهد شد که به آن المان نزدیک تر باشد. مثلا در کد زیر استایل مربوط به level12 اعمال خواهد شد.
<div class="level1">
<div class="level2">
<h1>This is a Heading</h1>
</div>
</div>
حال آیا اولویتی بالا تر از level12 نیز ممکن است اتفاق بیفتد. چگونه؟ با نوشتن استایل درون خودِ تگ همه یاستایل های دیگر نادیده قرار می گیرند و فقط استایل درون خودِ تگ بر آن اعمال می شود. مثل کد زیر:
<h1 style=”color:blue”>...</h1>
کار با رنگ ها
در سی اس اس، رنگ ها را می توان به روش های مختلفی نمایش داد:
- نام رنگ: مثل red
- هکس: مثل FF0000
- آر جی بی: مثل (rgb(255,0,0
- آر جی بی ای: مثل (rgba(255,0,0,1
برای نوشتن رنگ ها به صورت هکس، معمولا از یک علامت # استفاده می شود و بعد از آن چند حرف و عدد می آید. مثل:
#22FF99
کد هکسِ بالا را می توان به صورت خلاصه و فقط با سه کاراکتر نوشت:
#2F9
در rgba آخرین عدد به «میزان قابل روئیت بودن رنگ» اختصاص دارد. هر چه این عدد به 1 نزدیک تر باشد، آن المان بیشتر قابل روئیت خواهد بود. به این قابلیت را گاها با نام های opacity و transparency عنوان می کنند.
رنگ ها را در جاهای مختلفی از CSS می توان استفاده کرد. مثلا برای تغییر رنگ متن و تغییر رنگ پس زمینه.
selector {
color: black;
} /* The color of the text */
selector {
background-color: #FF0000;
} /* The color of the background */
تثبیت موقعیت
اختصاص دادن موقعیتِ مکانی به المان ها امری ضروری و موردنیاز است. فهمیدن کل ماجرای تثبیت موقعیتِ مکانی کمی مشکل است و باید منابع زیادی را در اینباره مطالعه کنید و همچنین باید عملا تمرین کنید.
معمولا تثبیت موقعیت برای یک المان به صورت زیر انجام می شود.
selector {
float: left;
} /* Element floats to the left */
selector {
float: right;
} /* Element floats to the right */
نکته: پراپرتی float مقدار «وسط» یا center ندارد. برای قرار دادن یک المان در وسط برگه از margin و padding استفاده می کنیم. (در ادامه خواهیم گفت)
سایزدهی
برای اعمال سایز یا تغییر اندازه ی یک المان مثل عکس از پراترتی های مربوطه استفاده می شود. مثل کد زیر:
selector {
width: 200px; height: 100px;
}
selector {
max-width: 200px; max-height: 100px;
}
selector {
min-width: 200px; min-height: 100px;
}
margin و padding
یک المان را درون یک جعبه در نظر بگیرید، مثلا یک متن را درون یک کادر فرض کنید. فاصله ی متن تا کادر را padding می گوییم. همچنین فاصله ی کادر با حاشیه ی برگه را margin می گوییم.
هر دوی این پراپرتی ها در چهار جهت (بالا، راست، پایین، چپ) اعمال می شوند. یعنی می توانیم برای هر یک چهار پراپرای بسازیم:
- margin-top
- margin-right
- margin-bottom
- margin-left
- padding-top
- padding-right
- padding-bottom
- padding-left
مثال:
selector {
margin-top: 10px;
}
selector {
margin: 10px 15px 12px 5px;
}
در مثال اول فاصله ی بیرونی یا فاصله ی کادر با حاشیه ی برگه از بالا مشخص شده است. در مثال دومی که چهار عدد دارد، اعداد به صورت ساعتگرد نوشته می شوند. یعنی 10 برای بالا، 15 برای راست، 12 برای پایین و 5 برای چپ می باشد.
اگر از دو مقدار استفاده شود، عدد اول فاصله ی بالا و پایین و عدد دوم مشخص کننده ی فاصله ی چپ و راست خواهد بود.
selector {margin: 0px 0px; padding: 10px 5px;}
اگر فقط از عبارت margin استفاده شود و عبارات top و bottom و right و left بعد از آن قرار نگیرد و نیز فقط یک عدد برای آن قرار داده شود، آن یک عدد مشخص کننده ی فاصله از تمام جهات (دور المان) می باشد. مثل:
selector {
margin: 0px;
}
همانطور که در کدهای بالا می بینید، معمولا از کمیت پیکسل px برای مقادیر استفاده می شود. کمیت های دیگری نیز وجود دارند مثل em و %.
کمیت درصد % اغلب برای فاصله ها و اندازه های عرضی استفاده می شود و em معمولا برای فونت ها کاربرد دارد. مثلا 2em یعنی دو برابر فونتی که دارد استفاده می شود.
استایل دهی به فونت ها
اتریبیوت های مختلفی برای سفارشی سازی فونت ها و متن ها در CSS وجود دارد. چند عدد از پرکاربردترین آن ها در کد زیر آمده است:
body {
font-family: Garamond; /* Adjust sitewide (Garamond) font family */
color: #5A5A5A; /* Adjust sitewide (#5A5A5A) text color */
font-size: 14px; /* Adjust sitewide (14px) text size */
font-weight: bold; /* Adjust sitewide (bold) text weight [normal(400)-bold(700)-bolder-lighter-100-900] */
}
کادرها (border)
شاید بخواهید یک بردر یا کادر را برای المان خود تعریف کنید. برای این کار معمولا به صورت زیر عمل می شود.
selector {border: 2px solid green;}
در کد بالا 2px نشان دهنده ی میزان کلفتی و نازکی کادر است. solid استایل کادر است که می تواند مقادیری مثلdotted ، dashed solid ، double ، groove ، ridge ، inset و outset را نیز بگیرد که هریک شکلی خاص را به بردر می دهند. همچنین green مشخص کننده ی رنگ کادر می باشد.
مانند margin و padding، کادر هم می تواند به جهت خاصی اعمال شود. مثل:
- border-top
- border-right
- border-bottom
- border-left
مخفی کردن المان ها
معمول ترین روش مخفی کردن و عدم نمایش یک المان به صورت زیر است.
selector {display: none;}
کامنت نویسی در کد
همیشه در کدهای خود از کامنت ها استفاده کنید. کامنت نویسی به خوانایی کد شما کمک می کند. معمول ترین روش کامنت نویسی به شکل زیر است.
/* This is a comment */
خب! به پایان آموزش نوشتن کد در وردپرس رسیدیم. با مرور این آموزش می توانید CSS و HTML را در کدهای خود بخوانید و بفهمید که این کدها چه کاربردی دارند و چگونه با هم ارتباط برقرار می کنند. بدین وسیله می توانید اقدام به ایجاد تغییر در کدهای CSS و HTML پوسته ی وردپرسی خود کنید و یا اگر توسعه دهنده ی پوسته های وردپرسی هستید، می توانید به راحتی فایل های سی اس اس مثل style.css را بنویسید، بخوانید و ویرایش کنید.
منبع: سایت Press Customizr Documenta
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.