دوره رایگان تبدیل قالب HTML به وردپرس با پنل تنظیمات قسمت دوم

دوره رایگان تبدیل قالب HTML به وردپرس با پنل تنظیمات قسمت دوم

دوره تبدیل قالب HTML به وردپرس دوره رایگان تبدیل قالب HTML به وردپرس با پنل تنظیمات قسمت دوم

سلام عزیزان.

در این قسمت از سری آموزش های تبدیل قالب HTML به وردپرس به قسمت هدر قالب رسیدیم و میخواهیم فایل Header.php را از اول تا انتها بسازیم و کدها و توابع مهم و ضروری ورد پرس را درون فایل قرار دهیم.این قایل یکی از مهم ترین فایل ها بسیار ضروری قالب وردپرس هستش که اولین قایل هم به حساب می آیدوباید در هر قالب وردپرسی که طراحی می کنید به این قایل دقت کنید.این فایل اصولا کار فراخوانی صفحات جدا یا فایل های ضروری را به عهده دارد مثل استایل ها، جاوااسکریپت ها، فاویکون و… .

ساخت صفحه Header.php  :

برای ساخت این فایل ابتدا یک فایل php به نام Header.php در ریشه اصلی قالب بسازید و باید قسمت هدر فایل Index.php رو انتخاب و کات کنید و درون این فایل قرار دهید و درواقع ما میخواهیم قالب رو Break یا تکه تکه کنیم.

منظور ما از  قسمت هدر فایل Index.php یعنی قسمت بالایی قالب یا از منو بالاتر!

مثل قالب پایین :

هدر قالب دوره رایگان تبدیل قالب HTML به وردپرس با پنل تنظیمات قسمت دوم

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

خب در قسمت بعد باید فایل header.php که ساختید رو به فایل index.php بشناسونید خب تابع زیر را به جای قسمت هدری که کات کردید در فایل اینکس قرار بدید(به همین راحتی).

<?php get_header(); ?>

 تغییرات فایل Header.php :

کد های پایین رو در خط اول فایل قرار دهید تا قالب با وردپرس سازگار شود :

<html <?php language_attributes(); ?>">
<meta charset="<?php bloginfo( 'charset' ); ?>">

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

برای اینکار فایل ها که به طور استاندارد و HTML به حالت زیر هستند :

<link rel='stylesheet' id='tipsy-css'  href='css/tipsy.css' type='text/css' media='all' />

و شما باید تابع زیر را بعد از مسیر فایل قرار دهید :

<?php bloginfo('template_url'); ?>

یعنی باید به صورت زیر تیدیل شود :

<link rel='stylesheet' id='tipsy-css'  href='<?php bloginfo('template_url'); ?>/css/tipsy.css' type='text/css' media='all' />
توجه : برای فراخوانی فایل Style.css باید تابع زیر را به جای مسیر کامل فایل قرار دهید.
<?php bloginfo('stylesheet_url'); ?>

یعنی باید به صورت زیر شود :

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

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

<?php wp_head(); ?>

 دوره رایگان تبدیل قالب HTML به وردپرس با پنل تنظیمات قسمت اول

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

آموزش وردپرس وبلاگ سایت
آموزش و پروژه رایگان برنامه نویسی

یک نظر

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

    آقای شعبانی در ابتدا با تشکر فراوان و قدردانی از زحمات بی نهایت ارزشمند شما می خواستم چندتا سوال بپرسم از خدمتتون:
    ۱-من چجوری می تونم ارتفاع هدرم رو افزایش بدم؟
    – چون بنده می خوام زیر لوگوم تو هدر یه متن بنویسم که تو ارتفاع فعلی جا نمیشه
    ۲-چجوری می تونم بغل لوگوم تو سایت منظورم در سمت چپ لوگو هستش یه متن اضافه کنم؟

    این آدرس سایت بنده هستش:
    http://www.madadab.com

    مجددا ممنونم

دیدگاه خود را بیان کنید

طراحی سایت