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

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

 

دوره آموزشی کوتاه “آموزش طراحی قالب وردپرس” مناسب افرادی است كه آشنایی خوبی با مباحث طراحی وب داشته و قصد دارند وارد دنیای طراحی پوسته برای سیستم مدیریت محتوای محبوب وردپرس شوند.

 

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

 

بعد از مطالعه این مقاله شما قادر خواهید بود پوسته ای با امكانات بسازید زیر :

 

• رعایت تمامی مواردی كه برای بهبود كار پوسته در موتورهای جستجو نیاز است
•  افزودن میكرو فرمت هایی كه توسط گوگل پشتیبانی می شود .
•  رعایت اصول طراحی و كدنویسی وب برای تولید خروجی استاندارد
•  پوسته ی پیشرفته مبتنی بر CSS
• كلاس های قوی برای مطالب نوشته ها و كامنت ها
• ابزارك های هوشمند و قوی
• و تمامی امكانات فوق العاده ای كه پوسته های مدرن و پیشرفته وردپرس دارا هستند

 

 

قبل از شروع كار باید ابزار مورد نیاز كار را تهیه نمایم. در این فصل از كتاب به توضیح و معرفی ابزار های كارآمد برای ادامه كار می پردازم. قبل از شروع هر كاری این فصل را به دقت مطالعه نمایید.

 

سرور محلی – XAMPP یا MAMP

بهترین كار برای توسعه پوسته های وردپرس انجام دادن این كار روی رایانه شخصی و بدون نیاز به سرور واقعی است! سرعت بالای سرورهای محلی و راحتی دسترسی به شما كمك می كند تغییرات را راحت تر اعمال نمایید. همان طور كه اكثرا می دانید برای نصب وردپرس نیاز به وب سرورآپاچی، بانك اطلاعاتی مای اس كیو ال و مفسر زبان پی اچ پی داریم كه همه ی این ها در بسته های نرم افزاری ارایه شده وجود دارند و قابل نصب می باشند.

 

اگر كاربر ویندوز است می توانید از برنامه XAMPP استفاده كنید كه تنها كافی است آنرا در گوگل جستجو نمایید و به صورت رایگان نصب كنید.

 

كاربران مك نیز فراموش نشده اند و برای شما دوستان نیز برنامه MAMP توصیه می شود كه در آدرس www.mamp.info قابل دسترس است.

وردپرس

واضح است كه برای توسعه وردپرس باید نسخه ای از این برنامه را دانلود كنیم. برای دانلود بسته وردپرس به سایت wordpress.org مراجعه نمایید و آخرین نسخه ی آنرا دانلود و روی سرور محلی خود نصب نمایید.

 

روش نصب این موارد را در این مقاله مطالعه کنید.

• نصب وردپرس روی لوکال هاست

 

محتوای الكی !

از آنجا كه نسخه ی وردپرسی كه نصب می كنیم خالی از محتوا است می توان آنرا به راحتی پر نموده و برای اینكار نیازی نیست وقت زیادی مصرف نمایید. ما تنها یك سری محتوای فرضی را دانلود می كنیم و وارد سیستم وردپرس می كنیم. برای این كار مراحل زیر را طی نمایید :

 

از مرور گر خود وارد با وارد كردن آدرس localhost/wp-admin وارد بخش مدیریت ورپرس شوید، سپس وارد منو Tools > Import (ابزارها < درون ریزی) شوید و در لیست مربوط روی وردپرس كلیك نمایید. اكنون تنها به اطلاعات و محتوای الكی برای وارد سازی در سیستم نیاز داریم كه می توانید برای دریافت این محتوا از لینك زیر استفاده نمایید :

 

https://codex.wordpress.org/Theme_Unit_Test

بعد از دانلود و درون ریزی كردن سایت شما از محتواهای الكی و بسیار مفید پر می شود !

فایرفاكس

شما می توانید آزادانه هر مرورگری را كه دوست دارید مورد استفاده قرار دهید ولی چیزی كه من توصیه می كنم فایرفاكس است.

 

همچنین دو افزونه خیلی ضروری نیز نیاز داریم كه روی فایرفاكس نصب نماییم. نام افزونه ها به شرح زیر است :

 

Web Developer Add-on for Firefox

Firebug Add-on for Firefox

 

افرونه های فوق از آدرس زیر قابل دسترسی و نصب هستند:

https://addons.mozilla.org/en-US/firefox/

Html و CSS

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

 

• توصیه می شود : دوره رایگان آموزش زبان html5

 

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

 

PHP

آیا دانستن پی اچ پی نیز ضروری است؟ دانستن پی اچ پی مزیت بزرگی در این مرحله خواهد بود ولی ندانستن آن مشكلی ندارد ! در طول آموزش مواردی كه نیاز به استفاده از پی اچ پی داریم كامل توضیح داده خواهد شد و جایی برای نگرانی نیست.

ویرایشگر متن

یكی از مهمترین ابزار مورد نیاز ما یك ویرایشگر متنی خوب است. هر كسی به صورت سلیقه ای برنامه ای برای خود انتخاب می كند . برای كاربران ویندوز برنامه ++Notepad را توصیه می كنم و دوستانی كه از مك استفاده می كنند می توانند از TextWrangler استفاده نمایند.

 

ویرایشگر شما حتما نباید خیلی پیشرفته و با امكانات خیلی خاص باشد ، یك ویرایشگر ساده ی متنی نیز كار را راه خواهد انداخت.

 

در حال حاضر ویرایشگر متنی را نصب كرده ایم. سرور محلی نیز نصب و وردپرس روی آن نصب شده است و همه چیز برای شروع كار آماده است! امیدوارم فایرفاكس و افزونه هایی كه نام بردم را فراموش نكرده باشید. به عنوان یك توسعه دهنده ی وب امیدوارم مشكلی در جستجو ، یافتن و نصب برنامه ها نداشته باشید.

 

تازه كار اصلی ما از این بخش آغاز می شود. باید كدهای HTML مربوط به پوسته را بنویسیم. برای كد نویسی همیشه باید دو نكته ی خیلی مهم را در نظر داشته باشید. نكته اول مختصر نویسی و تمیزی كد است و نكته ی دوم این است كه كد شما باید معنا دار و خوانا باشد. از همین رو هنگام كد نویسی سعی می كنیم كدهایی قوی و مختصر با كمك تگ های HTML بنویسیم و از نام های استاندارد برای خوانا بودن كدمان استفاده نماییم.

 

ساختار كد HTML ما به صورت زیر است :

 

<html>
<head>
</head>
<body>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding">
</div><!-- #branding -->
<div id="access">
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
<div id="container">
<div id="content">
</div><!-- #content -->
</div><!-- #container -->
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
<div id="secondary" class="widget-area">
</div><!-- #secondary -->
</div><!-- #main -->
<div id="footer">
<div id="colophon">
<div id="site-info">
</div><!-- #site-info -->
</div><!-- #colophon -->
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>

 

كد فوق را در ویرایشگر متنی خود كپی نمایید و در جایی ذخیره نمایید چون از این ساختار كد بسیار استفاده خواهیم كرد. قبل از ادامه ی آموزش یك سری نكات مهم را باید یادآور شد.

 

متوجه شده اید كه در بخش اصلی HTML، ۲ بخش برای ابزارك ها در نظر گرفته شده است كه بعد از بخشی كه مربوط به مطالب سایت است كدنویسی شده اند. همین چند خط ساده به مرور و در فصل های بعدی و پس از اتمام دوره تبدیل به یك پوسته حرفه ای وردپرس خواهد شد.

 

ساده ترین پوسته ها در وردپرس ممكن است تنها شامل یك فایلindex.php و style.css باشد ولی پوسته هایی كه ما خواهیم كار كرد كمی پیشرفته تر هستند و برای كارهای مختلف و گسترده در نظر گرفته شده اند.

 

پوسته ای كه در این كتاب خواهیم ساخت شامل ۶ فایل است. به پوشه وردپرس در مسیر زیر بروید :

 

و پوشه ای برای پوسته جدید خود ایجاد نمایید. در این كتاب من از اسم your-theme استفاده می كنم ولی این اسم هر چیزی می تواند باشد و به انتخاب شما خواهد بود. پس از ایجاد پوشه، فایل های زیر را در پوشه ایجاد شده بسازید. ( این فایل ها خالی خواهند بود)

• index.php
• header.php
• sidebar.php
• footer.php
• functions.php
• style.css

 

اكنون آخرین فایلی را كه ساختیم در ویرایشگر متن خود باز می كنیم. بله منظور من فایل style.css است. در اول این فایل باید كدهایی را به صورت كامنت یا توضیح درج كنیم كه در پنل مدیریت وردپرس هم ظاهر شود و اطلاعات كلی در مورد پوسته به سیستم وردپرس اعلام نماید.

 

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

 

/*
Theme Name: Your Theme
Theme URI: http://eXAMPPle.com/eXAMPPle/
Description: A search engine optimized website framework for WordPress.
Author: You
Author URI: http://eXAMPPle.com/
Version: 1.0
Tags: Comma-separated tags that describe your theme Your theme can be your copyrighted work.
Like WordPress, this work is released under GNU General Public License, version 2 (GPL).
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/

 

ساخت فایل های header.php و footer.php

فایل HTML ای كه در فصل قبل نوشتیم را باز كرده و همه ی كدهای بخش بالای كار را تا كد موجود در خط <”div id=”main> درفایلی به نام header.php ذخیره می كنیم. این فایل را قبلا ساخته ایم و محتوای آن خالی بوده است ولی اكنون محتوای این فایل به صورت زیر است :

 

<html>
<head>
</head>
<body>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding"> </div><!-- #branding -->
<div id="access">
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">

 

در مرحله ی بعد فایل footer.php را كه شامل كدهای زیر می شود می سازیم.

 

</div><!-- #main -->
<div id="footer">
<div id="colophon">
<div id="site-info">
</div><!-- #site-info -->
</div><!-- #colophon -->
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>

 

در حال حاضر فایل های فوتر و هدر ما كامل شده و فعلا آنها را ذخیره می كنیم و سراغ فایل index.php می رویم و كد های مابین و باقی مانده را در این فایل كپی و ذخیره می نماییم.

 

<div id="container">
<div id="content">
</div><!-- #content -->
</div><!-- #container -->
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
<div id="secondary" class="widget-area">
</div><!-- #secondary -->

 

در قدم بعدی در بالای فایل index.php و در خط اول ،كد زیر را اضافه می كنیم :

 

<?php get_header(); ?>

 

قطعه كد بالا باعث می شود فایل هدر را فراخوانی نماییم. نام تابع فوق get_header است. همین كار را برای فوتر انجام می دهیم و كد زیر را در پایین ترین جای index.php قرار می دهیم.

 

<?php get_footer(); ?>

 

اكنون اگر وارد بخش مدیریت وردپرس شوید و پوسته را فعال نمایید و صفحه را بارگذاری مجدد نمایید و سورس صفحه را مشاهده نمایید، دقیقا كد اصلی html ما در آن موجود است. امیدوارم تا اینجای كار بدون مشكل به پیش آمده باشید. اگر همه چیز خوب پیش رفته است پس پیش به سوی فصل بعد .

 

در این فصل در بخش هدر متمركز خواهیم بود و با كدهای php زیادی سر و كار خواهیم داشت. البته كارهایی نیز برای سازگاری بهتر پوسته با موتورهای جستجو خواهیم كرد. در كل فصل مهم و مفیدی را در پیش رو خواهیم داشت.

 

در حال حاضر پوسته ما معتبر نیست و این موضوع به دلیل نداشتن ویژگیDoctype در كد HTML است. doctype باعث می شود كه به مرورگر اعلام شود چگونه صفحه باز شده تفسیر شود. برای افزودن این امكان به پوسته خود، فایل header.php را باز نمایید و كد زیر را در اول پوسته و قبل از هر كد دیگری قرار دهید.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

هنوز كار ما در بالای كدها تمام نشده است. نوبت به افزودن چند صفت به تگ اولیه HTML است. كد زیر را جایگزین تگ html نمایید:

 

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

 

اكنون وارد بخش <head> می شویم. در بخش head معمولا اطلاعاتی در مورد صفحه قرار می گیرد كه شامل عنوان صفحه كه در بالای مرورگر نمایش داده می شود ، فیدهای RSS و همین طور وصل نمودن فایل CSS به صفحه است.

 

تا یادمان نرفته باید گفت كه لازم است كمی تغییرات در فایل functions.php ایجاد كنیم. فایل خالی functions.php را در ویرایشگر متنی خود باز كرده و بعد از تایپ كردن عبارت <?php كد زیر را به آن منتقل نمایید :

 

// Make theme available for translation
// Translations can be filed in the /languages/ directory load_theme_textdomain( 'your-theme', TEMPLATEPATH . '/languages' );
$locale = get_locale();
$locale_file = TEMPLATEPATH . "/languages/$locale.php";
if ( is_readable($locale_file) ) require_once($locale_file);

// Get the page number function get_page_number() { if ( get_query_var('paged') ) { print ' | ' . __( 'Page ' , 'your-theme') . get_query_var('paged');
}
} // end get_page_number

 

تابع load_theme_textdomain به وردپرس می گوید ما می خواهیم پوسته مان برای ترجمه به زبان های مختلف در دسترس قرار بگیرد. همین طور این تابع اعلام می كند فایل های مربوط به ترجمه در پوشه ای به نام languages قرار خواهند گرفت. در نظر داشته باشید كه یك توسعه دهنده ی چیره دست باید به فكر تمامی زبان ها باشد و تا جایی كه ممكن است تمامی بخش های كار را اعم از پوسته و افزونه های مختلف در زبان های مختلف و قابل توسعه منتشر نماید. این كار باعث می شود توسعه دهنده های مختلف از سراسر جهان و با زبان های مختلف، پوسته و افزونه های شما را ترجمه كنند و كار شما ابعاد جهانی پیدا كند .

 

در تابع بعدی ()get_page_number شما متن های قابل ترجمه ای همانند زیر خواهید دید :

 

__( 'Page ' , 'your-theme')

 

متن قابل ترجمه ما در اینجا Page میباشد كه همراه با آدرس دایركتوری پوسته ما همراه شده است. توجه داشته باشید نباید نام پوسته را از your-theme به چیز دیگری تغییر دهید.

 

آیا می توانید حدس بزنید كه این تابع چكار می كند؟ اگر نگاهی به داخل تابع كنید خواهید فهمید كه با كمك یك دستور شرطی If این تابع شماره صفحه ای كه در آن قرار دارید را چاپ خواهد كرد.

 

در مرحله بعدی كد <head></head> را پیدا نمایید و با كد زیر جایگزین نمایید:

 

<head profile="http://gmpg.org/xfn/11">
<title><?php if ( is_single() ) { single_post_title(); } elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' |
'; bloginfo('description'); get_page_number(); } elseif ( is_page() ) { single_post_title(''); } elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); } elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; } else { bloginfo('name'); wp_title('|'); get_page_number(); }
?></title>>

<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>;
charset=<?php bloginfo('charset'); ?>" />

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

<?php wp_head(); ?>

<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'yourtheme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" /> <link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> </head>

 

اگر این كدها برایتان آشنا نیست نگران نباشید به بررسی تمامی بخش های كد خواهیم پرداخت جای هیچ نگرانی نیست.

 

در بخش اول كه كدهای آنرا به صورت جدا در زیر می بینید عنوان صفحه را مناسب برای موتورهای جستجوگر استخراج می كنیم. با توجه به قرار گیری كاربر در بخش های مختلف سایت عنوان مناسب را به خروجی می فرستیم.

 

<title><?php
if ( is_single() ) { single_post_title(); }
elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); } elseif ( is_page() ) { single_post_title(''); }
elseif ( is_search() ) { bloginfo('name'); print ' | Search results for '
. wp_specialchars($s); get_page_number(); }
elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; } else { bloginfo('name'); wp_title('|'); get_page_number(); }
?></title>

 

 

در بخشی دیگر اطلاعاتی از محتوای صفحه خود با كمك متا تگ ها به مرورگر می دهیم.

 

<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

 

در خط بعدی صفحه خود را به فایل style.css متصل می كنیم.

 

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

 

در بخشی دیگر از كد، ویژگی نظردهی توسط كاربران سایت را فعال نموده و همچنین RSS ها را با كمك كدهای زیر تعریف نموده ایم:

 

<link rel="alternate" type="application/rss+xml" href="<?php
bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'yourtheme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" /> <link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>"
/>
(<link rel="pingback" href="<?php bloginfo('pingback_url'?>" />

 

در این مرحله می خواهیم به بخش بالایی سایتمان عنوان سایت (لینك به خانه)، توضیحات وبلاگ و سایت و منو ها را قرار دهیم. فایلheader.php را باز نمایید و #branding را در كد پیدا نمایید. در اینجا ما عنوان و توضیحات مربوط به سایت و وبلاگ را اضافه خواهیم كرد. در اكثر پوسته های وردپرس به موتوهای جستجو اعلام می شود كه عنوان صفحه مهمترین عنصر موجود در صفحه است. توسعه دهنده ها این كار را با كمك قرار دادن عنوان صفحه در تگ h1 انجام می دهند. به هر حال برای اجرای این بخش تنها از تگ های وردپرس و HTML استفاده می كنیم. كدهای این بخش را در زیر مشاهده می كنید.

 

<div id="branding">
<div id="blog-title"><span><a href="<?php bloginfo( 'url' )
?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' )
?></a></span></div>
<?php if ( is_home() || is_front_page() ) { ?>
<h1 id="blog-description"><?php bloginfo( 'description' )
?></h1>
<?php } else { ?>
<div id="blog-description"><?php bloginfo( 'description'
) ?></div>
<?php } ?>
</div><!-- #branding-->

 

اگر جزو توسعه دهندگان مبتدی هستید، توصیه می كنم سعی كند كد بالا را به دقت مطالعه و درك نمایید. من در این كد از تابعی به نام ()bloginfo استفاده كرده ام. از این تابع برای برای گرفتن URL بلاگ، تیتر و توضیحات بلاگ استفاده كرده ام.

 

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

 

تاكنون با پوسته ساده ی HTML ای كه نوشتیم و افزودن تگ های PHP و وردپرس پیش رفتیم و قدم به قدم در حال توسعه ی پوسته استاندارد و كاربردی خود هستیم. كمی به پایین تر می رویم و #access را پیدا می كنیم و كد زیر را اضافه می كنیم. این كد باعث می شود افرادی كه از screen reader (همچون تبلت ها) ها استفاده می كنند منو ها را مشاهده نكنند و مستقیم مطالب را مشاهده كنند.

 

<div class="skip-link">
<a href="#content" title="<?php _e( 'Skip to content', 'your-theme' )
?>"><?php _e( 'Skip to content', 'your-theme' ) ?></a> </div>

 

در مرحله بعدی سراغ افزودن منو ها می رویم. كد زیر ساده ترین كد ممكن برای افزودن منو ها است كه تنها از یك آرگومان در آن استفاده شده است.

 

<?php wp_page_menu( 'sort_column=menu_order' ); ?>

 

اگر بخواهیم یك جمع بندی كنیم باید گفت كه در حال حاضر بخش access# باید به صورت زیر شده باشد :

 

<div id="access">
<div class="skip-link"><a href="#content" title="<?php _e( 'Skip to content', 'your-theme' ) ?>"><?php _e( 'Skip to content', 'your-theme' ) ?></a></div>
<?php wp_page_menu( 'sort_column=menu_order' ); ?> </div><!-- #access -->

 

بخش header پوسته ما به اتمام رسید و اكنون آماده ی استفاده است. كد ها طوری نوشته شده اند كه مورد پسند موتورهای جستجو نیز باشند. اگر خسته شده اید یك استراحت كوچك كرده و برگردید و اگر مثل من وقتی پای كاری می نشینید نمی توانید از آن دل بكنید پس بشینید تا با هم به فصل بعد برویم.

 

بدون شك فایل index.php مهمترین فایل كاری است. اگر این فایل به دقت طراحی و كد شود تاثیر بی نظیری در كاركرد سایر بخش های پوسته خواهد داشت. هرگز از هیچ تلاشی برای بدون ایراد كردن فایل index دریغ نكنید.

حلقه یا همان Loop معروف

در مورد حلقه شاید خیلی شنیده باشید. فایل مهم index.php با حلقه شروع و به اتمام می رسد. بدون حلقه شما در اصل هیچ چیز نخواهید داشت و تمام زحمات شما بدون نتیجه خواهد بود. حالا این كد حلقه كه اینقدر مهم است چه شكلی است؟

 

<?php while ( have_posts() ) : the_post() ?>
<?php endwhile; ?>

 

شاید تعجب كرده باشید كه چگونه كد به این سادگی نقش به این مهمی ایفا می كند ؟ تا هنگامی كه در بانك اطلاعاتی خود نوشته و اطلاعاتی دارید این حلقه فعالیت می كند تا تمامی محتوای بانك اطلاعاتی را استخراج و به میل و سلیقه ما نمایش دهد.

 

حالا وارد بخش عملی كار شویم. كد زیر مربوط به حلقه است.آنرا در پوسته خود و در div به نام content# قرار می دهیم. این div همان طور كه در جریان هستید در فایل index.php قرار دارد.

 

<ul>
<?php while ( have_posts() ) : the_post() ?>
<li>
<?php the_excerpt(); ?>
</li>
<?php endwhile; ?>
</ul>

 

در این كد با كمك یك حلقه مطالب موجود در بانك اطلاعاتی را استخراج می كنیم و به صورت یك لیست آنها را نمایش می دهیم. برای این كار از تگ های خود وردپرس مانند ()the_excerpt استفاده شده است. در واقع این حلقه آنقدر ادامه پیدا می كند تا مطالب مورد نظر ما به صورت كامل نمایش داده شود.

 

اكنون با كد ساده ی حلقه آشنا شدید. ولی این كافی نیست و باید حلقه ای قوی تر و كامل تر تهیه كنیم. در حلقه جدید كدهایی مربوط به تگهای بیشتر و تگ صفحه بعد را می خواهیم اضافه نماییم.

 

<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="metanav">&raquo;</span>', 'your-theme' ) ); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'yourtheme' ) . '&after=</div>') ?> </div><!-- .entry-content -->

 

حال نوبت نمایش عنوان پست ها شده است ولی چگونه؟ جواب سوال خیلی ساده است. برای اینكار از تگ ()the_title استفاده می كنیم تا عنوان هر پست را از بانك اطلاعاتی دریافت نماییم. عنوان گرفته شده را با كمك تگ <a> به تگ ()the_permalink لینك خواهیم كرد و به همین راحتی كاربر با كلیك روی عنوان پست به لینك مربوط به آن خواهد رفت.

 

<h2 class="entry-title">
<a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a> </h2>

 

شاید شما هم مثل من بخواهید اطلاعات بیشتری از بانك اطلاعاتی استخراج كنید. اطلاعاتی مانند زمان منتشر شدن پست ، فردی كه آنرا پست كرده است ، دسته بندی مطلب ، تگ ها و كامنت های مربوط به آن.

 

در ادامه برای تكمیل این بخش من نام نویسنده ی مطلب و تاریخ انتشار را قبل از مطلب اصلی و اطلاعاتی مانند دسته بندی ، تگ ها و كامنت ها را بعد از متن نوشته قرار می دهم. اگر بخواهیم تمامی نكاتی را كه گفتم به صورت كد تبدیل كنیم كدمان به صورت زیر خواهد شد:

 

<?php /* The Loop — with comments! */ ?>
<?php while ( have_posts() ) : the_post() ?>
<?php /* Create a div with a unique ID thanks to the_ID() and semantic classes with post_class() */ ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php /* an h2 title */ ?>
<h2 class="entry-title"><a href="<?php the_permalink();
?>" title="<?php printf( __('Permalink to %s', 'your-theme'),
the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title();
?></a></h2>

<?php /* Microformatted, translatable post meta */ ?> <div class="entry-meta">
<span class="meta-prep meta-prep-author"><?php _e('By
', 'your-theme'); ?></span>
<span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata>user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'yourtheme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
<span class="meta-sep"> | </span>
<span class="meta-prep meta-prep-entry-date"><?php
_e('Published ', 'your-theme'); ?></span>
<span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option(
'date_format' ) ); ?></abbr></span>
<?php edit_post_link( __( 'Edit', 'your-theme' ),
"<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">",
"</span>\n\t\t\t\t\t" ) ?>
</div><!-- .entry-meta -->
<?php /* The entry content */ ?> <div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-
nav">&raquo;</span>', 'your-theme' ) ); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'yourtheme' ) . '&after=</div>') ?>
</div><!-- .entry-content -->
<?php /* Microformatted category and tag links along with a comments link */ ?>
<div class="entry-utility">
<span class="cat-links"><span class="entry-utilityprep entry-utility-prep-cat-links"><?php _e( 'Posted in ', 'your-theme' );
?></span><?php echo get_the_category_list(', '); ?></span> <span class="meta-sep"> | </span>
<?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"metasep\">|</span>\n" ) ?>
<span class="comments-link"><?php
comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment',
'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>
<?php edit_post_link( __( 'Edit', 'your-theme' ),
"<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">",
"</span>\n\t\t\t\t\t\n" ) ?>
</div><!-- #entry-utility -->
</div><!-- #post-<?php the_ID(); ?> -->
<?php /* Close up the post div and then end the loop with endwhile */ ?>
<?php endwhile; ?>

 

برای پیمایش بین پست های مختلف بدون شك باید راهی در نظر بگیریم. برای انجام این كار از دو تگ وردپرس به نام های ()next_posts_link و ()previous_posts_link استفاده خواهیم كرد. درك این بخش كمی منطقی نیست. تابع اول كارش این است كه وقتی كاربر روی آن كلیك می كند به مطلب قبلی می رود و اگر روی لینكی كه تابع دوم یعنی ()previous_posts_link ایجاد می كند كلیك كنید پست بعدی نمایش داده می شود. از نظر ترجمه زبانی و واقعیتی كه این تابع ها چه كار می كنند كمی گیج كننده است. این نكته را حتما در نظر داشته باشید.

 

همانند تمامی اجزای صفحه index.php باید دقت خوبی در استفاده از این كد ها داشته باشید تا به بهترین نحو ممكن كار كنند. من دوست دارم پیمایشگر وبلاگم در بالا و پایین مطلب اصلی نمایش داده شود. البته در صورتی كه خواستید می توانید پیمایشگر ها را در شرایطی خاص مخفی نمایید. برای مثال در برگه ها جستجو و یا برگه های كه دیگر پست های قدیمی تر وجود ندارد نیازی به نمایش خروجی این توابع نداریم پس بهتر است كدی بنویسیم تا چیزهای غیر ضروری را مخفی نماید و باعث شلوغی بیهوده صفحه نشود.

 

<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if (
$total_pages > 1 ) { ?> <?php } ?>

 

كاری كه در كد بالا انجام داده ایم چیست؟ در اصل ما كنترل می كنیم تا بفهمیم حداكثر تعداد برگه های كه در حلقه باید اجرا شود چقدر است و اگر تعداد برگه ها بیشتر از ۱ باشد ما پیمایشگر را به خروجی می فرستیم. كدی كه برای نمایش در قبل و بعد از حلقه اصلی نیاز داریم به صورت زیر خواهد بود.

 

قبل از حلقه

 

<?php /* Top post navigation */ ?>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if (
$total_pages > 1 ) { ?>
<div id="nav-above" class="navigation">
<div class="nav-previous"><?php next_posts_link(__(
'<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div> <div class="nav-next"><?php previous_posts_link(__(
'Newer posts <span class="meta-nav">&raquo;</span>', 'your-theme' )) ?></div>
</div><!-- #nav-above --> <?php } ?>

 

بعد از حلقه

 

<?php /* Bottom post navigation */ ?>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if (
$total_pages > 1 ) { ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link(__(
'<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div> <div class="nav-next"><?php previous_posts_link(__(
'Newer posts <span class="meta-nav">&raquo;</span>', 'your-theme' )) ?></div>
</div><!-- #nav-below --> <?php } ?>

 

باید خدمت شما عرض كنم كه كار ما با فایل index.php به اتمام رسیده است. فقط در آخر این فایل خط زیر را قبل از تگ ()get_footer قرار دهید تا ستون كناری هم به پوسته اضافه شود.

<?php get_sidebar(); ?>

 

در این فصل به سه بخش مختلف و مهم پوسته های وردپرس خواهیم پرداخت. نوشته هایی كه معمولا در وبلاگ ها و به تعداد زیاد و روزانه آپدیت می شوند. ضمیمه های برگه ها و نوشته ها و در آخر خطای ۴۰۴ كه باید پوسته ای برایش در نظر بگیریم تا كمك كنیم كاربر در مسیر صحیح قرار گیرد .

 

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

 

<?php get_header(); ?>

<div id="container">
<div id="content">

<div id="nav-above" class="navigation">
</div><!-- #nav-above -->

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
</div><!-- #post-<?php the_ID(); ?> -->

<div id="nav-below" class="navigation">
</div><!-- #nav-below -->

</div><!-- #content -->
</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

ولی تفاوت های قابل توجه و مهمی وجود دارد. در این كد ما تگ ()the_post را در نزدیكی بالای صفحه فراخوانی كرده ایم دقیقا قبل از پیمایشگر خود. در این صفحه ما نیازی به حلقه معروف وردپرس نخواهیم داشت. خوشبختانه با كمك تابع ()the_permalink و كمك وردپرس مشكل ما حل می شود و دیگر در این بخش حلقه را به كار نخواهیم گرفت.

 

<?php comments_template('', true); ?>

 

پیمایشگر مربوط به پست ها

برای خوانا بودن و منطقی بودن كدهایمان در این قسمت به جای استفاده از توابعی كه در اسم گذاری آنها منطقی وجود ندارد از توابع ()previous_post_link و ()next_post_link استفاده خواهیم نمود. این توابع دقیقا كاری را انجام می دهند كه شما انتظار خواهید داشت.

 

<div id="nav-above" class="navigation">
<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">&laquo;</span> %title' ) ?></div>
<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">&raquo;</span>' ) ?></div>
</div><!-- #nav-above -->

<div id="nav-below" class="navigation">
<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">&laquo;</span> %title' ) ?></div>
<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">&raquo;</span>' ) ?></div> </div><!-- #nav-below -->

 

عنوان پست ها

اگر یادتان باشد در فصلی كه فایل header.php را كامل كردیم از یك دستور شرطی If بهره بردیم تا كاربران معمولی را با آنهایی كه از سایر دستگاه ها استفاده می كنند جدا نماییم.

 

در ادامه عنوان و تیتر را در تگ h1 قرار می دهیم و كدی همانند زیر را می نویسیم .

 

<h1 class="entry-title"><?php the_title(); ?></h1>

 

سراغ تگی كه كلاس آن entry-utility است می رویم و كدی را كه در ادامه می بینید برای آن می نویسیم. این كد با كمك دستورات شرطی هوشمند شده و مطابق با عملكرد وردپرس تهیه شده است. به این معنی كه حالت های مختلفی مانند باز بودن نظردهی و بازخوردها در شرایط مختلف مورد مقایسه قرار می گیرد. برای اینكه هر مرحله را خوب درك كنید و كد خوانا تر باشد جلوی هر بخش در كد توضیحات لازم درج شده است.

 

<div class="entry-utility">
<?php printf( __( 'This entry was posted in %1$s%2$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>. Follow any comments here with the <a href="%5$s" title="Comments RSS to %4$s" rel="alternate"
type="application/rss+xml">RSS feed for this post</a>.', 'your-theme' ), get_the_category_list(', '),
get_the_tag_list( __( ' and tagged ', 'your-theme' ),
', ', '' ),
get_permalink(),
the_title_attribute('echo=0'), comments_rss() ) ?>
<?php if ( ('open' == $post->comment_status) && ('open' == $post-
>ping_status) ) : // Comments and trackbacks open ?>
<?php printf( __( '<a class="comment-link" href="#respond" title="Post a comment">Post a comment</a> or leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'your-theme' ), get_trackback_url() ) ?>
<?php elseif ( !('open' == $post->comment_status) && ('open' == $post-
>ping_status) ) : // Only trackbacks open ?>
<?php printf( __( 'Comments are closed, but you can leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'your-theme' ), get_trackback_url() ) ?>
<?php elseif ( ('open' == $post->comment_status) && !('open' == $post>ping_status) ) : // Only comments open ?>
<?php _e( 'Trackbacks are closed, but you can <a class="comment-link" href="#respond" title="Post a comment">post a comment</a>.', 'your-theme' ) ?>
<?php elseif ( !('open' == $post->comment_status) && !('open' == $post>ping_status) ) : // Comments and trackbacks closed ?>
<?php _e( 'Both comments and trackbacks are currently closed.', 'your-theme' ) ?>
<?php endif; ?>
<?php edit_post_link( __( 'Edit', 'your-theme' ), "\n\t\t\t\t\t<span class=\"edit-link\">", "</span>" ) ?>
</div><!-- .entry-utility -->

 

برخلاف فایل index.php در فایل single.php محتوا خیلی ساده است. فقط یك تابع را در آن فراخوانی می كنیم.

 

<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'yourtheme' ) . '&after=</div>') ?>

 

ضمیمه های نوشته ها

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

 

در این قدم شروع به ویرایش و ساخت فایل attachments.php می كنیم. ساده ترین كار این است كه تمام محتوای فایل single.php را به فایل attachment.php منتقل نماییم و تغییرات جزیی زیر را در آن اعمال كنیم. اول از همه بخش پیمایشگر بالایی را حذف كنید ما به این بخش نیاز نخواهیم داشت. جای آن كد زیر را كه مربوط به عنوان و لینك های بازگشت است را قرار دهید.

 

<h1 class="page-title"><a href="<?php echo get_permalink($post->post_parent) ?>" title="<?php printf( __( 'Return to %s', 'your-theme' ), wp_specialchars( get_the_title($post->post_parent), 1 ) ) ?>" rev="attachment"><span class="meta-nav">&laquo; </span><?php echo get_the_title($post->post_parent)?> </a></h1>

 

هنگامی كه عنوان صفحه در تگ h1 است باید تگ نوشته را در یك تگ h2 قرار دهیم.

 

<h2 class="entry-title"><?php the_title(); ?></h2>

 

در واقع باید این صفحه پیوست ها و ضمیمه های نوشته را نشان می دهد و از آنجایی كه اكثر پیوست ها تصویری می باشند ما باید با كمك دستور های شرطی If آنها را كنترل نماییم.

 

<div class="entry-content">
<div class="entry-attachment">
<?php if ( wp_attachment_is_image( $post->id ) ) : $att_image = wp_get_attachment_image_src( $post->id, "medium"); ?>
<p class="attachment"><a href="<?php echo wp_get_attachment_url($post->id); ?>" title="<?php the_title(); ?>" rel="attachment"><img src="<?php echo $att_image[0];?>" width="<?php echo $att_image[1];?>" height="<?php echo $att_image[2];?>" class="attachmentmedium" alt="<?php $post->post_excerpt; ?>" /></a>
</p> <?php else : ?>
<a href="<?php echo wp_get_attachment_url($post->ID) ?>" title="<?php echo wp_specialchars( get_the_title($post->ID), 1 ) ?>" rel="attachment"><?php echo basename($post->guid) ?></a> <?php endif; ?>
</div>
<div class="entry-caption"><?php if ( !empty($post-
>post_excerpt) ) the_excerpt() ?></div>

<?php the_content( __( 'Continue reading <span class="meta-
nav">&raquo;</span>', 'your-theme' ) ); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'yourtheme' ) . '&after=</div>') ?>

</div><!-- .entry-content -->

 

بخش پایینی پیمایشگر را كه از فایل single.php كپی كردیم حذف نمایید تا كار ما با فایل مربوط به پیوست ها خاتمه یابد.

پوسته مربوط به خطای ۴۰۴

وقتی كاربر صفحه ای را نمی تواند پیدا نماید باید به صفحه و پوسته مربوط به خطا منتقل شود تا با كمكی كه به او می شود دوباره به مسیر وبلاگ و سایت برگردد و راهنمایی لازم برای وی صورت بگیرد. داشتن چنین پوسته خطایی خیلی ضروری است و اكثر توسعه دهنده های حرفه ای این ویژگی را در پوسته های خود قرار می دهند.

 

همان كارها و مراحل قبلی را برای فایل ۴۰۴.php دوباره انجام می دهیم و تنها كد زیر را جایگزین می نماییم.

 

اما همانند قبل كد مربوط به پیمایشگرها را نیز حذف می كنیم.

 

<div id="post-0" class="post error404 not-found">
<h1 class="entry-title"><?php _e( 'Not Found', 'your-theme' ); ?></h1>
<div class="entry-content">
<p><?php _e( 'Apologies, but we were unable to find what you were looking for. Perhaps searching will help.', 'your-theme' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
</div><!-- #post-0 -->

 

روش های خلاقانه زیادی را می شود برای نمایش صفحه خطا به كاربر به كار برد ولی در این مثال من فقط از كاربر عذرخواهی می كنم و با قرار دادن امكان جستجو در صفحه به او كمك خواهم كرد مطلب مورد نظر خود را دوباره جستجو نماید.

 

تهیه این بخش برای من خیلی عذاب آور هست و هیچ وقت علاقه ای به تهیه پوسته برای بخش كامنت ها نداشته ام. ولی خب واقعا نمی شود از یكی از مهمترین بخش های كار چشم پوشی كرد. سیستم پیام ها و نظردهی جزو مهمترین بخش های وردپرس است. در این فصل برای راحتی كار شما و درك بهتر كارهایی صورت داده ام تكه كدی در اختیارتان قرار می دهم كه كافی است به فایل functions.php اضافه نمایید. كدهای آماده ای در اختیارتان می گذارم تا كمتر وارد این بخش شویم و تنها ساختار كلی و توسعه این پوسته را در اولویت قرار دهیم.

 

اما نگاهی كنیم به كارهایی كه قرار است در این پوسته صورت بگیرد:

 

• افزودن امكان پست هایی كه توسط پسورد رمزگذاری می شوند
• چك نمودن اینكه دیدگاهی وجود دارد یا خیر
• شمارش تعداد كامنت ها و بازخورد ها
• صفحه بندی كردن نظر ها در صورت زیاد بودن آنها
• اگر بازخورد وجود داشت آنها را نمایش دهیم
• نمایش سیستم نظرات ها و پاسخ گویی

 

تمامی مواردی كه ذكر شد در پوسته و كدی كه در ادامه به شما می دهم نوشته شده است. این ۲ تابع نوشته شده را در فایل functions.php اضافه نمایید.

 

تابع اول

 

// Custom callback to list comments in the your-theme style function custom_comments($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
$GLOBALS['comment_depth'] = $depth;
?>
<li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>>
<div class="comment-author vcard"><?php commenter_link() ?></div>
<div class="comment-meta"><?php printf(__('Posted %1$s at %2$s <span class="meta-sep">|</span> <a href="%3$s" title="Permalink to this
comment">Permalink</a>', 'your-theme'), get_comment_date(), get_comment_time(), '#comment-' . get_comment_ID() ); edit_comment_link(__('Edit', 'your-theme'), ' <span class="meta-sep">|</span> <span class="edit-link">', '</span>'); ?></div>
<?php if ($comment->comment_approved == '0') _e("\t\t\t\t\t<span class='unapproved'>Your comment is awaiting moderation.</span>\n", 'yourtheme') ?>
<div class="comment-content">
<?php comment_text() ?> </div>
<?php // echo the comment reply link if($args['type'] == 'all' || get_comment_type() == 'comment') : comment_reply_link(array_merge($args, array(
'reply_text' => __('Reply','your-theme'),
'login_text' => __('Log in to reply.','your-theme'),
'depth' => $depth,
'before' => '<div class="comment-reply-link">',
'after' => '</div>'
))); endif;
?>
<?php } // end custom_comments

 

تابع دوم

 

// Custom callback to list pings
function custom_pings($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>> <div class="comment-author"><?php printf(__('By %1$s on %2$s at %3$s', 'your-theme'),
get_comment_author_link(), get_comment_date(), get_comment_time() );
edit_comment_link(__('Edit', 'your-theme'), ' <span class="meta-sep">|</span> <span class="edit-link">', '</span>'); ?></div> <?php if ($comment->comment_approved == '0') _e('\t\t\t\t\t<span class="unapproved">Your trackback is awaiting moderation.</span>\n', 'yourtheme') ?>
<div class="comment-content">
<?php comment_text() ?>
</div>
<?php } // end custom_pings

 

ما نیاز به یك تابع دیگر نیز داریم ، نام این تابع را ()custome_comments می گذاریم. به كد مربوط نگاهی می اندازیم :

 

// Produces an avatar image with the hCard-compliant photo class function commenter_link() {
$commenter = get_comment_author_link(); if ( ereg( '<a[^>]* class=[^>]+>', $commenter ) ) {
$commenter = ereg_replace( '(<a[^>]* class=[\'"]?)', '\\1url ' , $commenter );
} else {
$commenter = ereg_replace( '(<a )/', '\\1class="url "' , $commenter
);
}
$avatar_email = get_comment_author_email();
$avatar = str_replace( "class='avatar", "class='photo avatar", get_avatar( $avatar_email, 80 ) );
echo $avatar . ' <span class="fn n">' . $commenter . '</span>'; } // end commenter_link

 

این كد تنظیمات مربوط به gravatar را دارا است كه البته می توانید سایز آنرا نیز تغییر دهید. سایز پیشفرض ۰۸ پیكسل است كه می توانید آنرا ویرایش نمایید.

پوسته مربوط به نظر ها

كد كامل بخش مربوط به پوسته نظر ها در زیر قابل دسترس است.

 

<?php /* The Comments Template — with, er, comments! */ ?> <div id="comments">
<?php /* Run some checks for bots and password protected posts */ ?> <?php
$req = get_option('require_name_email'); // Checks if fields are required.
if ( 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']) ) die ( 'Please do not load this page directly. Thanks!' ); if ( ! empty($post->post_password) ) :
if ( $_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password ) :
?>
<div class="nopassword"><?php _e('This post is password protected. Enter the password to view any comments.', 'your-theme') ?></div>
</div><!-- .comments -->
<?php return; endif; endif;
?>

<?php /* See IF there are comments and do the comments stuff! */ ?>
<?php if ( have_comments() ) : ?>

<?php /* Count the number of comments and trackbacks (or pings) */
$ping_count = $comment_count = 0; foreach ( $comments as $comment )
get_comment_type() == "comment" ? ++$comment_count : ++$ping_count; ?>
<?php /* IF there are comments, show the comments */ ?> <?php if ( ! empty($comments_by_type['comment']) ) : ?>
<div id="comments-list" class="comments">
<h3><?php printf($comment_count > 1 ? __('<span>%d</span>
Comments', 'your-theme') : __('<span>One</span> Comment', 'your-theme'),
$comment_count) ?></h3>

<?php /* If there are enough comments, build the comment navigation */ ?>
<?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?>
<div id="comments-nav-above" class="comments-navigation"> <div class="paginated-comments-links"><?php paginate_comments_links(); ?></div>
</div><!-- #comments-nav-above --> <?php endif; ?>

<?php /* An ordered list of our custom comments callback, custom_comments(), in functions.php */ ?>
<ol>
<?php wp_list_comments('type=comment&callback=custom_comments'); ?>
</ol>

<?php /* If there are enough comments, build the comment navigation */ ?>
<?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?> <div id="comments-nav-below" class="comments-navigation"> <div class="paginated-comments-links"><?php paginate_comments_links(); ?></div>
</div><!-- #comments-nav-below -->
<?php endif; ?>

</div><!-- #comments-list .comments -->
<?php endif; /* if ( $comment_count ) */ ?>
<?php /* If there are trackbacks(pings), show the trackbacks */ ?>
<?php if ( ! empty($comments_by_type['pings']) ) : ?>
<div id="trackbacks-list" class="comments">
<h3><?php printf($ping_count > 1 ? __('<span>%d</span>
Trackbacks', 'your-theme') : __('<span>One</span> Trackback', 'your-theme'),
$ping_count) ?></h3>

<?php /* An ordered list of our custom trackbacks callback, custom_pings(), in functions.php */ ?>
<ol>
<?php wp_list_comments('type=pings&callback=custom_pings'); ?>
</ol>

</div><!-- #trackbacks-list .comments -->

<?php endif /* if ( $ping_count ) */ ?>
<?php endif /* if ( $comments ) */ ?>

<?php /* If comments are open, build the respond form */ ?>
<?php if ( 'open' == $post->comment_status ) : ?>
<div id="respond">
<h3><?php comment_form_title( __('Post a Comment', 'yourtheme'), __('Post a Reply to %s', 'your-theme') ); ?></h3>

<div id="cancel-comment-reply"><?php cancel_comment_reply_link() ?></div>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?> <p id="login-req"><?php printf(__('You must be <a href="%s" title="Log in">logged in</a> to post a comment.', 'your-theme'), get_option('siteurl') . '/wp-login.php?redirect_to=' .
get_permalink() ) ?></p>

<?php else : ?>
<div class="formcontainer">

<form id="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post">
<?php if ( $user_ID ) : ?>
<p id="login"><?php printf(__('<span class="loggedin">Logged in as <a href="%1$s" title="Logged in as
%۲$s">%2$s</a>.</span> <span class="logout"><a href="%3$s" title="Log out of this account">Log out?</a></span>', 'your-theme'), get_option('siteurl') . '/wpadmin/profile.php',
wp_specialchars($user_identity, true), wp_logout_url(get_permalink()) ) ?></p>
<?php else : ?>

<p id="comment-notes"><?php _e('Your email is
<em>never</em> published nor shared.', 'your-theme') ?> <?php if ($req) _e('Required fields are marked <span class="required">*</span>', 'yourtheme') ?></p>

<div id="form-section-author" class="form-section"> <div class="form-label"><label for="author"><?php _e('Name', 'your-theme') ?></label> <?php if ($req)
_e('<span class="required">*</span>', 'your-theme') ?></div>
<div class="form-input"><input id="author" name="author" type="text" value="<?php echo $comment_author ?>" size="30" maxlength="20" tabindex="3" /></div>
</div><!-- #form-section-author .form-section -->
<div id="form-section-email" class="form-section"> <div class="form-label"><label for="email"><?php _e('Email', 'your-theme') ?></label> <?php if ($req)
_e('<span class="required">*</span>', 'your-theme') ?></div>
<div class="form-input"><input id="email" name="email" type="text" value="<?php echo $comment_author_email ?>" size="30" maxlength="50" tabindex="4" /></div>
</div><!-- #form-section-email .form-section -->

<div id="form-section-url" class="form-section"> <div class="form-label"><label for="url"><?php _e('Website', 'your-theme') ?></label></div>
<div class="form-input"><input id="url" name="url" type="text" value="<?php echo $comment_author_url ?>" size="30" maxlength="50" tabindex="5" /></div>
</div><!-- #form-section-url .form-section -->
<?php endif /* if ( $user_ID ) */ ?>

<div id="form-section-comment" class="form-section"> <div class="form-label"><label for="comment"><?php _e('Comment', 'your-theme') ?></label></div> <div class="form-textarea"><textarea
id="comment" name="comment" cols="45" rows="8" tabindex="6"></textarea></div>
</div><!-- #form-section-comment .form-section -->
<div id="form-allowed-tags" class="form-section">
<p><span><?php _e('You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes:', 'your-theme') ?></span>
<code><?php echo allowed_tags(); ?></code></p>
</div>

<?php do_action('comment_form', $post->ID); ?>
<div class="form-submit"><input id="submit" name="submit" type="submit" value="<?php _e('Post Comment', 'your-theme') ?>" tabindex="7" /><input type="hidden" name="comment_post_ID" value="<?php echo
$id; ?>" /></div>

<?php comment_id_fields(); ?>

<?php /* Just … end everything. We're done here. Close it up. */ ?>
</form><!-- #commentform -->
</div><!-- .formcontainer -->
<?php endif /* if ( get_option('comment_registration') && !$user_ID ) */ ?>
</div><!-- #respond -->
<?php endif /* if ( 'open' == $post->comment_status ) */ ?> </div><!-- #comments -->

 

این كد برای شروع كد مناسبی هست و برای راحتی شما و خوانا بودن دارای توضیح است كه می توانید به سلیقه خود آن را ویرایش كرده و توسعه دهید.

 

كد نویسی این برگه ها بسیار ساده است و هیچ پیچیدگی نخواهد داشت. همانند فصل های گذشته از كد زیر استفاده خواهیم كرد.

 

<?php get_header(); ?>

<div id="container"> <div id="content">

<div id="nav-above" class="navigation">
</div><!-- #nav-above -->

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
</div><!-- #post-<?php the_ID(); ?> -->
<div id="nav-below" class="navigation">
</div><!-- #nav-below -->

</div><!-- #content -->
</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

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

پوسته مربوط به صفحه جستجو

در فایلsearch.php دوباره از حلقه ی وردپرس استفاده خواهیم كرد. از یك دستور شرطی استفاده می كنیم و اگر نوشته ای با نتایج جستجو مطابقت داشته باشد حلقه آنرا به نمایش خواهد گذاشت. كد مربوط به صفحه جستجو به صورت زیر خواهد شد:

 

<?php get_header(); ?>

<div id="container"> <div id="content">

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post() ?>
<!-- this is our loop --> <?php endwhile; ?>

<?php else : ?>

<!-- here's where we'll put a search form if there're no posts -->
<?php endif; ?>

</div><!-- #content -->
</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

توسط كد زیر بررسی می كنیم كه با صفحه یا پست كار خواهیم كرد.

 

<?php if ( $post->post_type == 'post' ) { ?>
<?php } ?>

 

در ادامه به تكمیل بخش content می پردازیم و آنرا به صورت زیر كامل خواهیم كرد :

 

<?php if ( have_posts() ) : ?>

<h1 class="page-title"><?php _e( 'Search Results for: ',
'your-theme' ); ?><span><?php the_search_query(); ?></span></h1>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if (
$total_pages > 1 ) { ?>
<div id="nav-above" class="navigation">
<div class="nav-previous"><?php next_posts_link(__(
'<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div> <div class="nav-next"><?php previous_posts_link(__(
'Newer posts <span class="meta-nav">&raquo;</span>', 'your-theme' )) ?></div>
</div><!-- #nav-above -->
<?php } ?>

<?php while ( have_posts() ) : the_post() ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2 class="entry-title"><a href="<?php the_permalink();
?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title();
?></a></h2>

<?php if ( $post->post_type == 'post' ) { ?>
<div class="entry-meta">
<span class="meta-prep meta-prep-author"><?php _e('By
', 'your-theme'); ?></span>
<span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata>user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'yourtheme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
<span class="meta-sep"> | </span>
<span class="meta-prep meta-prep-entry-date"><?php
_e('Published ', 'your-theme'); ?></span>
<span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>
<?php edit_post_link( __( 'Edit', 'your-theme' ),
"<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">",
"</span>\n\t\t\t\t\t" ) ?>
</div><!-- .entry-meta -->
<?php } ?>

<div class="entry-summary">
<?php the_excerpt( __( 'Continue reading <span class="metanav">&raquo;</span>', 'your-theme' ) ); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'yourtheme' ) . '&after=</div>') ?>
</div><!-- .entry-summary -->
<?php if ( $post->post_type == 'post' ) { ?>
<div class="entry-utility">
<span class="cat-links"><span class="entry-utilityprep entry-utility-prep-cat-links"><?php _e( 'Posted in ', 'your-theme' );
?></span><?php echo get_the_category_list(', '); ?></span>
<span class="meta-sep"> | </span>
<?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"metasep\">|</span>\n" ) ?>
<span class="comments-link"><?php
comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>
<?php edit_post_link( __( 'Edit', 'your-theme' ),
"<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">",
"</span>\n\t\t\t\t\t\n" ) ?>
</div><!-- #entry-utility -->
<?php } ?>
</div><!-- #post-<?php the_ID(); ?> -->
<?php endwhile; ?>

<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if (
$total_pages > 1 ) { ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link(__(
'<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div> <div class="nav-next"><?php previous_posts_link(__(
'Newer posts <span class="meta-nav">&raquo;</span>', 'your-theme' )) ?></div>
</div><!-- #nav-below --> <?php } ?>

<?php else : ?>

<div id="post-0" class="post no-results not-found"> <h2 class="entry-title"><?php _e( 'Nothing Found', 'yourtheme' ) ?></h2>
<div class="entry-content">
<p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', 'your-theme' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
</div>

<?php endif; ?>

 

پوسته برگه ها

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

 

<?php get_header(); ?>

<div id="container"> <div id="content">

<?php the_post(); ?>

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'yourtheme' ) . '&after=</div>') ?>
<?php edit_post_link( __( 'Edit', 'your-theme' ), '<span class="edit-link">', '</span>' ) ?>
</div><!-- .entry-content -->
</div><!-- #post-<?php the_ID(); ?> -->
<?php if ( get_post_custom_values('comments') ) comments_template() // Add a custom field with Name and Value of "comments" to enable comments on this page ?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

تا اینجا چطور پیشرفته اید؟ توجه داشته باشید هر فصل را به دقت و قدم به قدم جلو ببرید و اگر به مشكلی خوردید آنرا در گوگل جستجو كنید یا برای من ایمیل بزنید. حالا سراغ كامل تر كردن امكانات پوسته می رویم.

 

كار فایل archive.php چیست؟ این فایل بر اساس خواست ما، تمامی پست ها را بایگانی شده نمایش می دهد. آرشیو می تواند بر اساس تاریخ ، نویسنده ، دسته بندی و یا برچسب ها ی مرتبط مرتب و تهیه شود. در واقع این فایل خیلی شبیه فایل index.php است.

 

همانند قبل با كد مثال خود شروع می كنیم و شروع به ویرایش آن خواهیم كرد.

 

<?php get_header(); ?>

<div id="container">
<div id="content">

<div id="nav-above" class="navigation">
</div><!-- #nav-above -->

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
</div><!-- #post-<?php the_ID(); ?> -->

<div id="nav-below" class="navigation">
</div><!-- #nav-below -->
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

در ادامه چه روندی را برای فایل آرشیو طی خواهیم كرد؟

• تابع ()the_post را فراخوانی خواهیم كرد
• كنترل كه پوسته چگونه عمل كند
• پوسته مناسب با كار تهیه می كنیم
• مرور كردن نوشته ها با كمك تابع ()rewind_posts
• استفاده از حلقه معروف وردپرس

 

طبق معمول با كمك دستورات شرطی همه ی موارد را كنترل می كنیم و كدمان به شكل زیر خواهد شد:

 

<?php the_post(); ?>

<?php if ( is_day() ) : ?>
<h1 class="page-title"><?php printf( __( 'Daily Archives:
<span>%s</span>', 'your-theme' ), get_the_time(get_option('date_format')) )
?></h1>
<?php elseif ( is_month() ) : ?>
<h1 class="page-title"><?php printf( __( 'Monthly Archives:
<span>%s</span>', 'your-theme' ), get_the_time('F Y') ) ?></h1>
<?php elseif ( is_year() ) : ?>
<h1 class="page-title"><?php printf( __( 'Yearly Archives:
<span>%s</span>', 'your-theme' ), get_the_time('Y') ) ?></h1>
<?php elseif ( isset($_GET['paged']) && !empty($_GET['paged']) ) : ?> <h1 class="page-title"><?php _e( 'Blog Archives', 'yourtheme' ) ?></h1> <?php endif; ?>

<?php rewind_posts(); ?>

<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if (
$total_pages > 1 ) { ?>
<div id="nav-above" class="navigation">
<div class="nav-previous"><?php next_posts_link(__(
'<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div> <div class="nav-next"><?php previous_posts_link(__(
'Newer posts <span class="meta-nav">&raquo;</span>', 'your-theme' )) ?></div>
</div><!-- #nav-above -->
<?php } ?>

<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2 class="entry-title"><a href="<?php the_permalink();
?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title();
?></a></h2>

<div class="entry-meta">
<span class="meta-prep meta-prep-author"><?php _e('By
', 'your-theme'); ?></span>
<span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata>user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'yourtheme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
<span class="meta-sep"> | </span>
<span class="meta-prep meta-prep-entry-date"><?php
_e('Published ', 'your-theme'); ?></span>
<span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>
<?php edit_post_link( __( 'Edit', 'your-theme' ),
"<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>
</div><!-- .entry-meta -->

<div class="entry-summary"> <?php the_excerpt( __( 'Continue reading <span class="metanav">&raquo;</span>', 'your-theme' ) ); ?> </div><!-- .entry-summary -->

<div class="entry-utility">
<span class="cat-links"><span class="entry-utilityprep entry-utility-prep-cat-links"><?php _e( 'Posted in ', 'your-theme' );
?></span><?php echo get_the_category_list(', '); ?></span>
<span class="meta-sep"> | </span>
<?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"metasep\">|</span>\n" ) ?>
<span class="comments-link"><?php
comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>
<?php edit_post_link( __( 'Edit', 'your-theme' ),
"<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">",
"</span>\n\t\t\t\t\t\n" ) ?>
</div><!-- #entry-utility -->
</div><!-- #post-<?php the_ID(); ?> -->
<?php endwhile; ?>

<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if (
$total_pages > 1 ) { ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link(__(
'<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div> <div class="nav-next"><?php previous_posts_link(__(
'Newer posts <span class="meta-nav">&raquo;</span>', 'your-theme' )) ?></div>
</div><!-- #nav-below -->
<?php } ?>

 

در این مرحله سراغ پوسته مربوط به نویسنده مطالب می رویم. این بار كارهایی را كه قبلا كردیم تكرار نخواهیم كرد. فایل archive.php را كپی كنید و نام آنرا به author.php تغییر دهید. حال تنها چیزی كه نیاز داریم تغییر عناوین بالای صفحه هست. آسان بود مگه نه ؟

 

<h1 class="page-title author"><?php printf( __( 'Author Archives: <span class="vcard">%s</span>', 'your-theme' ), "<a class='url fn n' href='$authordata->user_url' title='$authordata->display_name' rel='me'>$authordata->display_name</a>" ) ?></h1>
<?php $authordesc = $authordata->user_description; if ( !empty($authordesc) ) echo apply_filters( 'archive_meta', '<div class="archive-meta">' .
$authordesc . '</div>' ); ?>

 

نوبتی هم باشد نوبت پوسته مربوط به دسته ها است. نیازی به دوباره كاری نیست. فایل archive.php را كپی كنید و آنرا به category.php تغییر نام دهید. فابل functions.php را باز نمایید و كد زیر را در آن درج كنید تا كمی پوسته خود را مفید تر نماییم.

 

// For category lists on category archives: Returns other categories except the current one (redundant) function cats_meow($glue) {
$current_cat = single_cat_title( '', false );
$separator = "\n";
$cats = explode( $separator, get_the_category_list($separator) ); foreach ( $cats as $i => $str ) { if ( strstr( $str, ">$current_cat<" ) ) { unset($cats[$i]); break;
} }
if ( empty($cats) ) return false;
return trim(join( $glue, $cats )); } // end cats_meow

 

تابع اختصاصی ما ()cats_meow است كه كارش حذف و عدم نمایش دسته ی جاری كه كاربر در آن قرار دارد از برگه های مربوط است. در اصل از شر دسته بندی های تكراری و مطالب اضافی راحت خواهیم شد.

 

به فایل category.php برمی گردیم و كد عناوین و بالایی را به صورت زیر ویرایش می نماییم:

 

<h1 class="page-title"><?php _e( 'Category Archives:', 'your-theme' ) ?>
<span><?php single_cat_title() ?></span></span></h1>
<?php $categorydesc = category_description(); if ( !empty($categorydesc) ) echo apply_filters( 'archive_meta', '<div class="archive-meta">' . $categorydesc . '</div>' ); ?>

 

و در بخش .entry-utility كد زیر را جایگزین می نماییم:

 

<span class="cat-links"><span class="entry-utility-prep entry-utility-prepcat-links">
<?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo get_the_category_list(', '); ?></span>

 

و همین طور :

 

<?php if ( $cats_meow = cats_meow(', ') ) : // Returns categories other than the one queried ?>
<span class="cat-links"><?php printf( __( 'Also posted in %s', 'your-theme' ), $cats_meow ) ?></span>
<span class="meta-sep"> | </span> <?php endif ?>

 

و آخرین بخشی كه در این فصل به آن می پردازیم پوسته مربوط به برچسب های مطالب است. فایل archive.php را كپی نمایید و نام آنرا به tag.php تغییر دهید. در نظر داریم تابعی جدید با نام ()tag_ur_it در فایل functions.php بنویسیم. كار این تابع مشابه كار تابعی است كه با نام ()cats_meow برای دسته بندی ها نوشتیم.

 

// For tag lists on tag archives: Returns other tags except the current one
(redundant)
function tag_ur_it($glue) {
$current_tag = single_tag_title( '', '', false );
$separator = "\n";
$tags = explode( $separator, get_the_tag_list( "", "$separator", "" ) ); foreach ( $tags as $i => $str ) { if ( strstr( $str, ">$current_tag<" ) ) { unset($tags[$i]); break;
} }
if ( empty($tags) ) return false;
return trim(join( $glue, $tags )); } // end tag_ur_it

 

اكنون فایل tag.php را در ویرایش گر متنی خود باز می كنیم و عنوان صفحه را با كد زیر جایگزین می كنیم :

 

<h1 class="page-title"><?php _e( 'Tag Archives:', 'your-theme' ) ?> <span><?php single_tag_title() ?></span></h1>

 

و البته در بخش .entry-utility نیز كد زیر را جایگزین كدهای قبل می كنیم :

 

<?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>

 

و در قدم آخر

 

<?php if ( $tag_ur_it = tag_ur_it(', ') ) : // Returns tags other than the one queried ?>
<span class="tag-links"><?php printf( __( 'Also tagged %s', 'your-theme' ), $tag_ur_it ) ?></span> <?php endif; ?>

 

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

 

در ادامه تابعی اختصاصی برای ستون كناری خود خواهیم ساخت. البته یكی از نكاتی كه همیشه باید توجه كنید و خیلی مهم است كاركرد پوسته و ستون كناری شما و سازگار بودن آن با ابزارك ها است.

 

فایل functions.php را باز می كنیم و با كمك كد زیر منطقه قابل دسترسی توسط ابزارك ها را كدنویسی می كنیم.

 

// Register widgetized areas function theme_widgets_init() {
// Area 1 register_sidebar( array (
'name' => 'Primary Widget Area',
'id' => 'primary_widget_area',
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => "</li>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

// Area 2 register_sidebar( array (
'name' => 'Secondary Widget Area',
'id' => 'secondary_widget_area',
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => "</li>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
} // end theme_widgets_init add_action( 'init', 'theme_widgets_init' );

 

با كمك تابع فوق دو منطقه برای ابزارك ها تهیه كردیم. فایل functions.php را نبندید، هنوز كارمان تمام نشده است. در ادامه باید ابزارك های پیشفرض را تعریف نماییم. ابزارك هایی مانند : جستجو ، برگه ها ، دسته بندی ها ، آرشیو و لینك ها كه به صورت ابزارك در وردپرس ارایه می شوند. برای این كار نیازی به كدنویسی هر كدام نیست و تنها كافی است به وردپرس بگوییم كدام ابزارك ها را فراخوانی كند و در بخش مورد نظر ما بارگذاری نماید.

 

$preset_widgets = array (
'primary_widget_area' => array( 'search', 'pages', 'categories', 'archives' ),
'secondary_widget_area' => array( 'links', 'meta' )
);
if ( isset( $_GET['activated'] ) ) {
update_option( 'sidebars_widgets', $preset_widgets ); }
// update_option( 'sidebars_widgets', NULL );

 

بعد از نوشتن این كد ابزارك های جستجو ، برگه ها ، دسته بندی ها و آرشیو در اولین منطقه ابزارك های اصلی به صورت پیشفرض بارگذاری خواهد شد.

 

در منطقه ی دوم مربوط به ابزارك ها لینك ها و متا تگها را فراخوانی كرده ایم. در آخرین خط كدی را می بینید كه به صورت توضیح نوشته ام ، اگر به هر دلیلی خواستید تمام ابزارك ها را غیب و غیر فعال كنید تنها كافی است // را پاك كنید.

 

الان نوبت نوشتن كدی هست كه كنترل نماید آیا ابزارك ها در بخش مدیریت تغییر كرده اند یا خیر ، اگر تغییری ایجاد شده است باید تغییرات اعمال شود.

 

// Check for static widgets in widget-ready areas function is_sidebar_active( $index ){ global $wp_registered_sidebars;
$widgetcolums = wp_get_sidebars_widgets(); if ($widgetcolums[$index]) return true; return false;
} // end is_sidebar_active

 

دیگر كار زیادی برای ستون كناری ها نمانده است. ۲ منطقه پویا برای ابزارك ها ثبت كرده ایم و ابزارك های پیشفرض را نیز تعریف نموده ایم.

 

<?php if ( is_sidebar_active('primary_widget_area') ) : ?>
<div id="primary" class="widget-area">
<ul class="xoxo">
<?php dynamic_sidebar('primary_widget_area'); ?> </ul>
</div><!-- #primary .widget-area --> <?php endif; ?>

<?php if ( is_sidebar_active('secondary_widget_area') ) : ?>
<div id="secondary" class="widget-area">
<ul class="xoxo">
<?php dynamic_sidebar('secondary_widget_area'); ?> </ul>
</div><!-- #secondary .widget-area --> <?php endif; ?>

 

آخرین فصل دوره آموزش طراحی قالب وردپرس ما به CSS ها مرتبط می شود. با اینكه CSS ها مبحث ساده ای هستند ولی ساده گرفتن آنها و توجه نكردن به آنها می توانند درد سر ساز شوند.

 

كار ها و مراحلی كه باید طی كنیم به شرح زیر است :

• نیاز به فایلی CSS ای داریم كه برای بهتر كار كردن پوسته تمامی تنظیمات پیشفرض را ریست نماید
• فایلی دیگر برای كلاس های وردپرس
• ۶ فایل CSS كه تمامی ظاهر و بخش های مختلف سایت و پروژه ما را تشكیل می دهد

 

تمامی كدهایی كه در بالا ذكر شد به صورت رایگان و آزاد در اختیار شما قرار خواهند گرفت. تنها كافی است به لینك زیر مراجعه نمایید :

 

https://code.google.com/archive/p/your-wordpress-theme/wikis

 

یا برای دانلود از سرور خود لرن پاسی کلیک کنید !

 

فایل ها را باز كنید و كد ها را در پروژه ی خود كپی كنید. اولین قدم ساخت پوشه ای به نام style در پوشه ی پوسته شما است. در این پوشه شما باید تمامی فایل های CSS خود را منتقل كنید.

فایل ریست

كاری كه این فایل می كند تمامی تنظیمات و مشخصات را یكسان می سازد تا نتیجه خروجی ما در همه ی مرورگرها یكسان شود. استفاده از این فایل خیلی ساده است تنها كد زیر را در بالای فایل style.css اضافه می كنیم تا فایل مربوط را فراخوانی نماید.

 

/* Reset default browser styles */
@import url('styles/reset.css');

 

بخش هایی در وردپرس هستند كه همیشه ثابت هستند ونیازی به ویرایش یا تغییرات زیاد و از صفر نوشتن ندارند. این كدها و استایل ها در فایل wp.css نوشته و قرار گرفته اند. بكار گیری این فایل نیز اصلا سخت نیست. كدهای زیر این كار را انجام می دهند.

 

/* Basic WordPress Styles */
@import url('styles/wp.css');

 

از آنجایی كه css ها جزو مباحثی هستند كه با آن آشنا هستید می توانید با مرور كدها اطلاعات لازم را دریافت نمایید.

 

• توصیه می شود : آموزش تبدیل قالب HTML به وردپرس

 

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