[Bài 1] Convert HTML/CSS thành một trang wordpress tĩnh

Chào các bạn nay mình xin giới thiệu đến các bạn cách convert một template tĩnh HTML/CSS sang giao diện wordpress để chúng ta có thể tiến hành làm việc trên wordpress

Giao diện hôm nay chúng ta sẽ làm
Một số điều cần biết trước khi convert theme wordpress
Ta vào thư mục có đường dẫn như sau và tạo folder chứa theme
C:\AppServ\www\[Tên project của bạn]\wp-content\themes\[tên theme]
Ở đây mình tạo thư mục có tên là candytheme

Lưu ý là thư mục theme cho wordpress các bạn phải viết thường và không được có khoảng cách, nếu không wordpress sẽ không thể hiểu được theme của bạn

240986768 [Bài 1] Convert HTML/CSS thành một trang wordpress tĩnh

Như bạn thấy đó 2 theme có sẵn là Twenty Thirteen và Twenty Twelve chúng đều được viết là twentythirteen và twentytwelve
Một trang wordpress có rất nhiều các dạng trang nhưng về cơ bản để chuyển sang một trang wordpress thì ta mở folder candytheme lên và tạo một số các file php và css như sau:

391549075 [Bài 1] Convert HTML/CSS thành một trang wordpress tĩnh

Phần màu xanh lá là phần chúng ta tạo mới ra, còn phần màu đỏ là source html của chúng ta
Bây giờ ta sẽ tiến hành convert nào !
Bước 1 : Mở file style.css lên và thêm vào các đoạn code sau:

/*
Theme
 Name: Candy theme
Theme URI: http://wordpress.org/
Description: Đây là trang template đầu tiên tui convert
Author: Trứng Muối
Author URI: www.facebook.com/trung.chien.56
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, 
custom-background, threaded-comments, sticky-post, translation-ready, 
microformats, rtl-language-support, editor-style, custom-menu (optional)
General comments (optional).
*/
/* delete the form allowed tags*/

/*
Theme Name: Candy theme
Theme URI: http://wordpress.org/
Description: Đây là trang template đầu tiên tui convert
Author: Trứng Muối
Author URI: www.facebook.com/trung.chien.56
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)
General comments (optional).
*/
/* delete the form allowed tags*/

Theme name: ta điền tên của theme
Description: một vài dòng miêu tả về theme
Chỉ có vậy thôi ta chỉ cần 2 cái này còn các mục còn lại không cần thiết lắm
Bước 2 :Ta tiến hành copy code html từ file index.html , copy phần code dành cho header thôi nhé, và bỏ vào file header.php ta tạo ra trước đó…và đây sẽ là nội dung file header.php sau khi copy & paste

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title></title>
   <link href="css/mystyle.css" rel="stylesheet" media="screen" />
   <link href="css/bootstrap.css" rel="stylesheet" media="screen" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
   <script src="js/cycle.js" type="text/javascript"></script>
   <script type="text/javascript" charset="utf-8" async defer>
    jQuery(document).ready(function($) {
     $('#slideshow').css('overflow', 'hidden');
     $('#slideshow ul').cycle();
    });
   </script>
 </head> 
 <body>
   <div id="outer">
     <div class="container">
      <div id="myheader">
       <div id="logo">
         <img class="logo" src="img/logo.jpg">
       </div>
<div id="mainmenu">
         <ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Apparel</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
</div>

<!DOCTYPE html>
    <html>
    <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title></title>
            <link href="css/mystyle.css" rel="stylesheet" media="screen" />
            <link href="css/bootstrap.css" rel="stylesheet" media="screen" />
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
            <script src="js/cycle.js" type="text/javascript"></script>
            <script type="text/javascript" charset="utf-8" async defer>
                jQuery(document).ready(function($) {
                    $('#slideshow').css('overflow', 'hidden');
                    $('#slideshow ul').cycle();
                });
            </script>
    </head>
    <body>
            <div id="outer">
                    <div class="container">
                        <div id="myheader">
                            <div id="logo">
                                    <img class="logo" src="img/logo.jpg">
                            </div>
                            <div id="mainmenu">
                                    <ul class="nav nav-pills">
                                            <li class="active"><a href="#">Home</a></li>
                                            <li><a href="#">Apparel</a></li>
                                            <li><a href="#">Team</a></li>
                                            <li><a href="#">Shop</a></li>
                                    </ul>
                            </div>
                        </div>

Các bạn sẽ thắc mắc tại sao lại phải copy bỏ vào file header.php vì phần header ta dùng ở khắp tất cả các trang của website vậy nên ta chỉ cần bỏ vào 1 file riêng và lát nữa thôi ta sẽ dùng câu lệnh của wordpress để gọi file header.php và ghép vào trang ta cần
Bước 3 : Sau khi đã copy dc đoạn html bỏ vào file header.php bây giờ ta mở file header.php lên và tiến hành sửa lại cho phù hợp với một theme wordpress (để wordpress có thể hiểu và chạy được).

<!DOCTYPE
 html>
 <html>
 <head>
   <meta charset="<?php bloginfo( 'charset' ); ?>">
   <title>
   <?php wp_title( '|', true, 'right' ); ?>
      <?php bloginfo('name'); ?>
      </title>

   <link rel="profile" href="http://gmpg.org/xfn/11">
   <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); 
?>">
      <link rel="stylesheet" href="<?php 
bloginfo('stylesheet_url'); ?>" type="text/css"> 

      <link rel="stylesheet" href="<?php 
bloginfo('stylesheet_directory'); ?>/css/mystyle.css" type="text/css"
 >
      <link rel="stylesheet" href="<?php 
bloginfo('stylesheet_directory'); ?>/css/bootstrap.css" 
type="text/css" media="screen">

   <?php wp_head(); ?>


   <script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" 
type="text/javascript"></script>
   <script src="<?php bloginfo('stylesheet_directory'); 
?>/js/cycle.js" type="text/javascript"></script>
   <script type="text/javascript" charset="utf-8" async defer>
    jQuery(document).ready(function($) {
     $('#slideshow').css('overflow', 'hidden');
     $('#slideshow ul').cycle();
    });
   </script>
 </head> 
 <body>
   <div id="outer">
     <div class="container">
      <div id="myheader">
       <div id="logo">
         <img class="logo" src="img/logo.jpg">
       </div>
<div id="mainmenu">
         <ul class="nav nav-pills">
<li class="active"><a 
href="#">Home</a></li>
<li><a href="#">Apparel</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
</div>

<!DOCTYPE html>
    <html>
    <head>
            <meta charset="<?php bloginfo( 'charset' ); ?>">
            <title>
            <?php wp_title( '|', true, 'right' ); ?>
            <?php bloginfo('name'); ?>
            </title>
            <link rel="profile" href="http://gmpg.org/xfn/11">
            <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
            <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
            <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/mystyle.css" type="text/css" >
            <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/bootstrap.css" type="text/css" media="screen">
            <?php wp_head(); ?>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
            <script src="<?php bloginfo('stylesheet_directory'); ?>/js/cycle.js" type="text/javascript"></script>
            <script type="text/javascript" charset="utf-8" async defer>
                jQuery(document).ready(function($) {
                    $('#slideshow').css('overflow', 'hidden');
                    $('#slideshow ul').cycle();
                });
            </script>
    </head>
    <body>
            <div id="outer">
                    <div class="container">
                        <div id="myheader">
                            <div id="logo">
                                    <img class="logo" src="img/logo.jpg">
                            </div>
                            <div id="mainmenu">
                                    <ul class="nav nav-pills">
                                            <li class="active"><a href="#">Home</a></li>
                                            <li><a href="#">Apparel</a></li>
                                            <li><a href="#">Team</a></li>
                                            <li><a href="#">Shop</a></li>
                                    </ul>
                            </div>
                        </div>

Bước 4: Tương tự như bước 2 thôi đó là ta sẽ cắt phần html và bỏ chúng vào file index.php (phần content)

     <div id="mycontent">
       <div class="row-fluid">
         <div id="slideshow" class="span12">
          <ul>
<li><img src="img/feature-1.jpg"></li>
<li><img src="img/feature-2.jpg"></li>
<li><img src="img/feature-3.jpg"></li>
</ul>
</div>
<div class="row-fluid feature">
          <div id="featurevideo" class="span6">
          <div class="mytitle">
           <img src='img/video-icon.png'>
           <p>
Feature video</p>
</div>
<embed 
src="//www.youtube.com/v/8DNlHd3yVX4?version=3&hl=vi_VN" 
type="application/x-shockwave-flash" width="420" height="175" 
allowscriptaccess="always" allowfullscreen="true"></embed>

          <div class="localsnow">
            <h6>
Snow Candy in Sälen</h6>
<p>
The Snow Candy team head to Sälen to experience the
 local snow, attractions and lifestyle.</p>
</div>
<div class="seemore">
           <a href="#" title="">See more video</a>
          </div>
</div>
<div id="featureevent" class="span6">
          <div class="mytitle">
            <img src='img/calendar-icon.png'>
            <p>
Upcoming events</p>
</div>
<div id="events">
            <div class="event">
              <h5>
5th Annual BigAir Jam</h5>
<p>
Elite riders compete for the title of 2010 BigAir
 champion in the 5th annual running of the event in Sallback, Austria. 
Last year’s winner Nate Bailey is returning to defend his crown against 
some of the most elite names from Europe and the USA.</p>
</div>
<div class="event">
              <h5>
5th Annual BigAir Jam</h5>
<p>
Elite riders compete for the title of 2010 BigAir
 champion in the 5th annual running of the event in Sallback, Austria. 
Last year’s winner Nate Bailey is returning to defend his crown against 
some of the most elite names from Europe and the USA.</p>
</div>
</div>
<div class="seemore">
           <a href="#" title="">See more events</a>
          </div>
</div>
</div>
<div id="teamshow" class="span12">
          <div class="mytitle">
           <img src='img/team-icon.png'>           
           <p>
Meet the team</p>
</div>
<img src="img/joe.jpg" alt="">
          <img src="img/lars.jpg" alt="">
          <img src="img/marco.jpg" alt="">
          <img src="img/charlie.jpg" alt="">            
         </div>
</div>
</div>

<ul>

</ul>

</div>

<p>Feature video</p>

</div>

<h6>Snow Candy in Sälen</h6>

<p>The Snow Candy team head to Sälen to experience the local snow, attractions and lifestyle.</p>

</div>

<a href="#" title="">See more video</a>

</div>

<p>Upcoming events</p>

</div>

<h5>5th Annual BigAir Jam</h5>

<p>Elite riders compete for the title of 2010 BigAir champion in the 5th annual running of the event in Sallback, Austria. Last year’s winner Nate Bailey is returning to defend his crown against some of the most elite names from Europe and the USA.</p>

</div>

<h5>5th Annual BigAir Jam</h5>

</div>

<a href="#" title="">See more events</a>

</div>

</div>

</div>

Bước 5 :Trong file index.php ,ta tiến hành sửa lại các đường dẫn hình để wordpress có thể hiểu ( ta có thể sử dụng chức năng Replace All cho nhanh)

<?php
 get_header(  ); ?>
<div id="mycontent">
       <div class="row-fluid">
         <div id="slideshow" class="span12">
          <ul>
<li><img src="<?php 
bloginfo('stylesheet_directory'); 
?>/img/feature-1.jpg"></li>
<li><img src="<?php 
bloginfo('stylesheet_directory'); 
?>/img/feature-2.jpg"></li>
<li><img src="<?php 
bloginfo('stylesheet_directory'); 
?>/img/feature-3.jpg"></li>
</ul>
</div>
<div class="row-fluid feature">
          <div id="featurevideo" class="span6">
          <div class="mytitle">
           <img src='<?php bloginfo('stylesheet_directory'); 
?>/img/video-icon.png'>
           <p>
Feature video</p>
</div>
<embed 
src="//www.youtube.com/v/8DNlHd3yVX4?version=3&hl=vi_VN" 
type="application/x-shockwave-flash" width="420" height="175" 
allowscriptaccess="always" allowfullscreen="true"></embed>

          <div class="localsnow">
            <h6>
Snow Candy in Sälen</h6>
<p>
The Snow Candy team head to Sälen to experience the
 local snow, attractions and lifestyle.</p>
</div>
<div class="seemore">
           <a href="#" title="">See more video</a>
          </div>
</div>
<div id="featureevent" class="span6">
          <div class="mytitle">
            <img src='<?php bloginfo('stylesheet_directory'); 
?>/css/img/calendar-icon.png'>
            <p>
Upcoming events</p>
</div>
<div id="events">
            <div class="event">
              <h5>
5th Annual BigAir Jam</h5>
<p>
Elite riders compete for the title of 2010 BigAir
 champion in the 5th annual running of the event in Sallback, Austria. 
Last year’s winner Nate Bailey is returning to defend his crown against 
some of the most elite names from Europe and the USA.</p>
</div>
<div class="event">
              <h5>
5th Annual BigAir Jam</h5>
<p>
Elite riders compete for the title of 2010 BigAir
 champion in the 5th annual running of the event in Sallback, Austria. 
Last year’s winner Nate Bailey is returning to defend his crown against 
some of the most elite names from Europe and the USA.</p>
</div>
</div>
<div class="seemore">
           <a href="#" title="">See more events</a>
          </div>
</div>
</div>
<div id="teamshow" class="span12">
          <div class="mytitle">
           <img src='<?php bloginfo('stylesheet_directory'); 
?>/css/img/team-icon.png'>           
           <p>
Meet the team</p>
</div>
<img src="<?php bloginfo('stylesheet_directory'); 
?>/img/joe.jpg" alt="">
          <img src="<?php bloginfo('stylesheet_directory'); 
?>/img/lars.jpg" alt="">
          <img src="<?php bloginfo('stylesheet_directory'); 
?>/img/marco.jpg" alt="">
          <img src="<?php bloginfo('stylesheet_directory'); 
?>/img/charlie.jpg" alt="">            
         </div>
</div>
</div>
<?php get_footer(  ); ?>

<?php get_header(  ); ?>
<div id="mycontent">
                            <div class="row-fluid">
                                    <div id="slideshow" class="span12">
                                        <ul>
                                            <li><img src="<?php bloginfo('stylesheet_directory'); ?>/img/feature-1.jpg"></li>
                                            <li><img src="<?php bloginfo('stylesheet_directory'); ?>/img/feature-2.jpg"></li>
                                            <li><img src="<?php bloginfo('stylesheet_directory'); ?>/img/feature-3.jpg"></li>
                                        </ul>
                                    </div>
                                    <div class="row-fluid feature">
                                        <div id="featurevideo" class="span6">
                                        <div class="mytitle">
                                            <img src='<?php bloginfo('stylesheet_directory'); ?>/img/video-icon.png'>
                                            <p>Feature video</p>
                                        </div>

                                            <embed src="//www.youtube.com/v/8DNlHd3yVX4?version=3&hl=vi_VN" type="application/x-shockwave-flash" width="420" height="175" allowscriptaccess="always" allowfullscreen="true"></embed>
                                        <div class="localsnow">
                                                <h6>Snow Candy in Sälen</h6>
                                                <p>The Snow Candy team head to Sälen to experience the local snow, attractions and lifestyle.</p>
                                        </div>
                                        <div class="seemore">
                                            <a href="#" title="">See more video</a>
                                        </div>
                                    </div>
                                    <div id="featureevent" class="span6">
                                        <div class="mytitle">
                                                <img src='<?php bloginfo('stylesheet_directory'); ?>/css/img/calendar-icon.png'>
                                                <p>Upcoming events</p>
                                        </div>
                                        <div id="events">
                                                <div class="event">
                                                        <h5>5th Annual BigAir Jam</h5>
                                                        <p>Elite riders compete for the title of 2010 BigAir champion in the 5th annual running of the event in Sallback, Austria. Last year’s winner Nate Bailey is returning to defend his crown against some of the most elite names from Europe and the USA.</p>
                                                </div>
                                                <div class="event">
                                                        <h5>5th Annual BigAir Jam</h5>
                                                        <p>Elite riders compete for the title of 2010 BigAir champion in the 5th annual running of the event in Sallback, Austria. Last year’s winner Nate Bailey is returning to defend his crown against some of the most elite names from Europe and the USA.</p>
                                                </div>
                                        </div>
                                        <div class="seemore">
                                            <a href="#" title="">See more events</a>
                                        </div>
                                    </div>
                                    </div>
                                    <div id="teamshow" class="span12">
                                        <div class="mytitle">
                                            <img src='<?php bloginfo('stylesheet_directory'); ?>/css/img/team-icon.png'>
                                            <p>Meet the team</p>
                                        </div>

                                        <img src="<?php bloginfo('stylesheet_directory'); ?>/img/joe.jpg" alt="">
                                        <img src="<?php bloginfo('stylesheet_directory'); ?>/img/lars.jpg" alt="">
                                        <img src="<?php bloginfo('stylesheet_directory'); ?>/img/marco.jpg" alt="">
                                        <img src="<?php bloginfo('stylesheet_directory'); ?>/img/charlie.jpg" alt="">
                                    </div>
                            </div>

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

Như bạn thấy đó ở đầu và cuối của file index.php ta có 2 dòng lệnh là get_header() và get_footer() dùng để ghép 2 file header.php và footer.php vào với file index.php ^^
Bước 6: Ta tiến hành cắt và bỏ vào file footer.php với phần còn lại của html ( ở đây còn lại vài cái thẻ đóng div)

   </div>
</div>
</body>
</html>

</div>
</div>
</body>
</html>

Bước 7: trong file footer.php ta thêm vào hook cho wordpress (Hook là gì chúng ta sẽ tìm hiểu sau ^^! )

     </div>
</div>
<?php wp_footer(); ?>
 </body>
</html>

</div>
            </div>
    <?php wp_footer(); ?>
    </body>
</html>

Bước 8 : Hoàn tất rồi đó bay giờ ta vào trang đăng nhập của wordpress vào mục Appearance > Theme và active “thành quả” mà chúng ta vừa làm được lên thôi ^^!

2222287988 [Bài 1] Convert HTML/CSS thành một trang wordpress tĩnh

Xem thêm tại : http://hocweb.com.vn/convert-htmlcss-thanh-mot-trang-wordpress-tinh/
----------------------------------------------------------------------------------------------------------------------------------------------------------
Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!