قبل از شروع به ایجاد فایل 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>
<div class=“date”>
<img src=“<?php bloginfo(‘template_url’); ?>/images/date.png” />
<span><?php the_date(‘j F Y’); ?></span>
</div>
<div class=“comments”>
<img src=“<?php bloginfo(‘template_url’); ?>/images/comments.png” />
<?php comments_popup_link(‘بدون نظر’ , ‘۱ نظر’ , ‘% نظر’); ?>
</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 پاک کنید.
