درس سوم- ساختار وردپرس، ساخت فایل شیوهدهی
در دو درس قبل کمی با پوسته و فایلهایی که الگوها را میسازند آشنا شدیم. در این درس میخواهیم کمی بیشتر در مورد ساختار کلی و هسته اصلی شکل دهنده وردپرس بدانیم و در آخر به ساخت فایل شیوه دهی میپردازیم.
هسته اصلی وردپرس
وقتی پس از راه اندازی وردپرس، وارد پوشه حاوی آن میشویم به تعداد زیادی فایل و پوشه برمیخوریم. تنها پوشهای که ما برای ساخت یک پوسته به آن نیاز داریم پوشه "wp-content" است که شامل سه زیر پوشه "languages" ،"plugins" و "themes" است. هرگز به دیگر پوشهها و فایلهای خارج این پوشه دست نزنید! تمام پوستههای پیش فرض –چندتایی که با راه اندازی وردپرس، نصب میشوند- و دریافتی، که از طریق گزینه نصب پوسته قابل دریافت هستند، در داخل این پوشه قرار میگیرند. همانطور که در تصویر زیر میبینید، تعدادی پوسته آماده (به شکل پوشه) زیر مجموعه پوشه "themes" قرار گرفتهاند. پوشه "darsnameh" پوشهای است که ما برای ساخت پوسته یا قالب "درسنامه" آن را ساختهایم. برای ساخت پوسته درسنامه یا هر نامی که شما بر میگزینید به داخل پوشه themes شوید و آن را بسازید. نشانی پوشه حاوی پوستهها با توجه به محل ثبت ومپ سرور متفاوت است، برای ما در نشانی روبرو است. D:wampwwwdarsnamehwp-contentthemes
از این به بعد تمام فایلهایی که برای ساخت و تکمیل پوسته نیاز داریم در داخل پوشه "darsnameh" قرار میدهیم.
Template Tags یا برچسبهای الگو در وردپرس
وردپرس با زبان برنامه نویسی «پی اچ پی» نوشته شده است و شما میتوانید دستورات لازم را با آن زبان در داخل فایلها بنویسید. اما سازندگان وردپرس توابعی را به آن اضافه کردهاند تا بتوان با استفاده از آنها مستقیما اطلاعات مرتبط با وبلاگ را در کدها نمایش داد. به طور مثال برچسب
<?php bloginfo('name'); ?>
که نام تارنما را نمایش میدهد. بنابراین برای ساختن پوسته در وردپرس یادگیری این برچسبها و استفاده از آنها بجای دستورات مستقیم «پی اچ پی» کفایت میکند.
در این مرحله ما بجای فهرست و توضیح عملکرد برچسبها، دست به کار میشویم و شروع به ساخت پوسته میکنیم. در حین ساخت هر قسمت پوسته به برچسبهای مورد استفاده شده در آن قسمت میپردازیم. بدین شکل یادگیری و درک نحوه عملکرد هر برچسب سادهتر میشود.
ساخت فایل شیوه Style.css
نخستین گام در ساخت پوسته، ایجاد فایل شیوه دهی است. نکته مهم در این فایل این است که بجز شیوه دهی و شکل دهی نحوه نمایش دادهها، این فایل وظیفه مهم دیگری را هم داراست و آن شناساندن نام پوسته به سیستم وردپرس است. در زمانی که پوسته ساخته شده را در داخل پوشه «themes» قرار میدهیم وردپرس به دنبال این فایل میگردد تا مشخصات پوسته مورد نظر را خوانده و آن را در صفحه «مدیریت پوستهها» نمایش دهد. اجازه بدهید تا با ساخت این فایل شرح این اتفاق را بطور عملی بیان کنیم. در داخل پوشهای که با نام «darsnameh» ساختهاید، فایلی با نام «Style.css» ایجاد کرده و کدهای زیر را در آن قرار دهید.
/*
Theme Name: Darsnameh
Theme URI: http://www.darsnameh.com
Author: the darsnameh team / تیم درسنامه
Author URI: http://www.darsnameh.com
Description: این پوسته توسط تیم درسنامه برای دوره آموزشی ساخت پوسته درست شده است
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: darsnameh
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
فایل را ثبت کنید. برای دیدن تغییرات ایجاد شده به بخش مدیریت، قسمت نمایش و زیر مجموعه آن که «پوستهها» است بروید. حال باید پوسته خود را در آن قسمت ببینید. همانطور که در عکس زیر میبینید، نماد پوسته در قسمت پوستهها آمده است. تنها قسمتی که در کدهای بالا اجباری است، نام پوسته «Theme Name» است که شما بر اساس علاقه یا هدف خود از ساخت پوسته آن را مینویسید. باقی اطلاعات برای بیشتر توضیح دادن در مورد پوسته است، مثلا نشانی تارنمای پوسته (در صورتی که تارنمایی برای معرفی خود پوسته ساخته شده باشد)، نام سازنده، نشانی سازنده، توضیحات، نسخه و اجازه نشر.
برای اضافه کردن تصویر به نماد پوسته کافی ست که عکسی را با نام «screenshot.png» در داخل پوشه «darsnameh» بگذارید. حال تصویر نماد پوسته به شکل زیر تغییر میکند. برای دیدن تصویر تازه باید مرورگر خود را بروزرسانی (refresh) کنید.
حال وقت آن رسیده تا کمی کد برای شیوه دهی به فایلstyle.css خود اضافه کنیم. بدلیل اینکه این دوره مخصوص ساخت پوسته است از تعریف بیشتر در مورد «اچ تی ام ال» و «سی اس اس» خودداری کرده و کدهای شیوه دهی را فقط به اندازه نیاز در این دوره اضافه خواهیم کرد، شما میتوانید به هر شکل خواستید تارنمای خود را آرایش بدهید.
/*
Theme Name: Darsnameh
Theme URI: http://www.darsnameh.com
Author: the darsnameh team / تیم درسنامه
Author URI: http://www.darsnameh.com
Description: این پوسته توسط تیم درسنامه برای دوره آموزشی ساخت پوسته درست شده است
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: darsnameh
*/
/* Reset
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
html {
font-size: 62.5%;
direction: ltr;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
ol, ul {list-style: none;}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a:focus {outline: thin dotted;}
a:hover,
a:active {
outline: 0;
}
a img {border: 0;}
/* =Global
----------------------------------------------- */
body,
button,
input,
select,
textarea {
color: #222;
font-family: tahoma, 'georgia', 'times', serif;
font-size: 16px;
line-height: 1.6;
}
/* Headings
-------------------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
clear: both;
font-family: 'times', serif;
margin: 10px 0;
font-weight: normal;
}
h1 {
font-size: 30px;
font-size: 3.0rem;
margin-top: 0;
}
h2 {
font-size: 26px;
font-size: 2.6rem;
}
h3 {
font-size: 18px;
font-size: 1.8rem;
color:#555;
}
h4, h5, h6 {
font-size: 16px;
font-size: 1.6rem;
}
a {
color: #3A678D;
}
a:hover,
a:focus,
a:active{
color: #ef590a;
}
hr {
background-color: #454545;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
.right{
float:right;
}
.left{
float:left;
}
#primary{
width:980px;
margin: 0px auto 10px auto;
overflow: hidden;
}
#header{
width:900px;
margin:0px auto 5px auto;
overflow:hidden;
}
.feed{
margin: 0px auto;
padding: 5px;
}
nav{
background-color:#E98A2A ;
margin: 0 auto 20px auto;
overflow:hidden;
}
nav li{
border-left:1px solid #ddd;
width: auto;
float:left;
padding: 5px;
text-align:center;
background-color: #3A678D;
}
nav a{
text-decoration: none;
color:#FFF;
font-weight: bold;
font-family: 'times', serif;
}
#main{
border-top:1px #E98A2A solid;
width:900px;
margin: 10px auto;
padding:30px 0;
overflow:hidden;
}
#content{
border:0px #E98A2A solid;
width:65%;
margin: 0px 5px 5px auto;
float: left;
}
.homepage{
border-bottom:1px #E98A2A solid;
width:100%;
margin: 0px auto 5px auto;
padding:0px 10px 10px;
overflow:auto;
}
.homepage p{
border-right:1px #ddd solid;
text-align:right;
width:690px;
margin: 0px 30px 5px auto;
padding:0px 9px 0 0;
float:left;
}
#sidebar{
width:29%;
margin: 0px auto 5px auto;
float:right;
background-color:#3A678D;
font-size: 12.1px;
}
#sidebar .sidebarbox{
margin: 1px 0px ;
background-color:#fff;
padding:10px 15px;
}
#sidebar ul {
padding:1px;
}
#sidebar li {
border-bottom:1px solid #f1f1f1;
margin:1px auto;
padding:1.5px;
text-decoration: none;
}
#sidebar li a{
text-decoration: none;
}
#sidebar #searchform {
margin: 0;
}
#searchform input[type=text] {
border-radius: 0px;
font-size: 14px;
font-size: 1.2rem;
padding: 0.375em 0.625em;
width: 56.5%;
color: #000;
border: 1px solid #454545;
}
#footer{
border-top:1px #E98A2A solid;
width:900px;
height:200px;
margin: 5px auto;
}
.hentry{
border-bottom:1px #eee solid;
width:90%;
margin: 5px auto 20px auto;
padding: 10px;
}
فایل rtl.css
وردپرس با توجه به زبان انتخابی تارنما به دنبال فایلهای شیوه دهی میگردد. بطور مثال اگر زبان تارنما انگلیسی باشد (یعنی چیدمان و نمایش از چپ به راست) فقط از فایل style.css استفاده میکند. اما اگر زبان تارنما، زبانی است که چیدمان آن از راست به چپ است (مانند زبان پارسی) وردپرس به دنبال فایل دیگری به نام rtl.css میگردد و آن را در انتهای فایل style.css وارد میکند. بدین ترتیب چیدمان تارنما بر اساس کدهای داخل فایل rtl.css تغییر میکند. پس از فایل شیوه دهی rtl.css زمانی استفاده میکنیم که بخواهیم تارنمای خود را دارای قابلیت تغییر در شیوه نمایش دهی کنیم. به این ترتیب کسی که پوسته طراحی شده توسط ما را بکار میگیرد انتخاب چگونگی چیدمان به هر دو صورت را داراست.
کدهایی که در داخل این فایل قرار میگیرند برعکس کننده کدهای فایل style.css هستند. مثلا فرض کنید در تارنمایی با زبان انگلیسی بخواهیم ستون کناری را در سمت چپ و محتوای اصلی در سمت راست قرار گیرد. به این صورت چیدمان را از چپ به راست مینماییم. حال فرض کنید که بخواهیم از همان پوسته در تارنمای پارسی استفاده کنیم طوری که ستون کناری در سمت راست و محتوا در سمت چپ قرار گیرد، برای این کار باید در فایل rtl.css این تغییرات انجام گیرد.
شاید بپرسید که چرا باید همچنین کاری کرد. پاسخ ما به شما اینست که فرض کنید بعد از یک ماه مشتری پوسته شما، درخواست کند که تارنمای انگلیسی هم برای او راه بیاندازید. فکر میکنم متوجه منظور ما شده باشید. پس بهتر آن است که از ابتدا پوسته را به شکل دو چیدمان طراحی کنیم.
کدهای تغییر دهنده در این پوسته برای فایل rtl.css:
html {
direction: rtl;
}
#content{
float: right;
}
#sidebar{
float:left;
}
nav li{
float:right;
}