خانه / وردپرس / آموزش وردپرس / شیوه نامه ی وردپرس CSS در قالب های وردپرسی
شیوه نامه ی وردپرس CSS در قالب های وردپرسی
شیوه نامه ی وردپرس CSS در قالب های وردپرسی

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

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

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

وردپرس Css : دوستان قالب وردپرس از انواع برچسب ها , فایل ها و CSS  برای نمایش در مدیریت محتوای وردپرس می باشد تا به زیبایی قابلیت نمایش باشد که در ادامه به تک تک انها خواهیم پرداخت

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

فایل های قالب : میشه گفت اینها برای ساخت قالب اصلی سایت میباشند تا در کنار هم باشند زیرا همانطور که میدونید یک سایت از هدر، سایدبار، محتوا و فوتر تشکیل شده و اینها در کنار هم میتونند صفحه یک سایت رو بسازند که قابلیت سفارشی نمودن بلوک های ساخته شده رو دارند

شیوه نامه : دوستان اگه به قالب مراجعه نماید چه در برچسب ها و چه در فایلها میتونید اچ تی ام ال رو مشاهده نمایید و شیوه نامه Css  برای این که لایه ها رو زیبا نمایش و کنترل کند  به صورت مجزا کنترل می نماید که اگه این چنین نباشد صفحات ان بدون زیبای و فقط متن رو نمایش می دهد که با ان قابلیت جابه جا نمودن بلوک ها و , ساختن هدر گرافیکی و .. رو دارید

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

برای عناصر و بلوک ها چندکلاس در Css  موجود بوده است که میشه گفت در هه قالب های وردپرس رعایت می شوند چون aligncenter، alignleft، alignright بعلاوه کلاس alignnone که برای کار بهشون نیاز دارید به دلیل اینکه کلاس ها 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. */
}

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

از همراهیتون سپاسگذریم

منبع : قالب وردپرس

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *