آبجی
28th April 2010, 12:57 AM
همانطور که میدونید وردپرس یکی از دوست داشتنی ترین نرم افزارهای تهیه وبلاگ هست، حتی قدرت آن تا حدی است که می توان به راحتی از آن به عنوان یک CMS هم استفاده کرد. برای همین من تصمیم گرفتن نحوه ساخت قالب رو برای Wordpress آموزش بدم. امیدوارم که بعد از خوندن این مطلب بتونید به راحتی برای خودتون قالب تهیه کنید. من پیشنهاد می کنم قبل از ساخت قالب مطالب مربوط ساخت سایت توسط HTML و CSS رو مطالعه کنید، چون اگه کامل به اونها مسلط باشید ساخت قالب برای وردپرس براتون خیلی راحت تر میشه.
ساختار قالب وردپرس
هر قالبی که برای وردپرس تهیه میشه حداقل باید 2 تا فایل داشته باشه : styles.css و index.php. به شکل زیر دقت کنید :
http://pei9vg.bay.livefilestore.com/y1ps3ua-QFIeUTtnuTYOdE17k0_AUHjDVEfskNYIPV7pqCzBKXiQpOP8N8 4hVYXnbmuNxMXfYgg6cg/wordpress_template.gif
همانطور که میبینید شکل بالا نشان دهنده یک قالب وردپرس در حالت کلی است، که می تواند اجزای کمتر و یا بیشتری داشته باشد اما حتما دو فایلی که گفتم رو به عنوان حداقل باید داشته باشد.
برای فایل styles.css از روش زیر استفاده کنید :
کد:
/*
Theme Name : Your template name
Theme URL : Your template url
Description : Descriptions
Author : Author name
Author URL : Author url
Version : Template version
*/
این خطوط را در ابتدای فایل CSS قرار دهید.
ساختار یک فایل index.php معمولا بدین صورت است :
کد:
<Your Doctype Goes Here...>
<html>
<head>
<title>Here Goes Your Title...</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<div id="header">Your Header Information Goes Here...</div>
<div id="navigation">Your Navigation Links Goes Here...</div>
<div id="content">Your Content Goes Here...</div>
<div id="sidebar">Your Sidebar Goes Here...</div>
<div id="footer">Your Footer Goes Here...</div>
</div>
</body>
</html>
برای لینک کردن فایل CSS از کد زیر استفاده می کنیم :
کد:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
برای شروع کار باید یک فولدر که معمولا نام قالبمان است در آدرس
wordpress/wp-content/themes بسازیم. سپس دو فایل index.php و styles.css را در آن ایجاد میکنیم. حال برای شکل دادن به فایل index.php از دستورات زیر استفاده میکنیم :
مشخصات بلاگ
توسط این دستور نام blog ما نمایش داده می شود :
کد:
<?php bloginfo('name'); ?> اگر بخواهیم نام بلاگمان را به لینک تبدیل کنیم از این روش استفاده میکنیم :
<a href="#"><?php bloginfo('name'); ?></a> و اگر بخواهیم این لینک را به frontpage منتقل کنیم :
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> توضیحات blog :
<?php bloginfo('description'); ?>
حلقه
کد:
<?php if(have_posts()): ?><?php while(have_posts()):the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
خط اول چک میکند که آیا پستی وجود دارد یا نه و اگر وجود داشته باشد آنرا نمایش می دهد و این حلقه را تا زمانی که پستی وجود داشته باشد ادامه میدهد.
عناوین پست ها
کد:
<?php the_title(); ?>
توسط این دستور میتوان پستها را نمایش دادو باید بین دستورات the_post و endwhile قرار گیرد. برای اینکه هر title به پست خودش لینک شود از دستور زیر استفاده میکنیم :
کد:
<?php the_permalink(); ?>
توسط دستور زیر هم محتوای هر پست نمایش داده می شود :
کد:
<?php the_content; ?>
مشخصات پست
توسط دستورات زیر می توان اطلاعات جانبی مربوط به پستها را نمایش داد، اطلاعات بین تگ زیر قرار می گیرند :
کد:
<p class="postmetadata">......</p>
برای نمایش عبارت Filled Under از دستور زیر استفاده می کنیم :
کد:
<?php _e('Filled Under#58;'); ?>
برای مشخص کردن اینکه این پست مربوط به کدام دسته بندی است از دستور زیر استفاده می کنیم :
کد:
<?php the_category(','); ?>
برای نمایش عبارت By :
کد:
<?php _e('By'); ?>
و نمایش نام نویسنده :
کد:
<?php the_author(); ?>
برای نمایش تعداد comment ها :
کد:
<?php comments_popup_link('No Comments »','1 Comment»','% Comments»'); ?>
برای ویراش پست در صورتی که به صورت admin وارد سایت شده باشید از دستور زیر استفاده می شود :
کد:
<?php edit_post_link('Edit','|',"); ?>
در صورتیکه پستی وجود نداشته باشد و بخواهیم عبارتی را نشان دهیم دستور زیر را پایین endwhile قرار می دهیم :
کد:
<?php else: ?>
<div class="posts">
<h2><?php _e('Not Found'); ?></h2>
</div>
اگر بخواهیم برای هر پست یک ID قرار دهیم که بتوانیم به آن یک Style خاصی بدهیم از دستور زیر استفاده می کنیم :
کد:
<div class="posts" id="post-<?php the_ID(); ?>">
برای ایجاد صفحه بندی از دستورات زیر می توان استفاده کرد :
کد:
<div class="navigation">
<?php posts_nav_link(); ?>
</div>
این دستور را باید بین endwhile و else قرار داد. دستور فوق را می توان بدین صورت customize کرد :
کد:
<div class="navigation">
<?php posts_nav_link('in between','before','after'); ?>
</div>
هرچه به جای in between نوشته شود بین next و previous می آید و هرچه به جای before نوشته شود قبل آن و هرچه به جای after نوشته شود بعد آن می آید.
ساید بار
برای نمایش Category دستورهای زیر را قبل از پایان body tag قرار می دهیم :
کد:
<div class="sidebar">
<h2><?php _e('Categories'); ?></h2>
</div>
حال برای نمایش لسیت Category ها بدین روش عمل می کنیم :
کد:
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchial=0'); ?>
</ul>
از option های زیر هم می توان استفاده کرد :
کد:
sort-column=name
این عبارت Category ها بر اساس الفبا تنظیم می کند.
کد:
optioncount=1
تعداد پست های هر کدام را نشان می دهد.
کد:
hierarchial=0
sub-cat ها را درون لسیت نمی برد. بین هر attribute باید از & استفاده کرد.
برای نشان دادن Archives از دستور زیر استفاده می کنیم :
کد:
<h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
برای قرار دادن blogroll بدین روش عمل می کنیم :
کد:
<?php get_links_list(); ?>
فرم جستجو
ابتدا یک فایل به نام searchform.php ایجاد می کنیم و کدهای زیر را درون آن قرار می دهیم:
کد:
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div>
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" size="15" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
حال در فایل index.php کد زیر را بالای همه listing ها درون Sidebar می نویسیم :
کد:
<li id="search">
<?php include(TEMPLATEPATH.'/searchform.php'); ?>
</li>
تقویم
برای ایجاد تقویم از کد زیر استفاده می کنیم :
کد:
<li id="calendar">
<?php get_calendar(); ?>
</li>
Footer
در انتهای sidebar یک div به نام footer ایجاد می کنیم و کد زیر را درون آن می نویسیم :
کد:
<div id="footer">
<p>
Copyright © 2008 <?php bloginfo('name'); ?>
</p>
</div>
نحوه جدا کردن فایل index.php
حال بعد از اینکه فایل ما آماده شد باید طبق شکل اول آنرا باید به قسمتهای مختلف تقسیم کنیم. از ابتدای فایل index.php تا پایان قسمت navigation div را درون یک فایل به نام header.php ذخیره می کنیم و دستور زیر را به جای آن درون index.php می نویسیم :
کد:
<?php get_header(); ?>
از ابتدای sidebar div تا انتهای آن را جدا کرده و در فایل sidebar.php ذخیره می کنیم و خط زیر را به جای آن در فایل index.php قرار می دهیم :
کد:
<?php get_sidebar(); ?>
برای footer هم همینکار را انجام می دهیم و در فایل footer.php ذخیره می کنیم و دستور زیر را به جای آن در فایل index.php قرار می دهیم :
کد:
<?php get_footer(); ?>
برای اینکه قسمت archive را از صفحه index جدا کنیم محتویات صفحه index.php را کپی می کنیم و به نام archive.php ذخیره می کنیم و سپس به جای دستور زیر
کد:
<?php the_content(); ?>
دستور زیر را می نویسیم :
کد:
<?php the_excerpt(); ?>
حال می توانید این صفحه را به دلخواه خود customize کنید. مطالب فوق کلیات ساخت قالب برای وردپرس بود، البته شما با مراجعه به سایت وردپرس (http://pnu-club.com/redirector.php?url=http%3A%2F%2Fcodex.wordpress.or g%2FMain_Page) و مطالعه کاملتر کد ها می تونید قالب خودتون رو customize کنید. موفق باشید…
ساختار قالب وردپرس
هر قالبی که برای وردپرس تهیه میشه حداقل باید 2 تا فایل داشته باشه : styles.css و index.php. به شکل زیر دقت کنید :
http://pei9vg.bay.livefilestore.com/y1ps3ua-QFIeUTtnuTYOdE17k0_AUHjDVEfskNYIPV7pqCzBKXiQpOP8N8 4hVYXnbmuNxMXfYgg6cg/wordpress_template.gif
همانطور که میبینید شکل بالا نشان دهنده یک قالب وردپرس در حالت کلی است، که می تواند اجزای کمتر و یا بیشتری داشته باشد اما حتما دو فایلی که گفتم رو به عنوان حداقل باید داشته باشد.
برای فایل styles.css از روش زیر استفاده کنید :
کد:
/*
Theme Name : Your template name
Theme URL : Your template url
Description : Descriptions
Author : Author name
Author URL : Author url
Version : Template version
*/
این خطوط را در ابتدای فایل CSS قرار دهید.
ساختار یک فایل index.php معمولا بدین صورت است :
کد:
<Your Doctype Goes Here...>
<html>
<head>
<title>Here Goes Your Title...</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<div id="header">Your Header Information Goes Here...</div>
<div id="navigation">Your Navigation Links Goes Here...</div>
<div id="content">Your Content Goes Here...</div>
<div id="sidebar">Your Sidebar Goes Here...</div>
<div id="footer">Your Footer Goes Here...</div>
</div>
</body>
</html>
برای لینک کردن فایل CSS از کد زیر استفاده می کنیم :
کد:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
برای شروع کار باید یک فولدر که معمولا نام قالبمان است در آدرس
wordpress/wp-content/themes بسازیم. سپس دو فایل index.php و styles.css را در آن ایجاد میکنیم. حال برای شکل دادن به فایل index.php از دستورات زیر استفاده میکنیم :
مشخصات بلاگ
توسط این دستور نام blog ما نمایش داده می شود :
کد:
<?php bloginfo('name'); ?> اگر بخواهیم نام بلاگمان را به لینک تبدیل کنیم از این روش استفاده میکنیم :
<a href="#"><?php bloginfo('name'); ?></a> و اگر بخواهیم این لینک را به frontpage منتقل کنیم :
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> توضیحات blog :
<?php bloginfo('description'); ?>
حلقه
کد:
<?php if(have_posts()): ?><?php while(have_posts()):the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
خط اول چک میکند که آیا پستی وجود دارد یا نه و اگر وجود داشته باشد آنرا نمایش می دهد و این حلقه را تا زمانی که پستی وجود داشته باشد ادامه میدهد.
عناوین پست ها
کد:
<?php the_title(); ?>
توسط این دستور میتوان پستها را نمایش دادو باید بین دستورات the_post و endwhile قرار گیرد. برای اینکه هر title به پست خودش لینک شود از دستور زیر استفاده میکنیم :
کد:
<?php the_permalink(); ?>
توسط دستور زیر هم محتوای هر پست نمایش داده می شود :
کد:
<?php the_content; ?>
مشخصات پست
توسط دستورات زیر می توان اطلاعات جانبی مربوط به پستها را نمایش داد، اطلاعات بین تگ زیر قرار می گیرند :
کد:
<p class="postmetadata">......</p>
برای نمایش عبارت Filled Under از دستور زیر استفاده می کنیم :
کد:
<?php _e('Filled Under#58;'); ?>
برای مشخص کردن اینکه این پست مربوط به کدام دسته بندی است از دستور زیر استفاده می کنیم :
کد:
<?php the_category(','); ?>
برای نمایش عبارت By :
کد:
<?php _e('By'); ?>
و نمایش نام نویسنده :
کد:
<?php the_author(); ?>
برای نمایش تعداد comment ها :
کد:
<?php comments_popup_link('No Comments »','1 Comment»','% Comments»'); ?>
برای ویراش پست در صورتی که به صورت admin وارد سایت شده باشید از دستور زیر استفاده می شود :
کد:
<?php edit_post_link('Edit','|',"); ?>
در صورتیکه پستی وجود نداشته باشد و بخواهیم عبارتی را نشان دهیم دستور زیر را پایین endwhile قرار می دهیم :
کد:
<?php else: ?>
<div class="posts">
<h2><?php _e('Not Found'); ?></h2>
</div>
اگر بخواهیم برای هر پست یک ID قرار دهیم که بتوانیم به آن یک Style خاصی بدهیم از دستور زیر استفاده می کنیم :
کد:
<div class="posts" id="post-<?php the_ID(); ?>">
برای ایجاد صفحه بندی از دستورات زیر می توان استفاده کرد :
کد:
<div class="navigation">
<?php posts_nav_link(); ?>
</div>
این دستور را باید بین endwhile و else قرار داد. دستور فوق را می توان بدین صورت customize کرد :
کد:
<div class="navigation">
<?php posts_nav_link('in between','before','after'); ?>
</div>
هرچه به جای in between نوشته شود بین next و previous می آید و هرچه به جای before نوشته شود قبل آن و هرچه به جای after نوشته شود بعد آن می آید.
ساید بار
برای نمایش Category دستورهای زیر را قبل از پایان body tag قرار می دهیم :
کد:
<div class="sidebar">
<h2><?php _e('Categories'); ?></h2>
</div>
حال برای نمایش لسیت Category ها بدین روش عمل می کنیم :
کد:
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchial=0'); ?>
</ul>
از option های زیر هم می توان استفاده کرد :
کد:
sort-column=name
این عبارت Category ها بر اساس الفبا تنظیم می کند.
کد:
optioncount=1
تعداد پست های هر کدام را نشان می دهد.
کد:
hierarchial=0
sub-cat ها را درون لسیت نمی برد. بین هر attribute باید از & استفاده کرد.
برای نشان دادن Archives از دستور زیر استفاده می کنیم :
کد:
<h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
برای قرار دادن blogroll بدین روش عمل می کنیم :
کد:
<?php get_links_list(); ?>
فرم جستجو
ابتدا یک فایل به نام searchform.php ایجاد می کنیم و کدهای زیر را درون آن قرار می دهیم:
کد:
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div>
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" size="15" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
حال در فایل index.php کد زیر را بالای همه listing ها درون Sidebar می نویسیم :
کد:
<li id="search">
<?php include(TEMPLATEPATH.'/searchform.php'); ?>
</li>
تقویم
برای ایجاد تقویم از کد زیر استفاده می کنیم :
کد:
<li id="calendar">
<?php get_calendar(); ?>
</li>
Footer
در انتهای sidebar یک div به نام footer ایجاد می کنیم و کد زیر را درون آن می نویسیم :
کد:
<div id="footer">
<p>
Copyright © 2008 <?php bloginfo('name'); ?>
</p>
</div>
نحوه جدا کردن فایل index.php
حال بعد از اینکه فایل ما آماده شد باید طبق شکل اول آنرا باید به قسمتهای مختلف تقسیم کنیم. از ابتدای فایل index.php تا پایان قسمت navigation div را درون یک فایل به نام header.php ذخیره می کنیم و دستور زیر را به جای آن درون index.php می نویسیم :
کد:
<?php get_header(); ?>
از ابتدای sidebar div تا انتهای آن را جدا کرده و در فایل sidebar.php ذخیره می کنیم و خط زیر را به جای آن در فایل index.php قرار می دهیم :
کد:
<?php get_sidebar(); ?>
برای footer هم همینکار را انجام می دهیم و در فایل footer.php ذخیره می کنیم و دستور زیر را به جای آن در فایل index.php قرار می دهیم :
کد:
<?php get_footer(); ?>
برای اینکه قسمت archive را از صفحه index جدا کنیم محتویات صفحه index.php را کپی می کنیم و به نام archive.php ذخیره می کنیم و سپس به جای دستور زیر
کد:
<?php the_content(); ?>
دستور زیر را می نویسیم :
کد:
<?php the_excerpt(); ?>
حال می توانید این صفحه را به دلخواه خود customize کنید. مطالب فوق کلیات ساخت قالب برای وردپرس بود، البته شما با مراجعه به سایت وردپرس (http://pnu-club.com/redirector.php?url=http%3A%2F%2Fcodex.wordpress.or g%2FMain_Page) و مطالعه کاملتر کد ها می تونید قالب خودتون رو customize کنید. موفق باشید…