آموزش تبدیل قالب html به قالب وردپرس

تبدیل قالب html به قالب وردپرس

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

آنچه در این مقاله می خوانید ...

تبدیل قالب html به قالب وردپرس! تبدیل فایل html به فایل php! جدا کردن کد های HTML و قرار دادن آنها در فایل های مرتبط! 1. فایل header.php :! 2. فایل footer.php :! 3. فایل sidebar.php :! معرفی فایل استایل به index.php :! افزودن اطلاعات قالب به فایل style.css! افزودن اسکرین شات قالب! موارد ضروری در فایل functions.php :! معرفی فهرست :! معرفی ابزارک های داخل پوسته :!

قالب وردپرس

با تمرین و تکرار ، به سادگی قادر خواهید بود انواع HTML را با وردپرس سازگار کرده و از سایت استاتیک خود، یک سایت داینامیک تمام عیار بسازید.
برای این کار کافیست ابتدا xamp یا wamp را برروی سیستم خود نصب و وردپرس را بر روی آن راه اندازی کنید. در xamp و در فولدری که وردپرس را در آن نصب کردید پوشه theme را پیدا نموده و در آن فولدری با نام دلخواه (انگلیسی) برای قالب وردپرس خود ایجاد کنید.
سپس در فولدری که ساخته اید فایل های اصلی وردپرس را ایجاد نمایید :

index.php
functions.php
style.css

تبدیل فایل html به فایل php

سپس یک ادیتور متن حرفه ای مانند ++nodpad را نصب کرده و فایل های اصلی وردپرس را بر روی آن باز کنید حال محتوای داخل فایل html خود را درون index.php و استایل های خودتان را درون فایل style.css کپی کنید.

توجه : حتما همه ی فایل های خود را با اینکودینگ UTF-8 ایجاد کنید. برای انجام این کار در ++NotePad میتوانید از منوی Encoding گزینه ی Encode in UTF-8 یا در نسخه های قدیمی تر، گزینه Encode in UTF-8 Without BOM را انتخاب نمایید.

جدا کردن کد های HTML و قرار دادن آنها در فایل های مرتبط

حالا وقت آن رسیده که کد های HTML قالب وردپرس را تقسیم کنیم. فایل ( index.php ) را در ویرایشگر متنی باز کرده و کد های داخل آن را در فایل هایی به شکل زیر قرار دهید :

1. فایل header.php :

از قسمت body سند html خود هدر سایت خود را درون این فایل قرار داده و آن را از index.php پاک کنید و به جای آن کد زیر را قرار دهید :

<?php get_header(); ?>

2. فایل footer.php :

از قسمت body سند html خود فوتر سایت خود را درون این فایل قرار داده و آن را از index.php پاک کنید و به جای آن کد زیر را قرار دهید :

<?php get_footer(); ?>

3. فایل sidebar.php :

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

<?php get_sidebar(); ?>

نکته : از این پس در هر برگه دیگری که می خواهید به پوسته خود اضافه کنید به جای قرار دادن هر یک از بخش های اشاره شده ( هدر ، فوتر ، سایدبار ) فقط کدهای آن ها را قرار می دهیم .

همانطور که مشاهده می کنید فایل index.php شما به شکل زیر در آمده است :

<!DOCTYPE html>
<html>
<head>
<title>عنوان سایت</title>
<meta charset=”utf-8″>
<link rel=”stylesheet” type=”text/css” href=”آدرس فایل استایل”>
<?php wp_head(); ?>
</head>
<body>
<?php get_header(); ?>
<main>محتوای صفحه</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
</body>
</html>

معرفی فایل استایل به index.php :

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

<?php bloginfo(‘stylesheet_url’); ?>

برای داینامیک کردن عنوان سایت آن را حذف کرده و کد زیر را قرار دهید :

<?php bloginfo(‘name’); ?>

برای داینامیک کردن کدینگ سایت نیز می توانید از کد زیر به جای واژه utf-8 استفاده کنید :

<?php bloginfo(‘charset’); ?>

پس از جایگذاری تمامی موارد فوق در جای صحیح خود اگر سایت را درون xamp مشاهده کنید می بینید سایت شما تقریبا مشابه سند html اولیه تان شده است فقط در قسمت هایی که از تگ img استفاده کردید عکس های شما نمایش داده نمی شوند .

برای نمایش تمامی عکس های سایت ابتدا آن ها را به صورت کامل داخل فولدر پوسته خود کپی کرده و از کد زیر برای معرفی آدرس آن ها (src) استفاده کنید:

<?php bloginfo(‘template_url’); ?>

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

افزودن اطلاعات قالب به فایل style.css

جهت افزودن اطلاعات مربوط به قالب وردپرس خود، کد زیر را در بالاترین بخش فایل style.css قرار دهید:

/*
Theme Name: نام قالب شما
Description: توضیحات قالب
Version: 1.0
Author: نام نویسنده
Author URI: آدرس کامل سایت نویسنده
*/

کلیات CSS

افزودن اسکرین شات قالب

حتما مشاهده کرده اید که وقتی در وردپرس از منوی نمایش به زیر منوی پوسته ها مراجعه میکنید، قالب هایی که در این بخش به شما نمایش داده میشوند، هر یک دارای یک تصویر پیش نمایش هستند. در این مرحله میخواهیم این تصویر پیش نمایش را در قالب خود قرار دهیم. تصویر مورد نظر باید تصویری با فرمت png و اندازه ی 880 در 660 پیکسل باشد. به سادگی میتوانید تصویری با این مشخصات فوق و با نمای دلخواه خود را ایجاد کرده و با نام screenshot.png در فولدر قالب وردپرس قرار دهید.