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

 

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

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

با تمرین و تکرار ، به سادگی قادر خواهید بود انواع 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 پاک کنید و به جای آن کد زیر را قرار دهید :

  1. <?php get_header(); ?>


 

2. فایل footer.php :

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

  1. <?php get_footer(); ?>


 

3. فایل sidebar.php :

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

  1. <?php get_sidebar(); ?>


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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>عنوان سایت</title>
  5. <meta charset="utf-8">
  6. <link rel="stylesheet" type="text/css" href="آدرس فایل استایل">
  7. <?php wp_head(); ?>
  8. </head>
  9. <body>
  10. <?php get_header(); ?>
  11. <main>محتوای صفحه</main>
  12. <?php get_sidebar(); ?>
  13. <?php get_footer(); ?>
  14. </body>
  15. </html>


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

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

  1. <?php bloginfo('stylesheet_url'); ?>


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

  1. <?php bloginfo('name'); ?>


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

  1. <?php bloginfo('charset'); ?>


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

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

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


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

 

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

 

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

  1. /*
  2. Theme Name: نام قالب شما
  3. Description: توضیحات قالب
  4. Version: 1.0
  5. Author: نام نویسنده
  6. Author URI: آدرس کامل سایت نویسنده
  7. */


 

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

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

     موارد ضروری در فایل functions.php :

 

معرفی فهرست :

برای داینامیک کردن منو ها داخل فایل functions.php منوی مورد نظر خود را با یک اسم دلخواه (header-menu) معرفی می کنیم به صورت :

  1. function register_my_menus() {
  2. register_nav_menus(
  3. array('header-menu' => __( 'منوی اصلی' ))
  4. );}
  5. add_action( 'init', 'register_my_menus' );


 

معرفی ابزارک های داخل پوسته :

برای هر یک از ابزارک های موجود در سایت خود می بایست یک register_sidebar درون فایل fuctions ایجاد نمایید به صورت :

  1. register_sidebar( array(
  2. 'name' =>"Name-widget",
  3. 'id' => 'ID-widget',
  4. 'description' => "توضیح ابزارک",
  5. 'before_title' => '<span>',
  6. 'after_title' => '</span>',
  7. 'before_widget' => '<div >',
  8. 'after_widget' => '</div>'
  9. ) );


همچنین بخوانید...!

مشاهده : 98 بار

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

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