Hướng dẫn tinh chỉnh WordPress Themes

Bài này là phần 12/13 trong series Hướng dẫn WordPress cơ bản

Hướng dẫn tinh chỉnh WordPress Themes
Đánh giá bài viết

Trong các bài viết trước, tôi đã trình bày cách tìm kiếm, cài đặt cũng như tùy biến một WordPress Themes cơ bản. Nhiều người mới chỉ cài đặt và sử dụng WordPress Themes mà không thực hiện tinh chỉnh. Nếu bạn là một người thích khám phá, thích cá nhân hóa cho WordPress Themes của mình thì bài viết này dành cho bạn. Trong bài viết này tôi sẽ chia sẽ một số kiến thức căn bản có thể giúp cho bạn tinh chỉnh WordPress Themes của mình theo nhu cầu và sở thích.

Trước khi bắt đầu tinh chỉnh WordPress Themes, hãy sao lưu dữ liệu của bạn để có thể phục hồi khi cần thiết, tránh những rủi ro trong quá trình tinh chỉnh.

Kiến thức CSS cơ bản

CSS là từ viết tắt của thuật ngữ Cascading Style Sheet. Nó là một ngôn ngữ quy định cách hiển thị của nội dung trên một trang web. Nói một cách đơn giản cho dễ hiểu thì nếu như HTML là bản vẽ phác thảo thì CSS là tô màu và hoàn thiện bản vẽ đó. Mỗi WordPress Theme mà bạn sử dụng CSS. Và phần lớn trong các Header Template của WordPress Theme bạn sẽ tìm thấy đoạn mã lệnh cung cấp định dạng cho các phần tử trên trang web của bạn như sau:

<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo(‘stylesheet_url’); ?>”/>

CSS selectors (Vùng chọn)

Với CSS bạn có thể quy định kiểu dáng (kích cỡ, màu sắc, vị trí hiển thị) của các phần tử trên website (liên kết, khoảng cách hàng, hình ảnh của tiêu đề,…). Vùng chọn chứa tên, thuộc tính và giá trị để xác định các phần tử HTML nào mà bạn muốn định dạng kiểu cho nó. Bạn dùng vùng chọn để khai báo (hoặc chọn) những phần cần áp dụng CSS.

Bảng bên dưới cung cấp cho bạn các ví dụ về vùng chọn CSS và cách sử dụng chúng

CSS selectors
Mô tả
HTML
CSS
body
Quy định kiểu tổng thể cho phần thân của trang web như màu nền, phông chữ mặc định
<body>
body {background-color: white}
Màu nền của tất cả các trang là màu trắng.
p
Chỉ rõ định dạng của đoạn văn bản
<p>Đây là một đoạn văn</p>
p {color: black}
Màu chữ của tất cả các đoạn văn đều màu đen
h1, h2, h3, h4, h5, h6
Cung cấp các tiêu đề cho các phần khác nhau của trang web
<h1> Tiêu đề lớn nhất</h1>
h1 {font-weight: bold;}
a
Quy định cách các liên kết hiển thị trên trang của bạn
<a href= “https://
thanh1986t.com”>Ngọc Thanh Blog</a>
a {color: red}
Tất cả các liên kết đều có màu đỏ.

Bảng 1: Các vùng chọn cơ bản trong CSS

Lớp và định danh (Class và IDs)

Với Class và IDs bạn có thể có nhiều lựa chọn hơn để định dạng kiểu cho các phần tử. Bạn có thể sử dụng các IDs để tạo kiểu cho các phần tử mở rộng khác chẳng hạn như tiêu đề trên trang của bạn. Class (lớp) dùng để định nghĩa, phân loại các đối tượng có chung thuộc tính (ví dụ như hình ảnh, văn bản, widget, liên kết đến bài viết…). Các đối tượng trong cùng một lớp có tính kế thừa lẫn nhau. Sự khác nhau giữa class và ID trong CSS dễ nhận biết nhất đó là:

  • Trước CSS IDs có dấu (#). Ví dụ: #header.
  • Trước Class có dấu (.). Ví dụ .alignleft.

Class và IDs định nghĩa các thuộc tính tạo kiểu cho các phần khác nhau đối với WordPress Themes của bạn. Bảng dưới liệt kê các ví dụ về Class và IDs từ tập tin header.php trong theme Twenty Seventeen. Các thông tin này sẽ giúp bạn dễ dàng tìm kiếm và chỉnh sửa định dạng kiểu đối với một phần nào đó của WordPress Themes.

HTMLCSS SelectorMô tả
<div id=”page”>#pageĐịnh dạng kiểu các phần tử page ID  trong khuôn mẫu (template) của bạn.
<div class=”.site-header”>.site-headerĐịnh dạng kiểu các phần tử của lớp site-header trong khuôn mẫu (template) của bạn
<h1 class=”site-title”>.site-titleĐịnh dạng kiểu các phần tử trong lớp site-title trong khuôn mẫu (template) của bạn, nhưng vẫn phải tuân theo các quy định cho giá trị h1 đã được khai báo trong CSS
<div class=”search-toggle”>.search-toggleĐịnh dạng kiểu các phần tử trong lớp search-toggle trong khuôn mẫu (template) của bạn
<div id=”content”>#contentĐịnh dạng kiểu các phần tử cho content ID trong khuôn mẫu (template) của bạn.

Bảng 2: Liên kết HTML với vùng chọn CSS

Các thuộc tính và giá trị CSS

Thuộc tính CSS được gán cho tên của vùng chọn CSS. Bạn cũng cần phải cung cấp các giá trị cho các thuộc tính CSS để xác định kiểu định dạng các phần tử cụ thể của vùng chọn CSS mà bạn đang làm việc.

Vùng chọn body phía bên dưới sẽ quy định toàn bộ thuộc tính màu sắc cho trang web của bạn. .background là thuộc tính và #DDDDDD là giá trị của màu nền; .color là thuộc tính màu chữ và #222222 là giá trị của nó.

body {

background: #DDDDDD;

color: #222222;

}

Bạn hãy nhớ là phía sau một thuộc tính là dấu hai chấm (:), và theo sau mỗi giá trị là dấu chấm phảy (;). Thuộc tính được gán cho các vùng chọn giống như giá trị được gán cho thuộc tính. Điều này sẽ làm cho CSS trở nên hấp dẫn hơn trong việc cá nhân hóa trang web của bạn. Bạn có thể thử nghiệm, vọc vạch đối với màu sắc, phông chữ, kích cỡ phông chữ và nhiều hơn thế để tinh chỉnh giao diện cho WordPress Theme của bạn.

Thay đổi hình nền với CSS

Sử dụng hình nền là một trong những cách đơn giản nhất để tạo sự khác biệt giữa trang web của bạn với các trang web khác dùng chung một WordPress Themes. Việc tìm kiếm và cài đặt hình nền cho trang web của bạn cũng giống như việc chúng ta tìm kiếm và cài đặt hình nền cho desktop trên máy vi tính. Bạn có thể lựa chọn nhiều thể loại hình ảnh cho website của mình, tùy vào nội dung của trang web như: nhiếp ảnh, nghệ thuật trừu tượng, hình ảnh lặp lại…

Việc tìm kiếm hình ảnh phù hợp với trang web của bạn khá dễ dàng nên tôi không đề cập chi tiết vào nội dung này. Miễn sao bạn không sử dụng các hình ảnh vi phạm bản quyền là được.

Khi bạn làm việc với hình nên trên trang web, hãy sử dụng các định dạng GIF, JPG, PNG. Đối với những hình ảnh cần ít màu sắc như: biểu đồ, logo thì định dạng GIF là lựa chọn tốt nhất. Đối với các kiểu hình ảnh khác thì nên sử dụng định dạng JPG hoặc PNG. Trong đó PNG thường sử dụng cho các hình ảnh có nền trong suốt.

Đối với việc thiết kế web, đặc điểm riêng của mỗi kiểu định dạng hình ảnh sẽ giúp bạn quyết định nên lựa chọn định dạng hình ảnh nào nên dùng cho trang web của mình. Dưới đây là các định dạng ảnh phổ biến và các đặc điểm của nó:

  • JPG: Thích hợp sử dụng cho nhiếp ảnh và các hình ảnh có kích cỡ nhỏ dùng cho dự án thiết kế web. Mặc dù định dạng JPG được nén để giảm chất lượng hình ảnh rất nhiều so với ảnh gốc, bạn vẫn có thể điều chỉnh độ nén khi lưu một hình ảnh JPG để không làm ảnh hưởng quá nhiều đến chất lượng hình ảnh so với ảnh gốc.
  • PNG: Thích hợp sử dụng đối với các hình ảnh có độ phân giải, chi tiết cao trong thiết kế web dùng để quảng bá tổng thể website như: logo, header image. Định dạng PNG sử dụng phương pháp nén dữ liệu mà không làm mất đi dữ liệu gốc. Do đó hình ảnh sau khi nén vẫn rõ ràng, sắc nét. Nó còn phù hợp để tạo ra các hình ảnh với màu nền trong suốt.
  • GIF: Thích hợp đối với việc sử dụng các hình ảnh có ít màu sắc. Tập tin GIF sử dụng phương pháp nén dữ liệu bảo tồn vì thế kích cỡ tập tin giảm đi nhưng sẽ không làm ảnh hưởng đến chất lượng hình ảnh. Định dạng này phù hợp với những hình ảnh có ít hơn 256 màu. Đối với các hình ảnh sử dụng nhiều hơn 256 màu, GIF không phải là định dạng tốt nhất để sử dụng. Lúc này bạn nên sử dụng định dạng PNG.

Tải hình ảnh lên thư viện để sử dụng

Nếu bạn muốn thay đổi hình nền cho WordPress Themes của mình, hãy làm theo các bước sau:

1. Tải hình nền của bạn lên thư viện ảnh trong thư mục cài đặt WordPress Themes

Thường thì thư mục chứa hình ảnh có đường dẫn là wp-content/themes/tên-themes/images.

2. Tại WordPress Dashboard, nhấp vào liên kết Editor trong menu Appearance

Màn hình Edit Themes sẽ xuất hiện.

3. Nhấp vào liên kết Stylesheet (style.css) nằm phía bên phải của trang.

Template style.css sẽ được mở ra trong hộp chỉnh sửa văn bản phía bên trái của màn hình Edit Themes.

4. Lăn chuột xuống và tìm vùng chọn body.

Tôi sẽ trình bày kỹ hơn các vùng chọn CSS ở phần sau của bài viết này. Đoạn mã sau đây là một ví dụ đơn giản về CSS mà bạn có thể dùng để cài đặt màu nền cho trang web của bạn

body {

      background: #f1f1f1;

      }

5. (Tùy chọn) Hãy chỉnh sửa giá trị cho thuộc tính background từ bước 4

Hãy thay đổi background: #f1f1f1; sang

background: #FFFFFF

   url(‘imanges/ten-hinh-nen.gif);

Với ví dụ này bạn đã thêm một hình nền vào mã lệnh có sẵn và thay đổi mày nền thành màu trắng (#FFFFFF).

6. Nhấp vào nút Update File để lưu thay đổi mà bạn vừa chỉnh sửa để áp dụng thay đổi cho WordPress Themes của mình.

Định vị, lặp và đính kèm hình ảnh

 Sau khi bạn đã tải hình nền lên, bạn có thể sử dụng thuộc tính background để định vị hình ảnh theo cách mà mình muốn. Các thuộc tính CSS background-postition, background-repeat và background-attachment giúp bạn thực hiện các tinh chỉnh theo ý muốn của mình.

Bảng phía dưới mô tả các giá trị có sẵn của thuộc tính background mà bạn có thể thay đổi trong bảng định kiểu cho WordPress Themes của mình. Nếu bạn là một người tò mò, thích khám phá bạn sẽ cảm thấy rất thích thú và kiểm tra và tinh chỉnh các giá trị và xem cách nó áp dụng lên trang web của mình

Thuộc tínhMô tảGiá trịVí dụ
background-postition
Chỉ rõ vị trí bắt đầu của hình nền trên trang web của bạn
bottom center
bottom right
left center
right center
center center
background-postition: bottom center;
background-repeat
Xác định cách hình nền được lặp lại
repeat (repeats infinitely)
repeat -y (repeates vertically)
repeat-x (repeats horizontally)
no-repeat (doesn’t repeat)
background-repeat: repeat-y;
background-attachment
Xác định hình nền được cố định hay cuộn theo cửa sổ trình duyệt
fixed
scroll
background-attachment: scroll;
background-origin
Chỉ ra khu vực định vị của hình nền tức là nơi mà hình nền sẽ hiển thị
pading-box
border-box
content-box
initial
inherit
background-origin: content-box;
background-clipXác định nơi màu nền sẽ hiển thị
pading-box
border-box
content-box
initial
inherit
background-clip: padding-box;

Bảng 3: Các giá trị của thuộc tính background

Giả sử bạn muốn lặp lại hình nền để nó có thể tương thích với chiều rộng của trình duyệt trên bất kỳ máy tính nào. Để làm được điều đó bạn mở tập tin style.css và thay đổi

background: #f1f1f1;

thành

background: #FFFFFF;
background-image: url(images/newbackground.gif);
background-repeat: repeat;

Nếu bạn muốn hiển thị hình ảnh một cách cố định không lăn theo hoặc không di chuyển khi độc giả di chuyển trên trình duyệt, bạn có thể dùng các thuộc tính background-postition, background-repeat và background-attachment để hiển thị một cách chính xác các bạn muốn nó hiển thị.

Bạn cũng có thể lặp lại hình nền vừa vặn với chiều rộng, chiều dài hiển thị của trang web. Để làm được điều đó bạn cần thay đổi thuộc tính background trong tập tin style.css như sau:

background: #FFFFFF;
background-image: url(images/newbackground.gif);
background-postition: top left;
background-repeat: repeat;

Nếu bạn đã thành thạo trong việc sử dụng các thuộc tính CSS, bạn có thể rút ngắn mã lệnh làm cho nó trể nên hiệu quả, ngắn gọn hơn. Với đoạn mã lệnh phí trên chúng ta có thể rút ngắn lại như sau:

background: #fff url(images/newbackground.gif) repeat top left;

Như bạn có thể thấy từ ví dụ trên, thay đổi hình nền bằng cách dùng các tùy chọn CSS có liên quan làm tăng khả năng sáng tạo và thiết kế của bạn. Khi bạn sử dụng đúng các tùy chọn này, bạn có thể dùng CSS để tăng kỹ năng thiết kế web của bạn.

Sử dụng Header Image

Hầu hết Header Image của các WordPress Themes thường nằm ở phía trên của trang. Header Image được tạo nên bởi các giá trị của thuộc tính CSS hoặc dùng tính năng Custom Image trong WordPress. Trong Themes mặc định Twenty Seventeen WordPress đã tạo sẵn Header Image cho bạn. Nhưng bạn vẫn có thể thay đổi, tùy chỉnh Header Image cho WordPress Themes của mình.

Để tinh chỉnh Header Image, bạn làm theo các bước sau với themes Twenty Seventeen đang sử dụng.

1. Trong WordPress Dashboard, nhấp vào liên kết Header trên menu Appearance

Trang Custom Header sẽ hiện ra, với bảng điều khiển Customizing Header Media hiển thị phía bên trái màn hình

2. Trong phần Header Image, nhấp vào nút Add New Image.

Màn hình Choose Image hiện ra.

3. Nhấp vào nút Select and Crop để mở màn hình Crop Image.

4. Cắt, xén hình ảnh theo ý thích của bạn.

5. Nhấp vào nút Crop Image để tạo Header Image của bạn.

6. Nhấp vào nút Save & Publish tại góc phải phía trên của màn hình Customizing Header Media để lưu lại các thay đổi.

Bạn có thể tải lên nhiều hình ảnh để sử dụng cho Header Image và nhấp nút Randomize Uploaded Headers trong bảng điều khiển Customizing Header Media để nói với theme Twenty Seventeen rằng bạn muốn nhìn thấy mỗi Header Image khác nhau mỗi khi tải trang. Tùy chọn này làm cho trang web của bạn có một chút đặc biệt.

Theme Twenty Seventeen chỉ dùng Header Image mặc định chứ không sử dụng video cho header của bạn. Tuy nhiên bạn vẫn có thể thêm video từ youtube để làm nền cho header, để độc giả của bạn có thể nhìn thấy video tại khu vực header thay vì hình ảnh.

Hãy làm theo các bước sau để tạo Header Video

1. Tại WordPress Dashboard, nhấp vào liên kết Header trên menu Appearance

Trang Custom Header sẽ hiện ra, với bảng điều khiển Customizing Header Media hiển thị phía bên trái màn hình.

2. Để tải video lên, bạn nhấp vào nút Select Video trong phần Header Video

Màn hình Select Video hiện ra. Màn hình này cho phép bạn chọn một video từ WordPress Media Library hoặc tải video lên từ máy tính của bạn. Header Video hỗ trợ định dạng tập tin .mp4

3. Để sử dụng video từ Youtube, sao chép và dán liên kết đến video trong trường Enter a Youtube video URL.

4. Nhấp vào nút Save & Publish tại góc phải phía trên của bảng điều khiển Header Media để lưu lại các thay đổi.

Tinh chỉnh WordPress Themes mặc định Twenty Seventeen

Sau khi bạn đã biết cách cài đặt Header Image cho theme, có thể bạn sẽ muốn thay đổi màu nền và màu chữ cho khu vực Header. Màu nền mặc định của theme Twenty Seventeen là màu trắng, nhưng bạn có thể dễ dàng thay đổi màu nền cho nó. Và đây là cách:

1. Tại WordPress Dashboard, nhấp vào liên kết Customize trong menu Appearance. Bảng điều khiển Customizer mở ra ở phía bên trái của màn hình.

2. Nhấp vào liên kết Colors. Màn hình Customizing Colors sẽ mở ra.

3. Chọn tùy chọn Dark để thay đổi màu.

4. Chọn tùy chọn Custom để tùy chỉnh màu sắc.

5. Trên thanh màu sắc, chọn màu mà bạn thích.

6. Nhấp vào nút Select Color trong phần Header Text Color để thay đổi màu chữ cho phần Header.

7. Sau khi chọn màu xong, nhấp nút Save & Publish để lưu lại.

Bảng điều khiển WordPress Customizer hiển thị ở phía bên trái của màn hình trong khi tính năng xem trước lại hiển thị ở phía bên phải. Khi bạn thay đổi trong Customizer, bạn sẽ thấy trước các thay đổi trước khi bạn áp dụng chúng.

Tạo, chỉnh sửa Custom Navigation Menus

Một Custom navigation menu là một danh sách các liên kết hiển thị trên trang web của bạn. Các liên kết này có thể là các trang, các bài viết hoặc các chuyên mục trên website của bạn, hoặc chúng có thể là các liên kết đến các website khác. Bạn có thể tạo ra các menu điều hướng cho trang web của bạn bằng cách sử dụng tính năng Custom Menu trong WordPress.

Đây là một tính năng tuyệt vời để bạn tạo ra một menu điều hướng, giúp cho độc giả có thể dễ dàng duyệt nội dung trên website của bạn.

Thêm tính năng Custom Menu vào WordPress Theme của bạn

Tùy thuộc vào WordPress hiện tại bạn đang dùng, website của bạn có thể dùng một hoặc nhiều menu điều hướng. Đôi khi bạn có thể có nhiều menu trong Header hoặc bạn cũng có thể thêm menu vào cả thanh bên (sidebar) và Footer.

Tính năng Custom Menu được tích hợp trong phần lớn các WordPress Theme, vì vậy bạn không cần phải quá lo lắng về việc tạo Custom menu cho WordPress Theme của mình. Nếu bạn đang sử dụng một WordPress Theme không có Custom Menu hoặc sử dụng theme do chính mình thiết kế thì việc thêm tính năng Custom Menu cũng tương đối dễ dàng. Bạn hãy làm theo các bước sau:

1. Nhấp vào liên kết Editor trong menu Appearance.

2. Nhấp vào template Theme Functions (functions.php)

Template Theme Functions sẽ mở ra trong trình chỉnh sửa văn bản phía bên trái của trang Edit Themes.

3. Nhập dòng mã bên dưới vào template Theme Functions của WordPress Theme

add_theme_support(‘nav-menus’);

4. Nhấp vào Update File để lưu lại sự thay đổi.

Template tag này nói với WordPress rằng WordPress Theme của bạn có thể sử dụng tính năng Custom Menu và một liên kết Menus xuất hiện phía bên dưới menu Appearance trong Dashboard.

5. Nhấp vào liên kết Header trên trang Edit Themes để mở template Header (header.php).

Template Header sẽ được mở ra trong trình chỉnh sửa văn bản ở phía bên trái của trang Edit Themes.

6. Thêm Template tag bên dưới vào template Header (header.php) sau thẻ <body>:

<?php wp_nav_menu(); ?>

Template tag này rất cần thiết để bạn tạo menu tùy chỉnh hiển thị phía trên website. Bảng 4 mô tả các tham số bạn có thể dùng với wp_nav_menu(); để tùy chỉnh cách hiển thị mà bạn muốn.

7. Nhấp vào nút Update File ở phía bên dưới của màn hình để lưu lại các thay đổi bạn vừa thực hiện đối với template Header.

Tham số
Thông tin
Mặc định
Thẻ
id
Đây là ID duy nhất của menu, bởi vì bạn có thể tạo nhiều menu nên mỗi menu phải có một ID
trống
wp_nav_menu(array(‘id’
=>’1′));
slug
Tên hiển thị của menu . Ví dụ như nav-menu
trống
wp_nav_menu(array(‘slug’
=>’nav-menu’));
menu_class
Lớp CSS dùng để định dạng kiểu danh sách menu
menu
wp_nav_menu(array(‘menu_class’
=>’mymenu’));
format
Đây là đánh dấu HTML dùng để định dạng kiểu danh sách
div
wp_nav_menu(array(‘menu_class’
=>’ul’));
fallback_cb
Tham số này tạo ra một dự phòng nếu menu không tồn tại
wp_page_menu
wp_nav_menu(array(‘fallback_cb’
=>’wp_page_menu’));
before
Văn bản hiển thị trước đánh dấu của liên kết
none
wp_nav_menu(array(‘before’
=>”Nhấp vào đây’));
after
Văn bản hiện thị sau đánh dấu của liên kết
none
wp_nav_menu(array(‘after’
=>’&raquo;’));

Bảng 4: Các tham số phổ biến của wp_nav_menu();

Tạo menu điều hướng tùy chỉnh

Sau khi bạn đã thêm tính năng menu vào WordPress Theme (hoặc khi bạn đang sử dụng một theme đã có tính năng này), việc tạo menu điều hướng sẽ trở nên dễ dàng. Hãy làm theo các bước sau:

1. Nhấp vào liên kết Menus trong trình đơn Appearance trên Dashboard để mở trang Menus

2. Nhấp tên cho menu trong hộp Menu Name, và nhấp vào nút Create Menu. Trang Menus sẽ tải lại với thông báo rằng bạn đã tạo mới một menu.

3. Thêm các liên kết vào menu mà bạn vừa mới tạo ra.

WordPress cung cấp cho bạn 03 cách để thêm các liên kết vào menu mới.

  • Pages: Nhấp vào liên kết View All để hiển thị danh sách tất cả các trang trên website của bạn. Kích chọn các trang bạn muốn thêm vào menu. Sau đó nhấp vào nút Add to Menu để thêm các trang vào menu.
  • Custom Links: Trong trường URL, nhấp vào địa chỉ URL của website mà bạn muốn thêm (ví dụ như: https://google.com). Tiếp theo trong trường Label, nhập vào tên của liên kết mà bạn muốn hiển thị trên menu của mình (ví dụ như: Google). Sau đó nhấp vào nút Add to Menu.
  • Categories: Nhấp vào liên kết View All để hiển thị danh sách các chuyên mục mà bạn đã tạo trên website của mình. Chọn các chuyên mục mà bạn muốn thêm vào menu. Sau đó nhấp vào nút Add to Menu.

4. Xem lại menu của bạn ở phía bên phải của trang. Khi bạn thêm một phần tử vào menu, cột phía bên phải sẽ hiển thị các tùy chọn đối với menu đó.

5. Chỉnh sửa lại các tùy chọn của menu theo ý của bạn bằng cách nhấp vào tên liên kết của menu để chỉnh sửa thông tin của mỗi liên kết trên menu mới tạo của bạn.

6. Lưu lại menu của bạn trước khi rời khỏi trang Menus. Chắc chắn rằng bạn đã nhấp vào nút Save Menu. Một thông báo xuất hiện xác nhận menu đã được tạo.

Bạn có thể tạo nhiều menu theo nhu cầu sử dụng của mình trên website của bạn. Hãy sử dụng các tham số cho template tag của menu để đảm bảo bạn đặt đúng vị trí của các menu vào theme của mình. Hãy để ý đến ID và tên của menu trong template tag. Bạn có thể tìm thêm các tùy chọn cho menu điều hướng bằng cách nhấp vào thẻ Screen Options phía bên góc phải trên của Dashboard. Tại đây, bạn có thể thêm Posts và Custom Post Types vào menu.

Theo mặc định, đánh dấu HTML dùng cho menu được tạo ra như một danh sách không có thứ tự (unordered list) và trong mã nguồn của website nó có dạng như bên dưới :

<ul id=”menu-main” class=”menu”>
<li id=”menu-item-1″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-1″><a href=”/”>Home</a></li>
<li id=”menu-item-2″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-2″><a href=”http://localhost/wpdemo/blog/”>Blog</a></li>
<li id=”menu-item-3″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-3″><a href=”http://localhost/wpdemo/about/”>About</a></li>
</ul>

Lưu ý rằng dòng đầu tiên định nghĩa lớp và ID CSS: <ul id=”menu-main” class=”menu”>. ID trong dòng đó sẽ hiển thị tên mà bạn đã đặt cho menu của mình. Bởi vì tôi đặt tên cho menu của tôi là Main khi tôi tạo nó trong Dashboard, nên CSS ID là menu-main. Nếu tên của menu là trinhdon, thì ID sẽ là menu-trinhdon.

Khi bạn phát triển một WordPress Theme cho mình dùng hoặc cho người khác sử dụng, bạn sẽ muốn dùng CSS để tạo ra một menu có thể xổ xuống. Đoạn mã bên dưới sẽ giúp bạn tạo ra một menu xổ xuống đẹp mắt.

 #menu-main {
width: 770px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-size: 16px;
color: #FFFFFF;
margin: 0 auto 0;
clear: both;
overflow: hidden;
}
#menu-main ul {
width: 100%;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menu-main li {
float: left;
list-style: none;
}
#menu-main li a {
color: #FFFFFF;
display: block;
font-size: 16px;
margin: 0;
padding: 12px 15px 12px 15px;
text-decoration: none;
position: relative;
}
#menu-main li a:hover,
#menu-main li a:active,
#menu-main .current_page_item a,
#menu-main .current-cat a,
#menu-main .current-menu-item {
color: #CCCCCC;
}
#menu-main li li a,
#menu-main li li a:link,
#menu-main li li a:visited {
background: #555555;
color: #FFFFFF;
width: 138px;
font-size: 12px;
margin: 0;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
position: relative;
}
#menu-main li li a:hover,
#menu-main li li a:active {
background: #333333;
color: #FFFFFF;
}
#menu-main li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
}
#menu-main li ul a {
width: 140px;
}
#menu-main li ul ul {
margin: -31px 0 0 159px;
}
#menu-main li:hover ul ul,
#menu-main li:hover ul ul {
left: -999em;
}
#menu-main li:hover ul,
#menu-main li li:hover ul,
#menu-main li li li:hover ul, {
left: auto;
}
#menu-main li:hover {
position: static;
}

Chỉnh sửa một menu đã có sẵn

Danh sách các menu hiện có sẽ nằm trong cột bên phải trên màn hình. Nếu website của bạn có nhiều menu, chúng sẽ hiển thị trong menu xổ xuống ở phía trên của trang để bạn chọn menu mà bạn muốn chỉnh sửa. Chỉ cần chọn menu bạn muốn chỉnh sửa từ menu xổ xuống Select a menu to edit và sau đó nhấp vào nút Select. Menu bạn vừa chọn sẽ được hiển thị.

Các mục trong cột bên tay phải trên trang Menus sẽ khớp với các mục xuất hiện trên website của bạn. Nhấp vào dấu mũi tên bên cạnh mỗi trình đơn sẽ hiển thị một bản tùy chọn cho mỗi trình đơn cụ thể. Trong các tùy chọn này có một số mục có được cập nhật. Bạn có thể hiển thị hoặc ẩn các trường như Link Target, CSS Classes, Link Relationship (XFN) hoặc Description sử dụng tab Screen Options ở phía bên bên phải màn hình.

  • URL: Chỉ hiển thị cho Custom Links và sẽ chứa URL đến một nơi nào đó khi nhấp vào menu.
  • Navigation Label: Đây là nhãn sẽ hiển thị trên trang của bạn.
  • Title Attribute: Đây là tooltip, nó sẽ hiển thị khi bạn rê chuột vào menu.
  • Open link in a new window/tab: (Theo mặc định nó sẽ bị ẩn) Bạn có thể thiết lập menu để mở trong một cửa sổ hoặc tab mới. Tùy chọn này được hiện khi kích chọn vào tùy chọn Link Target trong Screen Option.
  • CSS Classes: (Ẩn theo mặc định) Tùy chọn này dùng để thêm các lớp CSS vào menu. Tùy chọn này được hiển thị bằng cách kích chọn vào bảng Screen Options.
  • Link Relationship (XFN): (Ẩn theo mặc định) Cho phép tạo ra thuộc tính XFN cho biết liên quan giữa bạn với tác giả/chủ sở hữu của trang web mà bạn liên kết đến. Tùy chọn này được hiển thị bằng cách kích chọn tùy chọn Link Relationship (XFN) trên bảng Screen Options.
  • Description: (Ẩn theo mặc định) Mô tả liên kết. Nó có thể có hoặc không tùy vào WordPress Themes. Tùy chọn này cũng được hiển thị bằng cách kích chọn vào tùy chọn Description trên bảng điều khiển Screen Options.

Mỗi một menu có thể chuyển đến một vị trí mới trong hệ thống phân cấp menu bằng cách sử dụng các liên kết bên dưới trường Title Attribute hoặc nhấp vào tiêu đề của menu vào kéo nó sang vị trí mới. Nếu bạn chọn cách kéo thả các menu của mình, con trỏ chuột sẽ trở thành một dấu bốn mũi tên khi bạn di chuột chính xác vào khu vực muốn chuyển menu đến.

Sau khi cập nhật các menu của bạn, hãy nhấp vào nút Save Menu ở phía trên hoặc phía dưới của màn hình.

Hiển thị menu tùy chỉnh với widget

Bạn không cần phải sử dụng template tag wp_nav_menu(); để hiển thị các menus trên website của mình, bởi vì WordPress cũng cung cấp Custom Menu widgets cho phép bạn có thể thêm nó vào theme. Vì thế, hãy dùng widgets thay vì template tags để hiển thị menu điều hướng. Tính năng này đặc biệt hữu dụng nếu bạn tạo tra nhiều menu trên trang của mình.

Đầu tiên bạn cần phải đăng ký vùng widget đặc biệt cho WordPress Theme để nó xử lý việc hiển thị Custom Menu widget của bạn. Để đăng ký widget này, hãy mở tập tin functions.php sau đó thêm đoạn mã bên dưới vào:

// ADD MENU WIDGET
if ( function_exists(‘register_sidebars’) )
register_sidebar(array(‘name’=>’Blog Sidebar’,));

Đoạn mã trên tạo ra một vùng tiện ích gọi là Menu trên trang Widgets của Dashboard. Lúc này bạn có thể kéo Custom Menu widget vào khu vực Sidebar của blog để hiển thị menu tùy chỉnh tại đó.

Để thêm vùng tiện ích (widget area) vào theme của mình, bạn hãy vào Theme Editor bằng cách truy cập vào Appearance > Editor và mở tập tin header.php (hoặc bất kỳ template nào bạn muốn thêm vùng tiện ích). Sau đó thêm đoạn mã vào khu vực nơi bạn muốn Menu widget hiển thị:

<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Blog
Sidebar’) ) : ?>
<?php endif; ?>
</ul>

Đoạn mã trên nói với WordPress rằng bạn muốn lấy thông tin trong khu vực Menu widget để hiển thị lên websit của mình.

Thay đổi Font Family, màu sắc và cỡ chữ

Bạn có thể thay đổi phông chữ trong theme của mình để nó trở nên dễ đọc, thẩm mỹ hơn. Nhiều nhà thiết kế chỉ sử dụng các phông chữ đơn giản nhưng lại mang đến hiệu quả cao trong việc thiết kế. Bạn có thể dùng các phông chữ khác nhau để phân biệt tiêu đề bài viết, nhãn của widget hay văn bản trong nội dung chính. Bảng số 5 sẽ cung cấp cho bạn một số ví dụ thường dùng đối với thuộc tính của phông chữ.

Thuộc tính phông
(Font Properties)
Giá trị phổ biến
(Common values)
Ví dụ CSS
(CSS example)
font-family
Georgia, Times, seriff
body {font-family: Georgia; serif;}
font-size
px, %, em
body {font-size: 14px;}
font-style
italic, underline
body {font-style: italic;}
font-weight
bold, bolder, normal
body {font-weight: normal}

Các trang web thường rất kén trong việc hiển thị phông chữ, dù cho đó là những  loại phông chữ bạn có thể dùng trong thuộc tính font-family. Không phải tất cả các phông chữ đều hiển thị đúng trên website. Để an toàn, bạn nên cân nhắc sử dụng các phông chữ phổ biến hiển thị một cách chính xác trên tất cả các trình duyệt:

  • Phông Serif: Times New Roman, Georgia, Garamond, Bookman Old Style
  • Phông Sans-serif: Verdana, Arial, Tahoma, Trebuchet MS.

Thay đổi màu chữ

Với hơn 16 triệu màu sẵn có, bạn có thể tìm được màu sắc mà mình mong muốn. Sau đó hãy ghi nhớ mã màu. Bạn có thể dễ dàng tìm được mã màu bằng cách dùng phần mềm Photoshop.

Bạn có thể dễ dàng thay đổi màu chữ bằng cách thay đổi thuộc tính color trog vùng chọn CSS mà bạn muốn tùy chỉnh. Bạn có thể cài đặt màu chữ mặc định cho bài viết của mình bằng cách khai báo nó trong vùng chọn body:

body {
color: #333333;
}

Thay đổi cỡ chữ

Để thay đổi cỡ chữ, bạn phải thay đổi thuộc tính font-size của vùng chọn CSS mà banjmong muốn. Cỡ chữ được xác định bằng những đơn vị đo lường phổ biến sau:

  • px: Được tính bằng pixel tức điểm ảnh trên màn hình. Một pixel là một điểm ảnh trên màn hình máy tính, đây là đơn vị nhỏ nhất trên màn hình. Nó phụ thuộc vào kích thước và độ phân giải của màn hình. Tăng hay giảm số pixel để thay đổi cỡ chữ (ví dụ 12px thì lớn hơn 10px).
  • pt: Được tính bằng point, nó xấp xỉ bằng 1/72 inch, điều đó có nghĩa là point luôn cố định cho dù ở trên bất cứ màn hình nào đi nữa. Giống như pixels, tăng hoặc giảm số point để thay đổi cỡ chữ.
  • em: Đo chiều rộng. Em là một đơn vị mang tính tương đối. 1 em sẽ có giá trị bằng kích cỡ của font chữ hiện dùng. Ví dụ cỡ chữ hiện tại là 12px thì 1em=12px, 2em=24px.
  • %: Đơn vị đo lường tương đối giống như em, được tính theo %.  Ví dụ nếu font chữ hiện tại đang dùng có kích cỡ là 14px thì 50% sẽ là 7px.

Trong template mặc định, cỡ chữ được định nghĩa trong thẻ <body> và được tính bằng đơn vị pixels. Ví dụ: font-size: 12px;

Khi bạn đặt các phần tử font-family, font-color, font-size lại với nhau trong thẻ <body>, bạn sẽ định dạng toàn bộ phông chữ cho bài viết của mình. Và đây là cách chúng làm việc với nhau trong thẻ <body> của template CSS mặc định.

body {
font-size: 12px;
font-family: Georgia, “Bitstream Charter”, serif;
color: #666666;
}

Khi bạn muốn thay đổi font-family trong CSS, hãy mở tập tin style.css và tìm kiếm thuộc tính font-family, thay đổi các giá trị của nó và lưu lại các thay đổi.

Thêm đường viền

Sử dụng đường viền có thể đem lại sự độc đáo, bắt mắt đến các yếu tố khác trong việc thiết kế WordPress Themes. Bảng số 7 sẽ liệt kê các thuộc tính thông dụng và các ví dụ CSS cho đường viền trong việc thiết kế theme của bạn.

Thuộc tính của đường viềnGiá trị phổ biếnVí dụ CSS
border-sizepx, embody {border-size: 1px;}
border-stylesolid, dotted, dashedbody {border-style: solid}
border-colorGiá trị là mã màu ở dạng hexbody {border-color: #CCCCCC}

Tìm hiểu các kỹ thuật HTML căn bản

HTML có thể giúp bạn tùy chỉnh và tổ chức, sắp xếp WorrdPress Theme của bạn. Để hiểu được cách HTML và CSS làm việc với nhau, bạn có thể hiểu thế này: Khi tạo một website nếu HTML tạo nên cấu trúc căn bản thì CSS sẽ trang hoàng cho nó thêm lộng lẫy, bắt mắt. Nếu HTML là một người vẽ bản phác thảo thì CSS là người phụ trách công việc tô màu.

CSS định dạng kiểu cho các phần từ HTML. Tất cả những điều bạn cần phải làm để áp dụng định dạng kiểu CSS là dùng đúng các thẻ HTML. Dưới đây là đoạn mã lệnh HTML căn bản:

<body>
      <div id=”content”>
          <h1> Tiêu đề H1 </h1>
            <p> Đây là ví dụ về đoạn văn trong HTML. <blockquote> Đi xa ngàn dặm cũng phải bắt đầu bằng một bước chân. </blockquote> Hãy tiếp tục đi xa khi còn có thể</p>
<p> Nhấp vào <a hrref=”https://thanh196t.com> để truy cập vào blog của tôi.
            </p>
          </div>
</body>

Tất cả các phần tử HTML phải có thẻ mở và thẻ đóng. Thẻ mở nằm trong cặp dấu (<>), thẻ đóng cũng tương tự như nó có thêm dấu (/) phía trước (</>). Ví dụ: <h1> Tiêu đề H1 </h1>.

Các phần tử HTML phải được lồng nhau đúng cách. Như ví dụ trên thẻ <blockquote> được lồng trong thẻ <p>. Khi chỉnh sửa dòng này, bạn không thể đóng thẻ </p> trước thẻ </blockquote> được. Thẻ được lồng phải đóng trước.

Để dễ đọc, dễ tìm kiếm bạn nên sử dụng thụt đầu dòng đối với các thẻ được lồng. Khi bạn quên đóng thẻ bạn sẽ có thể dễ dàng phát hiện và khắc phục lỗi phát sinh. Có rất nhiều trang web dạy về HTML, CSS nhưng nếu bạn muốn học HTML, CSS căn bản hãy truy cập vào trang https://www.w3schools.com

Chèn ảnh

Có thể bạn sẽ muốn chèn hình ảnh vào trang web của mình, có thể là trong bài viết hoặc trang, trên sidebar…Mã HTML dùng để chèn hình ảnh có dạng:

<img src=”/đường dẫn/tên hình ảnh. định dạng” alt=”Tên hình ảnh”/>

  • <img src=: Đánh dấu HTML này sẽ nói với trình duyệt rằng website tìm kiếm tập tin ảnh.
  • “/đường dẫn/tên hình ảnh. định dạng”: Mã lệnh này là đường dẫn của hình ảnh nơi mà trình duyệt web sẽ tìm thấy tập tin ảnh. Nếu bạn tải hình ảnh lên máy chủ web nó sẽ nằm trong thư mục /wp-content/uploads. Ví dụ đường dẫn đến tập tin ảnh sẽ là: /wp-content/uploads/ten_anh.jpg.
  • alt=”Tên hình ảnh”: Thẻ alt là một phần của ngôn ngữ HTML, mô tả hình ảnh để công cụ tìm kiếm có thể tìm thấy nó. Thẻ alt cũng hiển thị văn bản thay thế cho hình ảnh nếu trình duyệt không thể tải tập tin ảnh này vì một số nguyên nhân nào đó.
  • />: Đây là thẻ đóng của <img src=, nó nói với trình duyệt web rằng việc truy cập đến tập tin ảnh đã hoàn thành.

Chèn siêu liên kết (Inserting hyperlinks)

Bạn cũng có thể muốn chèn liên kết vào trong bài viết hoặc ở các vị trí khác trên website. Một siêu liên kết là một neo văn bản trỏ đến một địa chỉ website nào đó, khi nhấp vào liên kết này bạn sẽ truy cập vào một website khác hoặc trang web đó sẽ xuất hiện trên cửa sổ trình duyệt.

Mã lệnh dùng để chèn siêu liên kết có dạng:

<a href=”https://thanh1986t.com”> Ngọc Thanh Blog</a>

  • <a href=: Mã này sẽ nói với trình duyệt rằng văn bản nằm trong thẻ sẽ liên kết đến địa chỉ web.
  • “https://thanh1986t.com”: Mã này là một địa chỉ của website mà bạn muốn neo vào văn bản hiển thị. Bao quanh nó là dấu ngoặc kép (“”).
  • >: Đây là thẻ đóng của thẻ mở trước đó <a href=.
  • Ngọc Thanh Blog: Trong ví dụ này, nó là liên kết, là neo văn bản chứa địa chỉ liên kết đến blog của tôi. Nó hiển thị trên website và độc giả của tôi có thể nhấp vào đó để truy cập vào trang chủ của blog.
  • </a>: Thẻ này nói với trình duyệt web rằng siêu liên kết đã được đóng.

Thường thì khi sử dụng siêu liên kết chúng ta thường trỏ đến các trang web khác, nhưng bạn cũng có thể sử dụng nó để trỏ đến các tập tin như .doc, .pdf.

Chèn danh sách

Trong quá trình viết bài trên blog/website của mình, sẽ có những lúc bạn muốn chèn danh sách vào. Với HTML bạn có thể dễ dàng tạo ra hai loại danh sách là danh sách có thứ tự (numbered) và danh sách không có thứ tự (bulleted) tùy theo nhu cầu sử dụng của mình.

Ví dụ về danh sách trong HTML (Lấy nội dung vì sao sử dụng WordPress để viết blog chẳng hạn)

  1. WordPress là phần mềm mã nguồn mở nên nó miễn phí
  2. Dễ dàng cài đặt và sử dụng
  3. Cộng đồng sử dụng đông đảo
  4. Thân thiện với SEO

Danh sách có thứ tự được tạo ra một cách dễ dàng trong phần mềm Microsoft Word, thậm chí là ngay cả trong trình soạn thảo của WordPress. Vậy khi sử dụng HTML thì nó sẽ được tạo ra như thế nào? Dưới đây là mã lệnh tạo danh sách có thứ tự trong HTML.

<ol>
<li>WordPress là phần mềm mã nguồn mở nên nó miễn phí</li>
<li>Dễ dàng cài đặt và sử dụng</li>
<li>Cộng đồng sử dụng đông đảo</li>
<li>Thân thiện với SEO</li>
</ol>


Thẻ bắt đầu <ol> nói với trình duyệt web biết nó sẽ hiển thị một danh sách có thứ tự, điều đó có nghĩa là danh sách sẽ bắt đầu bằng số 1. Kết thúc danh sách với thẻ </ol> nói với trình duyệt rằng danh sách có thứ tự đã hoàn thành.

Giữa cặp thẻ <ol> và </ol> là danh sách các phần tử được chỉ định bởi thẻ <li>. Mỗi phần tử trong danh sách bắt đầu với thẻ <li> và kết thúc với thẻ </li>, nó nói với trình duyệt web hiển thị dòng văn bản như là một phần tử trong danh sách.

Danh sách không có thứ tự thì tương tự như danh sách có thứ tự, nhưng thay vì dùng số, nó lại dùng các bullets.

Ví dụ:

  • WordPress là phần mềm mã nguồn mở nên nó miễn phí
  • Dễ dàng cài đặt và sử dụng
  • Cộng đồng sử dụng đông đảo
  • Thân thiện với SEO

Mã HTML của danh sách không có thứ tự cũng giống như đối với danh sách có thứ tự, chỉ khác chút ít là thay vì sử dụng thẻ <ol>, nó lại dùng thẻ <ul> (UL = unorderd list).

<ul>
<li>WordPress là phần mềm mã nguồn mở nên nó miễn phí</li>
<li>Dễ dàng cài đặt và sử dụng</li>
<li>Cộng đồng sử dụng đông đảo</li>
<li>Thân thiện với SEO</li>
</ul>

Nếu bạn muốn khám phá, tìm hiểu sâu hơn về HTML, CSS bạn nên truy cập vào hai trang sau:

Hy vọng sau khi đọc xong bài viết này bạn có thể có được kiến thức cơ bản để tinh chỉnh WordPress Themes theo đúng sở thích của mình.

Trong bài viết tiếp theo chúng ta sẽ cùng tìm hiểu về Child Theme trong WordPress.

Nếu bạn thấy bài viết Hướng dẫn tinh chỉnh WordPress Themes này hữu ích đừng quên Like và Share!

Hẹn gặp lại bạn trong bài viết sau./.

Bài viết trong Series
<< Phần trước: Tìm hiểu Themes và Template trong WordPressPhần tiếp theo: Tìm hiểu Parent Theme và Child Theme >>

Namecheap.com

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Để lại bình luận

Thủ thuật WordPress WordPress Plugins WordPress Themes
tìm hiểu tập tin robots.txt trong wordpress
Tìm hiểu chi tiết về tập tin Robots.txt trong WordPress
Hướng dẫn cách thêm thẻ meta description trong wordpress
Hướng dẫn thêm thẻ Meta Description trong WordPress
huong dan sao luu du lieu wordpress mot cach thu cong
Hướng dẫn sao lưu dữ liệu WordPress thủ công
Keyword Research SEO Offpage SEO Onpage
Từ khoá và website của bạn
Xây dựng Website chuẩn SEO
Xây dựng Website chuẩn SEO
Hướng dẫn chi tiết WordPress SEO
Hướng dẫn chi tiết WordPress SEO cho người mới
Ajax Bootstrap HTML/CSS JavaScript Joomla jQuery PHP/MySQL
Thay đổi tên miền cho website wordpress
Hướng dẫn thay đổi tên miền cho website WordPress
Sự khác nhau giữa tên miền và Web Hosting
Sự khác nhau giữa tên miền và Web Hosting
Amazon Nichesite Google Adsense Product Lauch Social Marketing Viết Blog Youtube Partner
Thêm Google Adsense vào trang web WordPress
Hướng dẫn thêm Google Adsense vào trang web WordPress
Hướng dẫn đăng ký tài khoảnClickbank khi bị chặn ở Việt Nam
Hướng dẫn đăng ký tài khoản Clickbank khi bị chặn tại Việt Nam
Kiếm tiền từ blog WordPress
Kiếm tiền từ blog WordPress như thế nào?