آموزش تبدیل قالب HTML به وردپرس
سلام به همه شما دوستان عزیز و همراهان همیشگی لرن پارسی ، بــه دلیــل درخواســت بســیاری از دوســتان ، تصمیــم گرفتــم یــه مقالــه جامــع آموزشــی در رابطــه بــا تبدیــل html به پوسته ی وردپرس در مجله طراحــی وب لرن پارسی بنویســم . در این مقاله آموزش تبدیل قالب HTML به پوسته وردپرس رو خدمتتــون آموزش میــدم . کار بســیار راحتیــه فقــط بایــد کمی دقت داشــته باشــید و برای اینکار شما نیاز به هیچ دوره تبدیل قالب html به وردپرس ندارید.
فایل های اصلی که شما باید ایجاد کنید به شرح زیر هست :
index.php
Header.php
single.php
page.php
archive.php
footer.php
style.css
فایل های زیر هم میتونید به دلخواه به سیستم اضافه کنید ، البته اگر اضافه کنید کارتون استاندارد میشه .
۴۰۴.php
Comments.php
Functions.php
Search.php
Sidebar.php
Tags.php
category.php
category-id.php
author.php
چگونه فایل قالب HTML را به سایت وردپرس تبدیل کنیم ؟
یــه پوشــه بــه نــام قالبتــون ایجــاد کنیــد و فایل هــای اصلــی قالب رو در ایــن پوشــه بســازید . ایجــاد فایل هــم خیلــی راحتــه ، تــو پنجــره کلیــک راســت کنیــد و بــه گزینــه new رفتــه و یــک فایل txt ایجــاد کنیــد ، فایلــی بــه نــام New Text Document.txt ایجــاد میشــه ، حــالا ایــن فایل رو بــه نــام فایل مــورد نظرتــون تغییــر بدیــد مثــلا index.php ، یا اگر با نرم افزار خاصی کار می کنید به راحتی میتونید یک فایل php ایجاد کنید و اون رو نام گذاری کنید . فقط یادتون نره فایل هاتون و روی utf-8 تنظیم کنید .
این رو گفتم تا در جریان ایجاد یک پروژه قرار بگیرید .
حالا قدم به قدم و باهم یه پوسته ی وردپرس میسازیم ، پس فعلا نیازی نیست فایلی در پوشه ایجاد کنید .
فایل هــا و صفحــات رو توضیــح میــدم و کدهــای مربــوط بــه هــر صفحــه رو هــم قــرار میــدم ، فقــط کافیــه کدهــای php مربوط بــه وردپرس رو بین کــد html قالبتــون در جای مناســب قــرار بدید .
قبــل از اینکــه توضیحــات رو شروع کنــم یــه فایل بــه نــام index.php ایجاد کنید و کدهای html تون رو بطــور کامــل تــوی ایــن فایل قــرار بدیــد . حــالا همــراه بــا توضیحاتــی کــه در رابطــه بــا صفحــات میــدم ، قالبتــون رو پلــه پلــه ایجــاد کنیــد .
صفحه index.php
ایــن صفحــه ، صفحــه اصلــی شما محســوب میشــه و هــر آنچــه کــه تــو ایــن فایل قــرار بدیــد در صفحــه ی اصلــی شما بــه نمایــش درمیــاد . معمــولا تــو ایــن صفحــه کوئــری (کدهــای مربــوط بــه وردپرس) خاصــی قــرار نمیگیــره و فقــط بخــش هــای مختلــف قالب رو جداســازی مــی کنیــم تــا یــه قالب مرتــب و قابــل فهــم رو بســازیم .
بعــد از اینکــه فایل index.php تــون رو ایجــا کردیــد و کــد قالبتــون رو در ایــن فایل درج کردیــد ، بخــش هــای مختلــف رو در فایل هــای مختلــف ذخیــره کنیــد . بــه مثــال زیــر دقــت کنیــد ، یــه html ســاده قــرار میــدم و اون رو بــه قســمت هــای مختلــف تقســیم مــی کنــم .
<!DOCTYPE html> <html> <head> <title>iroschool wordpress template</title> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> <meta name=”description” content=””> <meta name=”keywords” content=””> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <header> <h1>لرن پارسی</h1> </header> <section> <h2>عنوان مطلب مورد نظر</h2> <article>. محتوای مطلب مورد در این مکان قرار میگیرد </article> </section> <footer>. تمامی حقوق این اثر متعلق به لرن پارسی می باشد </footer> </body> </html>
قســمت تــگ head رو کــه فعــلا کاری نداریــم چــون قــراره تــو فایل header.php درجشــون کنیــم . خــوب میایــم کــد هــدر قالبمــون رو تــو یــه فایل جداگانــه قــرار میدیــم و فایل رو siteHeader.php نــام گــذاری مــی کنیــم و در پوشــه ای بــه نــام include ذخیــره ســازی مــی کنیــم (فایل هــای فرعــی قالب رو کــه خودمــون ایجــاد مــی کنیــم مثــل همیــن بخــش هــای مختلــف قالب در پوشــه ای بــه نــام include قــرار میدیــم تــا بــا فایل هــای اصلــی قالب قاطــی نباشــن و در نهایــت یــک قالب مرتــب رو ایجــاد مــی کنیــم ).
حالا میایم این فایل رو در کد html فایل index.php به شکل زیر فراخوانی می کنیم.
<?php include(TEMPLATEPATH .’/include/siteHeader.php’); ?>
در نهایت کد html صفحه index ما به شکل زیر درمیاد :
<!DOCTYPE html> <html> <head> <title>iroschool wordpress template</title> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> <meta name=”description” content=””> <meta name=”keywords” content=””> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <?php include(TEMPLATEPATH .’/include/siteHeader.php’); ?> <section> <h2>عنوان مطلب مورد نظر</h2> <article>. محتوای مطلب مورد در این مکان قرار میگیرد </article> </section> <footer>. تمامی حقوق این اثر متعلق به لرن پارسی می باشد </footer> </body> </html>
به همین ترتیب هرچی بخش تو قالبتون دارید در فایل های مختلف ذخیره و در صفحات فراخوانی کنید .
ایــن کار یــه مزیــت هــم داره ، اینــه کــه وقتــی شما اطلاعــات یــه بخــش رو در یــک فایل ذخیــره مــی کنیــد و در صفحــات فراخوانــی مــی کنیــد ، زمانــی کــه ایــن بخــش نیــاز بــه تغییــر داشــته باشــه ، دیگــه لازم نیســت همــه ی صفحــات رو بــاز کنیــد و ایــن بخــش رو تغییــر بدیــد ، کافیــه فایلــی کــه ایــن بخــش رو تــوش ذخیــره کردیــد تغییــر بدیــد بصــورت خــودکار تــو همــه ی صفحــات تغییــر میکنــه ، چــون همــه ی صفحــات دارن اطلاعــات رو از فایل مــورد نظــر میخونــن .
در همین جا صفحه ی index.php رو رها می کنیم و به سراغ معرفی فایل header.php میریم .
فایل header.php
تمامــی کدهــای بیــن دو تــگ head رو در ایــن فایــل قــرار میدیــد و بــا کــد زیــر فایــل header.php کــه یکــی از فایــل هــای اصلــی قالب هســت رو در صفحــه index.php فراخوانــی مــی کنیم :
<?php get_header(); ?>
چون یکی از فایل های اصلی قالب هست کد فراخوانی پیشفرض و تعریف شده ای داره .
حالا به جزئیات کدها در فایل header.php میپردازیم :
برای نمایش عنوان سایت در قالب از کد زیر استفاده می کنیم :
<?php bloginfo(‘name’); ?> | <?php wp_title(); ?>
در صورتی که جی کوئری یا فایل css در head تعریف کرده باشید ، برای اینکه به درستی شناسایی بشه کد زیر رو قبل از نام فایل درج می کنید :
<?php bloginfo(‘template_url’); ?>/
کدهای زیر هم باید بصورت پیشفرض در فایل header.php باشن ، پس این کدهارم در این فایل قرار میدیم :
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0” href=”<?php bloginfo(‘rss2_url’); ?>” /> <link rel=”alternate” type=”text/xml” title=”RSS .92” href=”<?php bloginfo(‘rss_url’); ?>” /> <link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3” href=”<?php bloginfo(‘atom_url’); ?>” /> <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” /> <?php wp_get_archives(‘type=monthly&format=link’); ?> <?php wp_head(); ?>
در نهایت فایل header.php قالب ما به شکل زیر درمیاد :
<head> <title><?php bloginfo(‘name’); ?> | <?php wp_title(); ?></title> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> <meta name=”description” content=””> <meta name=”keywords” content=””> <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_url’); ?>/style.css”> <link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0” href=”<?php bloginfo(‘rss2_url’); ?>” /> <link rel=”alternate” type=”text/xml” title=”RSS .92” href=”<?php bloginfo(‘rss_url’); ?>” /> <link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3” href=”<?php bloginfo(‘atom_url’); ?>” /> <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” /> <?php wp_get_archives(‘type=monthly&format=link’); ?> <?php wp_head(); ?> </head>
دقت کنید که کد <?:()php wp_head?> در فایل header.php وجود داشته باشه .
پس کدهای head رو در فایل header.php ذخیره می کنیم و در index.php فراخوانی می کنیم ، در نهایت کد صفحه index.php ما به شکل زیر درمیاد :
<!DOCTYPE html> <html> <?php get_header(); ?> <body> <?php include(TEMPLATEPATH .’/include/siteHeader.php’); ?> <section> <h2>عنوان مطلب مورد نظر </h2> <article> . محتوای مطلب مورد در این مکان قرار میگیرد </article> </section> <footer> . تمامی حقوق این اثر متعلق به لرن پارسی می باشد </footer> </body> </html>
کدهــای مربــوط بــه فوتــر در ایــن فایــل قــرار میگیــره . پــس مــا هــم کدهــای مربــوط بــه فوترمــون رو در فایــل footer.php ذخیــره مــی کنیــم و بــا اســتفاده از کــد زیــر فایــل footer رو در صفحــه index.php فراخوانــی مــی کنیــم :
<?php get_footer(); ?>
خوب با این حساب صفحه index.php مون رو ایجاد کردیم و تمام شد ، میتونید کد این صفحه رو ببینید :
<!DOCTYPE html> <html> <?php get_header(); ?> <body> <?php include(TEMPLATEPATH .’/include/siteHeader.php’); ?> <section> <h2>عنوان مطلب مورد نظر </h2> <article> . محتوای مطلب مورد در این مکان قرار میگیرد </article> </section> <?php get_footer(); ?> </body> </html>
تا اینجا ما یک پوشه با فایل های مورد نظر به شکل زیر ایجاد کردیم :
فایل style.css
ایــن فایــل اصلــی css قالب محســوب میشــه ، لازم نیســت حتــا اســتایل هاتــون و تــو ایــن فایــل تعریــف کنیــد ، فقــط بایــد مشــخصات قالب رو در ایــن فایــل بیــن دو علامــت /* … */ بــه صــورت زیــر درج کنیــد و حتــا هــم بایــد تــوی روت قالبتــون قــرار بگیــره تــا سیســتم وردپرس اون رو بتونــه شناســایی کنــه در صورتــی کــه ایــن فایــل وجــود نداشــته باشــه پوســته ی شما نصــب نخواهــد شــد :
/* Theme Name: Template Name Theme URI: http://www.iroschool.com/ Description: این پوسته توسط لرن پارسی طراحی و پیاده سازی شده است Version: 1 Author: ahmad kalhori URI: http://www.learnparsi.com*/
مشخصات بالا ، در صفحه ی نمایش پوسته ها نمایان میشه . پس این فایل رو هم فراموش نکنید .
فایل single.php
ایــن صفحــه ، صفحــه ی نمایــش محتــوای مطالــب شما محســوب میشــه . مثــلا کاربــر روی لینــک یــک مطلــب کــه کلیــک مــی کنــه ، نمایــش محتــوای اون مطلــب در ایــن فایــل صــورت میگیره .
حــالا بــرای قالبــی کــه داریــم میســازیم ، ایــن فایــل رو هــم ایجــاد مــی کنیــم . یــه کپــی از فایــل index.php تــون بگیریــد و اســم اون رو بــه single.php تغییــر بدیــد . حــالا بــرای نمایــش محتــوای مطالــب بایــد از کــد زیــر اســتفاده کنیــد :
<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post();?> .... <?php endwhile; ?> <?php else :; ?> .... <?php endif; ?>
حتــا کــد html مربــوط بــه باکــس نمایــش محتواتــون بایــد داخــل ایــن کــد قــرار بگیــره در غیــر ایــن صــورت توســط سیســتم وردپرس شناســایی نمیشــه و نامعتــبر محســوب میشــه ، حــالا ایــن کــد رو در قالب خودمــون در فایــل single.php پیــاده مــی کنیــم :
<!DOCTYPE html> <html> <?php get_header(); ?> <body> <?php include(TEMPLATEPATH .’/include/siteHeader.php’); ?> <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post();?> <section> <h2> عنوان مطلب مورد نظر </h2> <article> . محتوای مطلب مورد در این مکان قرار میگیرد </article> </section> <?php endwhile; ?> <?php else :; ?> <section> <h2> !خطا </h2> <article> . مطلب مورد نظر وجود ندارد </article> </section> <?php endif; ?> <?php get_footer(); ?> </body> </html>
میخوایم اجزای مطلب مثل عنوان ، محتوا ، برچسب ها و … رو نمایش بدیم .
برای نمایش عنوان از این کد زیر استفاده می کنیم .
<?php the_title(); ?>
برای نمایش محتوا از کد زیر استفاده می کنیم .
<?php the_content(‘’); ?>
برای ای نمایش برچسب ها از از کد زیر استفاده می کنیم .
<?php the_tags( ‘ برچسب ها : ‘, ‘, ‘, ‘’); ?>
برای نمایش تاریخ ارسال مطلب از کد زیر استفاده می کنیم .
<?php the_time(‘ d / m / Y’) ; ?>
برای نمایش موضوع مطلب از کد زیر استفاده می کنیم .
<?php the_category(‘ , ‘)?></p>
در نهایت فایل single.php ما به شکل زیر درمیاد :
<!DOCTYPE html> <html> <?php get_header(); ?> <body> <?php include(TEMPLATEPATH .’/include/siteHeader.php’); ?> <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post();?> <section> <h2><?php the_title(); ?></h2> <article><?php the_content(‘’); ?></article> <p> : موضوع مطلب <?php the_category(‘ , ‘)?></p> <p> تاریخ ارسال : <?php the_time(‘ d / m / Y’) ; ?></p> <p><?php the_tags( ‘ برچسب ها : ‘, ‘, ‘, ‘’); ?></p> </section> <?php endwhile; ?> <?php else :; ?> <section> <h2> خطا !</h2> <article> مطلب مورد نظر وجود ندارد .</article> </section> <?php endif; ?> <?php get_footer(); ?> </body> </html>
خــوب تــا اینجــا بخــش عمــده ای از قالب رو ایجــاد کردیــم . صفحه ی اصلــی و صفحــه نمایــش محتــوای مطالــب رو ســاختیم ، حــالا باید یــه صفحــه بــرای نمایــش محتــوای برگــه هــا ایجــاد کنیم .
صفحه page.php
در ایــن صفحــه محتــوای برگــه هــا نمایــش داده میشــه . پــس مــا هــم بــرای قالبمــون بایــد همچیــن صفحــه ای رو داشــته باشــیم . از فایــل single.php یــه کپــی بگیریــد و نــام اون رو بــه page.php تغییــر بدیــد . حــالا همونطــور کــه محتــوای مطالــب رو میتونیــد ببینیــد ، محتــوای یــک برگــه رو هــم میتونیــد ببینیــد 🙂 بلــه دقیقــا کــد نمایــش محتــوا در برگه ها هم به شــکل single.php هســت . فقــط مــا در برگــه هــا قســمت هایــی مثــل موضــوع یــا تاریــخ ارســال یــا برچســب هــارو لازم نداریــم ، پــس ایــن قســمت هــارو در فایــل page.php حــذف کنیــد .
حالا که صفحه ی نمایش محتوای برگه هارو هم ساختیم میریم سراغ یه صفحه که آرشیو مطالبمون رو داشته باشیم .
صفحه archive.php
آرشیو مطالب در این صفحه نمایش داده میشه که میتونید مطالب آرشیو شده رو صفحه بندی هم بکنید .
پس ماهم برای قالبمون این صفحه رو ایجاد می کنیم . از فایل page.php یه کپی بگیرید و اسم اون رو archive.php بگذارید . از کد زیر استفاده می کنیم :
<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post();?> <?php endwhile; ?> <?php endif; ?>
برای اینکه بتونیم مطالب رو صفحه بندی کنیم افزونه ی wp_pagenavi رو نصب می کنیم و کد زیر رو در قالبمون قرار میدیم :
<?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?>
این کد باید قبل از اینکه شرطتون تموم بشه قرار بگیره :
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post();?>
<?php endwhile; ?>
<?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?>
<?php endif; ?>
بــرای نمایــش محتــوای مطالــب دقیقــا مثــل صفحــه ی single یــا page عمــل مــی کنیــم بــا ایــن تفــاوت کــه در صفحــه آرشــیو بایــد خلاصــه مــتن و لینــک ادامــه مطلــب نمایــش داده بشــه . پــس از کــد هــای زیــر اســتفاده مــی کنیــم :
کد نمایش خلاصه یا چکیده ی متن :
<?php the_excerpt(); ?>
کد نمایش لینک مطلب جهت قرار گیری در ادامه مطلب :
<?php the_permalink() ?>
در نهایت صفحه آرشیو قالب ما به شکل زیر درمیاد :
<!DOCTYPE html>
<html>
<?php get_header(); ?>
<body>
<?php include(TEMPLATEPATH .’/include/siteHeader.php’); ?>
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post();?>
<section>
<section>
<article> <?php the_excerpt(); ?></article>
<p><a href=”<?php the_permalink() ?>”>
</section>
<?php endwhile; ?>
<?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?>
<?php endif; ?>
<?php get_footer(); ?>
</body>
</html>
خوب دوستان تا اینجا ما یه قالب کامل رو طراحی کردیم .
پوشه ی قالب ما به شکل زیر ایجاد شد :
در ادامه صفحات دیگر قالب وردپرس رو خدمتتون توضیح میدم ، در صورت نیاز میتونید از این صفحات هم استفاده کنید .
صفحه php .404
زمانی که کاربر صفحه ای رو در مرورگر باز میکنه که در سیستم شما وجود نداره ، صفحه ۴۰۴ نمایش داده میشه . این صفحه میتونه یه html ساده باشه .
فایل comments.php
در این صفحه شما فرم دیدگاه هاتون رو قرار میدید .
فایل functions.php
در ایــن فایــل تنظیماتــی رو کــه مربــوط بــه سیســتم میشــه میتونیــد پیــاده کنیــد. مثــلا اگــر بخوایــن قابلیــت ابــزارک رو بــه قالب اضافه کنیــد از طریــق این فایــل ایــن کار رو انجــام میدید یــا زمانــی هــم کــه فــرم دیــدگاه هــارو در قالبتــون درج مــی کنیــد ، تنظیــات فــرم رو در ایــن فایــل لحــاظ مــی کنید .
صفحه search.php
زمانی که کاربر عبارتی رو جستجو می کنه ، نتایج جستجو در این صفحه نمایش داده میشه . کدهای php در این صفحه دقیقا شبیه به صفحه archive.php هست.
کدهای سایدبار قالبتون رو در این فایل قرار میدید . و با استفاده از کد زیر میتونید این بخش رو در صفحاتتون فراخوانی کنید :
<?php get_sidebar(); ?>
زمانی نمایش داده میشه که روی یک برچسب کلیک می کنید .
صفحه category.php
زمانی نمایش داده میشه که وارد یک موضوع بشید . در صورتی که این فایل در قالب وجود نداشته باشه سیستم از فایل archive.php استفاده میکنه .
صفحه category-id.php
زمانی که بخواین یک گرافیک خاص برای یک موضوع خاص در نظر بگیرید ، id موضوع مورد نظر رو بجای id در نام فایل قرار میدید .
صفحــه نویســنده زمانــی بــه شــا نمایــش داده میشــه کــه بخوایــن مشــخصات یــک نویســنده رو مشــاهده کنیــد . مثــلا روی اســم نویســنده کلیــک مــی کنیــد و میخوایــن مشخصاتشــو ببینیــد ، بصــورت پیشــفرض ایــن صفحــه رو براتــون نمایــش میــده .
خــوب دوســتان در ایــن مقالــه نحــوه ی تبدیل قالب HTML به وردپرس رو خدمتتــون آموزش دادم ، در مقاله بعــدی نحــوه ی فعــال ســازی ابــزارک در قالب و ایجــاد فــرم دیــدگاه هــا بــرای مطالــب رو خدمتتــون آموزش میــدم . پــس بــا مــا همــراه باشــید:)
امیدوارم که مقاله آموزش تبدیل قالب HTML به وردپرس مورد استفادتون قرار گرفته باشه . موفق و پاینده باشید .
عالی بود ولی ای کاش همرو به شکل کامل مثل index و .. توضیح میدادید مثلا داخل فانکشن چه کدهایی ضروری هستن و … تا قالب کامل باشه.. من که خیلی بهش نیاز دارم