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

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

ما در این مقاله توضیح کوتاهی برای آموزش تبدیل html به وردپرس ارائه میدهیم. شاید برای شما هم پیش آمده باشد که قالب html زیبایی داشته باشید و بخواهید که قالب وردپرس آن را طراحی کنید و سایت خود را با آن پیاده سازی کنید البته در صورتی که اطلاعات کمی از html و css  دارید و تمایل یا دانش کافی ندارید که خودتان این کار را انجام دهید می توانید به ما (تارا وب) بسپارید ما قالب html شما را به وردپرس تبدیل می کنیم و حتی اگر بخواهید سایر کارهای آپلود سایت و حتی نوشتن محتواهای اولیه را برایتان انجام می دهیم. اما در صورتی که می خواهید خودتان این کار را انجام داده و قالب html  خود را به وردپرس تبدیل کنید ما در این نوشته راهنمایی مختصری برایتان قرار داده ایم که البته حالت کلی دارد و اگر روال کار را یادبگیرید می توانید هر قالب html را به وردپرس تبدیل نمایید.

ما مراحل کار را به صورت گام هایی نوشته ایم که البته سعی کنید به همین ترتیب انجام دهید تا با روال کار راحت تر آشنا شوید.

گام اول ایجاد پوشه قالب وردپرس:

برای شروع کار باید یک فولدر که معمولا نام قالبمان است در آدرس   wordpress/wp-content/themes می سازیم. سپس فایلهای index.php و header.php، footer.php، styles.css و  sidebar.php و function.php را در آن ایجاد می کنیم. حال برای شکل دادن به فایل index.php از دستورات زیر استفاده می کنیم :

گام دوم فایل style.css:

حال برای شکل دادن به فایل 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:

ساختار یک فایل 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; ?>

مشخصات پست :

توسط دستورات زیر می توان اطلاعات جانبی مربوط به پستها را نمایش داد، اطلاعات بین تگ زیر قرار می گیرند :

<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’); ?> “>

گام پنجم بدنه فایل sidebar.php:

برای نمایش 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(); ?>

 گام ششم بدنه فایل footer.php:

در انتهای 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(); ?>

گام هشتم بدنه فرم جستجو :

ابتدا یک فایل به نام 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 به وردپرس خود را به ما (تارا وب) بسپارید



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

  • دیدگاه خود را در مورد این محصول یا مطلب وارد کنید
  • ایمیل شما منتشر نخواهد شد، با خیال آسوده آن را به درستی وارد کنید
  • امکاناتی که قصد دارید به محصول اضافه شوند را در نظرات همین صفحه وارد کنید تا بررسی شوند
  • پیشنهادات و انتقادات خود را برای ما بنویسید

تعداد دیدگاه ها برای این مطلب: 0 دیدگاه