طراحی قالب وردپرس (فصل دوم – جلسه اول) : توابع Head پوسته

‏  5 دقیقه
۱۳ شهریور ۱۳۹۲
طراحی قالب وردپرس (فصل دوم – جلسه اول) : توابع Head پوسته

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

برای شروع وارد پوشه قالبمان شوید و فایل 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>

بسیار خب. آموزش این جلسه نیز به پایان رسید، در جلسه بعدی هدر قالب را ایجاد خواهیم کرد.

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

Shahoo

با سلام

برای css از تابع bloginfo(‘rss2_url’); استفاده می کنیم برای آدرس دهی جاوا اسکریپت از چه تابعی باید استفاده کنیم؟؟

لقمان آوند

متوجه منظورتون نشدم . واضح تر بیان کنید .

WEBIG

سلام
ممنون از تمام زحماتتون
فق یکم واسم تعجبه ! قبل از این سری آموزشی به شکل دیگری بود . یعنی همین سری آموزشی طراحی قالب وردپرس به شکل دیگری بود . فایل psdی هم در کار بود . نمی دونم اشتباه می کنم یا نه ولی این شکلی نبود ! فکر کنم تغیر دادید 😉
در کل دمت کتری

سجاد دریس

سلام.
اون سری آموزشی طراحی قالب html هست، که ابتدا psd رو هم طراحی کردیم.

بهرام

فایل جاوا اسکریپت رو هم به اولش همون تکه کد php bloginfo رو اضافه کردم مثل تصاویر و استایل اما کار نمیکنه، روش دیگه داره؟

سجاد دریس

خیر روش دیگه ای نیست، باید به همین صورت عمل کنه.
بین آدرس فایل ها و تابع bloginfo یک / قرار دادین؟

بهرام

فایل جاوا اسکریپت رو به این صورت اضافه کردم اشتباه؟ چون کار نمیکنه 🙁
<script src="js/script.js”>

سجاد دریس

کدتون رو در انجمن ارسال کنید

بهرام

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

سجاد دریس

خط های شماره 1و5و7

بهرام

در مورد حذف /.. از اول آدرس فایل های فونت و تصاویر تو فایل css هم وقتی /.. رو حذف میکنم IDE خطا میگیره. اشکال نداره؟ طبیعیه؟

سجاد دریس

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

بهرام

سلام خسته نباشید
اسم فایل استایل حتما باید style.css باشه؟ و حتما باید کنار فایل index باشه؟ توی آموزش واسه این حالت گفتین که فایل استایل style.css هست و جاش هم کنار فایل index تو پوسته های خود وردپرس هم که نگا کردم اینجوریه، حالا اگه اسم و آدرس فایلمون فرق کنه میشه یا نه؟ اگه میشه لطفا دستورش رو واسه مثال قرار بدید. ممنون

سجاد دریس

سلام.
بله، باید نام فایل style و درکنار فایل های php باشه، استاندارد قالب های wordpress اینجوریه، و اگه غیر از این حالت باشه، بعضا وردپرس پوسته رو به عنوان پوسته ی خراب، در نظر می گیره.

بهرام

واسه همه فایل های css اینجوریه یا فقط فایل استایل اصلی چون من یک فایل css دیگه هم دارم که ماله اسلایدر هست. اونم باید منتقل بشه؟

سجاد دریس

فقط فایل style اصلی.

کیوان علی محمدی

خوب بله شما باید اینو ست کنی اما وقتی پوسته ما فارسی هست حتما نیازی نیست از این تابع استفاده کنیم.این تابع بر اساس زبان وردپرس اون کدهای لازم رو چاپ میکنه.ولی وقتی میدونم دایرکشن من rtl زوبان هم fa-IR هستش نیازی نیست یه کوئری به دیتابیس بزنم تا اینو دریافت کنم و نشون بدم.

سجاد دریس

سلام خب همین دیگه. توی متن مطلب هم گفتم direction و lang تگ html رو تعیین میکنه.
وردپرسی که نصب کردید فارسی باشه direction رو rtl و lang رو fa اگرم انگلیسی بود direction رو ltr و lang رو en قرار میده.

hamed_z2001

کیوان میشه بیشتر توضیح بدی ؟؟؟
آخه وقتی استفاده میکنم بالت ها و … (چون اول قالب بهم ریختس بالت ها رو نشون میده) راست چینه اما اگه نذارم چپ چین میشه.کار این تابع چیه؟؟از کجا میفهمه که باید فارسی باشه یا انگلیسی؟؟؟

hamed_z2001

بله سجاد جان ، تنها کاری کرد این بود که قالب چون اول بهم ریخته است باالت ها و … رو از راست میچینه و اگه نباشه چپ چین میکنه !!!