Phong cách shortcode wordpress

Sử dụng Gutenberg, trình soạn thảo Block Editor mới, trên các giao diện WordPress không tương thích có thể khiến bạn hơi chướng mắt khi sử dụng phông chữ mặc định

Hãy thử lấy ví dụ về một giao diện không hỗ trợ Block Editor. Khi đó bạn sẽ thấy giao diện người nhập như sau

Phong cách shortcode wordpress
Block Editor khi sử dụng với giao diện không tương thích

Điều này có thể điều chỉnh rất đơn giản. Ta hãy thử lấy ví dụ về bộ định dạng phông chữ của Twenty Twenty

Đầu tiên, bạn nên tạo 1 chủ đề con cho giao diện hiện tại. Nếu bạn đang sử dụng chủ đề riêng, thì ta có thể bắt đầu luôn

Trong thư mục theme hiện tại, ví dụ wp-content/themes/codetot, ta cần tạo 1 file mới

trình chỉnh sửa kiểu. css (chứa style của block editor), nội dung như sau

Tiếp đến, ta cần mở tệp functions.php ra đề thêm 1 đoạn mã sau

// Load style into a backend editor
function codetot_site_block_editor_styles() {
	wp_enqueue_style( 'site-block-editor-styles', get_theme_file_uri( '/style-editor.css' ), false, '1.0', 'all' );
}
 add_action( 'enqueue_block_editor_assets', 'codetot_site_block_editor_styles' );

Kết quả là khi nhập nội dung và hiển thị trong khu vực soạn thảo, ta đã thấy có phông chữ từ giao diện đang sử dụng

Html xem trước "

Tôi đang sử dụng mã ngắn để chèn tìm kiếm, bạn có thể tư vấn cách đặt kiểu khi sử dụng mã ngắn không? . Tôi muốn sử dụng cùng một kiểu trong menu của mình làm tùy chọn trượt, nhưng tôi không thể thêm nó bằng cài đặt tiêu chuẩn vì tôi cần nó là mục menu thứ hai chứ không phải mục cuối cùng

Cảm ơn

Đang xem 7 trả lời - 1 đến 7 (trong tổng số 7)

  • Tác giả plugin Vinod Dalvi

    (@vinod-dalvi)

    Tôi hy vọng bạn khỏe hôm nay và cảm ơn câu hỏi của bạn

    Tùy chọn kiểu chỉ khả dụng cho biểu mẫu tìm kiếm được thêm trong menu chứ không phải cho mã ngắn

    Bạn có thể thêm một biểu mẫu tìm kiếm vào menu và thay đổi kiểu của nó như được mô tả trên các trang bên dưới

    https. // tìm kiếm ngà voi. com/docs/display-search-form-in-menu/
    https. // tìm kiếm ngà voi. com/docs/change-menu-search-form-style/

    Trân trọng,

    Trình bắt đầu chủ đề thelyall

    (@thelyall)

    Cảm ơn bạn đã trả lời nhanh chóng

    Cảm ơn vì thông tin – Tôi đã làm rồi nhưng nó thêm nó vào cuối menu (mục cuối cùng), cách duy nhất để tôi có thể định vị nó trong menu là thông qua mã ngắn

    Bây giờ sẽ ổn thôi, nó không lý tưởng lắm, có lẽ điều này có thể được thêm vào trong phiên bản tương lai (khả năng bao gồm kiểu trong mã ngắn)?

    Cảm ơn

    Tác giả plugin Vinod Dalvi

    (@vinod-dalvi)

    Cảm ơn vì thông tin – Tôi đã làm rồi nhưng nó thêm nó vào cuối menu (mục cuối cùng), cách duy nhất để tôi có thể định vị nó trong menu là thông qua mã ngắn

    Bạn có muốn hiển thị nó dưới dạng mục menu đầu tiên không?

    Nếu có thì bạn có thể vui lòng chia sẻ URL trang từ trang web của bạn nơi nó đang hiển thị để tôi có thể giúp bạn không?

    Bây giờ sẽ ổn thôi, nó không lý tưởng lắm, có lẽ điều này có thể được thêm vào trong phiên bản tương lai (khả năng bao gồm kiểu trong mã ngắn)?

    Có, chúng tôi sẽ xem xét thêm nó trong phiên bản tương lai của plugin

    Trình bắt đầu chủ đề thelyall

    (@thelyall)

    Tôi thực sự muốn thêm nó làm tùy chọn thứ hai nếu có thể sau khi 'Duyệt qua'. thợ rèn. com là liên kết (trang web vẫn đang được hoàn thiện). Tôi đánh giá cao điều này có thể không thể

    Rất cảm ơn vì sự giúp đỡ của bạn

    Tác giả plugin Vinod Dalvi

    (@vinod-dalvi)

    Có, hiện tại không thể hiển thị nó ở đó nhưng tôi sẽ triển khai điều này trong phiên bản tương lai của plugin

    Bạn đã từng cố gắng thêm nút vào trang web WordPress của mình chưa? . Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách sử dụng cả plugin WordPress shortcode và plugin không phải shortcode để tạo ra các shortcode cho nút. Từ đó nhúng nút shortcode vào WordPress, bạn sẽ có thể chèn nút vào

     

    Shortcodes là gì?

    Trước khi bắt đầu bài hướng dẫn, chúng ta sẽ tìm hiểu xem mã ngắn là gì

    Về cơ bản, mã ngắn là mã đơn giản được đặt trong dấu ngoặc vuông – [như thế này] – cho phép bạn thêm chức năng vào các bài đăng và trang WordPress

    Để sử dụng nút shortcode WordPress, chỉ cần nhập chúng vào trang biên tập bài viết. WordPress sẽ hiển thị mã và hiển thị kết quả là nút bấm trên trang web của bạn

    Điều thú vị về mã ngắn nút nút WordPress là bạn có thể tự làm một cái nếu mã không có sẵn câu trả lời được yêu cầu

    Trong trường hợp cụ thể này, chúng tôi sẽ hướng dẫn luôn việc tạo mã ngắn nút WordPress để thêm nút trên trang web của bạn. Nhưng vì công việc viết mã từ đầu sẽ khó với đa số mọi người nên chúng tôi sẽ chỉ cho bạn cách làm bằng cách sử dụng plugin thay thế

    Sau đó, chúng tôi còn có giải pháp thay thế cho plugin shortcode nếu bạn không thích sử dụng shortcode

    Please started

    Cách thêm nút WordPress

    Không nghi ngờ gì về việc các nút của trang web đóng vai trò khuyến khích mọi người thực hiện hành động cụ thể như đăng ký, đăng nhập, tải tệp xuống, v. v. Ví dụ, Amazon sử dụng nút để giúp khách hàng truy cập dễ dàng hơn vào mặt hàng của họ và mua hàng

    Phong cách shortcode wordpress

    Bạn cũng có thể chèn nút như trong ví dụ trên

    Tạo Button Shortcode bằng cách sử dụng plugin

    Trong số nhiều plugin WordPress button shortcode có sẵn, lựa chọn hàng đầu của chúng tôi là MaxButtons với hơn 100. 000 bản cài đặt đã được kích hoạt. Nó tương thích với các phiên bản WordPress khác nhau. Và quan trọng hơn là rất dễ sử dụng nên bất kỳ ai cũng có thể sử dụng mà không gặp vấn đề gì

    Để bắt đầu, hãy tải xuống và kích hoạt plugin. Sau đó, đến menu MaxButtons. Khi bạn đã ở trong bảng điều khiển của plugin, hãy nhấp vào Thêm mới và bạn sẽ được chuyển đến Trình chỉnh sửa nút

    Phong cách shortcode wordpress

    Điều đầu tiên bạn cần điền là thông tin cơ bản như. tên nút (tên nút, để phân biệt các nút với nhau), URL (liên kết với nút) và văn bản nút (văn bản trên nút)

    Trong phần đầu tiên này, bạn cũng có thể thay đổi phông chữ, màu văn bản, di chuột màu văn bản và kích thước của nút. Bạn có thể nhìn thấy tất cả các thay đổi thực hiện trong bản xem trước trực tiếp ở bên phải màn hình

    Phong cách shortcode wordpress

    Cuộn xuống, bạn sẽ thấy nhiều tùy chọn hơn để tùy chỉnh giao diện của các nút

    Khi bạn thấy hài lòng với phong cách của nút rồi, hãy nhấn Lưu ở đầu trang

    Bây giờ, hãy quay lại bảng điều khiển MaxButtons, bạn sẽ thấy mã ngắn cho nút bạn vừa tạo. Trong ví dụ dưới đây, mã ngắn là [maxbutton id=”1”].  

    Phong cách shortcode wordpress

    Chèn Button Shortcode vào WordPress

    Khi bạn muốn chèn nút vào Trình chỉnh sửa WordPress, chỉ cần sao chép và dán mã ngắn. Ngoài ra, bạn có thể nhấp vào nút Thêm và chọn nút bạn muốn thêm

    Phong cách shortcode wordpress

    Sau đó, sửa đổi nút URL và nút văn bản theo những gì bạn cần cho bài đăng cụ thể đó. Bằng cách này, bạn không được tạo ra các mã ngắn khác nhau cho các bài đăng khác nhau

    Phong cách shortcode wordpress

    And only so just. Bạn vừa tạo nút WordPress đầu tiên của mình. Bạn không thể thấy kết quả trên trình chỉnh sửa WordPress, vì nút thực tế sẽ xuất hiện trên bài đăng khi nó được xuất bản

    Replace for Plugin Shortcode

    Chế độ tối đa của nút plugin WordPress shortcode như MaxButtons là tính năng hoạt động. Nếu bạn muốn thêm nút với một chút thay đổi về kiểu dáng, bạn phải truy cập plugin bảng điều khiển và chỉnh sửa nó từ đó

    Vì vậy, nên thay vào đó, cách tốt nhất là sử dụng plugin không có mã ngắn như Quên các nút mã ngắn

    Giống như tên của nó đã cho thấy, Quên các nút mã ngắn không dựa vào mã ngắn. Bạn có thể tạo nút ngay lập tức trong trình chỉnh sửa WordPress và tạo mọi kiểu từ đó. Chỉ cần nhấp vào biểu tượng Nút chèn và bạn có thể bắt đầu nút sửa đổi của mình ngay lập tức

    Phong cách shortcode wordpress

    Các tùy chọn tương tự với MaxButtons – kiểu viền, màu nền và kích thước nút. Nhưng có thêm tính năng bổ sung khác mà bạn sẽ hoàn toàn yêu thích. khả năng thêm một biểu tượng vào nút của bạn. Với tinh chỉnh, nó sẽ làm cho nút của bạn trở nên độc đáo và đẹp hơn

    Phong cách shortcode wordpress

    Nếu bạn muốn sử dụng lại nút hiện tại của bạn trong tương lai, bạn không nên thực hiện lại từ đầu. Chỉ cần lưu nó bằng cách nhấp vào biểu tượng Đĩa mềm. Sau này, bạn có thể sử dụng lại từ tab Mẫu bất cứ khi nào bạn cần

    Khi bạn đã hoàn tất, hãy nhấp vào Cập nhật để thêm nút

    Kết luận

    Nút rất có lợi cho mọi trang web. Chúng có hiệu quả trong công việc thu hút sự chú ý. Quan trọng nhất là nó chứa văn bản kêu gọi hành động khuyến khích mọi người thực hiện hành động

    Vì WordPress không cung cấp bất kỳ tính năng mặc định nào để chèn nút vào trang web. Bạn sẽ phải sử dụng một số plugin bổ sung. Có plugin WordPress dựa trên shortcode và non-shortcode. Trong hướng dẫn này, bạn đã học cách sử dụng cả hai. Cái nào phù hợp nhất với bạn?

    Tác giả

    Hải G

    Hải G. là chuyên gia quản lý vận tải, điều hành các trang web dịch vụ. Anh có nhiều năm kinh nghiệm về VPS, Hosting, kỹ thuật SEO, CMS. Đặc biệt yêu thích WordPress và đã sử dụng nó hơn 5 năm nay. Sở thích của anh là đọc, viết blog, đi du lịch và tư vấn cho các bạn khởi nghiệp