<a href='http://timgicodo.blogspot.com/' rel='home' title='Trang Giải Trí Tổng Hợp '>Trang Giải Trí Tổng Hợp

Thiết kế theme Wordpress bài 2: Template file và Template

Phần này sẽ nói chi tiết hơn về cấu trúc template của WordPress. Bạn sẽ hiểu một giao diện WordPress bao gồm những phần nào và vận hành ra sao. Nếu bạn chưa đọc phần 1, hay quay lại đọc phần này để hiểu rõ những điều cơ bản trong theme WP và cấu trúc của một hệ thống giao diện WP trước khi chúng ta đi sâu vào phần 2 này nhé..
Sau phần đầu tiên, chúng ta đã hiểu về cấu trúc theme, các thuật ngữ và các qui tắc cơ bản để thiết kế giao diện WordPress. Phần này sẽ nói sâu về file index.php và cách nó vận hành qua đó sẽ giải thích về chức năng của một số file mà bạn có thể tìm thấy trong một theme WordPress.

Việc đầu tiên bạn cần biết đó là mỗi Page, mỗi Post… của WordPress được xây dựng bởi nhiều file được gắn lại với nhau. Ví dụ như hình dưới đây:

Ví dụ về giao diện của một theme WordPress

Như hình trên, bạn có thể thấy một giao diện WordPress khi hiển thị ra bên ngoài sẽ bao gồm các thành phần được viết trong các file header.php, index.php, footer.php và sidebar.php. Để trực quan hơn xin giới thiệu với các bạn một đoạn code tạo file index.php

Day la content cua website tao boi wpdemo

Hàm get_header(‘name_file’) sẽ gọi tên file file dạng header-name_file.php do bạn chỉ định. Trong trường hợp nội dung đưa vào hàm là rỗng (như trường hợp ở đoạn code trên) hệ thống sẽ gọi file header.php. Tương tự như vậy cho hàm get_footer(). Như vậy, đoạn code ở file index.php này sẽ có nhiệm vụ gọi file header.php và footer.php để include vào file index.php để hiện 1 giao diện đầy đủ có nội dung là

Day la content cua website tao boi wpdemo

Còn theo ví dụ ở hình trên, chúng ta sẽ include vào file index.php 3 file là header.php, footer.php và sidebar.php. Bạn thấy cần thêm gì nữa thì thêm – tùy bạn

Header Template file và Footer Template file
Mình muốn điểm sơ qua 2 thành phần này trước vì nó tương đối đơn giản. Thông thường thành phần đầu(header) và cuối(footer) của trang web sẽ ít có sự thay đổi và đó là lý do bạn đưa những thành phần này vào header.php và footer.php
File header.php tùy theo giao diện mà chúng ta chia cắt HTML cho hợp lý nhưng với một template đơn giản chúng ta sẽ không thể thiếu thành phần chính như tiêu đề website, đoạn mô tả website như hình:

Header của một theme WordPress đơn giản

File footer.php thông thường chúng ta đưa vào nội dung là phần copyright hoặc thông tin liên hệ, chủ quyền website như:

Footer của một theme WordPress đơn giản

Index Template File

Đây là phần nội dung sẽ hiển thị trên website bao gồm danh sách bài viết, các bình luận hoặc các plugin có liên quan đến nội dung…tóm lại là bạn muốn người đọc đọc được cái gì thì đây chính là chỗ nó cần xuất hiện.

Giao diện file index.php

Chúng ta cần lưu ý một chút, file index.php không làm nhiệm vụ hiển thị nội dung chi tiết của bài viết. Phần nội dung chi tiết được thiết kế thông qua một giao diện khác nằm trong file single.php. Bạn có thể hiểu file index.php chứa nội dung trang chủ của website.

Sidebar Template File

Đây là thành phần thiết kế nên cột dữ liệu bên phía tay phải(hoặc tay trái theo giao diện của bạn). Phần này thường được thiết kế để chứa danh sách category, các widget, blogroll…

Ví dụ về một siderbar trong WordPress

Single.php

Phần trên mình đã nói là phần nội dung chi tiết của một bài viết (Post) hay một trang(Page) được thiết kế thông qua một file tên gọi single.php nên chắc bạn cũng đã hiểu single.php để làm gì rồi. Tương tự như file index.php, single.php cũng có cấu trúc khá giống:

Ví dụ về cấu trúc của một single.php

Nếu bạn có 1 chút vốn liếng tiếng Anh, mình nghĩ bạn sẽ dễ dàng phát hiện ra các template file thường được đặt theo chức năng của nó. Nên nếu bạn không rành code, bạn có thể đọc tên cũng có thể biết được nó dùng làm gì rồi. Hãy thử tìm hiểu trong theme bạn đang dùng người ta đã chia ra làm bao nhiêu thành phần và những thành phần đó làm chức năng gì. Đây là bước đầu tiên để bạn hiểu cách họ viết giao diện WordPress như thế nào.

Posted by admin

Thiết kế theme Wordpress bài 3: Bắt đầu viết file index.php

Qua bài viết ở phần 1 và phần 2, chúng ta đã có những khái niệm căn bản về cấu trúc cũng như các thành phần của một theme WordPress. Phần này chúng ta sẽ bắt tay vào việc viết một theme WordPress từ một template đơn giản. Như ở phần đầu mình đã nói, một theme wordpress có ít nhất là 2 file index.php và style.css. Vì vậy, phần 3 này để dễ hiểu và dễ tiếp thu chúng ta sẽ chỉ viết 1 giao diện đơn giản với file index.php và style.css. Các phần nâng cao sẽ được cung cấp dần dần cho các bạn trong các bài viết tiếp theo.

Bước 1: cài đặt WordPress

Phần cài đặt này mình đã có dịp viết trong một bài viết cho câu lạc bộ Webmaster Việt Nam. Nói chung là khá đơn giản nên mình không nói lại nữa. Bạn nào chưa biết hoặc cần tìm hiểu thêm về cách cài đặt WordPress vui lòng đọc thêm bài viết hướng dẫn cài đặt WordPress nhé.

Bước 2: thiết lập thư mục theme, các template file cần thiết

Bạn cần gì để bắt đầu công việc ? Nếu bạn cảm thấy mình đã sẵn sàng, hãy nhìn sang thư viện công cụ cho người dùng WordPress để tìm bộ kit mà mình còn thiếu đã. Ngoài ra bạn cũng cần cài thêm 1 bộ Editor tốt một xíu. Mình yêu thích Macromedia Dreamweaver. Còn các bạn chọn công cụ Editor nào thì tùy nhưng phải đảm bảo bộ công cụ đó hỗ trợ lập trình PHP và HTML.
Lan man nãy giờ, giờ chúng ta đi vào chi tiết công việc thôi

Step 1: Tạo thư mục theme

Việc này đơn giản là bạn tạo một thư mục và đặt tên thư mục là tên theme muốn tạo. Đặt nó vào thư mục chứa theme D:\AppServ\www\wordpress-template-design\wp-content\themes. Thư mục này là đường dẫn trong PC của mình, còn các bạn cứ tìm lấy đường dẫn tương ứng nhé.

Step 2: Tạo file index.php, style.css

Tôi sử dụng Macromedia Dreamweaver để tạo 2 file index.php và style.css trong thư mục vừa mới tạo xong. Nếu bạn không có phần mềm Macromedia Dreamweaver, bạn có thể vào Start > Programs > Accessories > Notepad để mở Notepad lên sử dụng thay cho công cụ kia.

Nội dung của file index.php và style.css tôi chưa soạn thảo chi cả.

Để cho nó trực quan sinh động, mình quyết định viết vài dòng HTML vào file index.php. Mục đích là để nhận dận file index.php của mình có hoạt động. Vì khi để rỗng nội dung, khi wordpress xảy ra lỗi mà show error là false thì khó mà quan sát lắm.
Đây là nội dung mình đưa vào file index.php:

Mã nguồn trang index.php

Nhiều bạn sẽ thắc mắc tại sao mình không post code lên để các bạn copy và dán lại cho nhanh ? Vì mình muốn các bạn nhìn và gõ lại để có thể nhớ và hiểu nó. Sau đây mình sẽ giải thích đoạn code này:
DOCTYPE – đây là định nghĩa loại document của bạn đang dùng. Giúp các trình duyệt dễ dàng xác định và thiết lập các thông số hợp lý cho việc trình bày. DOCTYPE có thể không quan trọng lắm
<html>: đây có thể hiểu là nơi nội dung website của bạn bắt đầu xuất hiện. Còn chi tiết nữa thì lên Google mà tìm tag html là gì
<head > phần mở đầu của 1 document, bao gồm các thông tin cần thiết được thiết lập dùng cho toàn hệ thống. Tóm lại: lên Google mà hỏi nó là cái gì. Hỏi xong mà không biết nữa thì thôi khỏi cần đọc tiếp loạt bài này nha các bạn
<?php bloginfo(‘stylesheet_url’); ?>: đây là một hàm được wordpress định nghĩa sẵn cho chúng ta. Nó dùng gọi file style.css trong thư mục theme của chúng ta và liên kết nó với file hiện tại để thiết lập giao diện. Bạn sẽ thấy thêm <?php và ?>, nếu bạn không phải dân lập trình thì xin giải thích nho nhỏ cho bạn hiểu là nó là 1 dạng tag giúp phân biệt giữa code HTML và code PHP để người dùng có thể sử dụng. Trong PHP, <?php là bắt đầu, còn ?> là kết thúc của một chuỗi lệnh.
Ngoài ra còn 1 số thành phần khác như wp_head() hay get_bloginfo_rss(), wp_title()… đều là các hàm đã được wordpress define sẵn. Bạn có thể quay lại template document mình đã nói ở phần trước để đọc và biết thêm về các hàm này.

Bước 3: chạy thử
Bạn có tin hay không tùy bạn nhưng xin thông báo với bạn là chúng ta đã vừa hoàn tất 1 cái giao diện đơn giản cho WordPress rồi đó. Tất nhiên muốn đẹp hơn, muốn tùy biến mạnh mẽ hơn chúng ta sẽ cần phải làm nhiều việc hơn nữa. Những thứ đó sẽ nói ở bài tiếp theo

Bây giờ, để kiểm tra cái giao diện mới được xây dựng của chúng ta có chạy tốt hay không. Chúng ta phải active nó lên xem thế nào. Bạn hãy đăng nhập tài khoản quản trị wordpress blog của bạn và tìm đến Menu Theme:

Theme demoweb

Ấy cha ! Có vẻ không đầy đủ thông tin như các theme khác nhỉ ?

Nhưng không sao, chúng ta sẽ bổ sung những thông tin đó ở phần bài viết sau. Giờ là lúc active theme này lên để Xem

Chắc là các bạn sẽ thấy hơi xấu nhưng nó là 1 sản phẩm đầu tay để bạn bắt đầu bước vào một thế giới rộng lớn hơn…. Bạn hãy bắt tay thực hiện ngay bây giờ nhé

Nguồn: Sưu Tầm

06 tháng 1, 2014

Posted by admin

Thiết kế theme Wordpress bài 4: bắt đầu công việc thiết kế chi tiết

Chúng ta đã đi qua 3 phần với những kiến thức cơ bản nhất trong thiết kế giao diện WordPress. Hôm nay, chúng ta lại tiếp tục nghiên cứu sâu hơn vào cấu trúc giao diện wordpress với tầng cao hơn. Bắt đầu từ bài này chúng ta sẽ đi chi tiết việc thiết kế giao diện.
Do thời gian của mình hạn chế nên việc tiếp tục chuỗi bài viết bị trễ nải mặc dù rất muốn viết. Một lần nữa xin lỗi mọi người và mong mọi người tiếp tục ủng hộ NhanWeb nhé. Để đáp lại sự mong đợi của các bạn thời gian qua, tranh thủ thời gian rãnh rỗi sót lại của tối nay mình viết phần tiếp theo cho các bạn luôn đây.

Bắt tay thiết kế giao diện WordPress thôi

Ở các phần trước, NhanWeb đã chia sẻ với các bạn một số điều cơ bản cũng như cùng nhau thiết kế một giao diện đơn giản cực kì cho WordPress với chỉ 1 file index.php và 1 file style.css. Trong phần này chúng ta sẽ đi sâu hơn trong việc thiết kế giao diện với đầy đủ các thành phần của một template chuẩn luôn.

Bước 1: chuẩn bị giao diện

Trước khi thiết kế giao diện cho WordPress, chúng ta cần phải chuẩn bị một giao diện tương đối hoàn thiện bằng HTML trước đã. Để tránh việc phát sinh quá nhiều mã làm các bạn rối mắt, hạn chế việc tìm hiểu của chúng ta, mình đề xuất giao diện như sau:

Giao diện demo

Do không có thời gian và không có mắt thẩm mĩ nên tạm thời mình thiết kế tới đó thôi nhá ! Bạn nào muốn thiết kế nhiều hơn, chi tiết hơn thì cứ tự nhiên. Bản thân mình cần tối ưu hóa HTML sao cho càng ít càng tốt để mọi người dễ quan sát.

Bước 2: chuẩn bị các file template cần thiết

Như phần trước mình có nói với các bạn, hệ thống file template rất nhiều file và tùy theo tính năng. Theo kinh nghiệm của mình chúng ta cần chuẩn bị các file sau đây khi thiết kế giao diện:

index.php: dùng chạy theme. Mình đã nói ở các phần trước.
style.css: file này mình cũng đã nói. Nó chứa phần định dạng stylesheet cho toàn trang.
header.php: chứa nội dung không đổi của phần header.
footer.php: chứa nội dung không đổi ở cuối trang.
sidebar.php: dùng tạo sidebar và chứa nội dung cho cột này.
functions.php: file này dùng chứa tất cả các hàm, các khai báo cần thiết cho giao diện.
search.php: file dùng chứa trang kết quả khi người dùng sử dụng tính năng tìm kiếm.
single.php: chứa nội dung của một bài viết cụ thể.
404.php: đây là trang báo lỗi khi có lỗi liên quan đến URL xảy ra
screenshot.png: đây là file thể hiện thumbnail của giao diện.
license.txt: file chứa nội dung mô tả liên quan đến vấn đề bản quyền.

Trước mắt bạn tạo những file này nhưng chưa cần viết nội dung gì (riêng thumbnail thì dĩ nhiên là hình ảnh) sau đó đặt vào thư mục có tên là tên của template bạn muốn tạo. Ví dụ mình muốn đặt tên cho theme này là nhanweb mình sẽ tạo thư mục như sau:

Các file trong thư mục giao diện nhanweb

Bước 3: Viết thông số mô tả theme

Bạn mở file style.css bắt đầu viết những dòng đầu tiên như sau;

/*Theme Name: demo theme
Theme URI: http://taivl.mobi
Description: Theme Demo cho bai viet thiet ke giao dien WordPress
Author: Nguoi Demo
Version: 1.0.0
License: GNU General Public License
License URI: license.txt
Tags: thiết kế theme web, css, thiet ke giao dien*/

Bạn nào làm việc với CSS cũng biết, đây là dòng comment và không có giá trị khi CSS hoạt động. Tuy nhiên, hệ thống WordPress sẽ đọc đoạn này và lấy các thông tin cần thiết để mô tả theme. Bạn có thể thay đổi nội dung phía sau dấu hai chấm (:). Còn phần phía trước dấu này là phần keyword để WordPress lấy đúng thứ cần thiết.

Theme Name: tên của theme.
Theme URI: địa chỉ trang tác giả
Description: mô tả theme.
Author: tên tác giả.
Version: phiên bản theme. Sẽ cần khi bạn nâng cấp
License: giấy phép sử dụng theme. Đoạn này bạn chỉ cần mô tả ngắn.
License URI: URL đến file license.txt để đọc đầy đủ giấy phép bản quyền.
Tags: nó là tag mà bạn gán cho giao diện. Bạn có thể gán thể loại hoặc gì cũng được miễn sao dễ tìm. Mỗi tag cách nhau bằng dấu phẩy.

Bước 4: Active theme

Sau khi hoàn tất các bước này căn bản bạn đã có 1 theme được khai báo đúng chuẩn rồi. Việc tiếp theo là active theme trong Admin của WordPress.
Truy cập vào WordPress Admin >> Appearance >> Themes bạn sẽ thấy giao diện mới của bạn được mô tả đầy đủ.
Bạn cứ active theme lên bình thường. Vì theme hiện nay chưa có bất kì thông tin nào nên bạn sẽ không thấy gì ngoài 1 trang trắng. Đừng lo lắng, chúng ta sẽ cùng viết tiếp theme này trong bài viết sau.

Nguồn: Sưu tầm

Posted by admin

Thiết kế theme Wordpress bài 5: trích xuất template file và viết header.php

Trong phần 4, chúng ta đã nói về 1 template với đầy đủ thông tin cũng như NhanWeb đã gửi cho các bạn một file template mẫu mà chúng ta sẽ sử dụng để trích xuất ra theme. Dựa vào template này hôm nay chúng ta sẽ đưa dữ liệu vào tạo nên theme nhé.

Đưa file style.css, thư mục hình ảnh của template vào hệ thống template file

Trước khi trình bày giao diện đã viết, NhanWeb sẽ đưa định dạng CSS đã viết vào template file style.css của giao diện như sau:

@charset "utf-8";
/*Theme Name: demo theme
Theme URI: http://taivl.mobi
Description: Theme Demo cho bai viet thiet ke giao dien WordPress
Author: Nguoi Demo
Version: 1.0.0
License: GNU General Public License
License URI: license.txt
Tags: thiết kế theme web, css, thiet ke giao dien*/
/* CSS Document */
body{
background:#000;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;}.wrap{ width:960px;
background:#FFF;
padding:0;
margin: 0 auto;}
#header{
height:100px;}
#menu{
background:url(images/menu_bg.gif) repeat-x;
height:32px;
line-height:32px;
color:#FFF;
text-transform:uppercase;}
#main{
padding:0;
margin:0;}
#content{
float:left;
width:627px;
min-height:400px;
margin: 10px 10px 10px 0;}
#slider{
float:left;
width:300px;
margin: 10px 0px 10px 10px;
border: 0 0 1px 1px solid #999;
-moz-box-shadow: -5px 0px 5px #ccc;
-webkit-box-shadow: -5px 0px 5px #ccc;
box-shadow:-5px 5px 5px #ccc;
padding:5px;}
.clear_both{
clear:both;}
#footer{
height:50px;
color:#333;
line-height:50px;
padding-left:10px;
background:#c2f3e1;}

Đoạn này tương đối dễ hiểu vì ta sẽ copy tất cả vào, đồng thời giữ nguyên định dạng thư mục và file hình ảnh đi kèm.

Trích xuất template file

Việc tiếp theo trong qui trình thiết kế của mình, NhanWeb sẽ trích xuất giao diện của mình ra thành 4 phần như đã nói ở phần 2. Từng phần ấy sẽ được thiết kế riêng để xử lý những công việc cụ thể.

Thành phần giao diện bao gồm:

header.php
index.php
sidebar.php
footer.php

Code chi tiết của từng phần:

footer.php

header.php

index.php

Slidebar.php

Đừng hỏi mình tại sao không để code để các bạn copy cho nhanh nhé, mình muốn các bạn động tay động chân một tí cho dễ nhớ. Có bắt tay vào làm mới nhớ được các bạn ah.

Kết nối các template file lại với nhau

Để kết nối các template file lại với nhau bạn sử dụng các hàm get_header(), get_sidebar() và get_footer() như mình đã nói sơ qua ở phần 2.
Bạn mở file index.php và bổ sung các đoạn code cần thiết như sau:

<?php get_header();?>
<div id="content">Content</div>
<?php get_sidebar(); ?><?php get_footer(); ?>

Nếu bạn chưa quen với cách sử dụng các hàm get_header() hay get_footer()… thì bạn có thể tìm hiểu thêm ở phần 2 nhé. Bạn kiểm chứng kết quả và sẽ thấy, chúng ta đã kết nối được cái file template lại với nhau nhưng phần CSS chưa được kết nối để hiện giao diện chuẩn. Không sao, chúng ta sẽ tiến hành làm việc với file header.php ngay sau đây.

Làm việc với file header.php

Bạn mở file header và bổ sung, chỉnh sửa các dòng code như dưới đây:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php /*
* Print the <title> tag based on what is being viewed. */
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name. bloginfo( 'name' ); ?></title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<meta name="description" content="<?php bloginfo('description'); ?>">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head();?>
</head>
<body>
<div class="wrap">
<div id="header">
<img src="<?php bloginfo('template_url'); ?>/images/logo.png" width="300" height="100" alt="<?php echo bloginfo( 'name' );?>" />
</div>
<div id="menu">
Menu here
</div>
<div id="main">

Bạn sẽ thấy file header.php của chúng ta có vài chỗ đổi khác. Chỗ đổi khác ở đây phần lớn mình muốn nói đến đó là sự xuất hiện của một số hàm được sử dụng trong hệ thống của wordpress. Các hàm đó là:

bloginfo(): được sử dụng để lấy ra 1 số giá trị được thiết lập trước đó cho hệ thống WordPress đồng thời xuất dữ liệu đó ra màn hình (ngược lại chúng ta có hàm get_bloginfo() cũng thực hiện công việc tương tự nhưng không xuất ra màn hình). Chi tiết các giá trị có thể lấy ra bạn xem thêm tại đường link dẫn đến document của nó.
wp_title($sep, $echo, $seplocation): hàm này trả về tiêu đề của mỗi trang. Tương ứng các biến đưa vào là $sep: ký tự đứng trước hoặc sau title khi xuất ra, $echo giá trị true hoặc false cho biết bạn muốn xuất ra màn hình hay muốn lưu trữ nó dạng biến để xử lý, $seplocation giúp xác định vị trí hiện của ký tự $sep là bên trái hay bên phải title.
wp head(): hàm này được khai báo bổ sung giúp cho các plugin dễ dàng chèn thêm các tag riêng của nó vào phần head của trang. Bạn chỉ việc khai báo như vậy rồi để đó, khi có plugin nào đó cần sử dụng nó sẽ tự gọi để thực hiện action riêng của nó.

Kiểm tra lại

Coi như là ổn cho việc đưa 1 giao diện từ bên ngoài vào. Trong phần tiếp theo của chuỗi bài viết, NhanWeb sẽ hướng dẫn các bạn lập trình từng phần của nội dung chi tiết cũng như cách chúng ta lập trình giao diện WordPress.
Những phần tiếp theo sẽ bao gồm một chút kiến thức php căn bản. Cho nên bạn nào còn yếu hoặc chưa nắm được PHP thì giành thời gian xem lại nhé.

Posted by admin

Thiết kế theme Wordpress bài 6: sử dụng vòng lặp (loop)

Trong phần này, chúng ta sẽ tiếp tục học cách xây dựng giao diện WordPress với phần trình bày trang chủ bằng cách dùng vòng lặp (loop) để lấy các tin cần thiết. Trước tiên chúng ta đọc lại phần 5 để biết công việc đang ở đâu nhé.
Vậy là ở phần trước chúng ta đã import thành công giao diện được thiết kế bằng photoshop(hoặc cái gì đại loại thế không quan trọng, quan trọng là sau cùng 1 template bằng HTML). Tiếp theo chúng ta sẽ trình bày trang chủ. Bạn hãy mở template file index.php mà chúng ta đã có ra:

<?php get_header();?>
<div id="content">Content</div>
<?php get_sidebar(); ?><?php get_footer(); ?>

Trước tiên chúng ta thay

<div id="content">Content</div>

bằng một đoạn code PHP như sau:

<div id="content">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<?php endwhile; ?><?php endif; ?>
</div>

Giải thích đoạn code này như thế này:

Quá trình gọi file index.php, hệ thống WordPress đã chuẩn bị dữ liệu sẵn trước khi show ra giao diện. Hàm have_posts() sẽ kiểm tra xem dữ liệu đã sẵn sàng hay chưa. Nếu dữ liệu đã được lấy ra(lấy cách nào chúng ta tạm thời chưa cần quan tâm), hàm này sẽ trả về true và đoạn code phía trong sẽ hoạt động. Ngược lại sẽ không làm gì cả. Bạn cũng có thể bổ sung else nếu muốn show 1 thông tin nào đó nếu không có dữ liệu.
Nếu kiện có bài viết được thỏa mãn, vòng lặp while phía trong sẽ được kích hoạt và vòng lặp này sẽ chạy từ đầu cho đến cuối danh sách (nghĩa là sẽ duyệt qua từng bài viết mà nó có).
Hàm the_post() là hàm sẽ chịu trách nhiệm lấy ra từng bài viết cụ thể.
endwhile dùng để thông báo rằng vòng lặp sẽ chạy từ đoạn bắt đầu while đến endwhile và những đoạn mã phía sau sẽ không thuộc vòng lặp, không được lặp lại như những thành phần phía trong vòng while này.

Được rồi ! Giờ nhiệm vụ của chúng ta là lấy ra cái chúng ta cần.
Trong vòng lặp while chúng ta sẽ bổ sung đoạn code như sau:

<div class="row">
           <div class="row">
               <h4><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo the_title(); ?></a></h4>
               <?php echo the_excerpt(); ?>
           </div>
       </div>

Bạn chú ý là đoạn code này phải nằm sau while và trước endwhile nhé. Đại loại nó sẽ thế này:

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

        <div class="row">
            <div class="row">
                <h4><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo the_title(); ?></a></h4>
                <?php echo the_excerpt(); ?>
            </div>
        </div>
    <?php endwhile; ?>
<?php endif; ?>

Trong vòng lặp, những phần tử của mảng được đưa vào lần lượt và chúng ta sử dụng một số hàm được WordPress xây dựng sẵn để lấy dữ liệu. Chúng ta có:

the_permalink(): lấy đường dẫn chính xác đến vài viết.
the_title(): lấy tiêu đề bài viết.
the_excerpt(): lấy một đoạn trong bài viết để làm phần mô tả bài. Ngoài the_excerpt(), bạn có thể sử dụng the_content() để lấy nội dung đều được.

Trong các giải thích trên mình đều có gắn liên kết đến phần document của từng hàm để các bạn tìm hiểu thêm cách sử dụng chúng. Nếu có thời gian các bạn nên xem nhé, nhất là điểm khác nhau khi sử dụng the_excerpt() và the_content().
Tuy chưa hoàn chỉnh nhưng đó là những gì một theme wordpress show ra ở trang chủ. Bạn chỉ cần tùy chỉnh 1 tí cho CSS nữa là sẽ đẹp như mơ

Posted by admin

Thiết kế theme Wordpress bài 7: làm việc với content

Hôm nay chúng ta sẽ tìm hiểu về cách biên soạn và viết 1 trang thể hiện chi tiết nội dung một bài viết. Nếu bạn đã nghiên cứu các phần trước của chuỗi bài bạn sẽ thấy tôi đang muốn nói đến cách viết nội dung của một trang single.php.

the_content() – hàm chiến lược

Đây là hàm quan trọng nhất trong nội dung của phần này. Ở phần 6, chúng ta đã sử dụng hàm the_content() để lấy và thể hiện nội dung của một danh sách bài viết. Phần này chúng ta cũng sử dụng nó để thể hiện nội dung chi tiết – bạn thấy đấy, tính năng của nó thật nhiều phải không ?
Trước tiên, ta hãy quan sát một file single.php đơn giản:

<div class="box">
<h2><a href="<?php echo get_option('home'); ?>/">Home</a> » <?php the_category(' »'); ?> » Currently Reading:</h2>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="block">
<div class="article first_main_article">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<div class="meta">
<span class="time"><?php the_time('F j, Y'); ?></span>
<span class="categories"><?php the_category(', ') ?></span>
<span class="discuss"><?php comments_number('No Comments', '1 Comment', '% Comments'); ?></span>
<?php if (is_user_logged_in()) : ?>
<span class="editlink"><?php edit_post_link('Edit This Post', '', ''); ?></span>
<?php endif; ?>
</div>
<?php echo get_video($post->ID); ?>
<?php if (get_option(THEME_PREFIX . "post_thumbnails_single")) { ?>
<a href="<?php the_permalink() ?>" class="image"><?php the_post_thumbnail(); ?></a>
<?php } ?>
<?php the_content(''); ?>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
</div>

Một số giải thuật có trong đoạn code này mình đã giải thích với các bạn ở phần trước như vòng loop, toán tử điều kiện (if …else…) nên mình sẽ không nói lại những thứ này nữa. Chúng ta tìm hiểu những thành phần mới.

get_option(): đây là một hàm quan trọng của wordpress. Nhiệm vụ của nó là lấy giá trị tương ứng từ table wp_options với keyword được đưa vào. Trong đoạn mã trên, thứ nó lấy ra là đường dẫn đến trang chủ thông qua keyword ‘home‘. Nếu bạn muốn lấy giá trị khác thì cứ theo đó mà lấy.
the_category(): nhiệm vụ của hàm này là lấy các category chứa bài viết. Có nhiều đối số truyền vào nhưng theo đoạn mã trên thì chúng ta chỉ đưa vào một đối số đó là hậu tố đứng phía sau category được lấy ra. Category sẽ được đính kèm theo đường dẫn theo nên chúng ta cũng không cần quan tâm đến đường dẫn.
the_title_attribute(): bạn chú ý là hàm này khác với the_title() mà chúng ta đã có dịp nhắc đến trước đây. Điểm giống nhau là nó đều lấy tiêu đề. Nhưng điểm khác nhau nó tiêu đề đã được remove các charater đặc biệt có thể làm ảnh hưởng đến cấu trúc đúng của HTML. Trong trường hợp bạn sử dụng the_title() ở vị trí của the_title_attribute() có thể dẫn đến bị lỗi code do các kí tự đặc biệt gây ra.
the_time(): hàm này có tác dụng lấy ra ngày, giờ đăng bài viết lên.
comments_number(): hàm này giúp ta lấy số lượng comment cho bài viết. Chúng ta có 3 đối số truyền vào đó là các giá trị nếu không có comment nào, có 1 comment và có nhiều hơn 1 comment. Cách đưa đối số bạn có thể tham khảo ở vị trí nó được sử dụng.
is_user_logged_in(): đây là hàm giúp kiểm tra người dùng có đăng nhập hay chưa. Nếu người dùng đã đăng nhập và là tác giả của bài viết hàm này sẽ trả về true và đoạn code này bên trong nó sẽ được phép thực thi.
edit_post_link(): hàm này là một hàm tuy không quan trọng nhưng hỗ trợ chúng ta đưa một đường dẫn chỉnh sửa nội dung bài vào bên dưới bài viết nhằm giúp việc chỉnh sửa bài viết được dễ dàng và nhanh chóng hơn. Như đã nói ở trên, hàm này được đặt vào bên trong điều kiện is_user_logged_in() nên nó chỉ thực thi khi người dùng đăng nhập. Khi viết giao diện bạn cũng nên chú ý chỗ này để tăng cường tính bảo mật và tránh user bình thường nghịch dại bấm bậy bạ.
the_post_thumbnail(): hàm này mới được bổ sung từ phiên bản 3.0.0 của WordPress giúp lấy thumbnail của bài viết. Chúng ta có thể kết hợp với một điều kiện như sau:

if( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();}

Ngoài ra mình cũng có một ghi chú nhỏ cho các bạn là hàm này chỉ có thể thực thi được khi bạn bổ sung thêm cho theme tính năng hỗ trợ thumbnail bằng cách thêm vào functions.php đoạn mã sau:

add_theme_support( 'post-thumbnails' );

9. the_content(): hàm này thì không cần phải nói nhiều nữa vì đã nói đến trong các phần trước khá nhiều

Lưu ý khi sử dụng the_content

Do đặc thù của bài viết được biên tập từ Admin, các bài viết đều được sử dụng thẻ <p> để nhập liệu. Do đó, để tránh việc các stylesheet bị nhầm lẫn hoặc bị override do sự kế thừa. Chúng ta nên đặt the_content vào một cặp thẻ <div> và định danh class (hoặc id) cho cặp thẻ này. Điều này sẽ giúp bạn dễ dàng phân biệt thẻ <p> của content và biên tập file styles.css dễ dàng hơn.

<div id="the_content_here" class="the_content"> <?php the_content(''); ?></div>

Một số hàm thường được sử dụng khi xuất nội dung chi tiết một bài viết trong wordpress

Ngoài những hàm mình đã liệt kê ở trên, mình giới thiệu thêm với các bạn một số function hữu ích thường được sử dụng khi xuất content ở trang single.php hoặc page.php. Nội dung chi tiết bạn click vào liên kết để tham khảo nhé. Trong phạm vi một bài viết mình không thể nói hết với các bạn.

the_author(): trả về tên tác giả bài viết.
the_ID(): trả về ID của bài viết.
posts_nav_link(): hiển thị liên kết đến bài trước và bài sau. Ngoài ra bạn có thể sử dụng next_post_link() và previous_post_link() để hiển thị liên kết trước và sau của bài viết.

Bài viết hôm nay kết thúc ở đây. Mong rằng sẽ cung cấp cho các bạn những thông tin cần thiết khi thiết kế theme. Nhân tiện, mình cũng muốn chia sẻ một kinh nghiệm quí báu của mình khi tìm hiểu về theme và tập thiết kế theme WordPress: bạn cứ mở các theme đã được người khác làm và tìm hiểu, nghiên cứu về mục đích sử dụng của họ bạn sẽ có thể tự thiết kế… giống họ

Posted by admin

Thiết kế theme Wordpress bài 8: làm việc với comment

Một thành phần không thể tách rời và góp phần tạo nên sức mạnh của WordPress đó là comment. Tính năng này ngoài việc tạo ra một khung trao đổi gữa tác giả bài viết và người đọc còn là một công cụ khá hữu ích giúp người dùng thường xuyên quay lại để tham khảo các góp ý của người dùng khác cũng như nhận những phản hồi đa chiều.
Trong phần 7, chúng ta đã nói về content, phần này cũng thuộc về content nhưng mình muốn tách riêng ra để chúng ta dễ dàng quan sát hơn.

Xây dựng comments.php

Trước tiên, bạn cần tạo một file comments.php có nội dung như sau:

<?php // Do not delete these lines
if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Please do not load this page directly. Thanks!');
if (!empty($post->post_password)) { // if there's a password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie ?>
<h2><?php _e('Password Protected'); ?></h2>
<p><?php _e('Enter the password to view comments.'); ?></p>
<?php return;
}
}
/* This variable is for alternating comment background */
$oddcomment = 'alt';
?>

<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to "<?php the_title(); ?>"</h3>
<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
<div class="commentmetadata">
<strong><?php comment_author_link() ?></strong>, <?php _e('on'); ?> <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> <?php _e('at');?> <?php comment_time() ?></a> <?php _e('Said:'); ?> <?php edit_comment_link('Edit Comment','',''); ?>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.'); ?></em>
<?php endif; ?>
</div>
<?php comment_text() ?>
</li>
<?php /* Changes every other comment to a different class */
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>
<?php endforeach; /* end for each comment */ ?>
</ol>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>

<?php else : // comments are closed ?>

<p class="nocomments">Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<h3 id="respond">Leave a Reply</h3>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Logout »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="40" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="40" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="40" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>

<p><textarea name="comment" id="comment" cols="60" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
<?php endif; // if you delete this the sky will fall on your head ?>

Trong nội dung file này, mình đã có sẵn những thứ các bạn cần cho một hệ thống comment của wordpress. Bạn thiết kế thêm một chút CSS nữa cho comment và cho chúng vào style.css để nó đẹp đẽ hơn nhé

Đưa comment vào nội dung
Công việc tiếp theo của chúng ta là đưa comments.php đã thiết kế vào trong trang single.php (là nơi comment sẽ xuất hiện). Bạn bổ sung vào phía dưới the_content() nội dung sau:

<div class=”comments-template”><?php comments_template(); ?></div>

Nhiệm vụ của đoạn code này là gọi hàm comments_template(), hàm đó như thế nào ?
Hàm này là hàm được xây dựng sẵn bởi hệ thống WordPress, và nếu bạn click vào liên kết mình đã đính kèm vào hàm bạn sẽ thấy hàm này có tác dụng gọi file comments.php mà chúng ta đã thiết kế ở trên.
Trong đoạn code đầu tiên mình đã đưa lên, chúng ta có một số hàm mới mà mình chưa có dịp giới thiệu. Hôm nay có khác hơn những nội dung đã viết ở các bài trước 1 xíu là các bạn tự copy vào codex.wordpress.com để tìm hiểu các hàm nha. Mình nghĩ để các bạn vận động tay chân 1 chút sẽ tốt hơn

Một số điểm đáng lưu ý

Trong đoạn code đầu tiên chúng ta có thể dễ dàng tìm thấy các comment được sắp xếp thông qua một Ordered List (OL) chứ không phải Unordered(UL). Bạn có thể thay thế bằng thẻ div nếu muốn nhưng cũng nhớ thay đổi nội dung bên trong luôn cho nó thích hợp vì thẻ li sẽ đi kèm với ol hoặc ul thôi.
Trong đoạn code trên chúng ta cũng thiếu 1 số thứ, ví dụ như đối với các bài viết yêu cầu phải có mật khẩu mới có thể comment. Chúng ta sẽ làm điều đó như sau:

Chúng ta có thể sử dụng hàm wp_list_comments() để tạo ra một danh sách comment. Hàm này được xây dựng sẵn bởi WordPress nhưng nếu sử dụng nó đồng nghĩa với việc tùy biến nội dung (như cách trên) của chúng ta sẽ bị hạn chế lại. Một cách khác để tùy biến hàm wp_list_comments() đó là gọi gàm callback để override lại mặc định của wp_list_comments() như sau:

<ul class="commentlist"><?php wp_list_comments('type=comment&callback=mytheme_comment'); ?></ul>

Tuy nhiên phần này mình sẽ không nói tới ở đây. Bạn có thể tự nghiên cứu hoặc xem thêm trong codex. Phần này là tùy biến nâng cao khá hay

Posted by admin

Thiết kế theme Wordpress bài 9: Làm việc với widget

Hôm nay chúng ta tiếp tục công việc thiết kế giao diện WordPress bằng cách tự xây dựng các widget riêng để phục vụ công việc của mình nhé.

Widget là gì ?

Câu hỏi này có thể là hơi thừa nhưng không phải ai cũng có thể hiểu được đúng nghĩa của nó. Mà để có thể xây dựng được nó thì mình nghĩ các bạn nên biết rõ về nó một tí.

Widget là một đoạn mã động giúp thể hiện một phần nội dung nào đó lên website mà không làm ảnh hưởng đến các thành phần khác. Nó cũng tương tự như thuật ngữ plugin hoặc extension mà bạn hay gặp ở các ứng dụng web. Đối với WordPress, các widget được xây dựng linh động cho phép kéo thả cho phép kéo thả các widget vào các vị trí mà giao diện có thể cho phép xuất hiện.

Một điểm chúng ta cần phải lưu ý khi làm việc với widget là tùy theo giao diện mà widget được cho phép thể hiện ở một ví trí nào đó. Bạn cũng đừng thắc mắc là tại sao cái giao diện này widget có thể đặt ở vị trí này, mà cũng cái widget đó nhưng lại không thể đặt được nó ở vị trí tương ứng trên 1 giao diện khác.

Làm việc với giao diện: xác lập trị trí cho phép widget

Đây là công việc đầu tiên mà bạn phải làm khi thiết kế giao diện. Bạn nên cho người dùng những tùy biến riêng của mình trên giao diện bạn xây dựng để người dùng có thể dễ dàng làm chủ giao diện ấy.
Trước tiên, chúng ta đưa đoạn code sau nào functions.php

/**
* Register widgetized areas, including two sidebars and widget-ready columns in the footer.
*
* To override nhanweb_widget() in a child theme, remove the action hook and add your own
* function tied to the init hook.
*
* @uses register_sidebar
*/
function nhanweb_widget() {
    // Dang ky widget cho Admin
    register_sidebar( array(
        'name' => __( 'Widget cột phải', 'nhanweb' ),
        'id' => 'right-widget-area',
        'description' => __( 'Vị trí widget cột bên phải', 'nhanweb' ),
        'before_widget' => '<li id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );
    register_sidebar( array(
        'name' => __( 'Widget Footer', 'nhanweb' ),
        'id' => 'footer-widget-area',
        'description' => __( 'Vị trí widget ở cuối thang', 'nhanweb' ),
        'before_widget' => '<li id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );
}
/** Register sidebars by running nhanweb_widget() on the widgets_init hook. */
add_action( 'widgets_init', 'nhanweb_widget' );

Đoạn code này có tác dụng gọi hàm nhanweb_widget() mà để đăng ký các vị trí đặt widget trong Dashboard khi hook widgets_init được gọi. Theo như cấu trúc mà mình đã viết ở trên. Bạn có thể đăng ký bao nhiêu Widget cũng được.

Kết quả đăng ký widgetBạn mở Dashboard truy cập vào phần Widget sẽ thấy:

Widget trong Dashboard

Đồng thời, chúng ta quay lại theme đang sử dụng sẽ thấy phần Widget được bổ sung vào option của theme:

Option theme Widget

Công việc tiếp theo mà chúng ta cần làm đó là xác lập vị trí hiển thị của 2 vùng widget như đã khai báo ở trên trong theme. Nói cách khác, chúng ta cần nói cho theme biết là đối với vị trí bên phía tay phải, chúng ta sẽ lấy widget area có ID = right-widget-area và ở vị trí Footer chúng ta yêu cầu lấy những widget nằm trong vùng id = footer-widget-area.

Công việc này khá đơn giản, tại vị trí cần lấy thứ tương ứng chúng ta bổ sung đoạn code sau:

Đoạn mã giúp thể hiện widget trên trang

Phần này mình không để code vì muốn các bạn tự gõ lại nhé….
Một điểm bạn cần lưu ý khi xây dựng Widget là các Widget được thể hiện dưới dạng mỗi list item (tag li). Do đó, khi viết đoạn này bạn cần đưa widget vào tag ul hoặc ol như đoạn code trên của mình.
Đoạn code này mình add vào sidebar.php vì vị trí widget cần thể hiện được đặt ở đó. Bạn chú ý ID đưa vào phải đúng với ID đã khai báo. Tương tự như vậy cho vị trí widget dưới Footer trong file footer.php. Bạn muốn xây dựng thêm các widget khác và tìm những vị trí đặt khác (ví dụ như vị trí feature article, homepage, theo category…) thì bạn tự thiết lập đúng chỗ nhé.

Sau khi hoàn tất đoạn code trên, chúng ta tiến hành kéo thử các widge vào vị trí tương ứng và kiểm tra. Kết quả widget sẽ hiện ra trang
Như vậy là chúng ta đã làm việc việc giúp các Widget có sẵn của WordPress hiển thị lên trang trang. Trong phần tiếp theo chúng ta sẽ cùng nhau nghiên cứu cách viết 1 widget riêng cho mình. Các bạn đón đọc nhé.

Posted by admin

Thiết kế theme Wordpress bài 10: Làm việc với widget(tiếp theo)

Ở phần trước chúng ta đã tìm hiểu Widget là gì và làm thể nào để đưa các widget vào giao diện thiết kế của mình. Phần bài hôm nay sẽ là phần chuyên sâu hơn, bởi chúng ta sẽ học cách làm thế nào thiết kế một widget riêng cho mình.
Để bắt đầu phần này, trước tiên tôi xin giới thiêu sơ qua với mọi người một lớp (class) widget của WordPress.
Trong WordPress, các widget được xây dựng dựa trên sự kế thừa(inherit) lớp cha của nó. Lớp cha này chính là những xác lập mặc định của widget mà WordPress đã xây dựng sẵn cho bạn. Một khi bạn kế thừa từ lớp cha, các thuộc tính của lớp cha sẽ được di truyền sang lớp con. Điều này nếu bạn nào học lập trình hướng đối tượng sẽ dễ dàng hình dung ra, còn những bạn mới làm quen với các khái niệm lập trình hướng đối tượng sẽ cảm thấy bỡ ngỡ. Tuy nhiên, tôi chỉ nói cho các bạn biết là như vậy thôi vì tôi không muốn đi quá sâu vào mảng kiến thức lập trình.

Như đã nói ở trên, khi thiết kế một widget, chúng ta sẽ thừa kế lớp cha widget của nó đã được định nghĩa đầy đủ. Việc cần làm là xác định object widget cần xây dựng thừa kế từ lớp cha widget đã được WordPress xây dựng sẵn và xây dựng thêm các thuộc tính riêng mà bạn mong muốn. Object widget cần xây dựng được viết dưới dạng class như sau.

class Widget_name extends WP_Widget
{
function Widget_name(){

}

/* Displays the Widget in the front-end */
function widget($args, $instance){

}

/*Saves the settings. */
function update($new_instance, $old_instance){

}

/*Creates the form for the widget in the back-end. */
function form($instance){

}

}// end Widget_name class

function registerWidget_nameInit() {
register_widget('Widget_name');
}

add_action('widgets_init', 'registerWidget_nameInit');

Hãy nhìn đoạn mã mà tôi đã cung cấp cho các bạn ở bên trên.
Chúng ta có 1 class tên là Widget_name, một hàm registerWidget_nameInit và một hành động gọi hàm registerWidget_nameInit khi hook widgets_init hoạt động.
Class Widget_name mà tôi thiết kế ở trên bao gồm 4 action tương ứng với 4 function được khai báo bên trong:

Widget_name(): đây là hàm khởi tạo(còn gọi là hàm Constructor). Nó được gọi khi bạn tạo một đối tượng (object) với tên là tên class. Ví dụ, khi bạn tạo một object A, hàm contructor sẽ tự động được thực thi và làm một số công việc bạn mong muốn như khai báo ngày tháng năm sinh, khởi tạo các giá trị chiều cao, cân nặng gì đó…
widget(): hàm này sẽ có nhiệm vụ thể hiện widget của bạn ra ngoài giao diện. Bạn muốn nó hiển thị cái gì thì khai báo ở đó.
update(): hàm này tôi dùng cho backend để thực hiện việc lưu dữ liệu thiết lập cho widget của tôi. Ví dụ như tôi muốn lưu tiêu đề widget, số tin sẽ hiện, có hiện ngày tháng đăng tin hay ko…
form(): hàm này sẽ tạo ra form ở phần widget trong backend cho tôi. Tôn muốn lưu cái gì tôi sẽ thể hiện ở form này.

- Hàm registerWidget_nameInit(), tôi xây dựng để khai báo với anh chàng WordPress rằng tôi sẽ xử dụng cái class Widget_name như một Widget.
Xong, vậy là tôi đã giới thiệu sơ qua cho các bạn cấu trúc Widget rồi. Giờ chúng ta sẽ bắt tay viết một widget đơn giản.

Viết một widget đơn giản: Giới thiêu Admin.
Để demo cho các bạn viết 1 widget đơn giản tôi chọn widget giới thiệu về Admin (about me). Theo đó tôi đặt tên cho widget của tôi là nhanweb_Aboutme. Để tránh việc trùng tên với các function và class mà có thể các plugin khác sẽ đặt. Tốt nhất khi viết code hoặc function bạn nên đặt tên bằng cách chèn thêm một tiếp đầu ngữ (prefix) giống như tôi để tránh trùng nhé !
Tôi lấy đoạn mã trên đặt vào functions.php của giao diện như sau:

class nhanweb_Aboutme extends WP_Widget
{
function nhanweb_Aboutme(){
}
/* Displays the Widget in the front-end */
function widget($args, $instance){
}
/*Saves the settings. */
function update($new_instance, $old_instance){
}
/*Creates the form for the widget in the back-end. */
function form($instance){
}
}// end Widget_name class
function registernhanweb_AboutmeInit() {
register_widget('nhanweb_Aboutme');
}
add_action('widgets_init', 'registernhanweb_AboutmeInit');

Bắt đầu viết các sự kiện cho class nhanweb_Aboutme mà tôi đã giải thích với mọi người thôi

Viết hàm Contructor

Hàm này được tôi viết như sau:

function nhanweb_Aboutme(){
$widget_ops = array('description' => 'Hiện thông tin giới thiệu tác giả');
$control_ops = array('width' => 400, 'height' => 300);
parent::WP_Widget(false,$name='NhanWeb About me',$widget_ops,$control_ops);
}

Bạn chú ý là các giá trị $widget_ops và $control_ops bạn không được đổi keyword của mảng nếu bạn không nắm rõ về nó vì nó được thừa kế từ lớp cha WP_Widget như chúng ta đã khai báo ở đầu class:

class nhanweb_Aboutme extends WP_Widget

Sau khi viết xong hàm này tôi đã có một widget trong admin. Nhưng nếu kéo và thảy widget vài vị trí cần thể hiện tôi chẳng có một lựa chọn nào cho nó cả.

Widget sau khi viết xong constructor

Viết hàm form để tùy chọn cho Admin

Để bổ sung các lựa chọn cho Widget, tôi sẽ viết tiếp một form nhập liệu thông qua hàm form() như sau:

function form($instance){
//Defaults
$instance = wp_parse_args( (array) $instance, array('title'=>'Về tôi', 'imagePath'=>'Ảnh', 'aboutText'=>'Giới thiệu') );

$title = htmlspecialchars($instance['title']);
$imagePath = htmlspecialchars($instance['imagePath']);
$aboutText = htmlspecialchars($instance['aboutText']);

# Title
echo '<p><label for="' . $this->get_field_id('title') . '">' . 'Tiêu đề:' . '</label><input id="' . $this->get_field_id('title') . '" name="' . $this->get_field_name('title') . '" type="text" value="' . $title . '" /></p>';
# Image
echo '<p><label for="' . $this->get_field_id('imagePath') . '">' . 'Ảnh:' . '</label><textarea cols="20" rows="2" id="' . $this->get_field_id('imagePath') . '" name="' . $this->get_field_name('imagePath') . '" >'. $imagePath .'</textarea></p>';
# About Text
echo '<p><label for="' . $this->get_field_id('aboutText') . '">' . 'Giới thiệu:' . '</label><textarea cols="20" rows="5" id="' . $this->get_field_id('aboutText') . '" name="' . $this->get_field_name('aboutText') . '" >'. $aboutText .'</textarea></p>';
}

Đoạn mã

$instance = wp_parse_args( (array) $instance, array('title'=>'', 'imagePath'=>'', 'aboutText'=>'') );

Sẽ thiết lập các giá trị mặc định nếu như các thông tin không được bổ sung. Đoạn mã phía dưới nó sẽ hiện form nhập liệu như hình:

Form nhập liệu cho widget

Viết hàm update để cập nhật dữ liệu

Sau khi nhập liệu đầy đủ, chúng ta tiến hành lưu các dữ liệu đã nhập để sử dụng khi thể hiện. Hàm update() được viết như sau:

/*Saves the settings. */
function update($new_instance, $old_instance){
$instance = $old_instance;
$instance['title'] = stripslashes($new_instance['title']);
$instance['imagePath'] = stripslashes($new_instance['imagePath']);
$instance['aboutText'] = stripslashes($new_instance['aboutText']);
return $instance;
}

Bạn thấy đoạn code trên không ! Khi bạn nhấn nút Save, WordPress sẽ hiểu là các giá trị nhập vào là các giá trị $new_instance, các giá trị cũ sẽ là $old_instance. Với 2 giá trị này bạn sẽ xử lý tùy ý và trả về cái cuối cùng là $instance dạng mảng (array) để wordpress tự động gọi lưu trữ. Xem chừng việc lưu dữ liệu của Widget rất dễ dàng

Viết hàm widget

Chúng ta đã tiến hành khai báo, tạo form nhập liệu và lưu dữ liệu rồi, giờ công việc cuối cùng là thể hiện cái Widget chúng ta đã thiết kế ra ngoài thế nào thôi. Đây là đoạn mã tôi viết cho hàm widget():

function widget($args, $instance){
extract($args);
$title = apply_filters('widget_title', empty($instance['title']) ? 'Về tôi' : $instance['title']);
$imagePath = empty($instance['imagePath']) ? '' : $instance['imagePath'];
$aboutText = empty($instance['aboutText']) ? '' : $instance['aboutText'];
echo $before_widget;
if ( $title )
echo $before_title . $title . $after_title;

?>
<div class="clearfix">
<img src="<?php echo $imagePath; ?>" id="about-image" alt="about us image" />
<p><?php echo($aboutText)?></p>
</div>
<?php
echo $after_widget;
}

Bạn chú ý: các biến $before_widget, $before_title, $after_title,$after_widget cần được đặt vào để có thể khai báo thêm các thông số cần thiết sau này.Vậy là xong, tận hưởng thành quả đi nha !

Bonus: toàn bộ mã nguồn

<?php
/**
* Register widgetized areas, including two sidebars and widget-ready columns in the footer.
*
* To override nhanweb_widget() in a child theme, remove the action hook and add your own
* function tied to the init hook.
*
* @uses register_sidebar
*/
function nhanweb_widget() {
// Dang ky widget cho Admin
register_sidebar( array(
'name' => __( 'Widget cột phải', 'nhanweb' ),
'id' => 'right-widget-area',
'description' => __( 'Vị trí widget cột bên phải', 'nhanweb' ),
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
) );

register_sidebar( array(
'name' => __( 'Widget Footer', 'nhanweb' ),
'id' => 'footer-widget-area',
'description' => __( 'Vị trí widget ở cuối thang', 'nhanweb' ),
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
) );
}
/** Register sidebars by running nhanweb_widget() on the widgets_init hook. */
add_action( 'widgets_init', 'nhanweb_widget' );

class nhanweb_Aboutme extends WP_Widget
{
function nhanweb_Aboutme(){
$widget_ops = array('description' => 'Hiện thông tin giới thiệu tác giả');
$control_ops = array('width' => 400, 'height' => 300);
parent::WP_Widget(false,$name='NhanWeb About me',$widget_ops,$control_ops);
}
/*Creates the form for the widget in the back-end. */
function form($instance){
//Defaults
$instance = wp_parse_args( (array) $instance, array('title'=>'', 'imagePath'=>'', 'aboutText'=>'') );

$title = htmlspecialchars($instance['title']);
$imagePath = htmlspecialchars($instance['imagePath']);
$aboutText = htmlspecialchars($instance['aboutText']);

# Title
echo '<p><label for="' . $this->get_field_id('title') . '">' . 'Tiêu đề:' . '</label><input id="' . $this->get_field_id('title') . '" name="' . $this->get_field_name('title') . '" type="text" value="' . $title . '" /></p>';

# Image
echo '<p><label for="' . $this->get_field_id('imagePath') . '">' . 'Ảnh:' . '</label><textarea cols="20" rows="2" id="' . $this->get_field_id('imagePath') . '" name="' . $this->get_field_name('imagePath') . '" >'. $imagePath .'</textarea></p>';
# About Text
echo '<p><label for="' . $this->get_field_id('aboutText') . '">' . 'Giới thiệu:' . '</label><textarea cols="20" rows="5" id="' . $this->get_field_id('aboutText') . '" name="' . $this->get_field_name('aboutText') . '" >'. $aboutText .'</textarea></p>';
}

/*Saves the settings. */
function update($new_instance, $old_instance){
$instance = $old_instance;
$instance['title'] = stripslashes($new_instance['title']);
$instance['imagePath'] = stripslashes($new_instance['imagePath']);
$instance['aboutText'] = stripslashes($new_instance['aboutText']);

return $instance;
}

/* Displays the Widget in the front-end */
function widget($args, $instance){
extract($args);
$title = apply_filters('widget_title', empty($instance['title']) ? 'Về tôi' : $instance['title']);
$imagePath = empty($instance['imagePath']) ? '' : $instance['imagePath'];
$aboutText = empty($instance['aboutText']) ? '' : $instance['aboutText'];

echo $before_widget;

if ( $title )
echo $before_title . $title . $after_title;

?>
<div class="clearfix">
<img src="<?php echo $imagePath; ?>" id="about-image" alt="about us image" />
<p><?php echo($aboutText)?></p>
</div>
<?php
echo $after_widget;
}

}// end Widget_name class

function registernhanweb_AboutmeInit() {
register_widget('nhanweb_Aboutme');
}

add_action('widgets_init', 'registernhanweb_AboutmeInit');
?>

Chúc các bạn thành công !

Posted by admin