درس چهارم- ساخت header.php و footer.php و index.php
درس قبل صرف توضیح مختصری از ساختار پوشه‌های وردپرس، ساخت فایل‌های شیوه دهی و قدم ابتدایی در معرفی پوسته‌مان به وردپرس شد. در این درس می‌خواهیم با سه فایل دیگر آشنا شویم که توسط آنها می‌توانیم هسته اصلی پوسته را تکمیل کنیم.
ساخت فایل header.php
فایل سرایند تقریبن توسط همه دیگر فایلها یا الگوها در بالای هر صفحه فراخوان می‌شود. با این کار ما از تکرار کدهایی که باید در تمام صفحه‌ها باشند جلوگیری می‌کنیم. فایلی با نام header.php بسازید و کدهای زیر را در آن بنویسید.
<?php
/**
* سرایند پوسته درسنامه
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type');?>" />
<meta name="description" content="<?php bloginfo("description"); ?>">
<meta name="viewport" content="width=device-width">
<title>
<title><?php bloginfo('name');?> </title>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed"
href="<?php bloginfo('rss2_url'); ?>" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" href="<?php bloginfo("template_directory"); ?>/style.css">
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/img/darsnameh.ico" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="primary">
<header id="header" >
<nav role="navigation" class="">
<?php wp_nav_menu(array('theme_location' => 'primary')); ?>
</nav>
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" name="top"><?php bloginfo('name'); ?></a></h1>
<h3> <span><?php bloginfo('description'); ?></span></h3>
</header>
<div id="main">
در توضیح کدهایی که در این فایل قرار می‌دهیم باید به این نکته اشاره کنیم که یادگیری کدهای مربوط به به اچ تی ام ال بر عهده خود شما است. ما فقط به مواردی که به برچسب‌های وردپرس مربوط می‌شود، می‌پردازیم.
برچسب‌ها
<html <?php language_attributes(); ?>>
این برچسب بعد از اجرا شدن به شکل زیر پدیدار می‌شود. برای دیدن این کد کافیست بر روی مرورگر خود کلیک راست کرده و View page source را انتخاب کنید.
<html dir="rtl" lang="fa-IR">
برچسب بالا بطور خودکار و از روی زبان انتخابی سیستم وردپرس، چیدمان کلی (چب به راست یا برعکس) تارنما و زبانی که باید کدها توسط مرورگر ترجمه شوند را بر می‌گزیند. همانطور که می‌بینید در مثال ما جهت به شکل rtl راست به چپ و زبان ترجمه پارسی انتخاب شده است. این به دلیل است که برای سیستم وردپرسی که ما به همراه دوره آموزشی مشغول به ساختن پوسته هستیم، زبان پارسی تنظیم شده است.
<meta charset="<?php bloginfo('charset'); ?>" />
خروجی برچسب بالا تنظیم مجموعه کاراکتر یا نوع کارکتر استفاده شونده را به مرورگر دیکته می‌کند.
<meta charset="UTF-8" />
همانطور که می بینید تنظیم کاراکتر UTF-8 که برای زبان‌هایی مانند پارسی تهیه شده است در مرورگر پیاده شده است.
<?php bloginfo('html_type'); ?>
کد بالا نوع محتوا را در مرورگر تعیین می‌کند که خروجی آن می‌شود:
content="text/html"
<?php bloginfo("description"); ?> و <?php bloginfo("name"); ?>
این دو برچسب نام و توضیحات تارنما را بر می‌گردانند. اگر به قسمت مدیریت تارنمای خود در بخش «تنظیمات» گزینه «همگانی» بروید به دو کادر «عنوان سایت» و «معرفی کوتاه» بر می‌خورید. داده‌هایی که در این دو کادر وارد می‌کنید توسط دو برچسب بالا گرفته شده و در تارنما نمایش داده می‌شود.
<?php bloginfo('rss2_url'); ?>
این برچسب پیوند «خوراک خوان» تارنما را بر می‌گرداند.
<?php bloginfo('pingback_url'); ?>
این برچسب اطلاعات تارنمای شما را برمی‌گرداند و بعد در خود تارنما می‌توانید از آن اطلاعات استفاده کنید.
<?php echo get_template_directory_uri(); ?>
<?php bloginfo('template_directory'); ?>/img/darsnameh.ico
با نگاهی بر خروجی برچسب های بالا به کارکرد آنها پی خواهید برد. از این برچسب در جاهای بسیاری برای یافتن و دادن نشانی ریشه تارنما استفاده خواهیم کرد. همانطور که می‌بینید نشانی ریشه را برای ما بر می‌گرداند. در ادامه ما می‌توانیم با دادن ادامه نشانی به شئی مورد نظر دسترسی پیدا کنیم.
http://localhost/darsnameh/wp-content/themes/darsnameh
<?php bloginfo('url'); ?>
نشانی اصلی تارنما را باز می‌گرداند. به خروجی آن دقت کنید:
http://localhost/darsnameh
نشانی تارنمایی است که ما در سرور محلی خود راه اندازی می‌کنیم.
<?php body_class(); ?>
این دستور، برچسب‌های بسیاری از سی اس اس را برای شیوه دهی دقیق‌تر برای شما فراهم می‌کند. خروجی این برچسب در زیر نشان دهنده کاربرد آن است:
<body class="rtl home blog logged-in admin-bar ">
با استفاده از این برچسب‌ها می توان شیوه دهی را نسبت به برگه ای که کاربر در حال دیدن است پیاده کرد، به این شکل پویا بودن تارنما بسیار زیباتر اجرا می‌شود.
<?php wp_nav_menu(array('theme_location' => 'primary')); ?>
این برچسب ناوبری یا فهرست تارنما را نمایش می‌دهد. البته ابتدا این فهرست باید در فایل functions.php ساخته شود. در زمان توضیح فایل functions به چگونگی ساخت ناوبری اشاره خواهیم کرد.
<?php wp_head(); ?>
این برچسب در اصل با نام «قلاب» یا hook شناخته می‌شود و باید در بین دو برچسب اچ تی ام ال <head></head> درست قبل از </head> گذاشته شود. توجه کنید که این برچسب بسیار مهم است چراکه قلاب دریافت کننده المان‌های زیادی در «سرایند» تارنما است و بدون آن سرایند درست بار گذاری نمی‌شود.
Index.php
فایل ایندکس در اصل بدنه اصلی نمایش داده‌ها در تارنما را تشکیل می‌دهد. در درس قبل گفتیم که این برگه دو کار اصلی انجام می‌دهد: یکم، این برگه اصلی تارنما است و وقتی کاربری نشانی تارنمای شما را وارد می‌کند، وارد این برگه می‌شود (اگر شما برگه‌های home.php و front-page.php که از نظر اولویت بالا آمدن بالاتر هستند، را نداشته باشید). دوم اینکه در نبود دیگر برگه‌ها مانند page.php یا single.php سیستم وردپرس این برگه را بارگذاری می‌کند. در آن صورت باید در برگه index.php چگونگی عملکرد این فایل به جای دیگر برگه‌ها را تعریف کنیم. یعنی باید در برگه ایندکس همه کدهایی را که تارنما را نمایش می‌دهند بگنجانیم (این عمل باعث پیچیده شدن برگه ایندکس بعلت وجود کدهای بسیار می‌شود) و با یک جمله شرطی تعریف کنیم که چطور رفتار کند. البته با توجه به اینکه ما قصد ساختن برگه‌های افزودنی در دروس پیش رو داریم از گنجاندن همه کدها در این فایل امتنا می‌ورزیم. اگر به نمونه پوسته که همراه دوره برای شما ارسال می‌شود دقت کنید فایل indexold.phpحاوی تمام کدها است. برای استفاده از این فایل باید دیگر فایلها را پاک کنید.
<?php
/**
* فایل اصلی یاهمان ایندکس
*/
get_header();
?>
<div id="content" role="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title();
?></a></h2>
<?php the_post_thumbnail('thumbnail'); ?>
<?php the_excerpt(); ?>
</div>
<?php endwhile;
else:
?>
<div class="post">
<h2>خطا</h2>
<p>مشکلی پیش آمده</p>
</div>
<?php endif; ?>
</div><!-- #content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
قبل از وارد شدن به توضیح دستورات باید یک مفهوم بسیار مهم را برای شما شرح دهیم.
مفهوم حلقه یا loop: حلقه همانطور که از نامش پیداست مجموعه‌ای از داده‌ها را از پایگاه برای نمایش آماده می‌کند. فرض کنید که می‌خواهید در برگه نخست خود چند نوشته آخر را نمایش دهید. این کار با استفاده از حلقه صورت می گیرد.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
ترجمه این کد به این شکل است که می‌گوید: اگر نوشته ای وجود دارد، تا زمانی که همه آنها را بگیری (تا زمانی که نوشته ای وجود دارد)، آنها را از پایگاه بگیر. حالا نوشته‌ها در اختیار شما است و شما تنها نیاز به چاپ کردن آنها دارید. که با برچسب‌های زیر بطور خلاصه و کامل نمایش داده می‌شود.
<?php the_excerpt(); ?>
<?php the_content(); ?>
توضیح کدها:
get_header();
گفتیم که فایل سرایند در دیگر برگه‌ها که نقش بدنه تارنما را بازی می‌کنند، فراخوان می‌شود. این دستور دقیقا همینکار را برای ما می‌کند. یعنی ما فایل header.php را در فایل index.php می‌گنجانیم. این دستور در تمام دیگر برگه‌های اصلی یا بدنه تارنما مانند single.php, page.php و یا... استفاده می‌شود.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
در بخش حلقه به عملکرد این برچسب اشاره شد.
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
با استفاده از این دو برچسب، کدهای لازم برای شیوه دهی را در برگه ایندکس وارد می‌کنیم. خروجی این دو برچسب نشان دهنده شیوه عملکرد آنهاست.
<div id="post-1" class="post-1 post type-post status-publish format-standard hentry category--">
the_permalink();
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
این برچسب نشانی «پیوند» نوشته را برمی‌گرداند. که با کمک برچسب <a…> در اچ تی ام ال، تیتر نوشته را به صورت یک پیوند نمایش می‌دهد.
the_title();
این برچسب تیتر نوشته را نمایش می‌دهد.
<?php the_post_thumbnail('thumbnail'); ?>
این برچسب برای نمایش عکس ارسال و پیوست شده به نوشته استفاده می‌شود. در درس‌های آینده (درس مربوط به فایل توابع) در مورد این برچسب بیشتر حرف خواهیم زد.
<?php the_excerpt(); ?>
<?php the_content(); ?>
دو برچسب بالا محتوا یا بدنه نوشته را برمی‌گردانند. برچسب ابتدایی آن را بصورت مختصر شده –با انتخاب تعداد مشخصی از نوشته- و دومی همه نوشته را بطور کامل نشان می‌دهد. معمولا از برچسب the_excerpt() برای نمایش مختصری از نوشته مثلن در برگه index.php و از دیگری برای نمایش کامل نوشته در برگه‌هایی مانند single.php استفاده می‌شود.
نکته: توجه کنید که حلقه بالا به همراه یک دستور شرطی نوشته شده است:
if (have_posts()) .
..
else:
<div class="post">
<h2>خطا</h2>
<p>مشکلی پیش آمده</p>
</div>
<?php endif; ?>
در اصل این شرطی این طور عمل می‌کند که در صورت وجود داشتن نوشته آنها را نمایش می‌دهد و در صورت عدم وجود نوشته ای، یک پیغام خطا به کاربر می‌دهد.
<?php get_sidebar(); ?>
<?php get_footer(); ?>
این دو دستور همانند دستور get_header()، دستورهای وارد کردن فایل‌های دیگر است. دستور ابتدایی «ستون کناری» را که بصورت پیش فرض در وردپرس وجود دارد، وارد می‌کند و دستور دوم پا نوشت یا پایین صفحه را وارد می‌کند.
نکته: سه دستور زیر که در فایل اندکس آورده شدند در همه برگه‌هایی (single.ph, page.php, category.php) که نقش بدنه تارنما را بازی می‌کنند افزوده خواهد شد:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
footer.php
همانند فایل سرایند، فایل «پانوشت» در تمام فایل‌های اصلی یا الگوها وارد می‌شود. این عمل همان طور که در قسمت قبل توضیح داده شد، توسط یک برچسب وارد کردن صورت می‌گیرد. فایل پانوشت در پایین صفحه همه برگه‌هایی که بازدید کننده وارد آن می‌شود نمایش داده می‌شود.
</div><!-- #main -->
<footer id="footer">
<?php if (has_nav_menu('secondary')) : ?>
<nav role="navigation" class="footer-navigation">
<?php wp_nav_menu(array('theme_location' => 'secondary')); ?>
</nav>
<?php endif; ?>
<div class="feed"><a href="<?php bloginfo('rss2_url'); ?>" title="RSS">خوراک</a></div>
<div class="site-info">
<?php echo date('Y'); ?> <?php bloginfo('name'); ?> <span class="sep">|</span> <?php _e('ساخته شده توسط گروه درسنامه'); ?>
</div>
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>
نکته: لطفا به نحوه چیدمان برچسب‌های اچ تی ام ال دقت فرمایید. مثلن برچسب‌های html, body و ... که برچسب شروع یا باز آن در فایل سرایند قرار داده شده است، در این فایل برچسب بسته آن گذاشته شده است.
توضیح کد:
<?php if (has_nav_menu('secondary')) : ?>
<?php wp_nav_menu(array('theme_location' => 'secondary')); ?>
<?php endif; ?>
این مجموعه برچسب‌ها را در فایل سرایند هم داشتیم. منتها در این قسمت در صورت وجود «فهرست» برای پانوشت، آن را نمایش می‌دهیم. در اصل ما دو «فهرست» برای این تارنما می‌سازیم، یکی برای «سرایند» و دیگری برای «پانوشت» که با نام‌های primary و secondaryآنها را نام‌گذاری کرده‌ایم.
<?php echo date('Y'); ?>
این برچسب با توجه علامت داخل پرانتز (به منظور انتخاب نوع تاریخ برای نمایش) تاریخ را برایمان نمایش می‌دهد.
<?php _e('ساخته شده توسط گروه درسنامه'); ?>
دستور بالا برای چاپ کردن یک متن در برگه مورد استفاده قرار می‌گیرد. شما می‌توانید هر مطلبی که خواستید در داخل پرانتز و بین دو علامت ‘ و‘ قرار دهید.
مرور درس: در این درس ما سه فایل دیگر را برای تارنمای خود ساختیم. حال می‌توانید نگاهی به تارنما بصورت زنده بیاندازید. در صورت هر گونه مشکل احتمال این می‌رود که کدی را از قلم انداخته باشید، به برگه برگردید و مشکل را بیابید. یک قسمت مهم در ساختن هر گونه پوسته یا تارنما «اشکال یابی» است که نیاز به دقت بیشتر دارد.
عملگرها و توابع 
آشنایی با شرط ها و عملگرها 
اظهارات، متغیرها و ثابت‌ها 
ساختار وردپرس، ساخت فایل شیوه‌دهی 
درس دوم- ساخت فرم و انتقال داده از فرم به برگه نمایش 
فایل‌های الگو در پوسته وردپرس 
درس دوم- مقدمات کار با برچسب اسکریپت و ویژگی‌هایش 
درس اول- سینتکس و متغیرها 
آموزش تصویری قدم به قدم نصب و استفاده از وایبر روی گوشی اندرویدی 
دعا به در گاه خدا
دکوراسیون منزل
شینیون مو های باز و بسته
جدیدترین مدل های مانتو
مشکل کد فعالسازی در وایبر دسکتاپ 
رمان آنشرلی