Nút CSS WordPress

Tạo các nút trong WordPress dường như là công việc của một chủ đề hoặc một plugin. Và đó có thể là những lựa chọn tốt

Nhưng cũng thật dễ dàng để tạo các nút của riêng bạn trong WordPress với một chút CSS. Và khi bạn tạo mã ban đầu, thật dễ dàng để thêm các nút của riêng bạn vào nơi bạn muốn

Chúng tôi sẽ xem xét làm thế nào để làm điều đó dưới đây

Thêm một liên kết đến trang web của bạn

Điều đầu tiên bạn muốn làm là thêm một liên kết đến bài đăng hoặc trang của bạn như bình thường

Giả sử bạn muốn nút của mình có nội dung “Đăng ký ngay. ” Vì vậy, bạn chỉ cần thêm một liên kết có nội dung đó và bạn có thể định vị nó ở nơi bạn muốn

Trong trường hợp của tôi, nó trông như thế này

Thêm một lớp vào liên kết của bạn

Tiếp theo, bạn sẽ cần vào phần mã trên trang của mình (tôi. e. phần “Văn bản”) và thêm một lớp vào liên kết của bạn

Đầu tiên, tìm mã cho liên kết của bạn. Đây là những gì của tôi trông giống như

Tiếp theo, thêm một “lớp” vào mã liên kết của bạn. Đặt cho lớp của bạn một tên duy nhất để nó không xung đột với bất kỳ lớp nào khác có thể đã tồn tại trong CSS của trang web của bạn

Trong trường hợp của tôi, tôi đặt tên cho lớp của mình là “my-button”. Đảm bảo thêm nó vào mã liên kết – tôi. e. bên trong phần bắt đầu bằng

Thêm CSS của bạn

Tiếp theo, bạn sẽ muốn thêm CSS mới của mình. Khi điều này thay đổi chủ đề của bạn, có lẽ bạn nên tạo một chủ đề con hoặc cài đặt plugin CSS tùy chỉnh để khi chủ đề của bạn được cập nhật, những thay đổi của bạn sẽ không bị mất

Đây là CSS tôi sẽ thêm. Chúng ta sẽ nói về ý nghĩa của tất cả những điều đó trong một phút nữa.
______1

a. nút của tôi. hover {
background-color. #fff;
màu. #3366ff;
đường viền. 2px solid #3366ff;
bán kính đường viền. đệm 10px;
. 20px 35px;
}
 

Và đây là cách nó xuất hiện trên trang web của tôi - một nút đẹp với hiệu ứng di chuột

Tùy chỉnh nút của bạn

Bạn có thể tùy chỉnh mã CSS này theo ý muốn. Chúng ta sẽ lướt qua ý nghĩa của nó

Đoạn mã đầu tiên xác định nút trông như thế nào mà không có bất kỳ hiệu ứng di chuột nào – tôi. e. trước khi ai đó rê chuột qua nó

Line-height cung cấp chiều cao cho văn bản của bạn và font-size là kích thước của văn bản của bạn, tất nhiên

Màu sắc là màu của văn bản của bạn. Trong trường hợp của tôi, nó bắt đầu có màu trắng. Sau đó, nó thay đổi khi nó di chuột qua nó. Vì vậy, điều đó sẽ được kiểm soát bởi phần tiếp theo của CSS

Màu nền và đường viền là tự giải thích

Bán kính đường viền mang lại cho nút một cái nhìn tròn. Nếu bạn tăng nó, nó sẽ tròn hơn. Ví dụ: giả sử tôi đã tăng từ 10px lên 30px. Nó sẽ trông như thế này

Phần đệm kiểm soát lượng không gian xung quanh văn bản nút. Số đầu tiên (20px) là khoảng trống phía trên và phía dưới văn bản. Số thứ hai (35px) là khoảng cách bên phải và bên trái của văn bản

Ba số chuyển tiếp khác nhau kiểm soát tốc độ nút thay đổi màu sắc. Con số đó càng cao, quá trình chuyển đổi càng dài. (Có ba dòng khác nhau để giải thích cho các trình duyệt web khác nhau. )

Phần di chuột

Phần thứ hai kiểm soát giao diện của nút khi nó được di chuột qua

Tất cả những điều đó bây giờ sẽ khá dễ hiểu nếu bạn đã xem qua thông tin ở trên

Điều quan trọng cần nhớ là thay đổi màu sắc ở đây nếu bạn muốn nút của mình thay đổi màu sắc. Ví dụ: tôi bắt đầu với nền xanh và văn bản màu trắng, sau đó khi di chuột, tôi chỉ cần đảo ngược điều đó, với nền trắng và văn bản màu xanh tương tự

Ví dụ: bạn có thể không muốn thay đổi màu nền và chỉ thay đổi màu văn bản khi di chuột. Nếu đúng như vậy, bạn chỉ cần xóa màu nền trong phần đó

Các nút dễ dàng

Các nút đơn giản như thế này thật dễ dàng. Khi bạn lấy mã CSS của mình xuống, bạn có thể thêm một lớp vào bất kỳ liên kết nào bạn muốn

Thêm một nút trong menu điều hướng tiêu đề cho phép bạn tạo lời kêu gọi hành động đáng chú ý hơn. Nó có thể nhận được nhiều nhấp chuột hơn vào các trang quan trọng nhất của bạn và tạo trải nghiệm người dùng tốt hơn bằng cách giúp khách truy cập của bạn thực hiện hành động

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm một nút vào menu tiêu đề WordPress của bạn

Tại sao lại thêm một nút trong Menu tiêu đề WordPress?

Các menu điều hướng WordPress thường là các liên kết văn bản thuần túy trông giống nhau. Về mặt thiết kế, tất cả các liên kết đều có tầm quan trọng và trọng lượng như nhau

Điều gì sẽ xảy ra nếu bạn muốn thêm liên kết vào biểu mẫu đặt hàng trực tuyến, liên kết trang đăng nhập hoặc đăng ký hoặc liên kết mua ngay bây giờ?

Thay đổi các liên kết quan trọng trong menu điều hướng WordPress của bạn thành các nút sẽ khiến chúng dễ nhận thấy hơn. Điều này giúp người dùng dễ dàng tìm thấy chúng, cải thiện mức độ tương tác và trải nghiệm của họ trên trang web của bạn

Theo mặc định, WordPress có các tùy chọn để thêm các nút trong các bài đăng và trang WordPress bằng khối Nút. Tuy nhiên, nó không có tùy chọn tích hợp để thêm các nút trong menu điều hướng

May mắn thay, có một cách dễ dàng để chuyển đổi bất kỳ liên kết nào trong menu điều hướng WordPress của bạn thành một nút

Như đã nói, chúng ta hãy xem cách thêm một nút trong menu tiêu đề WordPress của bạn mà không cần cài đặt plugin

Video hướng dẫn

Đăng ký WPBeginner

Nếu bạn muốn hướng dẫn bằng văn bản, hãy tiếp tục đọc

Thêm một nút trong menu tiêu đề WordPress của bạn

Trước tiên, bạn cần thêm liên kết mà bạn muốn chuyển đổi thành nút vào menu điều hướng WordPress của mình

Chỉ cần truy cập trang Giao diện »Menu trong bảng điều khiển WordPress của bạn và thêm liên kết vào menu điều hướng của bạn

Sau đó, bạn cần nhấp vào nút Tùy chọn màn hình ở trên cùng. Thao tác này sẽ hiển thị menu bay xuống với một loạt tùy chọn. Bạn cần đánh dấu vào ô bên cạnh tùy chọn ‘CSS Classes’

Bây giờ, cuộn xuống trình đơn của bạn và nhấp để mở rộng mục trình đơn mà bạn muốn chuyển đổi thành một nút

Bạn sẽ nhận thấy tùy chọn lớp CSS mới trong cài đặt mục menu. Tại đây, bạn cần nhập tên lớp. Bạn có thể gọi lớp CSS này bằng bất kỳ tên duy nhất nào bạn muốn, nhưng vì lợi ích của hướng dẫn này, chúng tôi sẽ gọi nó là menu-button

Sau khi nhập tên, hãy nhấp vào nút 'Lưu Menu' để lưu các thay đổi của bạn

Bây giờ chúng ta đã thêm lớp CSS tùy chỉnh của riêng mình vào mục menu, chúng ta có thể thiết kế nó bằng cách thêm mã CSS tùy chỉnh của riêng mình

Chỉ cần truy cập Giao diện »Tùy chỉnh để khởi chạy tùy biến chủ đề WordPress

Bây giờ, bạn sẽ thấy bản xem trước trực tiếp trang web của mình ở bên phải và một loạt cài đặt chủ đề ở cột bên trái

Bây giờ bạn cần nhấp vào tab CSS bổ sung để mở rộng nó. Thao tác này sẽ hiển thị cho bạn một hộp nơi bạn có thể thêm mã CSS tùy chỉnh của mình

Tại đây, bạn có thể sao chép và dán mã CSS sau làm điểm bắt đầu

.menu-button { 
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active { 
color:#fff !important;
}

Ngay sau khi bạn thêm mã CSS, công cụ tùy chỉnh chủ đề sẽ tự động áp dụng mã đó vào bản xem trước trang web của bạn và bạn sẽ có thể thấy các thay đổi có hiệu lực

Đừng lo lắng, các thay đổi sẽ không hiển thị trên trang web của bạn cho đến khi bạn nhấp vào nút Xuất bản

Thoải mái chơi đùa với CSS bao nhiêu tùy thích. Bạn có thể thay đổi màu nền, màu văn bản liên kết, thêm đường viền, v.v.

Đừng quên nhấp vào nút Xuất bản để lưu các thay đổi của bạn

Điều này không dễ dàng sao?

Bạn có thể sử dụng thủ thuật này để không chỉ thêm các nút vào menu tiêu đề mà còn có thể sử dụng nó để đánh dấu bất kỳ liên kết nào trong menu điều hướng WordPress của bạn

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm một nút trong menu tiêu đề WordPress của bạn. Bạn muốn xem cách người dùng tương tác với các nút của bạn? . Tiếp theo, hãy xem danh sách phần mềm trò chuyện trực tiếp tốt nhất dành cho doanh nghiệp nhỏ của chúng tôi

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 các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook

Làm cách nào để gửi một nút trong CSS?

Chúng ta có thể tạo nút bằng CSS không?