آموزش ایجاد تغییرات CSS: روش های افزودن و ویرایش کد.
حتما می دانید که وردپرس یک cms بسیار مناسب برای ساخت و طراحی یک سایت بدون دانش برنامه نویسی است.
اما اگر می خواهید در زمینه Web design سایت خود ماهرانه و خلاقانه تر عمل کنید بهتر است کمی به دانش برنامه نویسی تسلط پیدا کنید تا بتوانید زیباترین سایت دلخواه خود را طراحی کنید.
برای اینکه کاربران سایت شما از وقت گذاشتن در سایت شما خسته نشوند و همچنین فضای سایت شما بی روح و سرد نباشد، باید با استفاده از ابزارهای لازم برای بهبود طراحی و زیبایی صفحات سایت خود تلاش کنید.
یکی از ابزارهای اصلی CSS است. به همین دلیل مسئله آموزش ایجاد تغییرات CSS در جهت فرم دهی به صفحات وب HTML و المان های مختلف آن، باید مورد توجه قرار بگیرد.
اگر افزونه های صفحه ساز، استایل و قالب مدنظر شما را نداشته باشند، باید با استفاده از ویرایش کدهای CSS استایل مورد نظر خود را بسازید.
CSS چیست؟
یکی از مهم ترین زبان ها در طراحی سایت CSS است.
در واقع CSS یک زبان نشانه گذاری است که در کنار HTML و JavaScript از پایه های اصلی طراحی صفحات وب به حساب می آیند.
کلمه CSS سرواژه سه کلمه اصلی Style Sheet Lanquage و به معنای شیوه نامه آبشاری است.
ظاهر و ساختار اصلی سایت شما با HTML نوشته می شود و CSS به شما کمک می کند آن را اصلاح یا ویرایش کنید.
از این زبان برنامه نویسی برای طراحی ظاهری صفحات یک سایت و تنظیم کردن نحوه المان های مختلف در صفحه استفاده می کنند.
همچنین با استفاده از CSS می توانید ظاهر پیش فرض برخی از قالب های وردپرس را تغییر دهید.
شCSS را کجا اضافه کنیم؟
CSS به طور مستقیم به قالب وردپرس اضافه می شود اما اینکار ممکن است بعد از هر به روزرسانی در قالب، باعث ایجاد تغییراتی در سایت شما شود.
دلیل به وجود آمدن تغییرات احتمالی این است که ممکن است بعد از به روز رسانی قالب، CSS اضافه شده، حذف و باعث ایجاد تغییراتی در سایت شما شود.
راه حل اضافه کردن CSS در وردپرس
۱- درصفحه پیشخوان به قسمت نمایش بروید.
۲- گزینه شخصی سازی را انتخاب کنید
۳- بعد از ورود به صفحه سفارشی سازی سایت، در منوی سمت راست گزینه آخر CSS اضافی را کلیک کنید.
۴- در کادری که برای شما باز شد، کدهای CSS را وارد کنید. اگر هر قطعه کد را در یک خط بنویسید بهتر است.
در پیش نمایش زنده می توانید تغییرات را مشاهده کنید.
۵- در مرحله آخر کدهای اضافه شده را ذخیره کنید.
در ادامه ۲ تا از تغییراتی که می توانید با استفاده از CSS اعمال کنید را ذکر کردیم.
تغییر رنگ در CSS
اگر می خواهید رنگ عنوان یک پست را تغییر دهید، کد زیر را به کادر CSS اضافی در وردپرس اضافه کنید.
h 1{
color : red;
}
تغییر فونت در CSS
ممکن است کاربران سایت شما از فونت مطالب یا نوشته های شما خسته شوند یا برایشان تکراری باشد.
اگر مایل هستید فونت دلخواه خود را به سایتتان اضافه کنید از کد زیر استفاده کنید.
P {
Font- family: B nazanin;
Font-size: 20 px;
}
نحوه اضافه کردن کدهای سفارشی css به سایت وردپرس
در روش دوم به جز استفاده از قسمت سفارشی سازی سایت می توانید از افزونه ها نیز کمک بگیرید.
(این روش بیشتر مناسب کسانی است که هنوز نسخه های قبل از ۴٫۷ وردپرس را استفاده می کنند.)
افزونه Simple Custom CSS را نصب و فعال کنید.
پس ازفعال سازی، به بخش نمایش از پیشخوان وردپرس بروید و روی Custom CSS کلیک کنید تا یک صفحه جدید باز شود.
در صفحه باز شده کدهای سفارشی را قرار دهید و روی Update Custom CSS کلیک کنید.
این روش یک نکته مهم دارد. در این روش کدهای سفارشی CSS روی تمامی قالب ها اعمال می شود.
۳روش برای استایل دادن به صفحات یک سایت
استفاده از Inline style
استایل دادن به تگ مورد نظر در حین کد نویسی صورت می گیرد و استایل نوشته شده تنها در همان تگ عمل می کند.
[php]
<p style="color: blue>learn design at seoconsole.ir</p>
[/php]
ایجاد استایل در HTML HEADER
این روش استایل شما را روی کل صفحه اعمال می کند.
[php]
h1 {
COLOR: BLUE;
{
[/php
ایجاد استایل با فایل CSS
در این روش، فایلی مانند فایل HTML ایجاد خواهید کرد. این فایل از نوع PLAIN TEXT خواهد بود که پسوند CSS. دارد.
[PHP]
body{
background- color: red
color:#4387b1
}
h 1{
color: blue
}
[php/]
در استفاده از فایل CSS دقت کنید که برای اعمال شدن تغییرات باید بین فایل CSS و صفحه HTML مورد نظر خود ارتباط برقرار کنید.
برای برقراری ارتباط از کد زیر در تگ HTML HEAD استفاده می کنیم:
[php]
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css” title=”style”>
</head>
[/php]
۳ روش آدرس دهی برای اعمال تغییرات دلخواه عناصر مورد نظر
آدرس دهی برای اعمال تغییرات فقط روی یک عنصر خاص با ID
ابتدا در بخش کدهای html برای هر عنصر مورد نظر خود یک صفت id تعریف کنید.
<p id= "sub1"> this is a subject.</p>سپس در بخش دستورات css تغییرات دلخواه تان را با ذکر نام صفت مورد نظر اعمال کنید.
#sub1{
text-aligen:center;
color:blue;
}این تغییرات تنها روی پاراگرافی که id با صفت sub1 دارند اعمال می شود.
آدرس دهی برای اعمال تغییرات گروهی با استفاده از class
در بخش کدهای html، برای تمام عناصری که می خواهید خصوصیات ظاهری یکسان داشته باشند، باید صفت class را تعریف کنید.
< s class="center"> this is a subject.</p>در بخش کدهای css کدهای زیر را وارد کنید:
.center{
text-aligen:center;
}کد بالا بر روی المان هایی که مقادیر class با center برابری دارند، اعمال می شود.
ویرایش زنده کدهای Style.css در وردپرس با افزونه Visual CSS Style Editor
افزونه ویژوال سی اس اس استایل ادیتور مانند یک ویرایشگر زنده عمل می کند تا بدون نیاز به کد نویسی و تغییر المان های مورد نظر به راحتی قالب دلخواه خود را ویرایش کنید یا جلوه های بصری مورد علاقه خود را به آن بیفزایید.
کار با ویژوال سی اس اس استایل ادیتور
بعد از دانلود، نصب و فعال سازی این پلاگین، یک بخش جدید با نام Yellow pencil در پیشخوان وردپرس شما اضافه خواهد شد.
پس از باز کردن Yellow Pencil Editor، صفحه ویرایش زنده کدهای سی اس اس برای قالب وردپرس شما باز می شود.
در این صفحه به آسانی از می توانید از ویژگی های CSS استفاده کنید.
سخن پایانی
با مطالعه و یادگیری منابعی که تحت عنوان آموزش ایجاد تغییرات CSS فعالیت می کنند، تسلط به CSS و ویرایش صفحات سایت و همچنین یادگیری کامل آن که ممکن است کمی سخت و بسیار زمان بر به نظر برسد ولی با کمی تلاش،می توانید تغییرات بسیار جالب و زیبایی در سایتتان ایجاد کنید که بسیار با ارزش و مورد پسند کاربران نیز هست.
