Làm thế nào để tạo theme WordPress responsive bằng HTML5

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Làm thế nào để tạo theme WordPress responsive bằng HTML5 bạn sẽ học cách tạo một theme WordPress responsive bằng HTML5, CSS3 và các nguyên tắc thiết kế có độ phản hồi cao khác

Giới thiệu

Theme WordPress là tập hợp các files xác định cách sắp xếp trang web của bạn. Một theme bao gồm HTML, PHP và CSS, và cũng thường sử dụng JavaScript/jQuery.  Trong bài hướng dẫn WordPress này, bạn sẽ học cách tạo một theme WordPress responsive bằng HTML5, CSS3 và các nguyên tắc thiết kế có độ phản hồi cao khác. Bạn cũng sẽ học phương pháp để tách các phần khác nhau của chủ đề thành ‘templates’.

Theme cũng như các plugin được cách ly với mã cốt lõi của WordPress. Theme cấp phép trang web của bạn có bố cục nhất quán cho mỗi trang, bài viết và cũng có thể mau chóng được sửa để thay đổi giao diện trang web của bạn. Để hiển thị thông tin từ WordPress hoặc nội dung của một bài viết, bạn phải sử dụng các template tags được cung cấp bởi WordPress, và những điều này sẽ được giải thích trong hướng dẫn.

Sau khi kết thúc chỉ dẫn này và tạo một theme WordPress responsive mới, bạn phải làm theo hướng dẫn tạo child theme cho WordPress để mở rộng theo một số gì bạn đã học được. Theme WordPress responsive tạo ra trong hướng dẫn này sẽ cung cấp cho bạn nền tảng hoàn hảo để sử dụng trong bài hướng dẫn tạo child theme.

Bạn cần gì?

  • Trình soạn thảo văn bản (Notepad++ hoặc NetBeans)
  • Tải khoản FTP để truy cập vào Hosting
  • Một bản cài đặt WordPress trên host

Chúng tôi khuyên bạn nên tải về bảng hướng dẫn CSS và mở nó bởi vì trong bài hướng dẫn này bạn sẽ cực kỳ luôn phải chỉnh sửa file style.css của WordPress.

HTML5 là gì và tại sao bạn phải dùng nó

HTML5 là phiên bản mới nhất của ngôn ngữ web HTML . Nó cung cấp một bộ các tính năng tối tân giúp bạn hiển thị nội dung của mình một cách nhất quán trên bất kỳ máy tính, máy tính xách tay, máy tính bảng hay điện thoại di động.

Sự thay đổi lớn nhất là có 1 bộ các yếu tố ngữ nghĩa HTML mới. Ví dụ, phần footer của bất kỳ trang HTML nào lúc này có thể được định vị bằng phương pháp dùng thẻ và điều đó cho trình duyệt web hiểu được nội dung chứa trong đấy là một phần của foooter. Trong các phiên bản HTML trước đây, phần footer được tạo bằng thẻ phổ biến.

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

             My HTML5 Page                  
 
 
   
     

My Articles

   
   
     
       

An Article

     
     

Left

Right

   
 
   

Copyright © 2017

 

Responsive Design là gì?

Responsive Design tức thiết kế có tính phản hồi cao, tức là website của bạn sẽ tự động hiển thị ở định hình tốt nhất cho khách truy cập dựa trên kích 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 1 cách hoàn hảo để không có gì bị cắt bỏ, không có gì tràn lan trên màn hình và trang web của bạn sẽ trở nên vừa mắt.

theme wordpress responsive

Bạn nên nghĩ đến cách sắp xếp trang web của mình như là một loạt các lưới (grids) và sẽ cho nội dung theo phần trăm bề rộng của lưới. Ví dụ: một thẻ div cũng có thể có thể chiếm 50% không gian có sẵn chứ không phải 800px theo phía rộng. Một trang div đầy đặn theo hướng 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 gần 25% không gian.

Đối với hình ảnh, bạn cũng đều có thể đặt nó theo bề rộng nhiều nhất 100% kích cỡ thực và đặt độ 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 bề rộng và độ cao tương ứng.

Nếu sử dụng width: 100% thay vì max-width: 100% sẽ khiến 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ó bề rộng 200px nhưng nằm bên trong một div chiếm 100% màn hình, max-width tức là hình ảnh không khi nào 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ể 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 ý định vị “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ũng đều có thể được xâu lại cùng nhau bằng cách 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 tỉ 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 đặn các “media types” và “media features” cũng 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 kia được thay đổi như thế nào. Bạn có thể thay đổi bất kỳ thuộc tính CSS nào theo phương pháp này, chẳng hạn như bề rộng của bất kỳ textbox nào hoặc màu nền của một div. Một số tỉ dụ về quy tắc “media-feature” chỉ ra lúc các quy tắc được áp dụng:

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

min-width – bề rộng ít nhất cho vùng cũ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 tỉ dụ thông dụng là lúc 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 tiết để 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á bé để hiển thị chuẩn xác tất cả những văn bản trong số text box đó, bạn cũng đều có thể để nó chiếm 100% kích cỡ cửa sổ và hiển thị bên trên cái còn lại. Bạn cũng có thể 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

Thực hiện ngay khi những thay đổi nhỏ cho một theme WordPress responsive cũng có thể có thể gây nên lỗi và làm cho trang web của bạn không sử dụng được. Một vấn đề phổ biến là sau khi thay đổi code, bạn gắng gượng tải trang web của bạn và được một màn hình trắng được gọi là the white screen of death . Tìm gỡ lỗi trong trường hợp này có thể rất khó khăn.

Để tránh ảnh hưởng đến website, chúng tôi khuyên bạn nên test ở máy cá nhân. Sau khi mọi thứ hoạt động ổn định, hãy tiến hành upload lên host . Bạn cũng có thể có thể tìm hiểu phương pháp để tạo localhost chạy WordPress trên Windows hoặc sử dụng Docker để chạy WordPress.

Nào chúng ta cùng bắt đầu vào bài chỉ 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

Lưu ý: tên của thư mục theme chưa được chứa số và khoảng trắng. Nếu bạn dự định chia sẽ theme của mình lên WordPress.org Theme Directory thì nên chắn chắc rằng chưa tồn tại ai đó đã dùng tên đó trước bạn.

Theme WordPress responsive có thể được tạo ra với chỉ 2 files là index.php 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 xem là “template”.

Nếu bạn sử dụng các loại bài viết tùy chỉnh, bạn cũng có thể 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 mong 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ũng đều có thể thực hành điều ấy bằng phương pháp sử dụng câu lệnh if… then… trong khoảng lặp.

Mỗi template file phải dùng chuẩn 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 dùng khi hiển thị một bài viết (post) từ blog của bạn
  • page.php – được dùng khi hiển thị một trang (page) từ blog của bạn
  • comments.php – định vị 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 ngay phần cuối của trang, bao gồm

Bạn cũng có thể có thể tham khảo bản kê đầy đặn các template tại đây

Bây giờ bạn đã có một thư mục để chứa theme WordPress responsive, bạn phải 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ó sẽ phải mang tên là style.css)

theme wordpress responsive style css

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

Phần thông tin này phải được viết dưới dạng chú thích của CSS (comment) trên rất nhiều dòng như sau:

Bố cục:  Keyword: Information

 /* Theme Name: My Theme Author: Hostinger Author URI: http://www.hostinger.vn/huong-dan Description: My first responsive HTML5 theme Version: 1.0 License: GNU General Public License v3 or later License URI: http://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ũng 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

theme wordpress

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

Nếu bạn triển khai kích hoạt theme bây giờ sẽ gặp trang trắng chính 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 khái niệm phần màu nền của trang. Mở file style.css và triển khai 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à độ cao cuối cùng của mỗi mục trên trang sẽ cho dù là nội dung, phần đệm và đường viền. Nếu bạn không đặt điều đó 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 cỡ thực của chúng lớn hơn 100%. Một hộp 100% bề rộng với 1% đường viền thực thụ là 102% chiều rộng, vì 1% đường viền được thêm vô bên trái và phải. Quy tắc này có hữu hiệu thêm vô đườ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ũng đều 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 đích thực bắt đầu tạo theme layout cho WordPress, bạn nên thêm 1 vài đoạn mã vào các files khác nhau để tạo cho mình 1 điểm xuất phát Những bước này sẽ không bắt buộc nhưng rất khuyến khích bạn thực hiện.

Các đoạn này sẽ được những giải thích ngắn gọn để bạn có thể nhanh chóng chuyển sang đích thực thành lập 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ông trùng lặp có cài đặt mặc định không trùng lặp cho các thứ như lề trang và phần đệm. Normalize.css sẽ cài đặt một số thuộc tính để đáp ứng rằng tất cả những trình duyệt hiển thị trang của bạn chuẩn 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 thông dụng 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, bây giờ sẽ rất sự có phần nào trống ở đầu của mỗi trang.

functions.php

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

  <?php // This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we use an online version of the css file. function add_normalize_CSS() { wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css"); } 

Tiếp theo, bạn sẽ cần bật sidebar widget. Nếu bạn không thêm đoạn mã này vào thì đường dẫn tới menu widget sẽ không hiển thị trong Admin Control Panel và do đó bạn sẽ không thêm được bất kỳ widget nào. Thêm tiếp tục đoạn mã sau vào file functions.php

 // Register a new sidebar simply named 'sidebar' function add_widget_Support() {             register_sidebar( array(                             'name'       =>  'Sidebar',                             'sidebar',                             'before_widget' =>  ' 
',                             'after_widget'  => '
',                             'before_title'  => '

',                             'after_title'   => '

',             ) ); } // Hook the widget initiation and run our function add_action( 'widgets_init', 'add_Widget_Support' );

Bây giờ chúng ta cần thiết lập tùy chỉnh điều phối cho menu để dùng được tại Appearance -> Menu ở Admin Control Panel

 // Register a new navigation menu function add_Main_Nav() {  register_nav_menu('header-menu',__( 'Header Menu' )); } // Hook to the init action hook, run our navigation menu function add_action( 'init', 'add_Main_Nav' ); 

Tiếp tục thêm doạn mã trên vào file functions.php và lưu lại ở thư mục theme của bạn.

   sidebar.php   

Mở file sidebar.php và thêm đoạn mã sau vào, vấn đề này cấp phép sidebar và widget xuất hiện trong theme của bạn bất kể khi nào hàm get_sidebar() được gọi.

           

Dòng trước mắt 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ẽ chưa được hiển thị. Dòng thứ hai sẽ đặt tính chất cho các thành phần 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 làm 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.

Để đơn giản 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ẽ khái niệm khúc đầ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 khái niệm DOCTYPE, nó sẽ giúp cho Trình duyệt biết cách để giải quyết văn bản này. HTML5 chỉ dễ dàng 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 dùng một quãng mã để hiển thị tên website của bạn cũng như một mệnh đề if…then…để 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 mang 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 dùng nhiều đợt với những tham số không trùng lặp để nhận các phần thông tin không trùng lặp 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() để đáp ứng 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 cấp phép menu điều hướng được hiển thị nếu có một chiếc đã được tạo ra trong Admin Control Panel.

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

     <html no numeric noise key 1052          »         <meta charset="  ">                      
  
'header-menu' ) ); ?>

Nếu bạn muốn dùng logo như là phần header thì hãy thay thế bằng đoạn mã dẫn đến hình ảnh bên trong tag

Lưu lại file header.php vào thư mục theme của bạn.

index.php

index.php khái niệm phần trang chủ và nó sẽ sử dụng layout mặc định nếu một vài files đặc biệt trong template ( single.php , page.php ) không được tìm thấy.

Chúng ta sẽ dùng template tag để chắc chắn rằng phần mã đầu (get_header), sidebar (get_sidebar) và footer (get_footer) có trong phần trang chủ.

Vòng lặp của WordPress sẽ hiển thị một bản kê các bài đăng và trích đoạn của chúng với nhiều template tag hơn. Chúng ta cũng sẽ sử dụng các thành phần ngữ nghĩa HTML5 như

, ,

. Một số thành phần sẽ có các lớp được gán cho chúng và các lớp sẽ được ghi khi chúng ta truy cập vào file style.css.

         
 
   
     

      By:    
     
 
   

Sorry, no posts were found!

 
 

Vòng lặp bắt đầu tại và kết thúc tại . Bên trong khoảng lặp, các template tag sau được sử dụng.

  • – xuất ra URL đúng của bài viết
  • – xuất ra tiêu đề của bài viết ở định dạng an toàn cho tính chất tiêu đề của liên kết
  • – xuất ra tiêu đề của bài viết
  • – xuất ra tên của người viết
  • – xuất ra trích đoạn của bài viết, nó được tự tạo ra nếu bạn không viết phần này

 

cũng có thể được sử dụng nhiều đợt trên bất kỳ trang nào và không tham khảo cụ thể đến khúc đầu trang.

Các phần và bài viết nên có những thành phần tiêu đề nơi bất kỳ văn bản nào bên trong

Lưu lại file index.php, nếu bạn thử truy cập bạn sẽ thấy một hình ảnh tương tự như sau: file index

footer.php

footer.php khái niệm phần cuối của mỗi trang và phải đóng bất kỳ thẻ HTML mở nào trong các files template trước đó. Trong tình huống này và vẫn mở từ header.php .

 

Nó cũng phải cho dù là hàm wp_footer() để đáp ứng bất kỳ mã WordPress cuối cùng nào cũng như JavaScript được thêm nữa trang. Nếu bạn đã đăng nhập với tư cách là quản trị viên khi bạn truy cập trang chủ, bài viết hoặc trang, bạn sẽ nhận ra thanh quản trị viên bị thiếu. Mã hiển thị thanh quản trị được kết nối với hàm wp_footer().

Chúng ta sẽ thêm thành phần ngữ nghĩa HTML5 để xác định rõ ràng phần cuối trang.

  
 

Copyright © 2017

 

Lưu lại file footer.php vào thư mục theme của bạn.

single.php

single.php khái niệm phần layout lúc xem một bài viết trên trang web của bạn. Nó cũng đều có thể hoàn toàn khác với index.php .

Trong trường hợp này, chúng ta sẽ không thêm sidebar vào bài viết chỉ để làm nổi bật sự khác biệt trong layout.

Nội dung chính chiếm toàn bộ bề rộng của trang vì chúng ta đã cung cấp cho nó lớp content-full-width từ stylesheet. Liên kết đã trở nên xoá khỏi tiêu đề vì nó chẳng cần phải có ở đây. Chức năng để hiển thị bài đăng đầy đủ là the_content() :

         
 
   
     

      By:    
    
 
   

Sorry, no post was found!

 
 

page.php

page.php khái niệm cách trang được hiển thị và có thể khác biệt với index và layout của bài viết.

Hãy nhớ rằng nếutemplate không tồn tại, template index.php sẽ có sử dụng thay thế. Nếu bạn không tạo page.php , nó sẽ không sử dụng layout giống như posts.php .

Để làm cho sự khác biệt hiển thị rõ rệt hơn, chúng ta sẽ thêm lại sidebar cho layout này và làm cho nội dung trang chiếm 70% bề rộng của trang.

         
 
   
     

      By:    
     
 
   

Sorry, no page was found!

 
 

Lưu lại page.php vào thư mục theme của bạn.

style.css

Thêm phần sau vào cuối của stylesheet. Điều này sẽ làm cho các box khác nhau có một nền trắng và đường viền màu xanh, để giúp hình dung bao nhiêu không gian mỗi một đích thực chiếm.

 /* Theme Name: My Theme1 Author: Your Name Author URI: http://www.yourwebsite.com Description: My first responsive HTML5 theme Version: 1.0 License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html */ * {  box-sizing: border-box; } body { background-color: #f9f9f9; font-family: Helvetica; } .my-logo, footer {  width: 100%;  padding-left: 1%;  margin-bottom: 8px;  background-color: #78baff;  border: 1px solid #78baff; } body >  header >  h1 >  a { color: #ffffff; font-weight: 400; } article >  header { } footer {  margin-top: 4px; } a {  text-decoration: none; } /* 'Margin: 0 auto' centers block content on the page */ .wrap {  width: 99%;  margin: 0 auto; } .content-area {  display: inline-block; } .content-thin { width: 70%; } .content-full-width { width: 100%; } .content-area, .primary-sidebar {  display: inline-block; } .primary-sidebar {  width: 25%;  padding: 1%;  vertical-align: top;  background-color: #ececec; } .article-loop { width: 45%; text-align: left; margin: 5px; padding: 10px; } .article-full {  width: 99%;  padding: 1%; } .article-loop, .article-full {  display: inline-block;  vertical-align: top;  background-color: #FFF;  border-radius: 4px;  margin-bottom: 4px; } 

 

Lưu lại style.css vào thư mục theme của bạn.

Bây giờ bạn có các template cơ bản và stylesheet, bạn có thể dễ dàng điều phối qua bài viết và trang của mình. Theme mới tạo của bạn sẽ giống như thế này.

theme wordpress responsive 3

Sử dụng media queries

Vì layout cơ bản của chúng ta có 2 hộp nội tuyến ở trang đầu, nên chúng ta cũng đều có thể dễ dàng thay đổi cách hiển thị để văn bản chính xác khi cửa sổ trình duyệt quá nhỏ.

Đối với chỉ dẫn về theme WordPress responsive này, chúng ta sẽ thay đổi bề rộng của bài viết trong danh sách bài viết khi cửa sổ trình duyệt ở dưới 800px. Thay nhờ có 2 bài viết cạnh nhau, mỗi bài viết sẽ được 1 dòng riêng. Chúng ta sẽ làm điều đó bằng cách thêm “media query”. Nếu bạn cần coi lại các “media query”, hãy quay về “Responsive Design là gì?” trong chỉ dẫn này trước khi tiếp tục.

Khi viết các “media query”, bạn có thể viết chúng ở bất cứ đâu trong stylesheet. Bạn cũng có thể đặt tất cả các “media query” ở cuối stylesheet hoặc viết “media query” cụ thể cho các mục cụ thể ngay bên dưới định nghĩa ban đầu. Đó chỉ là vấn đề bạn nghĩ là hợp lý nhất.

Đầu tiên chúng ta sẽ viết một “media query” ảnh hưởng đi học .article-loop, trong đó có bề rộng là 49% theo mặc định. Chúng ta sẽ viết nó trực tiếp dưới định nghĩa ban đầu. Truy vấn “media query” sẽ nêu rõ rằng nếu cửa sổ trình duyệt nhỏ hơn 800px rộng, lớp .article-loop  nên sử dụng 99% không gian có sẵn thay thế.

Sau đó, chúng tôi sẽ viết truy vấn “media query” khi cửa sổ trình duyệt nhỏ hơn 600px, đẩy thanh sidebar xuống dưới nội dung chính và nối dài cả nội dung chính và sidebar để làm được độ rộng 100%. Đây sẽ là cách bố trí thích hợp hơn cho thiết bị di động nơi không gian bị hạn chế.

Vẫn còn trong style.css, tìm .article-loop và thêm tiếp đoạn mã như sau:

 @media screen and (max-width: 800px) {  .article-loop {    width: 99%;  } } 

Dòng đầu cho thấy truy vấn “media query” chỉ nên ảnh hưởng đến các màn hình (không phải chế độ xem trước lúc in) và chỉ ảnh hưởng đến các cửa sổ trình duyệt có chiều rộng 800px trở xuống. Lưu file style.css vào thư mục của theme. Đi tới trang chủ của trang web bạn. Thay đổi kích cỡ cửa sổ trình duyệt và khi nó băng qua bề rộng 800px, bạn sẽ thấy các hộp cho mỗi bài đăng thay đổi bề rộng và thả xuống dưới hộp bên kia.

 

Tiếp tục giảm bề rộng của cửa sổ trình duyệt cho tới khi nó càng nhỏ càng tốt. Bạn sẽ thấy rằng tất cả những văn bản trở nên khó đọc hơn vì nó có quá ít không gian, nhưng tại thời điểm nào nó sẽ biến mất khỏi màn hình. Nếu bề rộng được xác định như bề rộng pixel thay vì tỷ suất phần trăm, ngay cả cửa sổ trở nên quá nhỏ, sidebar sẽ biến mất và đòi hỏi cuộn ngang.

 

Truy vấn “media query” tiếp theo mà chúng ta sẽ thêm sẽ tương tự với truy vấn nói trên. Nó sẽ cho nội dung chính và sidebar để chiếm 100% không gian sẵn có và sidebar sẽ rơi xuống dưới nội dung chính.

 

LƯU Ý: Vì điều ấy ảnh hưởng đến các lớp không trùng lặp ở những nơi không trùng lặp trong stylesheet, nên thay vào đó đặt nó ở dưới cùng của stylesheet.

 @media screen and (max-width: 400px) {  .content-area,  .primary-sidebar {    width: 100%;  } } 

 

Lưu style.css vào thư mục theme của bạn. Quay lại trang chủ của bạn và thay đổi kích thước cửa sổ trình duyệt cho tới khi bạn thấy nội dung chiếm 100% chiều rộng và sidebar sẽ xuống dưới nội dung chính.

 

Hiểu về WordPress Template Tags và Action Hooks

Để tích hợp đầy đặn theme của bạn với WordPress, bạn cần dùng template tags và action hooks. Đây là hai thứ khác biệt rõ rệt.

Template tags

Template tags là các hàm PHP được cung cấp bởi WordPress để đơn giản cho dù là các template files (như header.php) từ theme của bạn trong 1 file khác hoặc để hiển thị một số tin tức từ cơ sở dữ liệu.

Ví dụ: để hiển thị phần footer trên trang chủ nhưng vẫn không ở bất kỳ trang nào khác, hãy thêm get_footer() vào cuối index.php nhưng vẫn không có trong page.php.

Dưới đây là hai danh sách ngắn về một số template tags quan trọng để cung cấp cho bạn ý tưởng về những tags nào có sẵn.

Các template tags để cho dù là các file khác:

  • get_header() – kể cả header.php trong  template
  • get_sidebar() – bao gồm  sidebar.php trong  template
  • get_footer() – kể cả  footer.php trong  template
  • get_search_form() – bao gồm  searchform.php trong  template

Các template tags để hiển thị thông tin từ cơ sở dữ liệu:

 

LƯU Ý: Một số template tags phải được sử dụng trong khoảng lặp. Vòng lặp được giải thích sau trong hướng dẫn và dễ dàng chỉ có nghĩa là mã truy xuất bất kỳ bài đăng nào được yêu cầu.

 

  • bloginfo () – hiển thị tin tức được yêu cầu dưới dạng tham số, nghĩa là bloginfo (“name”) cho biết tên trang web của bạn như được định nghĩa trong Admin Control Panel ( xem danh sách các tham số )
  • single_post_title () – hiển thị tiêu đề của bài đăng được xem hiện tại khi được sử dụng trong single.php
  • the_author () – hiển thị người sáng tác của bài viết hiện đang xem
  • the_content () – hiển thị văn bản rút gọn của bài viết hoặc trang
  • the_experpt () – trích đoạn bài viết hoặc trang

 

Danh sách đầy đủ của template tags có thể được tính tại đây

Action hooks

Action hooks là các hàm PHP được cung cấp bởi WordPress thường có những chức năng khác gắn liền với chúng. Một số không có chức năng kèm theo mặc định và tồn tại để sử dụng bởi các plugin. Action hooks cấp phép các plugin thêm các chức năng riêng của chúng và cấp phép chúng chạy ở các vị trí không giống nhau khi tải một trang.

Trong theme header template của bạn, action hook wp_head() được gọi để bao gồm tiêu đề WordPress mặc định HTML bên trong thẻ . Nó có 1 số chức năng WordPress cốt lõi để thêm HTML vào trang rồi cho phép bất kỳ chức năng gắn liền với nó bằng plugin để chạy.

Trong phần footer của theme, một action hooks wp_footer() được gọi để cho dù là HTML mặc định và JavaScript, và chạy bất kỳ chức năng nào được đính kèm bởi plugin.

Nếu bạn không sử dụng action hooks trong lúc tạo theme WordPress responsive, mã cốt lõi quan trọng sẽ bị thiếu và plugin không thể hoạt động chính xác.

Ví dụ: không gọi wp_footer() trong footer.php template sẽ chặn không hiển thị thanh Admin bar khi bạn đăng nhập với vai trò quản trị viên. Mã WordPress cốt lõi dùng để làm hiển thị Admin bar được gắn vào móc tác vụ wp_footer(), và các chức năng đính kèm chẳng thể chạy nếu action hooks không tồn tại.

Để có lý giải đầy đủ về các Action Hooks, hãy đọc phần Actions and Action Hooks của bài hướng dẫn này .

Vòng lặp trong WordPress

Vòng lặp được dùng làm hiển thị các bài đăng. Nó có thể được dùng để hiển thị một bài viết hoặc mọi thứ các bài viết được xuất bản của bạn trên một trang duy nhất. HTML mà bạn viết trong khoảng lặp sẽ có sử dụng để hiển thị mỗi bài viết yêu cầu của vòng lặp. Mã sẽ tiếp tục lặp cho đến khi nó đạt đến bài viết cuối cùng.

Nếu để hiển thị một bài viết bạn sử dụng template tags the_content() bên trong vòng lặp để hiển thị nội dung của bài viết . Nếu để hiển thị danh sách tất cả bài viết đã xuất bản, bạn có thể sử dụng the_experpt() bên trong vòng lặp để toàn bộ bài viết chưa được hiển thị.

Vòng lặp là một mệnh đề if…then…được rút gọn trong 4 dòng như sau. Dòng đầu tiên phát biểu rằng nếu một bài viết được tìm thấy, trong khi bài viết có sẵn, sử dụng mã sau để hiển thị bài viết. Nếu không tìm thấy bài phù hợp, bạn có thể khái niệm văn bản thay thế. Ví dụ WordPress mặc định sẽ như thế này, và dòng nhận xét là nơi mà các thẻ HTML và mẫu của bạn được viết:

    // HTML and template tags here to define the layout, and what is shown from the post      

Lời kết

Xin chúc mừng! Bạn đã hoàn thành bài chỉ dẫn tạo theme WordPress responsive bằng HTML5 với độ phản hồi cao.

Bây giờ bạn đã hiểu về template và template tags, hãy xem qua bản kê các template template tags từ trang phát triển của WordPress. Đồng thời bạn cũng có thêm hiểu biết để thêm 1 số mục vào layout, thay đổi CSS Style cũng giống cách thay đổi “media query” sao cho phù hợp.

Bạn đã có thể tiếp tục xem tiếp bài viết về kiểu cách tạo Child Theme WordPress Responsive

 

Từ khóa bài viết: dinhthuanit.com,

Bài viết Làm thế nào để tạo theme WordPress responsive bằng HTML5 được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang