معرفی شیوه نامه وردپرس CSS

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

معرفی شیوه نامه وردپرس CSS

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

بهتر است ابتدا به معرفی CSS بپردازیم. در واقع CSS مخفف کلمه ی Cascading Style Sheets است که نقش مهمی را در بحث طراحی سایت ها دارد و در واقع چند قابلیت را به شما می دهد و چند ویژگی دارد که اگر موافق باشید به معرفی آن ها بپردازیم.

ویژگی ها

[tie_list type=”checklist”]

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

[/tie_list]

وردپرس سی اس اس

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

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

این مطلب میتواند برای شما مفید باشد: آموزش کدنویسی css مبتدی تا پیشرفته

وظیفه وردپرس

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

فایل های قالب

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

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

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

و در بخش آخر برویم سراغ تولید کلاس های وردپرس سی اس اس.

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

دوستان کلاس های زیادی در وردپرس برای جهت دهی تصاویر و عناصر بلوک ها وجود دارد مانند کلاس های aligncenter، alignleft، alignright و alignnone که البته لازم است قوانینی که در این کلاس ها گفته می شود در تمام قالب های وردپرسی رعایت شود . در اصل کلاس هایی که در قالب ها به شکل وردپرس سی اس اس استفاده می شوند یکی هستند و در واقع این کلاس ها به این دلیل تشکیل می شوند که برای جهت دهی ها مطمئنا به این کلاس ها نیاز خواهید داشت. به همین دلیل ما کد اصلی وردپرس را به شما معرفی می کنیم.

کلاس ها

/* =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. */
}

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

منبع : بیگ تم