برای شروع وارد پوشه قالبمان شوید و فایل index.php را در ویرایشگر متن باز کنید، سپس مرورگر را باز کرده و آدرس زیر را در آن بنویسید :
|
۱
|
localhost/wp
|
حال باید پوسته فعال قالب، که همان mytheme هست برای شما نمایش داده شود.
خب به سراغ فایل index.php می رویم :
در دومین خط از فایل زبان صفحه را تعیین کرده ایم، در وردپرس تابعی به نام language_attributes وجود دارد که به طور داینامیک اطلاعات زبان صفحه و direction آن را چاپ می کند. پس ما کلمه lang=”fa” را حذف کرده و این تابع را جایگزین می کنیم.
|
۱
۲
۳
|
<!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>
|
