Xu Hướng 6/2023 # Cách Tạo Style Cho Navigation Menus WordPress # Top 9 View | Hoisinhvienqnam.edu.vn

Xu Hướng 6/2023 # Cách Tạo Style Cho Navigation Menus WordPress # Top 9 View

Bạn đang xem bài viết Cách Tạo Style Cho Navigation Menus WordPress được cập nhật mới nhất trên website Hoisinhvienqnam.edu.vn. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất.

Bạn có muốn tạo style cho các navigation menus (menu điều hướng) WordPress của mình để thay đổi màu sắc hoặc giao diện không? Theme WordPress là nơi xử lý giao diện của các menu điều hướng nên bạn có thể dễ dàng tùy chỉnh bằng CSS theo nhu cầu. Trong bài viết này, CunghocWP sẽ hướng dẫn cách tạo style cho các navigation menus WordPress trên trang web.

Phương pháp 1: Tạo style cho các Navigation Menu WordPress bằng plugin

Theme WordPress sử dụng CSS để tạo style cho các menu điều hướng nhưng nhiều người dùng mới không biết chỉnh sửa file theme hoặc viết code CSS riêng.

Đây là lúc plugin style WordPress trở nên hữu ích. Bạn sẽ tiết kiệm được một khoản lớn từ việc chỉnh sửa các file theme hoặc viết bất kỳ code nào.

Đầu tiên bạn cần cài đặt và kích hoạt plugin CSS Hero. Để biết thêm chi tiết, hãy xem hướng dẫn của CunghocWP về cách cài đặt plugin WordPress.

CSS Hero là một plugin WordPress cao cấp cho phép bạn thiết kế theme WordPress theo ý muốn mà không cần viết một dòng code nào (Không yêu cầu HTML hoặc CSS). Hãy đọc bài đánh giá CSS Hero của chúng tôi để tìm hiểu thêm.

Sau khi kích hoạt, bạn sẽ được chuyển hướng để lấy khóa License CSS Hero. Chỉ cần làm theo các hướng dẫn trên màn hình và bạn sẽ được chuyển hướng trở lại trang web của mình sau một vài cú nhấp chuột.

Sau khi nhấp vào biểu tượng màu xanh lam, di chuột đến navigation menu, CSS Hero sẽ đánh dấu menu bằng cách hiển thị các đường viền xung quanh. Khi bạn nhấp vào navigation menu được đánh dấu sẽ hiển thị các item mà bạn có thể chỉnh sửa.

CSS Hero sẽ hiển thị các thuộc tính khác nhau mà bạn có thể chỉnh sửa như văn bản, background, border, margin, padding, vv…

Sau khi thực hiện các thay đổi, bạn có thể xem trực tiếp trong bản xem trước theme.

Ưu điểm của phương pháp này là bạn có thể hoàn tác bất kỳ thay đổi nào đã thực hiện. CSS Hero lưu giữ một lịch sử đầy đủ về tất cả các thay đổi của bạn và bạn có thể quay lại giữa các thay đổi đó.

Phương pháp 2: Tạo style cho Navigation Menus WordPress theo cách thủ công

Phương pháp này thêm CSS tùy chỉnh theo cách thủ công và dành cho người dùng trung gian.

Các menu điều hướng trong WordPress được hiển thị trong một danh sách không có thứ tự (danh sách có dấu đầu dòng).

Thông thường, nếu bạn sử dụng thẻ menu mặc định của WordPress, sẽ hiển thị danh sách không có thuộc tính class CSS nào được liên kết với thẻ.

Danh sách không có thứ tự có tên thuộc tính class là ‘menu’, mỗi item trong danh sách đều có thuộc tính class CSS riêng.

Điều này có thể hoạt động nếu bạn chỉ có một vị trí menu. Tuy nhiên, hầu hết các theme đều có nhiều vị trí để bạn hiển thị menu điều hướng.

Nếu chỉ sử dụng thuộc tính class CSS mặc định có thể gây ra xung đột với các menu trên các vị trí khác.

Đây là lý do tại sao bạn cũng cần xác định thuộc tính class CSS và vị trí menu. Rất có thể theme WordPress của bạn đã làm điều này bằng cách thêm các menu điều hướng bằng cách sử dụng đoạn code sau:

Đoạn code này cho WordPress biết rằng đây là nơi theme hiển thị menu chính và thêm một menu chính có thuộc tính class CSS vào menu điều hướng.

Bây giờ bạn có thể tạo style cho menu điều hướng của mình bằng cấu trúc CSS này.

// container class

#header .primary-menu{}

// container class first unordered list

#header .primary-menu ul {}

//unordered list within an unordered list

#header .primary-menu ul ul {}

#header .primary-menu li {}

// each navigation item anchor

#header .primary-menu li a {}

// unordered list if there is drop down items

#header .primary-menu li ul {}

// each drop down navigation item

#header .primary-menu li li {}

// each drap down navigation item anchor

#header .primary-menu li li a {}

Bạn sẽ cần thay thế #header bằng thuộc tính CSS container mà menu điều hướng của bạn đang sử dụng.

Cấu trúc này sẽ thay đổi hoàn toàn giao diện của menu điều hướng.

Tuy nhiên, vẫn có các thuộc tính class CSS khác do WordPress tạo tự động được thêm vào từng menu và tiem menu. Các thuộc tính class này tùy chỉnh menu điều hướng.

WordPress cũng cho phép bạn thêm các thuộc tính class CSS tùy chỉnh riêng vào các item menu riêng lẻ.

Bạn có thể sử dụng tính năng này để tạo style cho các item menu như thêm biểu tượng hình ảnh vào menu hay thay đổi màu sắc để đánh dấu item menu.

Ví dụ về tạo style cho Navigation Menus trong WordPress

Các theme WordPress khác nhau có thể sử dụng các tùy chọn tạo style khác nhau, các thuộc tính CSS và cả JavaScript để tạo navigation menus. Do đó, sẽ có rất nhiều tùy chọn để bạn thay đổi các style và tùy chỉnh các menu điều hướng để đáp ứng nhu cầu riêng.

Công cụ kiểm tra trong trình duyệt web sẽ là trợ thủ đắc lực nhất để tìm ra các thuộc tính class CSS nào cần thay đổi. Nếu bạn chưa từng làm việc này trước đây thì hãy tham khảo hướng dẫn của CunghocWP về cách sử dụng công cụ kiểm tra để tùy chỉnh các theme WordPress.

Bạn chỉ cần trỏ con trỏ đến phần tử muốn sửa đổi, nhấp chuột phải và sau đó chọn công cụ Inspect từ menu của trình duyệt.

1. Thay đổi màu phông chữ trong navigation menus WordPress

Đây là mẫu CSS tùy chỉnh mà bạn có thể thêm vào theme của mình để thay đổi màu phông chữ của navigation menus.

Trong ví dụ này, # top-menu là ID được gán cho danh sách không có thứ tự hiển thị navigation menu của chúng tôi. Bạn cần sử dụng công cụ kiểm tra để tìm ra ID theme bạn đang dùng.

Trước tiên, bạn cần tìm ra ID CSS hoặc thuộc tính class của theme đang sử dụng cho navigation menu xung quanh vùng chứa.

Và đây là kết quả hiển thị trên trang web demo của chúng tôi.

Nhiều trang web sử dụng các màu background khác cho các liên kết quan trọng nhất trong menu điều hướng của họ như một nút đăng nhập, đăng ký, liên hệ hoặc mua. Các liên kết này sẽ nổi bật hơn nếu có một màu khác.

Để làm điều này, bạn cần thêm một thuộc tính class CSS tùy chỉnh vào item menu muốn đánh dấu bằng màu background khác.

Và đây là kết quả hiển thị trên trang web demo của chúng tôi.

Nếu bạn muốn các item menu của mình thay đổi màu sắc khi di chuột qua thì có thể sử dụng thủ thuật CSS cụ thể để làm cho các menu điều hướng có tính tương tác hơn.

Chỉ cần thêm CSS tùy chỉnh sau vào theme của bạn.

Trong ví dụ này, # top-menu là ID CSS mà theme của bạn sử dụng cho danh sách menu điều hướng không có thứ tự.

Và đây là kết quả hiển thị trên trang web demo của chúng tôi.

Thông thường, các navigation menu xuất hiện ở trên cùng và biến mất khi người dùng cuộn xuống. nhưng các navigation menu sticky floating vẫn ở trên cùng khi người dùng cuộn xuống.

Bạn có thể thêm đoạn code CSS sau vào theme để làm cho các menu điều hướng của bạn trở nên hấp dẫn.

Chỉ cần thay thế # top-menu bằng ID CSS menu điều hướng của bạn.

Đây là là kết quả trong bản demo của chúng tôi:

6. Tạo Navigation Menus Transparent trong WordPress

Nhiều trang web sử dụng ảnh background lớn hoặc toàn màn hình với các nút CTA. Sử dụng menu trong suốt giúp điều hướng của bạn hòa hợp với hình ảnh và khiến người dùng tập trung hơn vào lời kêu gọi hành động của bạn.

Chỉ cần mẫu code CSS sau vào theme để làm trong suốt các menu điều hướng:

Và đây là kết quả trên trang demo của chúng tôi.

Hướng Dẫn Tạo Navigation Menu Nổi Trên WordPress

Bạn thấy rằng nhiều trang web phổ biến hiện nay đang sử dụng menu điều hướng nổi. Thông thường, các menu điều hướng được hiển thị trên đầu và sẽ mất khi người dùng cuộn chuột xuống. Các menu điều hướng nổi sẽ luôn hiển thị khi cuộn chuột xuống. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách tạo một menu điều hướng nổi trong WordPress.

Phương pháp 1: Dùng plugin để thêm Menu điều hướng nổi

Phương pháp này rất dễ và khuyến nghị cho tất cả mọi người. Nếu bạn chưa thiết lập menu điều hướng, thì vui lòng xem hướng dẫn về cách thêm menu điều hướng trong WordPress.

Đầu tiên bạn cần cài đặt và kích hoạt Sticky Menu (or Anything!) trên plugin Scroll. Để biết thêm thông tin chi tiết, hãy xem hướng dẫn chi tiết về cách cài đặt plugin WordPress.

Sau khi kích hoạt, vào Settings ” Sticky Menu (or Anything!) để cài đặt cấu hình plugin.

Trước tiên, bạn cần nhập ID CSS của menu điều hướng.

Tiếp đến bạn cần sử dụng tool để kiểm tra trình duyệt của bạn để tìm ID CSS.

Truy cập trang web của bạn và trỏ chuột vào menu điều hướng. Sau đó, bạn cần nhấp chuột phải và chọn Inspect từ menu Trình duyệt của bạn.

Thao tác này sẽ chia màn hình hiện tại của bạn thành hai phần và bạn sẽ có thể xem source code cho menu điều hướng của mình. Việc bạn cần làm là tìm một dòng code như bên dưới:

Trong ví dụ này, menu điều hướng của chúng tôi CSS ID là site-navigation.

Tiếp tục và nhập ID CSS trong cài đặt plugin như # site-navigation này.

Tiếp theo trên trang cài đặt plugin là xác định khoảng trắng giữa phần top màn hình và menu nổi. Bạn có thể sử dụng cài đặt này nếu menu của bạn lấp một số thứ mà bạn không muốn ẩn. Còn nếu không, bạn có thể bỏ qua cài đặt này.

Sau đó, bạn cần nhấp vào tích vào tùy chọn: ‘Check for Admin Bar’. Thao tác này sẽ thêm khoảng trắng cho thanh admin WordPress.

Tùy chọn tiếp theo trong phần cài đặt là cho phép bạn bỏ chọn menu điều hướng nếu người dùng truy cập vào trang web của bạn trên màn hình nhỏ như điện thoại chẩng hạn.

Bạn có thể kiểm tra giao diện của nó trên các thiết bị di động hoặc máy tính bảng. Nếu bạn không thích, thì bạn có thể thêm độ phân giải 780px cho tùy chọn này.

Đừng quên bấm vào nút save để lưu các thay đổi của bạn.

Bây giờ bạn truy cập trang web của bạn để xem menu điều hướng nổi hoạt động như thế nào.

Phương pháp 2: Thêm Menu điều hướng nổi theo cách thủ công

Với phương pháp này bạn sẽ thêm đoạn code CSS custom vào theme của mình. Nếu bạn đã thực hiện điều này trước đây, thì vui lòng xem bài hướng dẫn cách chèn custom Css vào trang WordPress.

Trước tiên, bạn vào Appearance ” Customize để chạy theme customizer.

Thay thế#site-navigation bằng ID CSS của menu điều hướng và nhấp vào button Save & Publish.

Bây giờ hãy truy cập vào trang web để xem menu điều hướng nổi của bạn hoạt động như thế nào.

Bạn cũng có thể dễ dàng điều chỉnh bằng cách thêm một lề vào vùng tiêu đề của bạn bằng cách sử dụng đoạn code CSS như thế này:

Thay thế site-branding bằng class CSS trên header area.

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn. Bạn cũng có thể thấy chúng tôi trên Twitter và Facebook.

Cách Tạo Thêm Menu Trong WordPress

Đáng lẽ ra bài này mình đã nên viết lâu rồi nhưng do thời gian qua mình tập trung vào nhiều cái quá nên mãi hôm nay mới có thể viết đầy đủ được. Sở dĩ mình viết bây giờ là do sắp tới mình có làm một tutorial làm việc với một starter theme cơ bản nên chắc chắn sẽ cần đến phần này, do đó mình cũng hy vọng là các bạn có thể nắm bắt được tốt nhất.

Tính năng menu trong WordPress phải nói là rất mạnh mẽ và linh hoạt trong việc tạo menu cho website, họ cũng không giới hạn số lượng menu tạo ra và bạn cũng có thể chèn nó vào bất cứ đâu.

Cần xem trước khi đọc bài này

Bước 1. Khởi tạo Menu Location

Để tạo một menu location không có gì là khó khăn, chỉ với một vài dòng đặt vào file chúng tôi là bạn tạo được. Nhưng trước khi tạo menu location, hãy chắc chắn là theme của bạn đã hỗ trợ tính năng menu bằng cách kiểm tra xem có đoạn dưới trong file function của theme chưa, nếu chưa thì thêm vào.

add_theme_support( 'menus' );

Xong rồi, bây giờ ta sẽ có một hàm tên là register_nav_menus() với một tham số duy nhất là tên location như sau:

register_nav_menus( array( ) );

Ở đoạn trên, chúng ta sẽ tạo ra một menu location mang tên Menu chính với slug là main-nav. Cái slug sẽ là tên để chúng ta xác định khi viết code hiển thị ra ngoài, không khoảng trắng, không dấu và không in hoa.

Thế nếu muốn thêm nhiều location thì sao? Đơn giản, chỉ việc thêm nhiều tham số vào hàm bên trên như sau:

register_nav_menus( array( ) ); Bước 2. Hiển thị location ra ngoài theme

Bạn cứ hiểu là location được chỉ định hiển thị ở đâu thì menu sẽ xuất hiện ở đó khi bạn thêm vào trong Dashboard.

Để hiển thị location, ta sẽ dùng hàm wp_nav_menu(). Hàm này nó có nhiều tham số hơn là cái hàm tạo location. Bây giờ hãy thử mở theme của bạn lên và chèn hàm này vào vị trí mà bạn thích, như file chúng tôi chẳng hạn.

<?php wp_nav_menu( array( Bước 3. Thêm menu

Sau khi chèn xong, hãy vào trang quản lý thêm menu vào location để nó hiển thị ra.

Bây giờ ra ngoài theme và dùng Firebug xem cấu trúc menu ta sẽ thấy tương tự như sau:

.main-nav ul { text-align: left; margin: 0; padding: 15px 4px 17px 0; list-style: none; } .main-nav ul li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: #fff; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .main-nav ul li:hover { background: #555; color: #fff; } .main-nav ul li ul { padding: 0; position: absolute; top: 48px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } .main-nav ul li ul li { background: #555; display: block; color: #fff; text-shadow: 0 -1px 0 #000; } .main-nav ul li ul li:hover { background: #666; } .main-nav ul li:hover ul { display: block; opacity: 1; visibility: visible; }

Kết quả ta tạm có

Mình muốn nói gì ở bài này?

Trong bài này mình không hướng dẫn bạn làm thế nào để có một menu đẹp và lộng lẫy như các trang khác, mà mình chỉ muốn cho các bạn biết cách tạo một menu trong WordPress như thế nào. Từ đó bạn có thể tự mình chuyển các mẫu menu từ HTML, CSS sang menu của WordPress một cách dễ dàng.

Do đó, nếu bạn cần làm menu thêm đẹp mắt và lộng lẫy thì nên học vững CSS và jQuery vì nói thật là thật khó để hướng dẫn tạo một menu theo đúng ý tất cả mọi người.

Cách Tạo Và Chèn Bảng Vào WordPress (04

WordPress 4.x cung cấp rất nhiều tính năng khi viết bài, tuy nhiên vẫn bị hạn chế một số. Trong đó phải nhắc đến việc chèn hoặc tạo bảng.

Từ WordPress 5.0 trở đi, bảng đã được thêm vào trở thành tính năng mặc định, mà không cần xài thêm Plugin.

Cách 1. Tạo bảng trong WordPress 4.x

Bước 1. Cài đặt và kích hoạt Plugin TablePress

TablePress là plugin tạo bảng trong WordPress với hơn 700 nghìn lượt cài đặt, có thể nói là plugin tạo bảng được sử dụng nhiều nhất tới thời điểm hiện tại.

Bước 2. Tạo bảng

Table Name: Tên bảng, có dấu hay không dấu đều được

Description: Mô tả bảng, không bắt buộc điền

Number of Rows: Số hàng

Number of Columns: Số cột

Rồi chọn Add Table

Bước 3. Viết nội dung cho bảng

Sau khi nhấn Add Table, một trang mới sẽ hiện ra với rất nhiều tùy chọn:

0. Preview: Xem trước – Save Changes: Lưu thay đổi

1.Table Information

Table ID: Điền gì cũng được.

Shortcode: Đoạn mã dùng để chèn vào bài viết hoặc trang. Chỉ cần chèn đoạn mã này, bảng sẽ được hiển thị. Lưu ý shortcode đi liền với Table ID. Nếu Table ID thay đổi, thì toàn bộ bảng đã chèn với shortcode trước đó sẽ bị mất.

Table Name và Description: Đã thực hiện ở Bước 2

2.Table Content

3. Table Manipulation

Đặt con trỏ chuột tại ô bất kỳ ở Table Content, sau đó chọn:

Insert Image: chèn hình ảnh

Advanced Editor: Bật trình soạn thảo với nhiều chức năng hơn

Selected Rows: Đánh dấu vào ô vuông nhỏ ở Table Content rồi nhấn Hide, nếu muốn ẩn HÀNG đó. Nhấn DUPLICATE nếu muốn nhân đôi. INSERT nếu muốn chèn thêm một hàng. Hoặc DELETE nếu muốn xóa.

Selected Columns: Tương tự Selected Rows, nhưng là thực hiện với CỘT

Add (1) row (s)/Add (1) column(s): Thêm vào hàng/cột. Gõ số bất kỳ rồi nhấn Add, nó sẽ thêm 1 hàng/cột ở cuối bảng.

Combine cells: Bấm vào dấu chấm hỏi bên phải, sẽ có hướng dẫn

4. Table Options

Table Head/Foot Rows: Hàng nào được thiết lập là Head/Foot thì sẽ có màu sắc khác biệt so với hàng khác

Alternating Row Colors: Chịu 😀

Row Hover Highlighting: Màu sắc của hàng khi di chuột đến

Print Table Name/Table Description: Tên/Mô tả của bảng sẽ hiển thị bên trên (above) hoặc dưới (below) bảng

Extra CSS Classes: Điền tên Class CSS. Tên Class thôi, không điền CSS trực tiếp vào đây

Đó là các tùy chọn cơ bản nhất khi tạo bảng trong WordPress với TablePress. Cuối cùng chọn Save Changes.

Bước 4. Chèn bảng vào bài viết hoặc trang

Bấm vào Insert Shortcode

Và lưu lại bài viết rồi xem kết quả thôi.

Hoặc đơn giản hơn, chỉ cần sao chép Shortcode đã có ở BƯỚC 3 rồi dán vào vị trí cần chèn bảng trong bài viết hoặc trang thôi.

Cách 2. Tạo bảng trong WordPress 5.x

Điền nội dung cho bảng thôi. Độ rộng từng cột sẽ ăn theo nội dung của từng cột. Nếu nội dung dài thì độ rộng dài, và ngược lại.

Xong. Lưu lại bảng thôi!

Để chèn thêm cột vào bảng, hoặc chèn thêm hàng vào bản. Bạn chỉ cần đặt con chuột tại một ô bất kỳ và chọn như ảnh.

Để chèn liên kết, bôi đậm, in nghiêng cho chữ trong bảng. Bạn chỉ cần bôi đen, sau đó làm như hình.

Để căn lề cho bảng, tức là cho bảng vào giữa, qua phải, sang trái…. chỉ cần bấm vào như hình

Chia sẻ

Cập nhật thông tin chi tiết về Cách Tạo Style Cho Navigation Menus WordPress trên website Hoisinhvienqnam.edu.vn. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất. Chúc bạn một ngày tốt lành!