طراحی قالب وردپرس (فصل دوم - جلسه پنجم) : ایجاد صفحه مطلب

‏  8 دقیقه
۱۱ آبان ۱۳۹۲
طراحی قالب وردپرس (فصل دوم - جلسه پنجم) : ایجاد صفحه مطلب

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

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

قبل از شروع به ایجاد فایل 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 پاک کنید.

دانلود فایل‌های php قالب

 

نکته :

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

 

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

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

 

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

Ali Ali

سلام و تشکر
من یه مشکلی دارم. میخوام در صفحه ی اصلی سایتم (ایندکس) شش تا لینک باشه که همون فهرستمه که با شش تا عکس کل صفحم رو میخوام بگیره.
و میخوام اگه رو اینها کلیک کنم برم به یه page جدید. مثلا به page1.php . شما خیلی واضح درمورد ساخت صفحه ی پیج نگفتید من صفحه پیجم رو نمیتونم بهش استایل لینک کنم.
سوالم:چجوری به پیجم استایل بدم ؟
سول دو:آیا ممکنه دوازده تا div با آیدی های مختلف تو یه صفحه باشه و با یه حلقه و یه شرط کاری کنیم که یه خلاصه از پستامون به ترتیب بصورت داینامیک به دیو یک، دو، سه … تا دوازده بروند ؟

کیوان علی محمدی

سلام در مورد قسمت اول سوال باید بگم با استفاده از page template ها به راحتی می تونید هر نوع استایل و اسکریپت دلخواهی رو در سیستم اضافه کنید.در مورد قسمت دوم هم باید بگم بهتره با استفاده از WP_Query این کارو انجام بدین. می تونید مقدار posts_per_page رو برابر 12 قرار بدین و 12 تا آخر مطلب رو دریافت کنید.

عاطفه

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

mhty

بازم سلام
یه مشکل دیگه اینکه من قالبم با قالبی که شما برای آموزش گذاشتین فرق میکنه وقتی تگ php بخش ابزارک ها رو مینویسم که توی فایلfunction نوشته میشه.بخش ابزارکم فعال نمیشه.و همچنین پیوندها.
نمیدونم مشکل از چیه! آیا امکان داره به خاطر کلاس هایی باشه که توی صفحهindex.php تعریف کردم و نام کلاس ها با شما فرق میکنه؟
ممنونم.خداخیرتون بده.

mhty

سلام و عرض ادب
خسته نباشید واقعا آموزش هاتون عالی هستند. خدا خیرتون بده.
بنده یه سوال دارم. توی طراحی قالب وردپرس برای کد های html نام کلاس ها رو باید طبق آموزش شما روی تگ ها بذاریم؟یا هر نامی که بذاریم اشکال نداره؟
مثلا به جای کلاس tagline یا logo اسم های دیگه ای براشون تعریف کنیم؟
از لطفتون ممنونم.

وحید صالحی

مشکلی نیست فقط در فایال استایل هم همین نام ها رو باید قرار بدید

آرمین

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

سجاد دریس

سلام.
خیر تموم شده

آرمین

سلام یه سوال دارم اصلا چرا بیایم هر قسمت از قالب رو جداگانه طراحی کنیم مثلا header جدا footer جدا ؟ نمیشه همشو تو یک فایل بنویسیم ؟

وحید صالحی

سلام میشه در یه صفحه همش رو طراحی کرد اما این کار باعث تکرار در کدنویسی تکرای میشه و حجم و زمان پروسه طراحی رو افزایش میده درضمن بدترین مزیتی که داره اینکه اگر بخواهید در فایل ویرایش در کد های مشابه انجام بدید باید در تمام صفحات این کار رو انجام بدید حالا اگر یه فایل جداگانه header یا فایل های دیگه داشته باشی تنها یک فایل ویرایش میکنید و در سایر صفحات از اون استفاده می کنید و به عبارتی اصلاحات در تمای صفحات ایجاد میشه…

مرتضی

سلام خسته نباشید اگه بخواهیم تو صفحه single عکس، با اندازه واقعی یعنی اندازه اصلی خودش نشون داده بشه از چه کدی باید استفاده کنیم ؟ممنون

سجاد دریس

اگه اندازه دقیقش رو نمیدونید، height و width رو تعریف نکنید

محمدجعفر

سلام
من این قالب رو ساختم ولی گزینه ابزارک ها تو قسمت پوسته ها نیومد

alireza sinaei

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

سجاد دریس

خیر همچین کاری ممکن نیست

احسان

داداش لطفا جواب بده بدجوری لازمه فک کن یه چیزی در حد سایت های خبری مثه
http://www.asriran.com/
البته خیلی ساده تر
چون طراحی رو با قالبی که شما اموزش دادی شروع کردم میخوام بینم لوپه مطلب همونه یا باس یه سری چیزا رو اضافه کنم؟(منظورم پلاگین وو ایناس)

سجاد دریس

نه دیگه همونه و فقط شکل و شمایلش فرق می کنه.

ehsan rad

سلام سجاد جان برای طراحی قالب خبری مثه تابناک از کجا باس شروع کنم چه فرقی با قالب اموزشی شما داره؟
برای اینکه راهنمایی کنین باس کاربر ویژه بشم؟

سجاد دریس

سلام.
والا من خبرهارو دنبال نمیکنم قالب سایت تابناک رو هم ندیدم 😀
ولی خب هر قالبی این قسمت هایی که توی آموزش هست رو حتما داره….

سجاد دریس

فایل index تون بفرستین لطفا