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

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

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thêm giao diện shortcodes vào 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 trong các bài viết và trang thông qua mã ngắn. Một số chủ đề và plugin WordPress cho phép người dùng thêm các tính năng vào blog của họ bằng cách sử dụng mã ngắn. Tuy nhiên, các mã ngắn này có thể trở nên rất khó xử lý, làm phức tạp hóa 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ẽ phải điền gần năm thông số cho shortcode như sau:

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

Đó là nơi Shortdding đến, trong đó nó cho phép bạn quản lý tốt hơn các mã ngắn của mình.

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

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

Bây giờ bạn phải có một shortcode chấp nhận một số tham số. Đối với hướng dẫn này, chúng tôi sẽ tạo một mã ngắn đơn giản cho phép người dùng thêm các nút trong bài viết 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'); chức năng cta_button_shortcode ($ att) {chiết xuất (shortcode_atts (array ( 'title' => 'Tiêu đề', 'url' => ''), $ att)); return '<span class = "CTA-button"> <a href="'. $url.'">. $ Tiêu đề. '</a> </ span>'; }

Có thể bạn cũng sẽ cần 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 sẽ phải nhập mã ngắn sau:

[cta-button title = "Tải xuống ngay bây giờ» 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 Shortdding cho phép bạn lưu mã ngắn trong giao diện người dùng. Bạn cần mô tả những thuộc tính nào mà shortcode chấp nhận, loại trường và định dạng xuất bản nào sẽ hiển thị UI (giao diện người dùng).

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

shortcode_ui_register_for_shortcode (/ ** Shortcode của bạn * / 'cta-button', / ** Nhãn của shortcode của bạn và biểu tượng của nó * / mảng (/ ** Nhãn là bắt buộc. * / 'nhãn' => 'Thêm nút', / ** Biểu tượng .src hoặc dashicons- $ icon. * / 'ListItemImage' => 'dashicons-lightbulb', / ** Thuộc tính Shortcode * / 'attrs' => mảng (/ ** * Tất cả các trường sẽ chấp nhận giá trị Người dùng sẽ có bảng riêng được xác định như sau. * Mã ngắn này chấp nhận hai tham số URL và tiêu đề * Chúng tôi sẽ xác định giao diện người dùng cho tiêu đề. * / mảng (/ ** Nhãn này sẽ được hiển thị trên giao diện người dùng * / 'nhãn' => 'Tiêu đề', / ** đây là thuộc tính được sử dụng cho mã ngắn * / 'attr' => 'title', / ** Đặt loại trường, được hỗ trợ: văn bản , hộp kiểm, textarea, radio, select, email, url, số và ngày. * / 'gõ' => 'text', / ** Thêm mô tả 'description' => 'Mô tả',), / ** 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 * / mảng ('nhãn' => 'URL', 'attr' => 'url', 'typ e '=>' văn ​​bản ',' mô tả '=>' URL đầy đủ ',),),), / ** Định dạng xuất bản để hiển thị UI * /' post_type '=> mảng (' post ', 'trang'),));

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

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]

insertpostelement

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 mã ngắn.

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.

Trước tiên chúng ta sẽ thêm shortcode. Đây thực chất là cùng một mã với mã ở trên, ngoại lệ duy nhất là chúng ta sẽ thêm một trường cho màu.

Add_shortcode ('mybutton', 'my_button_shortcode'); chức năng my_button_shortcode ($ att) {chiết xuất (shortcode_atts (array ( 'màu' => 'xanh', 'title' => 'Tiêu đề', 'url' => ''), $ att)); return '<span class = "myButton. $ màu sắc.' -button"> <a href="'. $url.'">. $ Tiêu đề. '</a> </ span>'; }

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ờ, shortcode của chúng tôi đã sẵn sàng, bước tiếp theo là ghi lại nó trên Shortdding. Chúng tôi sẽ sử dụng cùng một mã, sự khác biệt ở đây là chúng tôi sẽ cung cấp một tham số bổ sung để hiển thị trường màu.

shortcode_ui_register_for_shortcode(

/** Your shortcode handle */
'mybutton',

/** Your Shortcode label and icon */
array(

/** Label for your shortcode user interface. This part is required. */
'label' => 'Add a colorful button',

/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-flag',

/** Shortcode Attributes */
'attrs'          => array(

/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/

array(

/** This label will appear in user interface */
'label'        => 'Title',

/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',

/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',

/** Add a helpful description for users */
'description'  => 'Please enter the button text',
),

/** Now we will define UI for the URL field */

array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),

/** Finally we will define the UI for Color Selection */ 
array(
'label'     => 'Color',
'attr'      => 'color',

/** We will use select field instead of text */
'type'      => 'select',
    'options' => array(
        'blue'      => 'Blue',
        'orange'    => 'Orange',
        'green'     => 'Green',
    ),
),

),

/** You can select which post types will show shortcode UI */
'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 viết, bạn sẽ có thể thấy mã ngắn mới, vẫn trong cùng một phần trên cửa sổ phương tiện.

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]

postelements

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

colorui

Đó là nó cho hướng dẫn này. Tôi hy vọng nó sẽ giúp bạn tạo ra một giao diện tốt hơn cho các mã ngắn của bạn trên WordPress. Chúc mừng năm mới

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