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 600.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 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 bạn.

Những kiểu CSS tùy chỉnh này có thể được áp dụng cho văn bản trong bài viết của bạn để trang trí và định dạng chúng. Chúng được sử dụng phần lớn để tạo các nút hấp dẫn và bắt mắt cho các mặt hàng của bạn. Hướng dẫn này cũng sẽ bao gồm 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 các bài viết 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 một kiểu cho nó thông qua menu thả xuống của trình chỉnh sửa bài viết.

Khi chúng ta kết thúc, Visual Editor sẽ trông như thế này và sẽ chứa phần tử "kiểu" ở dạng trình đơn thả xuống:

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

Sử dụng menu mới, có thể áp dụng kiểu CSS cho liên kết văn bản trong bài viết của bạn, để 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 như thế này, mặc dù ngoại hình phụ 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 cho blog của bạn có thể luôn luôn sử dụng cùng một kiểu để trang trí các nút hoặc bất kỳ mục nào khác.

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. Đầu tiên, nó rất quan trọng để 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ố xảy ra

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ộ thì không cần thiết phải 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 phần tử "Kiểu" vào Menu.

Menu thả xuống "Styles" thực sự đã là một phần của Visual Editor của 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 vào menu » Apparence »Sau đó bấm 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 Appearance> Editor

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

Trước tiên, hãy đảm bảo rằng chủ đề hiện đang được sử dụng bởi blog của bạn được chọn trong menu thả xuống ở trên cùng bên phải của trang. Tôi hiện đang chỉnh sửa tập tin 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 nhau.

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, nhấp vào nút cập nhật để lưu các thay đổi. Nếu tất cả đều ổn, bạn sẽ thấy rằng trình đơn thả xuống của các kiểu đã được thêm vào trình chỉnh sửa trực quan bài viết của WordPress.

Tuy nhiên, chúng tôi chưa hoàn thành. Nếu bạn nhìn vào các mục menu trong 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 được liên kết với 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.

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]

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 yếu tố nào khác.

Bây giờ chúng tôi sẽ tạo các 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 Trình 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 và sau đó sao chép CSS. Sau đó chuyển đến "Giao diện" rồi "Trình chỉnh sửa" và nhấp vào tệp style.css trong danh sách các tập tin ở phía bên phải Trong tiếng Anh, bạn sẽ có Giao diện> Trang chỉnh sửa> style.css

Một lần nữa, cuộn đến cuối tập tin và dán vào CSS của nút bên dưới 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" dùng để chỉ mỏ neo, chỉ ra rằng kiểu này dành cho các liên kết.
  • các 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à mọi thứ bạn đặt làm tên cho 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ã, nhấp vào nút cập nhật để lưu các thay đổi. 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ó nhãn " 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 và sau đó chọn kiểu bạn muốn đưa nút của mình trong menu. Kiểu sẽ không hiển thị trong cửa sổ soạn thảo bài viết. Bạn phải xem trước bài viết, trông giống như thế này:

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

Bây giờ mỗi khi bạn phải chèn một nút bắt mắt và hấp dẫn vào bài viết 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.

Tôi hy vọng bạn có thể nghĩ về việc sử dụng tính năng này. Ví dụ: bạn có thể thêm các kiểu bổ sung vào menu. Nó có thể là định dạng sự xuất hiện của văn bản, hoặc bất cứ điều gì 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 một kiểu nút bổ sung sẽ được thêm vào danh sách thả xuống, chỉ cần tạo một mục 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 vào 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 cho 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 phải chỉnh sửa mã, vì vậy 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 lớn 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