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

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

سلام دوستان؛

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

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

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

وردپرس Css

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

فایل های قالب

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

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

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

شیوه نامه

وردپرس Css در همه قسمت ها موجود است. در هر فایل قالبی کدهای اچ تی ام ال موجود است، چه در قسمت برچسب ها و چه در قسمت محتوا! در شیوه نامه وردپرس Css در هر پوسته ای به صورت یک قانون جهت کنترل طراحی و لایه های اچ تی ام ال می باشد. بدون ساختار وردپرس 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 در تمامی قالب ها و همچنین قالب های وردپرسی ضروری است.