آموزش تبدیل html به وردپرس
ما در این مقاله توضیح کوتاهی برای آموزش تبدیل html به وردپرس ارائه میدهیم. شاید برای شما هم پیش آمده باشد که قالب html زیبایی داشته باشید و بخواهید که قالب وردپرس آن را طراحی کنید و سایت خود را با آن پیاده سازی کنید البته در صورتی که اطلاعات کمی از html و css دارید و تمایل یا دانش کافی ندارید که خودتان این کار را انجام دهید می توانید به ما (سفارش طراحی سایت با وردپرس تارا وب) بسپارید ما قالب html شما را به وردپرس تبدیل می کنیم و حتی اگر بخواهید سایر کارهای آپلود سایت و حتی نوشتن محتواهای اولیه را برایتان انجام می دهیم.
اما در صورتی که می خواهید خودتان این کار را انجام داده و قالب html خود را به وردپرس تبدیل کنید ما در این نوشته راهنمایی مختصری برایتان قرار داده ایم که البته حالت کلی دارد و اگر روال کار را یادبگیرید می توانید هر قالب html را به وردپرس تبدیل نمایید.
ما مراحل کار را به صورت گام هایی نوشته ایم که البته سعی کنید به همین ترتیب انجام دهید تا با روال کار راحت تر آشنا شوید.
- ایجاد پوشه قالب وردپرس در آموزش تبدیل html به وردپرس
- ایجاد فایل style.css در تبدیل html به وردپرس
- ایجاد فایل index.php در تبدیل html به wp
- ایجاد فایل header.php
- بدنه فایل sidebar.php
- ایجاد بدنه فایل footer.php
- بدنه فایل archive.php
- بدنه فرم جستجو درآموزش تبدیل html به وردپرس
- فایل function.php
- طراحی سایت ورپرسی با تبدیل html به وردپرس
ایجاد پوشه قالب وردپرس در آموزش تبدیل html به وردپرس
برای شروع کار باید یک فولدر که معمولا نام قالبمان است در آدرس wordpress/wp-content/themes می سازیم. سپس فایلهای index.php و header.php، footer.php، styles.css و sidebar.php و function.php را در آن ایجاد می کنیم. حال برای شکل دادن به فایل index.php از دستورات زیر استفاده می کنیم :
ایجاد فایل style.css در تبدیل html به وردپرس
حال برای شکل دادن به فایل style.cssابتدا فابلstyle.css یا main.css قالب htmlرا که می خواهید آن را به وردپرس تبدیل کنید، پیدا کنید و کد زیر را به ابتدای آن اضافه نمایید. و سپس محتویات آن را در style.css کپی نمایید.
برای فایل styles.css از روش زیر استفاده کنید :
/*
Theme Name : Your template name
Theme URL : Your template url
Description : Descriptions
Author : Author name
Author URL : Author url
Version : Template version
*/
ایجاد فایل index.php در تبدیل html به wp
ساختار یک فایل index.php معمولا بدین صورت است :
<html>
<head>
<title>عنوان سایت شما </title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div id=”container”>
<div id=”header”> Header Information </div>
<div id=”navigation”>Your Navigation Links</div>
<div id=”content”>Your Content…</div>
<div id=”sidebar”>Your Sidebar</div>
<div id=”footer”>Your Footer </div>
</div>
</body>
</html>
که ما می توانیم فایل index.php را ساده تر کنیم هدر و فوتر و اسلایدر آن را جدا کرده و در فایل های جداگانه تکمیل کنیم به این صورت که از ابتدای html تا انتهای تگ head/ را در header.php کپی می کنیم و انتهای فایل هم از footer تا /html را در footer.php کپی می کنیم. نحوه ایجاد این فایل ها را در ادامه توضیح می دهبم. حال فایل index.php را اینگونه بازنویسی می کنیم:
<?php get_header();?>
//در اینجا بدنه سایت قرار می گیرد.که در ادامه مدل ساده آن را توضیح می دهیم
<?php get_sidebar(); ?>
<?php get_footer(); ?>
برای بدنه سایت در ساده ترین حالت ممکن کد زیر را قرار می دهیم:
<?php if(have_posts()): ?>
<?php while(have_posts()):the_post(); ?>
<a hreff=” <?php the_permalink(); ?> “ > <?php the_title(); ?> </a>
<p> <?php the_content; ?></p>
<?php endwhile; ?>
<?php endif; ?>
خط اول چک می کند که آیا پستی وجود دارد یا نه و اگر وجود داشته باشد آنرا نمایش می دهد و این حلقه را تا زمانی که پستی وجود داشته باشد ادامه می دهد:
<?php the_title(); ?>
توسط این دستور می توان عنوان پستها را نمایش داد و باید بین دستورات the_post و endwhile قرار گیرد. برای اینکه هر title به پست خودش لینک شود
توسط دستور زیر هم محتوای هر پست نمایش داده می شود :
<?php the_content; ?>
مشخصات پست :
در ادامه آموزش تبدیل html به وردپرس، توسط دستورات زیر می توان اطلاعات جانبی مربوط به پستها را نمایش داد، اطلاعات بین تگ زیر قرار می گیرند :
<p class=”postmetadata”>……</p>
برای نمایش عبارت Filled Under از دستور زیر استفاده می کنیم :
<?php _e(‘Filled Under#58;’); ?>
برای مشخص کردن اینکه این پست مربوط به کدام دسته بندی است از دستور زیر استفاده می کنیم :
<?php the_category(‘,’); ?>
برای نمایش عبارت By :
<?php _e(‘By’); ?>
و نمایش نام نویسنده :
<?php the_author(); ?>
برای نمایش تعداد comment ها :
<?php comments_popup_link(‘No Comments »’,’۱ Comment»’,’% Comments»’); ?>
برای ویراش پست در صورتی که به صورت admin وارد سایت شده باشید از دستور زیر استفاده می شود :
<?php edit_post_link(‘Edit’,’|’,”); ?>
در صورتیکه پستی وجود نداشته باشد و بخواهیم عبارتی را نشان دهیم دستور زیر را پایین endwhile قرار می دهیم :
<?php else: ?>
<div class=”posts”>
<h2><?php _e(‘Not Found’); ?></h2>
</div>
اگر بخواهیم برای هر پست یک ID قرار دهیم که بتوانیم به آن یک Style خاصی بدهیم از دستور زیر استفاده می کنیم :
<div class=”posts” id=”post-<?php the_ID(); ?>”>
برای ایجاد صفحه بندی از دستورات زیر می توان استفاده کرد :
<div class=”navigation”>
<?php posts_nav_link(); ?>
</div>
این دستور را باید بین endwhile و else قرار داد. دستور فوق را می توان بدین صورت customize کرد :
<div class=”navigation”>
<?php posts_nav_link(‘in between’,’before’,’after’); ?>
</div>
هرچه به جای in between نوشته شود بین next و previous می آید و هرچه به جای before نوشته شود قبل آن و هرچه به جای after نوشته شود بعد آن می آید.
ایجاد فایل header.php
برای لینک کردن فایل CSS از کد زیر استفاده می کنیم :
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
توسط این دستور نام blog ما نمایش داده می شود :
<?php bloginfo(‘name’); ?>
اگر بخواهیم نام بلاگمان را به لینک تبدیل کنیم از این روش استفاده میکنیم :
<a href=”#”><?php bloginfo(‘name’); ?></a>
و اگر بخواهیم این لینک را به frontpage منتقل کنیم :
<a href=”<?php bloginfo(‘url’); ?>”> <?php bloginfo(‘name’); ?> </a>
به زبان ساده تر می توانیم نام یا عنوان سایت را در قسمت هدر سایت قرار دهیم.
<title>عنوان سایت شما </title>
با این کار هر بار که شما نام سایت را در پیشخوان وردپرس تغییر دهید به طور دینامیک عنوان سایت تغییر می کند و لازم نیست به صورت دستی هر بار عنوان سایت را تغییر دهیم.
<title> <?php bloginfo(‘name’); ?> </title>
توضیحات سایت که در سئو سایت بسیار موثر است و این توضیحات برای موتورهای جستجو مهم است را با استفاده از کد زیر تعیین می کنیم.
<?php bloginfo(‘description’); ?>
یعنی این کد را در تگ های مربوط به آن قرار داده و در هدر سایت قرار می دهیم:
<meta name=”description” content=”<?php bloginfo(‘description’); ?> “>
برای نمایش Category دستورهای زیر را قبل از پایان body tag قرار می دهیم :
<div class=”sidebar”>
<h2><?php _e(‘Categories’); ?></h2>
</div>
حال برای نمایش لسیت Category ها بدین روش عمل می کنیم :
<ul>
<?php wp_list_cats(‘sort_column=name&optioncount=1&hierarchial=0′);
?>
</ul>
از option های زیر هم می توان استفاده کرد :
sort-column=name
این عبارت Category ها بر اساس الفبا تنظیم می کند.
optioncount=1
تعداد پست های هر کدام را نشان می دهد.
hierarchial=0
sub-cat ها را درون لسیت نمی برد. بین هر attribute باید از & استفاده کرد.
برای نشان دادن Archives از دستور زیر استفاده می کنیم :
<h2><?php _e(‘Archives’); ?></h2>
<ul>
<?php wp_get_archives(‘type=monthly’); ?>
</ul>
برای قرار دادن blogroll بدین روش عمل می کنیم :
<?php get_links_list(); ?>
از ابتدای sidebar div تا انتهای آن را جدا کرده و در فایل sidebar.php ذخیره می کنیم و خط زیر را به جای آن در فایل index.php قرار می دهیم :
<?php get_sidebar(); ?>
در انتهای sidebar یک div به نام footer ایجاد می کنیم و کد زیر را درون آن می نویسیم :
<div id=”footer”>
<p>
Copyright © 2019 <?php
bloginfo(‘name’); ?>
</p>
</div>
بدنه فایل archive.php
برای اینکه قسمت archive را از صفحه index جدا کنیم محتویات صفحه index.php را کپی می کنیم و به نام archive.php ذخیره می کنیم و سپس به جای دستور زیر
<?php the_content(); ?>
دستور زیر را می نویسیم :
<?php the_excerpt(); ?>
بدنه فرم جستجو درآموزش تبدیل html به وردپرس
ابتدا یک فایل به نام searchform.php ایجاد می کنیم و کدهای زیر را درون آن قرار می دهیم:
<form method=”get” id=”searchform” action=”<?php
bloginfo(‘home’); ?>/”>
<div>
<input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>”
name=”s” id=”s” size=”۱۵″ />
<input type=”submit” id=”searchsubmit” value=”Search” />
</div>
</form>
حال در فایل index.php کد زیر را بالای همه listing ها درون Sidebar می نویسیم :
<li id=”search”>
<?php include(TEMPLATEPATH.’/searchform.php’); ?>
</li>
فایل function.php
در این فایل توابع پوسته تعریف می شوند تا در قسمت های قالب فراخوانی شوند به عنوان مثال اگر بخواهیم نوشته های ما تصویر شاخص داشته باشند یعنی از تصویر شاخص پشتیبانی کند کد زیر را در این فایل قرار می دهیم:
<?php add_theme_support(‘post-thumbnails’);?>
نکته مهم:وقتی شما بخواهید فایل html خود را به وردپرس تبدیل کنید با یادگیری مراحل اولیه که گفتیم باید کدهای وردپرس را پیدا کرده و در قسمت های مختلف جایگذاری کنیم.
طراحی سایت ورپرسی با تبدیل html به وردپرس
در اینجا آموزش تبدیل html به وردپرس را به صورت مختصر مشاهده نمودید شما می توانید تبدیل قالب html به وردپرس خود را به ما (تارا وب) بسپارید
درباره نویسنده
مدیر تارا وب. فوق لیسانس مهندسی کامپیوتر گرایش نرم افزار دارم. اگر نیاز به طراحی قالب وردپرس اختصاصی دارید ما در تارا وب این کار را با بهترین کیفیت برایتان انجام می دهیم.
تعداد دیدگاه ها برای این مطلب: 0 دیدگاه