طرز تبدیل HTML به WordPress
1396/10/13 15:40 , شایان مسلمی

طرز تبدیل HTML به WordPress

در عصر محیط های پویا و غنی تعاملی، وب سایت های استاتیک HTML زیاد چنگی به دل نمی زنند.حتی اگر یک وب سایت عالی HTML/CSS بسازید،بیشتر زمانتان را صرف شمردن تگ ها برای هر پستتان خواهید کرد و همینطور این کار را به مشتریناتان نیز باید آموزش دهید.

 

وارد WordPress شوید.

بر اساس گفته های میلیون ها نفر،وردپرس کاربرپسند و مدیریت آن آسان است.وردپرس نیازمند مهارت های کدینگ مکیباشد.زبان های کدینگ(HTML،CSS،JavaScript،PHP برای اسکریپت  و MySQL برای دیتابیس) همراه با API های عالی است که با آن یک توسعه دهنده میتواند از وردپرس استفاده بیشتری بکند.

این راهنما به شما کمک خواهد کرد که بتوانید HTML را بدون از دست دادن محتوا به WordPress تبدیل کنید.

 

گام اول: انتخاب برنامه ی هوستینگ

وردپرس شامل دو بخش است: WordPress.com مدیریت شده و WordPress.org هوست شده.بنابر نیاز ما،گزینه ی دوم مناسب است.

بدین منظور شما باید یک هوستینگ پلن داشته باشید که توسط ترافیک سایتتان تشکیل شده باشد و مطابق با نیاز های WordPress باشد (سرور باید از PHP5.6 یا بالاتر و MySQL 5.6 یا بالاتر پشتیبانی کند)

 

گام دوم: به وردپرس بروید و آن را دانلود و سپس نصب کنید

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

 

گام سوم: مشخص کنید که چه کد HTML را میخواهید جابجا کنید

  • اگر میخواهید طراحی HTML سایتتان را نگه دارید،باید یک تم شخصی را برای خودتان کدنویسی کنید.برای اینکار شما به یک ویرایشگر کد و دانش HTML,CSS و PHP نیاز خواهید داشت.
  • اگر طراحی HTML سایت را نمیخواهید،باید تنها محتوا را منتقل کنید.به گام 9 بروید.

گام چهارم: یک فولدر تم جدید بسازید

یک فولدر جدید روی دسکتاپ ایجاد کنید.بیایید آن را HTML Theme بنامید.این نام تم شما خواهد بود.بله!میتوانید بعداً نام آن را تغییر دهید.

ویرایشگر کد را باز کنید (Notepad++,Komodo وغیره.) و فایل هایی با نام های زیر بسازید:

Style.css

Index.php

header.php

sidebar.php

footer.php

این فایل ها قالب های تم هستند.آن ها را خالی نگه دارید و در فولدر HTMLTheme ذخیره کنید.

 

گام پنجم: CSS کنونی را به داخل فایل Style.css کپی کنید

وب سایت HTML قبلی شما از CSS برای استایل عناصر صفحه استفاده می کرده است.آن را کپی کنید و داخل فایل Style.css وارد کنید.این باعث وارد شدن محتوا به کل سایت و صفحات آن میشود.

اگر این کار را برای مشتری انجام می دهید،اضافه کردن بخش زیر به بالای stylesheet میتواند مناسب تر باشد:

/* 

Theme Name: HTMLTheme (your own theme name) 

Theme URI: Your theme’s URI 

Description: A brief description of your theme 

Version: 1.0 

Author: Your name 

Author URI: Your website address 

*/

این اختیاری است،اما به مشتریانتان کمک میکند تا با شما در ارتباط باشند.

 

گام ششم: HTML کنونی تان را قطع کنید

این کار که chopping هم نامیده می شود،ساده تر از آن است که به نظر می رسد.در فولدر تم HTML روی دسکتاپتان،فایل هایی وجود دارند که در گام چهارم ایجاد کردیم.

Index.html سایت کنونی تان را در ویرایشگر کد باز کنید:

1)تمامی داده ها را از بالا کپی کنید،بالاتر تگ div class=”main”  . به فولدر تم بروید،header.php را باز کنید و داده ها را اینجا وارد کنید.ذخیره کنید و ببندید.

2)تگ و هرچیزی را در داخل class=”sidebar” کپی کنید.به فولدر تم بروید،sidebar.php را باز کنید و paste کنید.ذخیره کنید و ببندید.

شما باید تگ های HTML را برای عناصر صفحات مختلف شناسایی کنید و آن ها را داخل تگ های مربوطه ی HTML برای عناصر صفحه مختلف و داخل فایل مربوطه یphp paste کنید.زمانی که اینکار انجام شد،هرچیزی را که در فایل PHP خودش پُست نشده را کپی کنید و داخل index.php آن را وارد کنید.همه چیز را ذخیره کنید.

 

گام هفتم: نهایی کردن فایل Index.php

فایل index.php شما باید تمامی بخش های جدید را نشان دهد(فایل های قالب که در بخش قبلی ایجاد کردیم).

بدینگونه شما میتوانید header را احضار کنید:

<?php get_header(); ?>

در پایین (پس از بقیه ی کد در index.PHP) شما به این طریق سایدبار و فوتر را احضار میکنید:

 

<?php get_sidebar(); ?>

 

<?php get_footer(); ?>

 

آناتومی تم وردپرس دو بخش خارجی قدرتمند دارد که مشخصه هایی دارد،مخصوصاً سلسله مراتب قالب و لوپ.لوپ محتوای شما را به بازدیدکنندگان نمایش می دهد.این کد را در index.php وارد کنید:

<?php if ( have_posts() ) : ?>

 

<?php while ( have_posts() ) : the_post(); ?>

 

<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

 

<div class=”post-header”>

 

<div class=”date”><?php the_time( ‘M j y’ ); ?></div>

 

<h2><a href=”<?php the_permalink(); ?>” rel=”bookmark”title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>

 

<div class=”author”><?php the_author(); ?></div>

 

</div><!–end post header–>

 

<div class=”entry clear”>

 

<?php if ( function_exists( ‘add_theme_support’ ) ) the_post_thumbnail(); ?>

 

<?php the_content(); ?>

 

<?php edit_post_link(); ?>

 

<?php wp_link_pages(); ?> </div>

 

<!–end entry–>

 

<div class=”post-footer”>

 

<div class=”comments”><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div>

 

</div><!–end post footer–>

 

</div><!–end post–>

 

<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>

 

<div class=”navigation index”>

 

<div class=”alignleft”><?php next_posts_link( ‘Older Entries’); ?></div>

 

<div class=”alignright”><?php previous_posts_link( ‘Newer Entries’ ); ?></div>

 

</div><!–end navigation–>

 

<?php else : ?>

 

<?php endif; ?>

ذخیره کنید و ببندید.حالا تم شما ساخته شده است.

 

گام هشتم: نصب کردن تم جدید

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

فولدر نصب وردپرس را باز کرده و فولدر تم را در /wp-content/themes/ وارد کنید.

حالا وردپرس را اجرا کرده و به WP Admin>Appearance>Themes بروید.در اینچا تمامی تم های که میسازید و دانلود میکنید نمایش داده میشوند.حالا تم شخصی تان را فعال کنید.

 

گام نهم: وارد کردن محتوای HTML

به یاد داشته باشید که اگر قبلاً یک تم آماده را پسندیده اید،میتوانید به راحتی فولدر تم را دانلود کنید و از روشی که در بالا توضیح داده شد آن را نصب کنید.به داشبورد ادمین رفته و سپس Appearance>Themes>Add New و آن را فعال کنید.

حال تنها کاری که مانده این است که محتوای قبلی سایت HTML تان را وارد کنید.این کار با استفاده از پلاگین HTML Import 2 که توسط Stephanie Leary ساخته شده، بسیار راحت است.قبل از اینکه پلاگین را نصب کنید و محتوایتان را وارد کنید،راهنما را حتماً بخوانید.خب،کار شما تمام است!به ورد پرس خوش آمدید!

 

مطلب پایانی

 به یاد داشته باشید که مشکلات خودتان را به روش خودتان مشخص کنید (مثلاً کد HTML ضعیف،عدم وجود CSS و غیره.).تا زمانی که توسعه دهندگان وب باید آماده شوند که زمان و انرژی خود را برای بدست آوردن سلسله مراتب قالب و لوپ WordPress صرف کنند،دشواری وجود نخواهد داشت.

 

منبع : IMProgrammer

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

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

فرم ارسال نظرات