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

Làm thế nào để thêm một giao diện shortcode trên WordPress

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ị]

Nếu bạn đang phát triển một trang WordPress cho khách hàng, thì rất có thể bạn có mã ngắn cho khách hàng. Vấn đề là nhiều người mới không biết cách thêm shortcode và nếu có bất kỳ thông số nào được thêm vào thì nó càng phức tạp hơn. Shortcake cung cấp cho người dùng một giải pháp dễ dàng để thêm shortcode vào WordPress.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thêm giao diện shortcode trên WordPress để đơn giản hóa việc thêm vào các bài viết và trang.

Shortcake là gì?

WordPress cung cấp một tính năng cho phép bạn thêm mã thực thi vào các bài đăng và trang thông qua các mã ngắn. Một số chủ đề và plugin WordPress cho phép người dùng thêm chức năng vào blog của họ bằng cách sử dụng mã ngắn. Tuy nhiên, những mã ngắn này có thể trở nên rất khó sử dụng, gây khó khăn cho việc tùy chỉnh.

Ví dụ: với một chủ đề WordPress cơ bản, nếu có một shortcode để chèn một nút, thì người dùng có thể sẽ cần phải điền vào khoảng năm tham số cho shortcode như sau:

[url button = "http://example.com" title = "Tìm hiểu thêm" color = "Purple" target = "newwindow"]

Đây là lúc Shortcake xuất hiện, trong đó nó cho phép bạn quản lý các mã ngắn của mình tốt hơn.

shortcake-bánh-plugin

Các bước đầu tiên

Hướng dẫn này dành cho người dùng mới phát triển WordPress. Người dùng thích tùy chỉnh chủ đề của họ cũng sẽ thấy hướng dẫn này thú vị.

Điều bạn cần làm đầu tiên là cài đặt và kích hoạt tiện ích mở rộng Shortcase (Giao diện Ngắn gọn).

Bây giờ bạn sẽ có một shortcode chấp nhận một vài tham số. Đối với hướng dẫn này, chúng tôi sẽ tạo một shortcode đơn giản cho phép người dùng thêm các nút trong các bài đăng và trang WordPress của họ. Đây là một ví dụ đơn giản cho shortcode của chúng tôi và bạn có thể thêm mã này Trong plugin của bạn hoặc trong tệp functions.php của chủ đề con của bạn.

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í]

add_shortcode ('cta-button', 'cta_button_shortcode'); function cta_button_shortcode ($ atts) {extract (shortcode_atts (array ('title' => 'Title', 'url' => ''), $ atts)); trở lại ' '. $ title. ' '; }

Bạn có thể cũng sẽ cần một số mã CSS cho nút.

Nút .a-pad {padding: 10px; Phông chữ kích thước: 18px; Đường viền: 1px solid #FFF; Bán kính biên: 7px; Màu: #FFF; Màu nền: #50A7EC; }

Đây là cách hiển thị nút được đề cập, người dùng phải nhập mã ngắn sau:

[cta-button title = »Tải xuống ngay» url = »http://example.com»]

Bây giờ bạn có một shortcode chấp nhận các tham số, bây giờ chúng ta sẽ tạo một giao diện cho nó.

Làm thế nào để đăng ký một giao diện cho một shortcode với ShortCacke

API Shortcake cho phép bạn lưu các mã ngắn trong giao diện người dùng. Bạn cần mô tả thuộc tính nào mà shortcode chấp nhận, loại trường và định dạng bài đăng nào sẽ hiển thị UI (giao diện người dùng).

Đây là một ví dụ về một đoạn mã mà bạn có thể sử dụng để đăng ký một shortcode trong giao diện người dùng Shortcake.

shortcode_ui_register_for_shortcode (/ ** Mã ngắn của bạn * / 'cta-button', / ** Nhãn mã ngắn của bạn và biểu tượng * / array (/ ** Nhãn là bắt buộc. * / 'label' => 'Thêm nút', / ** Icone. Src hoặc dashicons- $ icon. * / 'ListItemImage' => 'dashicons-lightbulb', / ** Thuộc tính mã ngắn * / 'attrs' => array (/ ** * Tất cả các trường sẽ chấp nhận giá trị người dùng sẽ có mảng của riêng họ được xác định như sau. * Mã ngắn này chấp nhận hai tham số là url và tiêu đề * Chúng tôi sẽ xác định giao diện người dùng cho tiêu đề. * / array (/ ** Nhãn này sẽ được hiển thị trên giao diện người dùng * / 'label' => 'Title', / ** đây là thuộc tính được sử dụng cho shortcode * / 'attr' => 'title', / ** Xác định loại trường, được hỗ trợ: text , hộp kiểm, vùng văn bản, radio, chọn, email, url, số và ngày. * / 'type' => 'text', / ** Thêm mô tả 'description' => 'Description',), / ** Chúng tôi Bây giờ hãy xác định giao diện người dùng cho trường liên kết * / array ('label' => 'URL', 'attr' => 'url', 'type' = > 'text', 'description' => 'Full URL',),),), / ** Định dạng bài đăng để hiển thị UI * / 'post_type' => array ('post', 'page' ),));

Đó là tất cả những gì bạn cần làm để hiển thị mã ngắn trên giao diện người dùng. Bây giờ bạn có thể bắt đầu chỉnh sửa một bài báo để có thể sử dụng shortcode. Tất cả những gì bạn cần làm là nhấp vào nút thêm phương tiện. Bạn sẽ thấy một phần mới có tiêu đề " Chèn phần tử bài đăng". Bằng cách nhấp vào nó, bạn sẽ có thể xem các mã ngắn khác nhau mà bạn đã tạo.

insertpostelement

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ằng cách nhấp vào biểu tượng, bạn sẽ thấy giao diện người dùng cho phép bạn tùy chỉnh shortcode.

shortcodeui

Cách thêm mã vạch có nhiều trường

Trong ví dụ đầu tiên, chúng tôi đã sử dụng một shortcode khá cơ bản. Bây giờ chúng tôi sẽ làm cho mọi thứ phức tạp hơn một chút và hữu ích hơn. Chúng tôi sẽ thêm một shortcode cho phép người dùng chọn màu của nút.

Đầu tiên chúng ta sẽ thêm shortcode. Về cơ bản nó giống như mã ở trên, ngoại lệ duy nhất là chúng ta sẽ thêm một trường cho màu sắc.

add_shortcode ('mybutton', 'my_button_shortcode'); function my_button_shortcode ($ atts) {extract (shortcode_atts (array ('color' => 'blue', 'title' => 'Title', 'url' => ''), $ atts)); trở lại ' '. $ title. ' '; }

Vì shortcode của chúng tôi hiển thị các nút có màu khác nhau, chúng tôi cũng sẽ cần cập nhật mã CSS.

.mbutton {padding: 10px; Kích cỡ phông chữ: 18px; Biên giới: 1px solid #FFF; Bán kính biên giới: 7px; Màu: #FFF; } .blue-button {background-color: #50A7EC; } .orange-button {background-color: #FF7B00; } .nâng-nút {background-color: #29B577; }

Đây là những gì nút này sẽ trông như thế.

đầy màu sắc-nút-shortcode

Bây giờ mã ngắn của chúng tôi đã sẵn sàng, bước tiếp theo là đăng ký nó trên Shortcake. Chúng ta sẽ sử dụng cùng một mã, sự khác biệt ở đây là chúng ta sẽ cung cấp một tham số bổ sung để hiển thị một trường màu.

shortcode_ui_register_for_shortcode (/ ** Bộ xử lý shortcode của bạn * / 'mybutton', / ** Nhãn và biểu tượng Shortcode của bạn * / array (/ ** Nhãn cho giao diện người dùng shortcode của bạn. Phần này là bắt buộc. * / 'label' => 'Thêm một nút đầy màu sắc ', / ** biểu tượng hoặc tệp đính kèm hình ảnh cho shortcode. Tùy chọn. src hoặc dashicons- $ icon. * /' listItemImage '=>' dashicons-flag ', / ** Thuộc tính shortcode * /' attrs '=> mảng (/ ** * Mỗi thuộc tính chấp nhận đầu vào của người dùng sẽ có mảng riêng được định nghĩa như thế này * Mã ngắn của chúng tôi chấp nhận hai tham số hoặc thuộc tính, tiêu đề và URL * Trước tiên, hãy xác định giao diện người dùng cho trường tiêu đề. * / array (/ ** This nhãn sẽ xuất hiện trong giao diện người dùng * / 'label' => 'Title', / ** Đây là tệp đính kèm thực tế được sử dụng trong mã được sử dụng cho shortcode * / 'attr' => 'title', / ** Xác định loại đầu vào. Các loại được hỗ trợ là văn bản, hộp kiểm, vùng văn bản, radio, chọn, email, url, số và ngày. * / 'Type' => 'text', / ** Thêm mô tả hữu ích cho người dùng * / 'description' => ' Vui lòng nhập văn bản nút ',), / ** Bây giờ chúng tôi sẽ xác định giao diện người dùng cho trường URL * / array ('label' => 'URL', 'attr' => 'url', 'type' => 'text', 'description' => 'Full URL',), / ** Cuối cùng, chúng ta sẽ xác định giao diện người dùng cho Lựa chọn màu * / array ('label' => 'Color', 'attr' => 'color', / ** Chúng ta sẽ sử dụng trường chọn thay vì văn bản * / 'type' => 'select', 'options' => array ('blue' => "Blue", "orange" => "Orange", "green" => "Green",),),), / ** Bạn có thể chọn loại bài đăng nào sẽ hiển thị mã ngắn giao diện người dùng * / 'post_type' => array ('post', 'page'),));

Đó là tất cả ! Bây giờ khi bạn chỉnh sửa hoặc viết một bài đăng, bạn sẽ có thể thấy mã ngắn mới, vẫn nằm trong cùng một phần trên cửa sổ phương tiện.

postelements

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]

Bằng cách nhấp vào shortcode mới, giao diện tùy chỉnh shortcode sẽ được hiển thị và bạn có thể chỉ định các giá trị.

colorui

Đó là nó cho hướng dẫn này. Hy vọng nó sẽ giúp bạn tạo giao diện tốt hơn cho các shortcode của mình trên WordPress. Chúc cậu năm mới vui vẻ!

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
7 cổ phiếu
cổ phiếu7
tweet
Enregistrer