Bỏ qua đến nội dung chính

Làm thế nào để Thêm một trình đơn thả xuống với CSS trong Visual Editor của bạn

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 701.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Trong hướng dẫn này, bạn sẽ học cách dễ dàng chuyển đổi các liên kết văn bản trong nút hấp dẫn trong WordPress. Bằng cách làm theo hướng dẫn thủ tục này, bạn sẽ biết cách thêm trình đơn thả xuống trình chỉnh sửa trực quan của WordPress điều này sẽ cho phép bạn áp dụng các kiểu CSS tùy chỉnh cho nội dung bài viết của mình.

Các kiểu CSS tùy chỉnh này có thể được áp dụng cho văn bản trong bài đăng của bạn để trang trí và định dạng chúng. Chúng được sử dụng phần lớn để tạo ra các nút thu hút và bắt mắt cho bài viết của bạn. Hướng dẫn này cũng sẽ đề cập đến việc tạo nút kiểu CSS.

Nếu bạn muốn một cách dễ dàng để thêm các nút hấp dẫn trong bài đăng và trang, thì hướng dẫn này là dành cho bạn.

Kết quả cuối cùng.

Kết quả cuối cùng của hướng dẫn này sẽ là cho phép bạn chọn văn bản trong bài viết của mình và sau đó áp dụng kiểu cho nó thông qua menu thả xuống của trình chỉnh sửa bài viết.

Sau khi chúng ta hoàn tất, Trình chỉnh sửa trực quan sẽ trông giống như thế này và chứa phần tử "kiểu" ở dạng trình đơn thả xuống:

Làm thế nào-To-Styles-01

Khi sử dụng menu mới, bạn có thể áp dụng kiểu CSS cho liên kết văn bản trong bài viết của mình để tạo hiệu ứng nút mà không cần sử dụng hình ảnh. Các liên kết có thể trông giống như thế này, mặc dù sự xuất hiện là tùy thuộc vào bạn:

Làm thế nào-To-Styles-02

Cách tiếp cận này không chỉ tiết kiệm thời gian của bạn khi tạo một bài viết, mà còn cho phép tất cả những người đóng góp blog của bạn luôn có thể sử dụng cùng một phong cách để trang trí các nút hoặc bất kỳ yếu tố nào khác của bài viết.

Hướng dẫn an toàn.

Trong hướng dẫn này, chúng tôi sẽ chỉnh sửa các tệp sau:

  • fonctions.php
  • style.css

Hai tệp này là một phần của chủ đề của bạn, vì vậy chúng tôi sẽ làm việc với các phiên bản được liên kết với chủ đề hiện đang hoạt động trên blog của bạn. Trước hết, điều quan trọng là để tạo ra một bản sao lưu của những tập tin này trong trường hợp có sự cố.

Thứ hai, nó được khuyến khích để tạo ra một chủ đề con của chủ đề hiện tại của bạn. Nếu bạn không biết cách tạo chủ đề con. Sử dụng một chủ đề con, sẽ đảm bảo rằng chủ đề hiện tại của bạn sẽ được cập nhật. Cũng đáng chỉ ra rằng nếu bạn thay đổi chủ đề, CES thay đổi sẽ bị mất.

Tuy nhiên, nếu bạn đang làm việc trên một blog đang được phát triển hoặc cài đặt WordPress cục bộ, bạn không cần tạo một chủ đề con.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Thêm mục "Kiểu" vào Menu.

Menu thả xuống 'kiểu' thực sự đã là một phần của Trình chỉnh sửa trực quan WordPress, nhưng nó đã bị tắt theo mặc định. Để kích hoạt nó, bạn chỉ cần thêm một số mã vào tệp fonctions.php của chủ đề hiện tại của bạn.

Để mở tệp và sửa đổi nó, hãy đi tới trình đơn » Apparence  »Sau đó nhấp vào« nhà phát hành Trong menu con. Nếu bạn có phiên bản tiếng Anh, hãy truy cập Giao diện> Trình chỉnh sửa

Làm thế nào-To-Styles-03

Trước tiên, hãy kiểm tra xem chủ đề mà blog của bạn hiện đang sử dụng có được chọn từ menu thả xuống ở trên cùng bên phải của trang hay không. Tôi hiện đang sửa đổi tệp fonctions.php Hai mươi mười hai chủ đề nhưng đối với bạn nó có thể là một chủ đề khác.

Sau đó bấm vào file fonctions.php từ danh sách các tập tin ở phía bên phải của trang, để bắt đầu chỉnh sửa nó. Sao chép và dán mã sau vào tập tin. Để thuận tiện, tôi sẽ khuyên bạn nên dán nó vào cuối tệp, để bạn có thể dễ dàng theo dõi những gì bạn đã thêm vào tệp.

1
2
3
4
5
6
7
8
9
// Enable the Styles dropdown menu item
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');
// end of part I

Khi mã đã được thêm vào tệp, hãy nhấp vào nút cập nhật để lưu các thay đổi. Nếu mọi việc suôn sẻ, bạn sẽ thấy rằng menu thả xuống chọn kiểu đã được thêm vào trình chỉnh sửa bài đăng trực quan của WordPress.

Tuy nhiên, chúng tôi vẫn chưa xong. Nếu bạn kiểm tra các mục menu trên danh sách thả xuống mới này, bạn sẽ nhận thấy rằng đây là những kiểu liên quan đến Trình chỉnh sửa trực quan của các nút khác.

chúng tôi muốn Thêm phong cách riêng của chúng tôi vào danh sách.

Tạo các kiểu CSS của các nút của bạn.

Trong hướng dẫn này, chúng tôi sẽ tạo một nút cho các liên kết văn bản của chúng tôi, nhưng bạn có thể dễ dàng tạo trang trí và định dạng cho bất kỳ loại phần tử nào khác.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Bây giờ chúng ta sẽ tạo kiểu CSS cho các nút. Bạn có thể tạo CSS của riêng mình hoặc sử dụng một trong nhiều ứng dụng tạo nút trực tuyến. Trình tạo nút CSS là một lựa chọn tốt, vì vậy hãy truy cập trang web và nhanh chóng tạo một nút rồi sao chép CSS. Sau đó đi tới “Giao diện” rồi đến “Trình chỉnh sửa” và nhấp vào tệp style.css trong danh sách tệp ở phía bên phải. Trong tiếng Anh, bạn sẽ có Giao diện> Trang trình chỉnh sửa> style.css

Một lần nữa, cuộn đến cuối tệp và dán CSS từ nút bên dưới vào đó hoặc sử dụng CSS của riêng bạn:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.linkButton {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:15px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}

.linkButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
}

.linkButton:active {
position:relative;
top:1px;
}

/* This button was generated using CSSButtonGenerator.com */

Cập nhật tệp để lưu các thay đổi.

Thêm kiểu vào menu thả xuống.

Bây giờ hãy nhấp lại vào file fonctions.php  và dán đoạn mã sau vào cuối tập tin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Add the Button CSS to the Dropdown Menu
// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {

// Define the style_formats array
$style_formats = array(

// Each array child is a format with it's own settings
array(
'title' => 'Link Button',
'selector' => 'a',
'classes' => 'linkButton',
),
);

// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}

// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
// end of part II

Lưu ý những dòng này bên trong bảng:

  • tiêu đề - đây là tiêu đề sẽ được hiển thị trên menu thả xuống
  • bộ chọn - "a" đề cập đến neo, cho biết rằng kiểu này dành cho các liên kết.
  • lớp - đây là tên lớp của nút CSS của chúng tôi

Nếu bạn đã sử dụng CSS của riêng mình, thì tên lớp sẽ là bất cứ thứ gì bạn đã đặt làm tên của lớp CSS của riêng bạn. Trong ví dụ trên, nút kiểu CSS được gọi là linkButton.

Khi bạn đã dán mã vào đó, hãy nhấp vào nút cập nhật để lưu các thay đổi. Ngay sau khi tệp được lưu, hãy chuyển đến trình chỉnh sửa bài đăng WordPress và làm mới cửa sổ để các thay đổi có hiệu lực. Sau đó, nhấp vào menu thả xuống "Kiểu" và bạn sẽ thấy một mục có tiêu đề " linkbutton".

 

Làm thế nào-To-Styles-05

Để áp dụng kiểu CSS và tạo nút, chỉ cần tạo một liên kết văn bản trong bài viết của bạn, chọn văn bản, sau đó chọn kiểu bạn muốn cung cấp cho nút của mình từ menu. Các kiểu sẽ không hiển thị trong cửa sổ chỉnh sửa bài đăng. Bạn nên xem trước bài viết, sẽ trông như thế này:

Làm thế nào-To-Styles-06

Giờ đây, bất cứ khi nào bạn phải chèn một nút ấn tượng và hấp dẫn vào bài đăng hoặc trang của mình, chỉ cần tạo một liên kết văn bản và sau đó chọn kiểu của nó từ menu thả xuống.

Tùy chọn nâng cao.

Hy vọng bạn có thể nghĩ ra cách sử dụng khác cho tính năng này. Ví dụ: bạn có thể thêm các kiểu bổ sung vào menu. Đó có thể là định dạng giao diện của văn bản hoặc bất kỳ điều gì khác mà bạn có thể làm với CSS.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Nếu bạn muốn tạo thêm một kiểu nút sẽ được thêm vào danh sách thả xuống, thì chỉ cần tạo một mục nhập khác trong bảng (đã được thêm vào fonctions.php) Và thay đổi dòng và tiêu đề của lớp:

1
2
3
4
5
array(
'title' => Bigger Button',
'selector' => 'a',
'classes' => 'biggerButton',
),

Sau đó, thêm một kiểu CSS mới trong tệp style.css. Nếu bạn muốn tạo kiểu cho các mục không liên kết thì bạn cũng có thể làm điều đó. Điều này đòi hỏi phải thay đổi dòng thứ hai tùy thuộc vào khu vực bạn muốn áp dụng kiểu.  

Shortcuts.

Nếu tất cả những điều trên là lý thuyết tuyệt vời đối với bạn, tuy nhiên bạn muốn một cách nhanh hơn để áp dụng lý thuyết này mà không cần phải chỉnh sửa mã, thì hai plugin này có thể khiến bạn quan tâm:

Kết luận .

Giờ đây, bạn có thể dễ dàng tạo các nút tìm kiếm tuyệt vời trong WordPress chỉ bằng cách chọn một tùy chọn từ menu thả xuống trên trình chỉnh sửa bài đăng WordPress.

Chúng tôi hy vọng hướng dẫn này đã giúp bạn thiết kế bộ chọn kiểu trong trình chỉnh sửa bài đăng của bạn. Nếu chúng tôi đã bỏ qua một số phần nhất định hoặc nếu bạn nghĩ muốn mang lại nhiều chi tiết hơn, đừng ngần ngại để lại cho chúng tôi ý kiến ​​của bạn trong phần dành riêng cho những phần cuối cùng này.

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
11 cổ phiếu
cổ phiếu10
tweet1
Enregistrer