آموزش طراحی حرفه ای قالب وردپرس(۷)

با سلام مجدد خدمت همه دوستان و عزیزان علاقه مند به طراحی سایت یا وردپرس، با آخرین جلسه از طراحی قالب وردپرس با شما هستیم .

در جلسه پیش توانستیم که مطالب وبسایت را با استفاده از توابع وردپرس نمایش دهیم، در این جلسه صفحه مطلب پوسته را ایجاد خواهیم کرد،

قبل از شروع به ایجاد فایل single لازم است که کارمان را با فایل index به طور کامل تمام کنیم.

پس ابتدا فایل index.php را در ویرایشگر کد و قالب را در مرورگر باز کنید :

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

برای نمایش آن نیاز به قرار دادن توابع آن است برای انجام این کار تابع

<?php wp_head(); ?>

را قبل از تگ </head> (درون فایل header.php) و تابع

<?php wp_footer(); ?>

را قبل از تگ </body> قرار دهید. حال اگر قالب را ریفرش کنید، نوار مدیریت نیز نمایش داده خواهد شد.

آخرین کار ما با فایل index جدا کردن کدهای فوتر است برای انجام اینکار نیز یک فایل جدید در کنار index.php با نام footer.php ایجاد کنید و کد های فوتر را از فایل index به آن انتقال دهید

<!-- Start Footer -->
 
<div id="footer">
 
<p class="copyright">تمامی حقوق این وبسایت متعلق به وبسایت من است و هرگونه کپی برداری از مطالب آن بدون ذکر منپع غیر مجاز است.</p>
 
</div>
 
<!-- End Footer -->
 
</div>
 
<!-- End Wrapper -->
 
<?php wp_footer(); ?>
 
</body>
 
</html>

سپس بجای این کدها در فایل index کد زیر را برای لود کردن فایل footer.php قرار دهید:

<?php get_footer(); ?>

خب حال نوبت به صفحه مطلب می رسد، یک فایل دیگر با نام single.php ایجاد کنید ، و کل کدهای فایل index.php را درون آن کپی کنید.

خب فایل single.php با فایل index.php فرق چندانی نخواهد داشت، بجز در قسمت content. این قسمت نیاز به تصویر شاخص و دکمه ادامه مطلب نخواهد داشت، درضمن برچسب ها و نظرات را نیز باید ایجاد کنیم.به علاوه اینکه به جای خلاصه مطلب بایستی کل مطلب را نمایش دهیم.

خب اولین کار بر روی ادامه مطلب پست "سلام دنیا" به دلیل داشتن نظر کلیک کنید.

حال به فایل single.php بر می گردیم و div با کلاس post را به شکل زیر تغییر دهید :

<div class="post single-post" id="post-<?php the_ID(); ?>">

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

خب کار بعدی حذف تصویر شاخص (البته این کار اختیاری است، می توانید تصویر را در یک اندازه ی بزرگتر نیز به نمایش بگذارید) و دکمه ادامه مطلب است. پس کدهای قسمت post به شکل زیر تغییر خواهد کرد :

<?php if ( have_posts() ) : ?>
 
<?php while ( have_posts() ) : the_post(); ?>
 
<div class="post single-post" id="post-<?php the_ID(); ?>">
 
<a href="<?php the_permalink() ?>"><h4 class="post-title"><?php the_title(); ?></h4></a>
 
<div class="post-content">
 
<?php the_excerpt(); ?>
 
</div>
 
<br style="clear: both;" />
 
<div class="post-meta">
 
<div>
 
<img src="<?php bloginfo('template_url'); ?>/images/auther.png" />
 
<a href="<?php the_author_link(); ?>">نويسنده : <?php the_author(); ?></a>
 
</div>
 
&nbsp;
 
<div class="date">
 
<img src="<?php bloginfo('template_url'); ?>/images/date.png" />
 
<span><?php the_date('j F Y'); ?></span>
 
</div>
 
&nbsp;
 
<div class="comments">
 
<img src="<?php bloginfo('template_url'); ?>/images/comments.png" />
 
<?php comments_popup_link('بدون نظر' , '1 نظر' , '% نظر'); ?>
 
</div>
 
</div>
 
</div>
 
<?php endwhile; ?>
 
<?php endif; ?>

حال کل مطلب را با تابع زیر به جای خلاصه نمایش می دهیم :

<div class="post-content">
 
<?php the_content(); ?>
 
</div>

خب اگر دقت کرده باشید، با اینکه تصویر بند انگشتی را حذف کرده ایم، اما هنوز متن به سمت چپ کشیده شده است و کل کادر را در بر نگرفته، پس باید تغییراتی در استایل ایجاد کنیم. برای اینکار کد زیر را به انتهای فایل style.css اضافه کنید :

#content .single-post .post-content {
 
float: none;
 
width: auto;
 
margin: 15px;
 
}

خب کار بعدی نمایش برچسب های مطلب است برای اینکار کد زیر را خارج از div با کلاس single-post و قبل از endwhile قرار دهید :

<div class="meta tags">
 
<p><?php the_tags('برچسب ها : ', ' ، ', ''); ?></p>
 
</div>

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

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

کد زیر را نیز به انتهای فایل style.css اضافه کنید تا این قسمت بدون استایل نباشد.

#content .tags {
 
background: #d2d2d2;
 
border: 1px solid #a7a7a7;
 
padding: 10px;
 
margin-bottom: 10px;
 
}
 
#content .tags p{font-size: 18px;}
 
#content .tags p a{
 
background: #f9f9f9;
 
padding: 0 5px;
 
border-radius: 3px;
 
border: 1px solid #a7a7a7;
 
font-size: 15px;
 
color: #333;
 
}
 
#content .tags p a:hover {
 
background: #3559ac;
 
color: #fff;
 
}

خب حال نوبت به قسمت نظرات می رسد. قسمت نظرات را می توان به دو شکل ایجاد کرد. یا اینکه از تابع آن استفاده کرد که شکل آن از فایلcomment-template موجود در پوشه ی wp-includes  گرفته می شود. یا که خودمان طبق شکلی که می خواهیم آن را طراحی کنیم که اینکار نیاز به فایل comments.php و کد نویسی زیادی دارد.

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

<div class="comments-list">
 
<?php comments_template(); ?>
 
</div>

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

/* Comments */
 
#comments {clear: both;}
 
#comments .navigation {padding: 0 0 18px 0;}
 
h3#comments,
 
h3#reply {
 
color: #000;
 
font-size: 20px;
 
margin-bottom: 10px;
 
}
 
.commentlist {list-style: none;}
 
.commentlist li.comment {
 
border-radius: 3px;
 
border: 1px solid #c5c5c5;
 
background: #f2f2f2;
 
line-height: 24px;
 
margin: 0 0 20px 0;
 
padding: 10px;
 
padding-bottom: 0;
 
position: relative;
 
box-shadow: inset 0 1px 0 #fff;
 
}
 
.commentlist ol {list-style: decimal;}
 
.commentlist .avatar {
 
position: absolute;
 
top: 4px;
 
left: 0;
 
margin-left: 4px;
 
}
 
.comment-author {
 
text-shadow: 0 1px 0 #fff;
 
font-size: 14px;
 
}
 
.comment-author cite {
 
color: #000;
 
font-style: normal;
 
font-weight: bold;
 
}
 
.comment-author .says {font-style: italic;}
 
.comment-meta {
 
font-size: 12px;
 
margin: 0 0 18px 0;
 
}
 
.comment-meta a:link,
 
.comment-meta a:visited {
 
color: #888;
 
text-decoration: none;
 
}
 
.comment-meta a:active,
 
.comment-meta a:hover {color: #09f;}
 
.reply {
 
font-size: 12px;
 
padding: 0 0 24px 0;
 
}
 
.reply a, a.comment-edit-link {color: #888;}
 
.reply a:hover, a.comment-edit-link:hover {color: #09f;}
 
.commentlist .children {
 
list-style: none;
 
margin-right: 10px;
 
}
 
.commentlist .children li {
 
border: none;
 
border-top: 2px solid #fff;
 
box-shadow: none;
 
margin: 0;
 
}
 
.nopassword, .nocomments {display: none;}
 
#comments .pingback {
 
border-bottom: 1px solid #e7e7e7;
 
margin-bottom: 18px;
 
padding-bottom: 18px;
 
}
 
.commentlist li.comment+li.pingback {margin-top: -6px;}
 
#comments .pingback p {
 
color: #888;
 
display: block;
 
font-size: 12px;
 
line-height: 18px;
 
margin: 0;
 
}
 
#comments .pingback .url {
 
font-size: 13px;
 
font-style: italic;
 
}
 
/* Comments form */
 
#respond {
 
border-radius: 5px;
 
border: 1px solid #c5c5c5;
 
background: #f2f2f2;
 
line-height: 24px;
 
margin: 0 0 20px 0;
 
padding: 10px;
 
padding-bottom: 0;
 
position: relative;
 
box-shadow: inset 0 1px 0 #fff;
 
overflow: hidden;
 
position: relative;
 
}
 
#respond p {
 
font-size: 12px;
 
text-shadow: 0 1px 0 #fff;
 
}
 
#respond p a {color: #000;}
 
#respond .comment-notes {margin-bottom: 1em;}
 
.form-allowed-tags {line-height: 1em;}
 
.children #respond {margin: 0 48px 0 0;}
 
#cancel-comment-reply-link {
 
font-size: 12px;
 
font-weight: normal;
 
line-height: 18px;
 
}
 
#respond .required {
 
color: #ff4b33;
 
font-weight: bold;
 
}
 
#respond label {
 
color: #888;
 
font-size: 12px;
 
position: absolute;
 
margin-top: -55px;
 
margin-right: 10px;
 
}
 
#respond input {
 
margin: 0 0 9px;
 
width: 95%;
 
margin-right: 20px;
 
position: relative;
 
margin-top: 20px;
 
}
 
#respond textarea {
 
width: 93%;
 
margin-right: 20px;
 
border-radius: 5px;
 
background: #dbdbdb;
 
border: none;
 
border: 1px solid #c5c5c5;
 
font: 12px tahoma;
 
color: #666;
 
padding: 5px;
 
}
 
#respond textarea:focus {outline: none;}
 
#respond .form-submit {margin: 12px 0;}
 
#respond input[type="submit"] {
 
height: 30px;
 
width: 100px;
 
background: #eaeaea;
 
margin-top: 5px;
 
border: none;
 
border: 1px solid #c5c5c5;
 
text-align: center;
 
font-family: tahoma;
 
border-radius: 5px;
 
cursor: pointer;
 
}
 
/* End Comments */

استایل فوق از پوسته ی twentyten گرفته شده، و فقط مقداری اون رو ویرایش کردم.

خب تقریبا کار ما با فایل single تمام شد.

حال یک فایل جدید با نام page.php ایجاد کنید و کدهای فایل single.php را درون آن کپی کنید.

تنها تفاوتی که این فایل با فایل single.php  دارد قسمت برچسب هاست که نیازی به نمایش آن ها نداریم. برای همین فقط کدهای برچسب را از فایل page.php پاک کنید.

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

نمونه ای از آخرین کارهای ما

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

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

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

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت