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

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

برای شروع وارد پوشه قالبمان شوید و فایل index.php را در ویرایشگر متن باز کنید، سپس مرورگر را باز کرده و آدرس زیر را در آن بنویسید :

<!doctype html>
<html <?php language_attributes(); ?>>
<head>

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

در خط چهارم charset صفحه را به صورت دستی تعیین کردیم، اما تابع bloginfo در وردپرس، همین کار را نیز برای ما انجام خواهد داد.

پس کد زیر را نیز بجای خط چهارم جایگزین کنید

<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>">

برای title یا همون عنوان صفحه نیز از کد زیر استفاده می کنیم، چونکه titleای که قرار داده ایم به صورت ثابت خواهد بود و اگر به صفحات دیگر وبسایت نیز رجوع کنیم نام همان خواهد بود که بهتر  است نام هر صفحه مختص آن باشد تا کاربر بداند در کدام صفحه قرار دارد. پس باید کد زیر را جایگزین کرد که نام صفحه به صورت داینامیک گرفته شود و در title چاپ شود :

<title><?php
 
global $page, $paged;
 
wp_title( '|', true, 'right' );
 
bloginfo( 'name' );
 
$site_description = get_bloginfo( 'description', 'display' );
 
if ( $site_description && ( is_home() || is_front_page() ) )
 
echo " | $site_description";
 
if ( $paged >= 2 || $page >= 2 )
 
echo ' | ' . sprintf( __( 'Page %s', 'mytheme' ), max( $paged, $page ) );
 
?></title>

با استفاده از این کد نام وبسایت، سپس یک خط جدا کننده (|) سپس نام صفحه را چاپ خواهیم کرد. درضمن اگر در صفحه اصلی باشیم، بجای نام صفحه توضیح سایت قرار خواهد گرفت.

مرحله بعدی قرار دادن قرار دادن یک meta tag با مقدار توضیح سایت در head صفحه است که برای موتورهای جستجو مفید خواهد بود. برای این کار کد زیر را در head صفحه بعد title قرار دهید

<meta name="description" content="<?php bloginfo('description'); ?>">

کار بعدی متصل کردن فایل style هست، پس بایستی href آن را تغییر دهیم، اما اینکار به صورت دستی انجام پذیر نیست، و باید از تابع وردپرس مخصوص آن استفاده کرد پس آدرسی که برای فایل style نوشتیم را پاک کرده و مقدار زیر را جایگزین آن کنید :

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

پس از قرار دادن کد فوق، صفحه را در مرورگر ریفرش کرده تا نتیجه را ببنید، حتما متوجه شده اید که هیچ تصویری در قالب نمایش داده نشده است، پس حال باید مشکل آدرس تصاویر را نیز حل کنیم. پس فایل style.css را در ویرایشگر کد باز کنید :

ابتدا از فونت ها شروع می کنیم و آدرس آن ها را به صورت زیر تغییر می دهیم :

@font-face {
  font-family: 'b nazanin';
  src: url('css/BNazanin.eot') format('eot'),  /* IE6,8 */
  url('css/BNazanin.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
  url('css/BNazanin.ttf') format('truetype');  /* Saf3?5, Chrome4+, FF3.5, Opera 10+ */
}

چونکه فونت ها درون پوشه css قرار دارند، قبل از نام آن ها کلمه css/ را اضافه کرده ایم، (البته می تونید نام فولدر رو به fonts نیز تغییر دهید).

پس از این کار هر کجای قالب که از تصویر استفاده کرده ایم (../) را از آدرس پاک کنید مثلا برای body آدرس به شکل زیر تغییر خواهد کرد.

body {
  background: url('images/body-bg.png');
}

برای مابقی تصاویر نیز همین کار را انجام دهید تا همه تصاویر به درستی لود شوند.

اگر به درستی اینکار را انجام داده اید فقط تصاویر بندانگشتی، تبلیغات، و اطلاعات پست، تصاویرشان لود نشده است ، آن هم به این دلیل است که آدرس آن ها در فایل index قرار دارد. پس دوباره به فایل index.php بر می گردیم

در وردپرس تابعی به نام :

bloginfo('template_url');

که آدرس پوسته را چاپ می کند. ما باید این تابع را در هر جا که از تگ img استفاده کردیم در قبل از آدرس قرار دهیم تا آدرس تصویر کامل شود. از تصاویر بند انگشتی شروع می کنیم.

<a href="#"><img src="<?php bloginfo('template_url'); ?>/images/facebook.png" width="32" height="32" alt="facebook" title="وبسایت من در فیسبوک" /></a>

دقت کنید که حتما بعد از تابع یک / قرار دهید. بقیه تصاویر را نیز به همین صورت لود کنید.

پس از انجام این کار همه تصاویر قالب باید لود شده باشند.

باز به head صفحه بر می گردیم و کدهای زیر را پس از لینک style قرار می دهیم :

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
 
<link rel="alternate" type="appliction/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf(__( 'آخرین مطالب %s', 'mytheme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
 
<link rel="alternate" type="appliction/rss+xml" href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php printf(__( 'آخرین نظرات %s', 'mytheme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
 
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> 

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

کد کامل head :

<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>">
 
<title><?php
 
global $page, $paged;
 
wp_title( '|', true, 'right' );
 
bloginfo( 'name' );
 
$site_description = get_bloginfo( 'description', 'display' );
 
if ( $site_description && ( is_home() || is_front_page() ) )
 
echo " | $site_description";
 
if ( $paged >= 2 || $page >= 2 )
 
echo ' | ' . sprintf( __( 'Page %s', 'mytheme' ), max( $paged, $page ) );
 
?></title>
 
<meta name="description" content="<?php bloginfo('description'); ?>">
 
<link rel="stylesheet" media="screen" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
 
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
 
<link rel="alternate" type="appliction/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf(__( 'آخرین مطالب %s', 'mytheme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
 
<link rel="alternate" type="appliction/rss+xml" href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php printf(__( 'آخرین نظرات %s', 'mytheme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
 
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
 
</head>

 

خوبه تا اینجا کافیه

در جلسع بعد هدر قالب را ایجاد خواهیم کرد.

البته با اشتیاق

نمونه ای از آخرین کارهای ما

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اگر ربات نیستی جواب بده *

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت