Tạo Theme WordPress 2: Dựng trang HTML cho Trang Web

Trong bài viết này mình sẽ hướng dẫn các bạn dựng sườn của theme wordpress bằng html cho trang chủ, trang con ta có thể lấy lại trang chủ và sửa phần nội dung lại.

Mình sẽ dựa vào chính trang chủ của mình để làm ví dụ cho các bạn dễ hình dung nha.

Một trang web thông thường có 3 phần chính đó là header, wrapper, footer. Các thành phần con như sau:

  • Header: Site Title hoặc Logo, Header Banner, Menu.
  • Wrapper: Nội dung chính, Sidebar.
  • Footer: Thông tin trang web.

Trong theme sẽ sử dụng các thẻ <div> để chứa các thành phần của trang web kèm theo các class hoặc id của nó. Dựa vào các thông tin trên ta có một sườn như sau:

<html>
<head>
	<title>Xuân Thức Blog</title>
</head>
<body>
	<header id="header">
		<div class="top-menu">
			
		</div>
		<div class="site-title">
			<div class="logo"></div>
			<div class="top-banner"></div>
		</div><!-- end .site-title -->
		<div class="header-menu">
			
		</div>
	</header>
	<div id="wrapper">
		<div class="main-content">
			
		</div><!-- end .main-content -->
		<div class="sidebar">
			
		</div><!-- end .sidebar -->
	</div><!-- end #wrapper -->
	<footer class="footer">
		<div class="footer-logo"></div>
		<div class="footer-info">
			
		</div><!-- end .footer-info -->
	</footer>
</body>
</html>

Giờ ta bắt đầu xây dựng HTML đầy đủ cho theme.

Code phần header gồm có top menu, site-title và header-menu trong đó header-menu là dạng menu đa cấp trong trường hợp này thì menu WordPress có các menu con là WordPress Development, …:

<header id="header">
	<div class="top-menu">
		<ul>
			<li><a href="#">Trang chủ</a></li>
			<li><a href="#">Giới thiệu</a></li>
			<li><a href="#">Liên hệ</a></li>
			<li><a href="#">Gửi bài</a></li>
		</ul>
	</div>
	<div class="site-title">
		<div class="title"><h1>Xuân Thức Blog</h1></div>
		<div class="top-banner"><img src="http://ptc.org.vn/images/banner/dang-ky-feedburner.jpg"></div>
	</div><!-- end .site-title -->
	<div class="header-menu">
		<a href="#" class="mobile-menu">Menu</a>
		<ul>
			<li><a href="#">Trang chủ</a></li>
			<li>
				<a href="#">Wordpress</a>
				<ul>
					<li><a href="#">Wordpress Development</a></li>
					<li><a href="#">Wordpress Theme</a></li>
					<li><a href="#">Wordpress Plugin</a></li>
				</ul>
			</li>
			<li><a href="#">Design</a></li>
			<li><a href="#">Dịch vụ</a></li>
		</ul>
	</div>
</header>
Dựng HTML cho theme wordpress
Dựng HTML cho theme wordpress

Phần Wrapper gồm có 2 phần chính đó là main-content và sidebar, trước tiên ta tạo code cho phần main-content (trong phần này gồm có featured-posts và danh sách các bài mới):

<div class="main-content">
	<div class="featured_cont">
		<div class="featured_posts">
			<div class="featured-title">Thủ Thuật WordPress</div>
			<div class="posts-title">Giới thiệu lịch sử WordPress</div>
			<div class="thumb"><img src="images/wordpress.jpg"></div>
			<div class="posts-exceprt">WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất</div>
			<div class="posts-item">
				<ul>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				</ul>
			</div><!-- end .posts-item -->
		</div><!-- end .featured_posts -->
	</div><!-- end .featured_posts -->
	<div class="featured_cont">
		<div class="featured_posts">
			<div class="featured-title">Thủ Thuật WordPress</div>
			<div class="posts-title">Giới thiệu lịch sử WordPress</div>
			<div class="thumb"><img src="images/wordpress.jpg"></div>
			<div class="posts-exceprt">WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất</div>
			<div class="posts-item">
				<ul>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
					<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				</ul>
			</div><!-- end .posts-item -->
		</div><!-- end .featured_posts -->
	</div><!-- end .featured_posts -->
	<div class="content">
		<div class="posts">
			<div class="post-title"><a href="#">Giới thiệu lịch sử WordPress</a></div>
			<div class="thumb"><a href="#"><img src="images/wordpress.jpg"></a></div>
			<div class="posts-exceprt">WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất</div>
		</div><!-- end .posts -->
		<div class="posts">
			<div class="post-title"><a href="#">Giới thiệu lịch sử WordPress</a></div>
			<div class="thumb"><a href="#"><img src="images/wordpress.jpg"></a></div>
			<div class="posts-exceprt">WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất</div>
		</div><!-- end .posts -->
		<div class="posts">
			<div class="post-title"><a href="#">Giới thiệu lịch sử WordPress</a></div>
			<div class="thumb"><a href="#"><img src="images/wordpress.jpg"></a></div>
			<div class="posts-exceprt">WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất</div>
		</div><!-- end .posts -->
		<div class="posts">
			<div class="post-title"><a href="#">Giới thiệu lịch sử WordPress</a></div>
			<div class="thumb"><a href="#"><img src="images/wordpress.jpg"></a></div>
			<div class="posts-exceprt">WordPress xuất hiện đầu tiên vào năm 2003 chỉ với mục đích là để cho người dùng viết Blog với số lượng người dùng lúc bấy giờ chỉ vọn vẹn đếm trên đầu ngón tay và ngón chân, và nó đã phát triển mạnh cho đến ngày nay và trở thành mã nguồn lớn nhất</div>
		</div><!-- end .posts -->
	</div><!-- end .content -->
</div><!-- end .main-content -->
[/htnl]

Những thẻ html trên cũng khá là dễ hiểu nên mình không giải thích qua nữa. Giờ đến phần Sidebar:

[html]
<div class="sidebar">
	<div class="sidebar-item">
		<div class="widget-title">Bài viết mới nhất</div>
		<div class="textwidget">
			<ul>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
			</ul>
		</div>
	</div><!-- end .sidebar-item -->
	<div class="sidebar-item">
		<div class="widget-title">Bài viết mới nhất</div>
		<div class="textwidget">
			<ul>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
				<li><a href="#">Giới thiệu lịch sử WordPress</a></li>
			</ul>
		</div>
	</div><!-- end .sidebar-item -->
</div><!-- end .sidebar -->

Ở đây mình dùng thẻ div class=”textwidget” vì mặc định thằng WordPress khi tạo Widget là nó chưa thẻ này trong phần nội dung của widget đó. Mình định dạng trước cho tiện.

Tiếp theo là phần cuối cùng, phần Footer cho trang web, phần này chủ yếu là để chứa thông tin website, liên hệ …

<footer class="footer">
	<div class="footer-logo">Xuân Thức Blog</div>
	<div class="footer-info">
		XuanThuc Blog Copyright© 2013 - Chuyên trang chia sẻ kiến thức về Thiết Kế Web và Lập Trình Ứng Dụng<br>
		(Nếu copy bất kỳ bài viết nào trên XuanThuc Blog vui lòng để lại nguồn để tôn trọng tác giả)
	</div><!-- end .footer-info -->
</footer>

Tạm thời để cái trang giao diện nó xấu vậy nhé, bài sau mình sẽ hướng dẫn trang điểm cho em nó đẹp hơn lộng lẫy hơn, các bạn có thể download source của bài này tại đây.

WordPress căn bản 3: Cài đặt Themes, Plugin, Menu, Widget

Ở bài trước mình đã hướng dẫn các bạn Phát triển nội dung cho WordPress, ở bài này mình sẽ hướng dẫn tiếp các bạn về cài đặt Themes (Giao diện), Plugin (Các chức năng), Menu cho WordPress.

1. Cài đặt giao diện cho WordPress:

a. Đầu tiên mình sẽ hướng dẫn các bạn cài đặt giao diện có sẳn trên wordpress trong admincp luôn:

Phần này thì khá là đơn giản các bạn chỉ cần click vào Appearance -> Themes -> Add new -> Click vào nút Search (Ô đằng trước nó để trống để nó hiển thị tất cả các theme cho mình lựa chọn), click vào Preview để xem trước Themes đó, Click Install để bắt đầu cài đặt Theme -> Đợi ……….. -> Click Activate để kích hoạt theme, thế là xong quá trình cài đặt theme bằng theme có sẳn trên WordPress rồi, rất đơn giản đúng không nào.

Hướng dẫn cài đặt Theme cho WordPress
Hướng dẫn cài đặt Theme cho WordPress

b. Hướng dẫn cài đặt Theme bằng file zip giao diện: Có 2 cách

C1. Đầu tiên các bạn down file giao diện tại đây, lưu ý rằng file giao diện luôn luôn là file zip chưa thư mục giao diện nhé, sau đó vào Appearance -> Themes -> Click tab Upload -> Click Browse chọn File Zip giao diện lúc nãy tải về, Click Install Now để bắt đầu cài đặt -> Click Activate để kích hoạt giao diện. Thế là xong cũng cực kỳ đơn giản đúng không nào. Tuy vậy có một số giao diện cài đặt khá phức tạp phải cần đến file document để có thể biết được cách cài đặt cho từng giao diện, thường là giao diện trả phí, nếu có khó khăn trong lúc cài giao diện các bạn cứ liên hệ mình nhé.

Cài đặt theme wordpress bằng file zip
Cài đặt theme wordpress bằng file zip

C2. Cài đặt bằng cách giải nén file zip ra và copy folder vừa được giải nén vào thư mục sau: wp-content/themes/ sau đó vào admincp -> Appearance -> Themes tìm đến theme vừa copy vào và click Activate để kích hoạt theme.

2. Cài đặt Plugin cho wordpress:

Plugin một thứ không thể thiếu khi sử dụng WordPress, bây giờ mình sẽ hướng dẫn các bạn cài một plugin tiêu biểu để các bạn biết cách cài đặt plugin cho wordpress, mình sẽ có một bài viết riêng về các plugin cần thiết cho WordPress.

Bây giờ ta bắt đầu cài đặt Plugin cũng khá là phổ biến đó là “WP No Category Base”, plugin này có chức năng là làm mất đi “category” trong đường dẫn, nhằm tạo đường dẫn đẹp hơn cho website, ví dụ mặc định chuyên mục WordPress trên ptc.org.vn sẽ có link thế này http://ptc.org.vn/category/thu-thuat-wordpress nếu muốn link đẹp hơn thì cài plugin này vào sau khi cài nó sẽ như thế này http://ptc.org.vn/thu-thuat-wordpress quá chuẩn đúng không nào.

Nào chúng ta bắt đầu cài đặt plugin này thôi, nó rất đơn giản các bạn à, đầu tiên vào Admincp -> Plugins -> Add new -> Đánh vào ô tìm kiếm chữ “WP No Category Base” enter sẽ hiện ra danh sách các plugin chọn plugin đầu tiên, click Install Now để bắt đầu cài đặt -> Click Activate Plugin để kích hoạt plugin vừa cài, thế là xong rồi đó các bạn.

3. Cài đặt Menu cho website wordpress:

Menu là thứ cực kỳ quan trọng trong một trang web, nó không thể thiếu, nó giúp điều hướng người dùng cũng như giúp người dùng dễ dàng tìm kiếm những thứ mình cần trên website của bạn.

Tùy vào từng giao diện mà sẽ có 1 hoặc nhiều vị trí đặt menu khác nhau, các bạn vào Appearance -> Menus bạn sẽ thấy các thông số như Menu name (Tên menu), Menu Structure (đây chính là nơi chưa các item của menu), Page (là nơi chứa các page), Links (là nơi giúp bạn tạo các link tùy chỉnh ví dụ như bạn muốn thêm link của ptc.org.vn vào menu của bạn chẳng hạn :D), Categories (Đây là nơi quan trọng nhất của Menu, chứa các chuyên mục bạn đã tạo ở bài trước) việc của các bạn chọn các thứ mà bạn cần thêm vào Menu và click “Add to menu” để đưa qua menu, bạn có thể điều chỉnh vị trí của item bằng cách kéo thả lên xuống. Cuối cùng click vào Create Menu để hoàn tất tạo menu.

Hướng dẫn tạo menu cho wordpress
Hướng dẫn tạo menu cho wordpress

Dù vậy menu của bạn vẫn chưa được hiển thị, bạn phải thực hiện thêm một bước nữa đó là Click qua tab Manage Locations, chọn menu vừa được tạo và click Save Changes để hoàn tất.

Hướng dẫn thêm vị trí menu
Hướng dẫn thêm vị trí menu

4. Cài đặt Widget cho wordpress:

WordPress cũng là một phần không thể thiếu trên WordPress, hầu hết các theme của wordpress đều có phần sidebar cho phép chèn widget vào, với mục đích như thêm quảng cáo, mục bài viết mới, liên kết web, …

Cài đặt Widget cho wordpress cũng khá đơn giản để thực hiện, đầu tiên vào Appearance -> Widgets, bên trái là các widget có sẳn của WordPress và Theme hiện hành, bên phải là các vị trí Sidebar do theme quy định (phần này mình sẽ nói rõ hơn trong phần tự lập trình theme cho wordpress sắp tới). Việc còn lại của các bạn là cần gì thì kéo nó từ bên trái sang bên phải để hiển thị nó ra trang chủ mà thôi, ví dụ như mình kéo phần Calendar vào và click Save để hoàn tất như hình bên dưới.

Hướng dẫn tạo widget cho wordpress
Hướng dẫn tạo widget cho wordpress

Và đây là kết quả:

ket-qua-widget-wordpress

Xong, bài tiếp theo mình sẽ hướng dẫn các bạn Cài đặt các plugin cần thiết cho WordPress để có thể hoạt động tốt nhất, hỗ trợ SEO tốt nhất giúp trang web của bạn có được thứ hạng tốt trên Google và các công cụ tìm kiếm khác