Nếu bạn đang phát triển trang web WordPress cho khách hàng, thì có khả năng bạn sẽ có các mã ngắn cho khách hàng sử dụng. Vấn đề là nhiều người mới bắt đầu không biết làm thế nào để thêm shortcodes và nếu có các tham số phức tạp liên quan, sau đó nó thậm chí còn khó khăn hơn. Shortcake cung cấp một giải pháp bằng cách thêm một giao diện người dùng cho các mã ngắn. Trong bài này, chúng tôi sẽ chỉ cho bạn cách thêm một giao diện người dùng cho shortcodes trong WordPress với Shortcake.
Shortcake là gì?
WordPress cung cấp một cách dễ dàng hơn để thêm mã thực thi trong các bài viết và trang bằng cách sử dụng các mã ngắn. Nhiều chủ đề WordPress và plugin cho phép người dùng thêm chức năng bổ sung bằng cách sử dụng các mã ngắn. Tuy nhiên, đôi khi những shortcodes này có thể trở nên phức tạp khi người dùng cần phải nhập các tham số cho customization.
Ví dụ: trong một chủ đề WordPress điển hình nếu có một mã ngắn để nhập một nút, thì người dùng có lẽ sẽ cần thêm ít nhất hai đến năm thông số. Như thế này:
[themebutton url = “http://example.com” title = “Tải xuống Ngay” color = “purple” target = “newwindow”]
Shortcake là một plugin WordPress và một tính năng WordPress được đề xuất trong tương lai. Nó nhằm giải quyết vấn đề này bằng cách cung cấp một giao diện người dùng để nhập các giá trị này. Điều này sẽ làm cho các mã ngắn dễ sử dụng hơn rất nhiều.
Bắt đầu
Hướng dẫn này nhằm cho người dùng mới phát triển WordPress. Người dùng cấp độ mới bắt đầu thích chỉnh sửa các chủ đề WordPress cũng sẽ thấy hướng dẫn này hữu ích.
Có nói rằng, chúng ta hãy bắt đầu.
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Shortcake (Shortcode UI).
Bây giờ bạn sẽ cần một mã ngắn chấp nhận một vài tham số của đầu vào người dùng. Nếu bạn cần một chút làm mới, đây là cách để thêm một mã ngắn trong WordPress.
Vì lợi ích của hướng dẫn này, chúng tôi sẽ sử dụng một mã ngắn đơn giản cho phép người dùng chèn một nút vào các bài viết hoặc trang WordPress của họ. Đây là mã mẫu cho mã ngắn của chúng tôi và bạn có thể sử dụng mã này bằng cách thêm tệp vào tệp chức năng của chủ đề hoặc trong một plugin dành riêng cho trang web.
add_shortcode ('cta-button', 'cta_button_shortcode');
chức năng cta_button_shortcode ($ atts) {
trích xuất (shortcode_atts (
mảng(
'title' => 'Tiêu đề',
'url' => ''
),
$ atts
));
trở về ' ';
}
Bạn cũng cần phải thêm một số CSS để tạo kiểu cho nút của bạn. Bạn có thể sử dụng CSS này trong bảng định kiểu của chủ đề.
nút .caa {
đệm: 10px;
kích thước phông chữ: 18px;
biên giới: 1px solid #FFF;
bán kính biên giới: 7px;
màu: #FFF;
màu nền: # 50A7EC;
}
Đây là cách người dùng sẽ sử dụng mã ngắn trong bài đăng và trang của họ:
[cta-button title = "Tải xuống ngay bây giờ" url = "http://example.com"]
Bây giờ chúng ta có một mã ngắn chấp nhận các tham số, chúng ta hãy tạo một UI cho nó.
Đăng ký Giao diện Người dùng Ngắn hạn với Shortcake
Shortcake API cho phép bạn đăng ký giao diện người dùng của shortcode. Bạn sẽ cần phải mô tả những thuộc tính mà mã nhận dạng của bạn chấp nhận, loại trường đầu vào và loại bài đăng nào sẽ hiển thị UI ngắn.
Dưới đây là một đoạn mã mẫu mà chúng tôi sẽ sử dụng để đăng ký giao diện Người dùng Mật mã của chúng tôi. Chúng tôi đã cố gắng giải thích từng bước bằng các nhận xét nội tuyến. Bạn có thể dán tệp tin này vào tệp tin chức năng của chủ đề hoặc trong một plugin dành cho trang web.
shortcode_ui_register_for_shortcode (
/ ** Xử lý mã vạch của bạn * /
'cta-button',
/ ** Mã sản phẩm của bạn và biểu tượng * /
mảng(
/ ** Nhãn cho giao diện người dùng ngắn. Phần này là bắt buộc. * /
'nhãn' => 'Thêm nút',
/ ** Biểu tượng hoặc tập tin đính kèm hình ảnh cho shortcode. Không bắt buộc. src hoặc dashicons- $ biểu tượng. * /
'listItemImage' => 'dashicons-lightbulb',
/ ** 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ã vạch của chúng tôi chấp nhận hai tham số hoặc thuộc tính, tiêu đề và URL
* Cho phép đầu tiên xác định UI cho trường tiêu đề.
* /
mảng(
/ ** Nhãn này sẽ xuất hiện trong giao diện người dùng * /
'nhãn' => 'Tiêu đề',
/ ** Đây là attr thực tế được sử dụng trong mã được sử dụng cho shortcode * /
'attr' => 'tiêu đề',
/ ** Xác định loại đầu vào. Các loại được hỗ trợ là văn bản, hộp kiểm, textarea, radio, chọn, email, url, số và ngày tháng. * /
'type' => 'văn bản',
/ ** Thêm mô tả hữu ích cho người dùng
'description' => 'Hãy nhập văn bản nút',
),
/ ** Bây giờ chúng ta sẽ xác định giao diện người dùng cho trường URL * /
mảng(
'label' => 'URL',
'attr' => 'url',
'type' => 'văn bản',
'description' => 'URL đầy đủ',
),
),
),
/ ** Bạn có thể chọn các loại bài đăng sẽ hiển thị UI ngắn * /
'post_type' => mảng ('bài', 'trang'),
)
);
Đó là tất cả, bây giờ bạn có thể thấy giao diện người dùng ngắn gọn đang hoạt động bằng cách chỉnh sửa một bài đăng. Đơn giản chỉ cần nhấp vào nút Thêm Phương tiện trên trình chỉnh sửa bài đăng. Thao tác này sẽ hiển thị trình tải lên của phương tiện, nơi bạn sẽ thấy mục ‘Insert Post Element’ mới ở cột bên trái. Nhấp vào nó sẽ cho bạn thấy một nút để chèn mã của bạn.
Nhấp vào hình thu nhỏ chứa biểu tượng bóng đèn và nhãn shortcake của bạn sẽ hiển thị cho bạn giao diện người dùng có mã vạch ngắn.
Thêm mã vạch với nhiều đầu vào
Trong ví dụ đầu tiên, chúng tôi đã sử dụng một mã ngắn rất cơ bản. Bây giờ làm cho nó phức tạp hơn một chút và hữu ích hơn rất nhiều. Hãy thêm một mã ngắn cho phép người dùng chọn một màu nút.
Đầu tiên chúng ta sẽ thêm mã vạch. Đó là gần như cùng một mã ngắn, ngoại trừ nó bây giờ ngoại trừ đầu vào của người sử dụng cho màu sắc.
add_shortcode ('mybutton', 'my_button_shortcode');
chức năng my_button_shortcode ($ atts) {
trích xuất (shortcode_atts (
mảng(
'color' => 'màu xanh',
'title' => 'Tiêu đề',
'url' => ''
),
$ atts
));
trở về ' ';
}
Vì mã vạch của chúng tôi sẽ hiển thị các nút có màu sắc khác nhau nên chúng tôi cũng cần cập nhật CSS của chúng tôi. Bạn có thể sử dụng CSS này trong bảng định kiểu của chủ đề.
.mybutton {
đệm: 10px;
kích thướ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 {
màu nền: # 50A7EC;
}
.org nút {
màu nền: # FF7B00;
}
.Nút màu xanh lá cây {
màu nền: # 29B577;
}
Đây là cách nút trông sẽ như sau:
Bây giờ mã ngắn của chúng tôi đã sẵn sàng, bước tiếp theo là đăng ký UI ngắn. Chúng tôi sẽ sử dụng cùng mã chính, ngoại trừ thời gian này chúng tôi có một tham số khác về màu sắc và chúng tôi đang cung cấp cho người dùng lựa chọn từ các nút màu xanh, cam hoặc xanh.
shortcode_ui_register_for_shortcode (
/ ** Xử lý mã vạch của bạn * /
'mybutton',
/ ** Mã sản phẩm của bạn và biểu tượng * /
mảng(
/ ** Nhãn cho giao diện người dùng ngắn. Phần này là bắt buộc. * /
'label' => 'Thêm nút đầy màu sắc'
/ ** Biểu tượng hoặc tập tin đính kèm hình ảnh cho shortcode. Không bắt buộc. src hoặc dashicons- $ biểu tượng. * /
'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ã vạch của chúng tôi chấp nhận hai tham số hoặc thuộc tính, tiêu đề và URL
* Cho phép đầu tiên xác định UI cho trường tiêu đề.
* /
mảng(
/ ** Nhãn này sẽ xuất hiện trong giao diện người dùng * /
'nhãn' => 'Tiêu đề',
/ ** Đây là attr thực tế được sử dụng trong mã được sử dụng cho shortcode * /
'attr' => 'tiêu đề',
/ ** Xác định loại đầu vào. Các loại được hỗ trợ là văn bản, hộp kiểm, textarea, radio, chọn, email, url, số và ngày tháng. * /
'type' => 'văn bản',
/ ** Thêm mô tả hữu ích cho người dùng * /
'description' => 'Hãy nhập văn bản nút',
),
/ ** Bây giờ chúng ta sẽ xác định giao diện người dùng cho trường URL * /
mảng(
'label' => 'URL',
'attr' => 'url',
'type' => 'văn bản',
'description' => 'URL đầy đủ',
),
/ ** Cuối cùng chúng ta sẽ xác định giao diện cho Color Selection * /
mảng(
'nhãn' => 'màu',
'attr' => 'màu',
/ ** Chúng tôi sẽ sử dụng trường chọn thay vì văn bản * /
'type' => 'chọn',
'options' => mảng (
'xanh' => 'xanh',
'cam' => 'Cam',
'xanh' => 'xanh',
),
),
),
/ ** Bạn có thể chọn các loại bài đăng sẽ hiển thị UI ngắn * /
'post_type' => mảng ('bài', 'trang'),
)
);
Đó là tất cả, bây giờ bạn có thể chỉnh sửa bài đăng hoặc trang và nhấp vào nút Thêm phương tiện. Bạn sẽ thấy mã vạch mới được thêm vào dưới ‘Insert Post Elements’.
Nhấp vào mã vạch vừa tạo của bạn sẽ hiển thị biểu tượng UI ngắn, nơi bạn chỉ cần nhập các giá trị.
Bạn có thể tải mã được sử dụng trong hướng dẫn này dưới dạng plugin.
wpb-shortcake-hướng dẫn
Chúng tôi đã bao gồm CSS, vì vậy bạn có thể sử dụng nó để nghiên cứu hoặc sử dụng nó để thêm các nút gọi hành động của riêng bạn trong WordPress sử dụng một giao diện người dùng dễ dàng hơn. Hãy thay đổi nguồn và chơi với nó.