شیوه نامه ی وردپرس CSS در قالب های وردپرسی

شیوه نامه ی وردپرس CSS در قالب های وردپرسی

شیوه نامه ی وردپرس CSS در قالب های وردپرسی

سلام دوستان؛

وردپرس به شدت بر وجود سی اس اس متکی است. زمانی که از آن در قالب های وردپرسی استفاده می شود منجر به انتخاب بینهایت لایه و تنظیمات خواهد شد. Css وردپرس به قالب ها نمایی زیبا می دهد تا بتوانند خود را زیباتر به کاربران نمایش دهند و همچنین به شما کمک می کند تا قالب سفارشی خود را بسازید.

Css مخفف Cascading Style Sheets می باشد که در مبحث طراحی سایت ها به شما اجازه می دهد اطلاعاتی نظیر رنگ، لایه ها، فونت و… را جدا از ساختار اچ تی ام ال  در قالب ارائه دهید. همچنین کار با آن بر سرعت و ساده تر شدن بروز رسانی ها موثر است.

اما سراغ مقاله ی امروز که در مورد وردپرس Css می باشد می رویم. در این مقاله خلاصه ای از استفاده ی سی اس اس در وردپرس را شرح می دهیم.

وردپرس Css

یک قالب وردپرسی ترکیبی از فایل های قالب، برچسب های قالب و فایل های وردپرس Css برای نمایش در سیستم مدیریت محتوای وردپرس می باشد.

فایل های قالب

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

برچسب های قالب

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

شیوه نامه

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

  نوشتن کد های CSS در وردپرس با WP Add Custom CSS

تولید کلاس های وردپرس Css

چندین کلاس در وردپرس Css برای جهت تصاویر و عناصر بلوک ها موجود است که در تمامی قالب های وردپرسی رعایت می شود مانند کلاس های aligncenter، alignleft، alignright بعلاوه کلاس alignnone نیز به آن ها اضافه شده است. بنابراین شما برای جهت دهی ها حتما به این موارد نیازمند هستید. معمولا کلاس هایی که در قالب ها به صورت وردپرس Css استفاده می شود یکی هستند! به همین علت ما قطعه کد اصلی وردپرس Css را به صورت یک نمونه ی کلی در زیر آورده ایم:

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

هر قالبی باید از ساختار بالا در وردپرس Css یا همان Style.css خود استفاده کند تا بتواند تصاویر و توضیحات آن ها را نمایش دهد.

جمع بندی!

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

مشاوره آموزشی رایگان
شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود، از مشاوره رایگان کارشناسان آموزشی مجموعه همیار آکادمی استفاده نمائید.
 
مشاوران آموزشی
همیار آکادمی
پاسخگوی شما هستند
آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

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

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. دقیقا منم همین مشکل رو دارم. تغییرات رو وقتی در inspect element می نویسم اجرا میشن. ولی خوب ماندگار نیستن. تو استایل سی اس اس همون کدها رو نوشتم ولی انگار نه انگار که این کدها نوشته شده. اصلا اجرا نمی شن.

    • 7 سال عضو همیار وردپرس

      سلام
      اگه قالب شما فارسی سازی شده باید فایل rtl رو هم چک کنید. و داخل اون وارد کنید.

    • سلام
      سوال دوستمونو خواهشا جواب بدید مشکل منم همینه.
      مثلا بخوام background-color تغییر بدم در قسمت style.css وردپرسوهیچ تغییری نمیکنه.
      یه کدی هست برای درج تاریخ اخرین ویرایش.
      در قسمت single.php کدرو وارد میکنم باز هیچ اتفاقی نمیوفته.
      rtl.css ای ک شما گفتید, style هایی ک میخاییم تغییر بدم داخل اون نیست

    • سلام. ممنونم از راهنماییتون. اما نه هنوز قالبم فارسی سازی نشده.

  2. سلام
    من یه سایت وردپرسی دارم که تغییراتی که مستقیما از طریق کد نویسی اعمال میکنم اجرا نمیشن.
    مثلا اگه رنگ پس زمینه رو با css تغییر بدم، تغییر نمیکنه.
    هیچ افزونه ای هم راجع به کش نداره.
    کش مروگر رو هم پاک کردم، نشد.
    اگه امکانش هست از طریق ایمیل راهنماییم کنید. اونقدر توی سایتها سوالم رو مطرح کردم نمیدونم کجاها سوال نوشتم.
    [email protected]
    09389583987

  3. سلام…
    برای یادگیری کار با css ورر پرس میشه چندتا منبع معرفی کنید؟؟
    آِیا کتاب css for dummies کتاب مناسبی است یا اینکه باید منبعی داشت که تخصصی در زمینه وردپرس،css را آموزش بدهد؟؟
    با تشکر

  4. با سلام و تشکر
    می خواستم بدونم این کلمات قرمزی که درون تمام مطالبتون است و هر کدام وقتی رویش کلیک می کنیم به قسمتیهایی، از جمله: دسته ها ، مقالات سایت ،زیر پوشه سایت مثل دیزاین و … هدایت می شوند، چگونه قابل انجام است؟

مطالب زیر را حتما بخوانید

دوره‌های آموزشی