Nếu bạn bắt đầu với một trang web HTML (+ CSS), bạn không cần phải bỏ đi tất cả khi di chuyển đến với WordPress. Bạn có thể chuyển đổi HTML vào WordPress và chạy trang web của bạn trên nền tảng WordPress.
Bạn đang tự hỏi làm thế nào để chuyển đổi thiết kế HTML của khách hàng vào một chủ đề WordPress đầy đủ chính xác. Hoặc có thể bạn muốn tìm hiểu WordPress cơ bản (+ PHP) lập trình từ phía HTML quen thuộc.
Dù là lý do bạn đang ở đây ngày hôm nay, series hướng dẫn WordPress này sẽ giới thiệu với bạn những điều cơ bản của việc tạo ra một Theme WordPress từ HTML. Công cụ lập trình tôi sử dụng và đề nghị bạn sử dụng như
Notepad + +, và
SublimeText là một lựa chọn tuyệt vời và một trình duyệt đã sẵn sàng, sau đó làm theo hướng dẫn đơn giản này đến cùng.
Hãy đọc thêm
Cấu trúc của các file trong theme wordpress và ý nghĩa của chúng để dể dàng hiểu rõ hơn về phần hướng dẫn này.
Đặt tên WordPress Theme của bạn
Trước tiên, chúng ta phải đặt tên cho Theme của bạn một tên duy nhất cho chủ đề của bạn để làm cho nó dễ dàng nhận dạng sau khi cài đặt.
Hãy mở trình soạn thảo và sao chép-dán nội dung stylesheet dưới này vào một tập tin mới và lưu nó là style.css trong thư mục Theme của bạn. Thêm các thông tin sau vào phần trên của style.css mới được tạo:
[css]
/*
Theme Name: Sacmauweb Theme
Theme URI: sacmauweb.com
Description: Mô tả ngắn cho theme của bạn
Version: 1.0 hoặc bất kì version nào bạn muốn
Author: Tên tác giả
Author URI: sacmauweb.com
Tags: light, gray, white
*/
[/css]
- Theme Name: Tên theme của bạn.
- Theme URI: Link đến theme của bạn.
- Description: Mô tả ngắn về theme.
- Version: Phiên bản của theme ở trên là 1.0.
- Author: Tên tác giả tạo ra theme.
- Author URI: Link tới trang web của tác giả.
- Tags: Thẻ để xác định vị trí chủ đề của bạn trong kho lưu trữ chủ đề WordPress, cách nhau bằng dấu phẩy (dùng để tìm kiếm theme nếu bạn lưu trữ trên kho lưu trữ chủ đề của WordPress).
Bước tiếp theo liên quan đến việc tạo ra bốn tập tin PHP. Sử dụng công cụ lập trình, tạo index.php, header.php, footer.php và sidebar.php, và lưu chúng trong thư mục Theme của bạn.Mình đang sử dụng các tập tin index.html và CSS chưa chuyển đổi sang WordPress:
index.html
[html]
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>How To Convert HTML Template to WordPress Theme - WPExplorer</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
</head>
<body>
<div id="container">
<div class="header">
<p>Đây là phần header. Đặt logo của bạn và các chi tiết khác ở đây như navigation,search form...</p>
</div>
<div class="content">
<p>Đây là khu vực nội dung chính.</p>
</div>
<div class="sidebar">
<p>Đây là phần sidebar</p>
</div>
<div class="footer">
<p>Đây là phần footer.</p>
</div>
</div><!--/#container-->
<?php wp_footer(); // footer hook!?>
</body>
</html>
[/html]
CSS stylesheet (style.css)
[css]
#container{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}
.header{width:99.8%; border:1px solid #999;height:135px;}
.content{width:70%; border:1px solid #999;margin-top:5px;}
.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;}
.footer{width:99.8%;border:1px solid #999;margin-top:10px;}
[/css]
Cũng nói thêm:
[php]
<?php get_header();//Lấy nội dung từ file header ?>
<?php get_sidebar();//Lấy nội dung từ file sidebar?>
<?php get_footer();//Lấy nội dung từ file footer?>[/php]
Các function trên trên tương tự như include của php.
Bây giờ việt tiếp theo phải làm là bạn cắt chúng thành các thành phần trong trang web. Hãy copy các đoạn code này và dán vào các file trong theme của bạn.
header.php
[html]
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>How To Convert HTML Template to WordPress Theme - WPExplorer</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
</head>
<body>
<div id="container">
<div class="header">
<p>Đây là phần header. Đặt logo của bạn và các chi tiết khác ở đây như navigation,search form...</p>
</div>
[/html]
index.php
[html]
<div class="content">
<p>Đây là khu vực nội dung chính.</p>
</div>
[/html]
sidebar.php
[html]
<div class="sidebar">
<p>Đây là phần sidebar</p>
</div>
[/html]
footer.php
[php]
<div class="footer">
<p>Đây là phần footer.</p>
</div>
</div><!--/#container-->
</body>
</html>
[/php]
Tiếp theo chúng ta sẽ chèn code của wordpress vào các file này và kết nối chúng thành một trang web hoàn chỉnh.
Trước tiên hãy mở file
header.php và sửa đoạn code trong thẻ lại thành như sau:
[php]
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></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" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
<div class="header">
<h2>Đây là phần header. Đặt logo của bạn và các chi tiết khác ở đây như navigation,search form...</h2>
</div>
[/php]
Với..
[php]
<Link rel = "stylesheet" href = "<php bloginfo ('stylesheet_url');?>" Type = "text / css" />
[/php]
..Là liên kết đến stylesheet của bạn style.css.
Định nghĩa các function này cho phần tiếp theo:
[php]
<?php get_header(); //gọi file header.php?>
<?php get_sidebar(); //gọi file sidebar.php?>
<?php get_footer(); //gọi file footer.php?>
[/php]
Các function tương tự như includes trong php để includes file vào trang web.
File index.php sẽ trông như thế này
[php]
<?php get_header(); //gọi file header.php?>
<div class="content">
<h2>Đây là phần nội dung chính</h2>
<?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(); // hiển thị tiêu đề của post?></a></h2>
<div class="author"><?php the_author();//tên tác giả ?></div>
</div><!--end post header-->
<div class="entry clear">
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
<?php the_content(); //hiển thị nội dung của post?>
<?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' );//comment link ?></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( 'Bài viết cũ hơn' ); ?></div>
<div class="alignright"><?php previous_posts_link( 'Bài viết mới hơn' ); ?></div>
</div><!--end navigation-->
<?php else : //Nếu $wp_query không có nội dung
echo "Không có bài viết nào cả";
?>
<?php endif; ?>
</div>
<?php get_sidebar(); //gọi file sidebar.php?>
<?php get_footer(); //gọi file footer.php?>
[/php]
File style.css của bạn sẽ trông như thế này:
[css]
/*
Theme Name: Sacmauweb Theme
Theme URI: sacmauweb.com
Description: Mô tả ngắn cho theme của bạn
Version: 1.0 hoặc bất kì version nào bạn muốn
Author: Tên tác giả
Author URI: sacmauweb.com
Tags: light, gray, white
*/
body{font-family:arial, helvetica, verdana; font-size:0.8em;width:100%; height:100%;}
.header{background-color:#1be;margin-left:14%;top:0;border-width:0.1em; border-color:#999; border-style:solid; width:72%; height:250px;}
.content{background-color:#999;margin-left:14%; margin-top:5px; float:left; width:46%; border-width:0.1em; border-color:#999; border-style:solid;}
.sidebar{background-color:#1d5;margin-right:14%; margin-top: 5px; float:right; border-width:0.1em; border-color:#999; border-style:solid; top:180px; width:23%;}
.footer{background-color:red;margin-left:14%; float:left; margin-top:5px;width:72%; height:50px;border-width:0.1em; border-color:#999; border-style:solid;}
[/css]
Toàn bộ code của theme bạn
download ở đây.
Điều này thật dễ dàng phải không? Hướng dẫn này bao gồm các vấn đề cơ bản của việc chuyển đổi mẫu HTML vào WordPress và là một tutorial tốt cho người mới bắt đầu. Hãy theo dõi trong tutorial tiếp theo nha.
Từ khóa: tao theme wordpress, theme, wordpress
Tại sao mình đổi screenshot khác mà screenshot cũ ko đổi vậy , dù đã xóa từ đầu trước khi copy vào thư mục themes ? và sau khi đổi hình khác (cũng đặt tên screenshot) thì cái phần dasboard mất tiêu ?
screenshot.png của bạn phải có chiều dài và rộng là 300 x225 nhé.
good
Cho hỏi là bác có dùng Starter Theme không ợ? Có thì bác đang sài loại nào?