چگونه از کدهای css در سایتم استفاده کنم؟

تابحال شده که بخوای گوشه های یک فیلد از فرم های سایتت رو گرد کنی ؟ یا عرض و ارتفاعش رو بیشتر کنی ؟ باید بگم همه این ویژگی های پیش فرض سایت وردپرسی رو میتونید با استفاده از css تغییر بدین !

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

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

سایت های وردپرسی چطوری شکل میگیرند ؟

همانطور که میدانید وردپرس یک سیستم مدیریت محتواست که با استفاده از چند دکمه میتونیم یک سایت حرفه ایی بسازیم ! خب سوال اینجا شکل میگیره که سایت های وردپرسی چطوری ساخته میشوند ؟ یعنی با استفاده از چه اجزایی و با چی ساخته میشوند.

سایت های وردپرسی در چهارچوب php ایجاد میشوند و در یک سایت وردپرسی ساده بدون هیچ امکاناتی از html , css , javascript , jquery و … استفاده میشوند. پس تمامی شکل و شمایل یک سایت با استفاده از css ساخته میشوند .

css چیست ؟

همانطور که میدانید سی اس اس و اچ تی ام ال دو زبانی هستند که فقط در کنار یکدیگر معنی پیدا می‌کنند. زیرا CSS را می‌توان مکملی بر زبان HTML دانست که با هدف پر کردن نقاط ضعف و خلاء‌های آن توسعه یافته است. CSS مخفف عبارت Cascading Style Sheets و به معنی “برگه‌های آبشاری” است.

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

چطوری از صفحه مرورگر خود inspect بگیرم ؟

تابجال به این فکر کرده بودین که برای تغییر استایل عناصر صفحات سایت باید چیکار کنم؟ این کار با ابزاری که در حال حاضر روی مرورگر شما با نام inspect element وجود دارد امکان پذیر است. این ابزار، ابزاری مناسب برای کاربرانی است که علاقه دارند طراحی صفحات را خودشان انجام دهند.

با استفاده از inspect element شما میتوانید کدهای html و css و javascript را برای هر صفحه وبی ویرایش کنید تا بصورت زنده تغییرات را مشاهده کنید. ( تنها روی کامپیوتر و مرورگر خود این تغییرات را میبینید و تغییرات شما ماندگار نخواهد بود  🙂  )

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

آموزش درج کدهای سی اس اس در قسمت css سفارشی قالب سایت

خب برای درج کد های خودتون در سایت وردپرسی کافیه که مطابق تصویر بالا به قسمت css سفارشی اضافه کنین .

خلاصه کلام :

در نهایت باید بگم ، برای طراحی صفحات سایتتون به صورت سفارشی بهتره که جسارت به خرج دهید و 0 تا 100 بخش های سایت رو خودتون با css طراحی کنین . با اینسپکت باگ رو پیدا کنید و در جایی که گفتیم کدهای سی اس اس تون رو اضافه کنین!