Cách tạo theme WordPress

phổ biến.

Một trang HTML5 cơ bản sẽ giống như sau:

My HTML5 Page

My Website

My Articles

An Article

Left

Right

Copyright © 2017

Responsive Design là gì?

Responsive Design tức thiết kế có độ phản hồi cao, nghĩa là website của bạn sẽ tự động hiển thị ở định dạng tốt nhất cho khách truy cập dựa trên kích thước màn hình của họ. Bố cục trang sẽ phản hồi lại các khoảng trống có thể trên màn hình khách truy cập. Nội dung được đặt một cách hoàn hảo để không có gì bị cắt bỏ, không có gì tràn ngập trên màn hình và trang web của bạn sẽ trở nên vừa mắt.

Bạn nên nghĩ đến cách bố trí trang web của mình như là một loạt các lưới [grids] và cho nội dung theo phần trăm chiều rộng của lưới. Ví dụ: một thẻ div có thể chiếm 50% không gian có sẵn chứ không phải 800px theo chiều rộng. Một trang div đầy đủ theo chiều rộng sẽ chiếm 100% không gian sẵn có do đó nếu bạn muốn có 4 div bên trong nó trong thì mỗi cái sẽ chiếm khoảng 25% không gian.

Đối với hình ảnh, bạn có thể đặt nó theo chiều rộng tối đa 100% kích thước thực và đặt chiều cao tự động. Khi khung chứa của hình ảnh giảm kích thước, hình ảnh sẽ tự động giảm chiều rộng và chiều cao tương ứng.

Nếu sử dụng width: 100% thay vì max-width: 100% sẽ làm cho hình ảnh chiếm 100% không gian trống thay vì dừng ở chiều rộng thực của nó bằng. Nếu hình ảnh có chiều rộng 200px nhưng nằm bên trong một div chiếm 100% màn hình, max-width nghĩa là hình ảnh không bao giờ rộng hơn 200px.

/* GOOD WIDTH */ .inline-text-box { width: 50%; } /* BAD WIDTH */ .inline-text-box { width: 800px; } /* GOOD IMAGE */ img { max-width: 100%; height: auto } /* BAD IMAGE */ img { width: 100%; height: auto; }

Để làm một theme WordPress responsive có tính cơ động cao, bạn cũng có thể sử dụng một tính năng của CSS3 tên là media queries. Trong media queries bạn có thể tùy ý xác định media type để thay đổi [màn hình, bản in vv] ở ít nhất một media feature [max-width, orientation,..]. Các media feature có thể được xâu lại với nhau bằng cách sử dụng từ khoá and.

/* Media Type and Media Feature*/ @media only screen and [min-width: 400px] and [max-width: 800px] { .inline-text-box { width: 100%; display: block; } } /* Media Feature Only */ @media [max-width: 1200px] { .inline-text-box { width: 50%; } }

• Trong ví dụ đầu tiên, CSS sẽ được áp dụng cho bất kỳ màn hình nào [màn hình, điện thoạ,] có chiều rộng có thể xem được giữa 400px và 800px.
• Ví dụ thứ hai sẽ được áp dụng cho bất kỳ loại phương tiện nào xem nó.
• Loại media type khác là print, có nghĩa là CSS sẽ chỉ được áp dụng nếu người dùng đang xem chế độ print-preview của trang web.

Một danh sách đầy đủ các media types và media features có thể được tìm thấy trên website của Mozilla Developer Network.

Trong CSS stylesheet, bạn định nghĩa các quy tắc chỉ ra khi nội dung được thay đổi thì nội dung gì được thay đổi và nội dung đó được thay đổi như thế nào. Bạn có thể thay đổi bất kỳ thuộc tính CSS nào theo cách này, chẳng hạn như chiều rộng của bất kỳ textbox nào hoặc màu nền của một div. Một số ví dụ về quy tắc media-feature chỉ ra khi các quy tắc được áp dụng:

max-width chiều rộng tối đa của khu vực có thể xem được của trình duyệt, lớn hơn vùng này thì các quy tắc đều không được áp dụng.

min-width chiều rộng tối thiểu cho vùng có thể xem được, nhỏ hơn vùng này thì các quy tắc đều không được áp dụng.

orientation bất kỳ màn hình nào dù là ở chế độ portrait hay landscape

Một ví dụ phổ biến là khi bạn có hai text box cạnh nhau mà cả hai chiếm 50% màn hình. Khi cửa sổ trình duyệt được nhỏ hơn, các text box tự động điều chỉnh để vẫn chiếm 50% cửa sổ thay vì biến mất bên ngoài. Nếu cửa sổ trình duyệt quá nhỏ để hiển thị chính xác tất cả các văn bản trong các text box đó, bạn có thể để nó chiếm 100% kích thước cửa sổ và hiển thị bên trên cái còn lại. Bạn cũng có thể ẩn nội dung hoàn toàn nếu thích hợp hơn.

Bước 1 Lưu trữ các tập tin của theme WordPress responsive

Nào chúng ta cùng bắt đầu vào bài hướng dẫn tạo theme WordPress responsive.

Theme WordPress responsive được lưu tại thư mục wp-content/themes. Trong thư mục này, hãy tạo một thư mục mới mang tên my-theme

Theme WordPress responsive có thể được tạo ra với chỉ 2 files là index.php và style.css. WordPress sẽ sử dụng nó để hiện thị các bài viết, các trang trên website.

Thực tế, bạn sẽ muốn các bài viết, các trang và các phần khác của trang web có bố cục [layout] riêng. Mỗi phần của trang web của bạn sẽ có file riêng để lưu giữ HTML và PHP cho riêng phần đó mỗi file như vậy được gọi là template.

Nếu bạn sử dụng các loại bài viết tùy chỉnh, bạn có thể tạo mẫu chỉ áp dụng cho các bài viết thuộc loại đó. Nếu bạn muốn các bài viết thuộc một thể loại cụ thể hiển thị theo kiểu khác, bạn có thể thực hiện điều đó bằng cách sử dụng câu lệnh if then trong vòng lặp.

Mỗi template file phải dùng chính xác tên được định nghĩa trong Tài liệu của WordPress.

Một vài template file không nằm trong index.php:

• header.php chứa các đoạn HTML nằm ở phần đầu của trang, bắt đầu từ
• single.php được sử dụng khi hiển thị một bài viết [post] từ blog của bạn
• page.php được sử dụng khi hiển thị một trang [page] từ blog của bạn
• comments.php xác định cách mà nhận xét và textbox nhận xét được hiển thị
• footer.php chứa các đoạn HTML nằm ở phần cuối của trang, bao gồm

Bạn có thể tham khảo danh sách đầy đủ các template tại đây

Bây giờ bạn đã có một thư mục để chứa theme WordPress responsive, bạn cần tạo một vài template file đơn giản.

Bước 2 Tạo các file template và CSS

Trong thư mục my-theme, bạn hãy tạo các files PHP như sau:

• header.php

• index.php

• footer.php

• functions.php

• sidebar.php

• single.php

• page.php

Tiếp tục tạo thêm file style.css [đây là file stylesheet chính, nó bắt buộc phải có tên là style.css]

Bước đầu tiên sau khi tạo tất cả các files như trên là thêm một vài thông tin vào phần đầu của file style.css để WordPress đọc và hiển thị các thông tin về theme của bạn ở Admin Control Panel.

Phần thông tin này cần được viết dưới dạng ghi chú của CSS [comment] trên nhiều dòng như sau:

Bố cục:Keyword: Information

/* Theme Name: My Theme Author: Hostinger Author URI: //www.hostinger.vn/huong-dan Description: My first responsive HTML5 theme Version: 1.0 License: GNU General Public License v3 or later License URI: //www.gnu.org/licenses/gpl-3.0.html */

Có nhiều phần để bạn định nghĩa như tên theme WordPress responsive, tên người tạo, phiên bản của theme,Bạn có thể tham khảo thêm các từ khóa định nghĩa của WordPress tại đây

Vào lúc này, theme WordPress responsive của bạn đã được hiển thị ở Theme trong Admin Control Panel

Tuy nhiên lúc này theme của bạn vẫn chưa có hình đại diện, chúng ta sẽ chụp một cái sau khi hoàn thành việc tạo theme.

Nếu bạn tiến hành kích hoạt theme lúc này sẽ gặp trang trắng bởi vì file index.php chưa chó nội dung và cũng chưa có template nào được định nghĩa.

Bây giờ chúng ta sẽ thêm đoạn CSS định nghĩa phần màu nền của trang. Mở file style.css và tiến hành thêm đoạn mã sau vào.

* { box-sizing: border-box; } body { background-color: #f9f9f9; font-family: Helvetica; }

Ký tự * rất quan trọng, nó tượng trưng cho tất cả các lớp trong trang HTML. Chiều rộng và chiều cao cuối cùng của mỗi mục trên trang sẽ bao gồm nội dung, phần đệm và đường viền. Nếu bạn không đặt điều này và có hai hộp rộng 50% gắn liền với đệm hoặc đường viền, chúng sẽ không đứng cạnh nhau vì kích thước thực của chúng lớn hơn 100%. Một hộp 100% chiều rộng với 1% đường viền thực sự là 102% chiều rộng, vì 1% đường viền được thêm vào bên trái và phải. Quy tắc này có hiệu quả thêm vào đường viền bên trong hộp thay vì bên ngoài nó.

Mục tiếp theo chỉ thay đổi màu nền của trang để chúng ta có thể nhanh chóng xem liệu các stylesheet đang được sử dụng như thế nào. Chúng tôi cũng thiết lập phông chữ mặc định sẽ được sử dụng trong theme WordPress responsive.

Bước 3 Trước khi bắt đầu việc phát triển

Trước khi thực sự bắt đầu tạo theme layout cho WordPress, bạn nên thêm một vài đoạn mã vào các files khác nhau để tạo cho mình một điểm khởi đầu Những bước này không bắt buộc nhưng rất khuyến khích bạn thực hiện.

Các bước này sẽ có các giải thích ngắn gọn để bạn có thể nhanh chóng chuyển sang thực sự xây dựng layout.

Đầu tiên, chúng ta sẽ nhúng một file có tên là normalize.css. Các trình duyệt khác nhau có cài đặt mặc định khác nhau cho những thứ như lề trang và phần đệm. Normalize.css sẽ cài đặt một số thuộc tính để đảm bảo rằng tất cả các trình duyệt hiển thị trang của bạn chính xác như nhau. Nếu bạn không sử dụng stylesheet để đặt các giá trị mặc định này, một số lỗi phổ biến sẽ xảy ra khi bạn cố gắng tạo phần đầu nằm ở phía trên cùng bên trái của mỗi trang, lúc này sẽ thật sự có một phần trống ở đầu của mỗi trang.

functions.php

Mở file functions.php và thêm đoạn mã sau:

Dòng đầu tiên sẽ cho WordPress biết rằng nếu không có widget nào được bật thì đoạn mã HTML cho sidebar sẽ không được hiển thị. Dòng thứ hai sẽ đặt thuộc tính cho các phần tử nằm trong widget. HTML5 cung cấp phần tử aside cho sidebar. Dòng thứ ba là hàm của WordPress dùng để hiển thị sidebar. Dòng cuối là câu lện đóng lại mệnh đề if.

Save lại file sidebar.php vào thư mục theme WordPress responsive của bạn.

Để dễ dàng trong việc di chuyển qua lại giữa bài viết [post] và trang [page], hãy mở Admin Control Panel để thêm widget Pages và Recent Posts vào sidebar. Bây giờ chúng ta sẽ tiếp tục đi xây dựng layout.

Bước 4 Xây dựng layout với template

header.php

header.php sẽ định nghĩa phần đầu của trang web bắt đầu bằng định nghĩa DOCTYPE

Tất cả các văn bản HTML đều bắt đầu bằng định nghĩa DOCTYPE, nó sẽ giúp cho Trình duyệt biết cách để xử lý văn bản này. HTML5 chỉ đơn giản là van bản html. Thẻ mở cần một thuộc tính ngôn ngữ và WordPress cung cấp một hàm chức năng để nhập chính xác mã ngôn ngữ cho ngôn ngữ mà bạn đã chọn trong quá trình cài đặt đó là hàm language_attributes[].

Trong phần title, bạn sẽ cần sử dụng một đoạn mã để hiển thị tên website của bạn cũng như một mệnh đề ifthenđể hiển thị phần tagline cũng như tiêu đề của trang hoặc bài viết đang được đọc.

Các dấu ? là một toán tử có điều kiện PHP có tên là toán tử thứ ba. Trong dòng mã này, is_front_page[] là một hàm chức năng của WordPress trả về TRUE nếu xem trang đầu, hoặc FALSE nếu xem bất kỳ bài viết hay trang nào. Hàm trước dấu hai chấm được sử dụng nếu TRUE được trả về, và hàm sau dấu hai chấm được sử dụng nếu FALSE được trả về.

Như bạn thấy bên dưới, hàm chức năng bloginfo[] được sử dụng nhiều lần với các tham số khác nhau để nhận các phần thông tin khác nhau từ cơ sở dữ liệu WordPress. Trước khi thẻ đóng với , bạn phải sử dụng hàm wp_head[] để đảm bảo mọi chức năng gắn liền với nó được chạy.

Hàm body_class[] cung cấp cho phần body các lớp CSS mặc định được thiết lập bởi WordPress. Dòng cuối cùng cho phép menu điều hướng được hiển thị nếu có một cái đã được tạo ra trong Admin Control Panel.

File header.php sau cùng sẽ trông giống như sau:

»