Bạn có muốn học cách tạo shortcode trong WordPress không?
Học cách tạo shortcode trong WordPress có thể là một cách hiệu quả để tùy chỉnh các bài đăng và trang của bạn. Tuy nhiên, nếu bạn chưa quen với quy trình này, bạn có thể gặp khó khăn trong việc tìm ra cách sử dụng một tính năng như vậy trên trang web của mình.
Đó là lý do tại sao chúng tôi đã tổng hợp một hướng dẫn để giúp bạn bắt đầu. Bằng cách xem các mã ngắn hoạt động như thế nào và cách áp dụng chúng một cách hiệu quả, bạn có thể bắt đầu tùy chỉnh nội dung theo ý thích của mình mà không cần bổ sung thêm plugin.
Trong bài viết này, chúng ta sẽ thảo luận về shortcode của WordPress là gì và tại sao bạn có thể cân nhắc sử dụng chúng. Sau đó, chúng tôi sẽ chỉ cho bạn cách tạo của riêng bạn.
Nhưng trước đây, nếu bạn chưa bao giờ cài đặt WordPress khám phá Làm thế nào để cài đặt một bước 7 blog WordPress et Làm thế nào để tìm kiếm, cài đặt và kích hoạt một chủ đề WordPress trên blog của bạn
Sau đó trở lại lý do tại sao chúng ta ở đây.
Mã ngắn WordPress là gì?
Các mã tắt WordPress hoạt động như các phím tắt cho phép bạn nhanh chóng nhúng các phần tử vào một bài đăng hoặc trang. Đây thường là một dòng mã duy nhất được đặt trong dấu ngoặc vuông. Ví dụ :
[exemplecodehortcode]Mã này sẽ hiển thị một tính năng được xác định trước trên giao diện người dùng của trang web của bạn.
WordPress các mã ngắn đầu tiên được giới thiệu với việc phát hành API mã ngắn. Điều này giúp người dùng dễ dàng thêm các yếu tố hấp dẫn vào bài đăng và trang của họ, chẳng hạn như bản đồ Google hoặc nút "Thích" của Facebook.
Nó tồn tại trong WordPress mặc địnht sáu mã ngắn :
- lời chú thích: Bao bọc chú thích xung quanh nội dung
- bộ sưu tập : hiển thị các phòng trưng bày hình ảnh
- Bài nghe: nhúng và phát các tệp âm thanh
- vidéo : nhúng và phát tệp video
- danh sách : hiển thị một bộ sưu tập các tệp âm thanh hoặc video
- nhúng : bao bọc các phần tử nội tuyến
Bạn cũng sẽ gặp hai kiểu định dạng mã ngắn cơ bản: self-closing et enclosing.
Mã ngắn self-closing có thể tự đứng và không cần thẻ đóng.
Trong khi đó, enclosing bao quanh nội dung bạn muốn chỉnh sửa và buộc bạn phải đóng thẻ theo cách thủ công. Ví dụ: bạn có thể nhúng video YouTube bằng cách đặt URL giữa các thẻ embed et /embed :
Ví dụ, điều này sẽ tạo ra kết quả sau:
Một số plugin WordPress tốt nhất đi kèm với các mã ngắn của riêng họ. Ví dụ, Biểu mẫu WP et Liên hệ Mẫu 7 có mã ngắn cho phép bạn nhanh chóng nhúng một Mẫu liên hệ trong một bài viết hoặc trang. Bạn cũng có thể sử dụng một plugin như Nút tối đa để thêm mã ngắn nút ở bất cứ đâu bạn muốn trên trang web của mình.
Tại sao bạn nên cân nhắc sử dụng mã ngắn WordPress?
Có nhiều lý do tại sao bạn có thể sử dụng mã ngắn WordPress. Ví dụ, nó dễ dàng và nhanh hơn việc học và viết một đoạn mã dài trong HTML. Ngoài ra, chúng còn giúp bạn giữ cho nội dung của mình sạch sẽ và dễ truy cập.
Mã ngắn có thể được sử dụng để tự động hóa một số tính năng mà bạn sử dụng nhiều lần. Ví dụ: nếu bạn sử dụng một nút gọi hành động (CTA) trên mỗi bài viết của bạn, việc chuẩn bị sẵn một shortcode chuyên dụng có thể là một giải pháp nhanh chóng và tiện lợi.
Cần đề cập rằng Biên tập viên Gutenberg hoạt động theo cách tương tự, dựa trên việc sử dụng các mã ngắn. Nó cho phép người dùng WordPress thêm một số tính năng tương tác thông qua việc sử dụng các khối.
Phương pháp như vậy thân thiện hơn với người mới bắt đầu vì bạn có thể thêm nội dung ngay trên giao diện người dùng. Tuy nhiên, trình chỉnh sửa khối WordPress vẫn còn hạn chế về những gì nó cung cấp. May mắn thay, nó đi kèm với một khối Mã ngắn, cho phép bạn thêm nội dung tùy chỉnh vào các trang của mình.
Cách tạo shortcode trong WordPress
Nếu bạn đã có kiến thức về mã hóa, bạn có thể tạo các mã ngắn tùy chỉnh của riêng mình. Điều này cho phép bạn toàn quyền kiểm soát giao diện và chức năng của trang web của bạn.
Hãy xem cách tạo một shortcode WordPress tùy chỉnh. Trong hướng dẫn này, chúng tôi sẽ thêm các liên kết mạng xã hội vào một bài báo làm ví dụ.
Bước 1 - Tạo tệp chủ đề mới
Trước khi bắt đầu, bạn nên sao lưu hoàn toàn trang web WordPress của bạn. Bạn cũng sẽ cần tạo một tệp riêng cho mã ngắn tùy chỉnh của mình bên ngoài tệp functions.php của bạn theme WordPress. Điều này sẽ cung cấp một giải pháp dự phòng trong trường hợp có sự cố.
Bạn có thể sử dụng một máy khách FTP (Giao thức truyền tệp) như FileZilla để truy cập các tệp chủ đề của trang web của bạn. Sau khi đăng nhập vào trang web của bạn, hãy truy cập wp-content> chủ đề và tìm thư mục chủ đề hiện tại của bạn. Trong ví dụ của chúng tôi, đây sẽ là chim cú:
Mở thư mục của bạn theme WordPress, nhấp chuột phải vào nó và nhấn Tạo tập tin mới.
Đặt tên cho tệp mới của bạn custom-shortcodes.php sau đó bấm OK. Sau đó, bạn có thể chỉnh sửa nó bằng cách nhấp chuột phải vào nó và chọn tùy chọn Sửa xem :
Thao tác này sẽ mở tệp trong trình soạn thảo văn bản mặc định của bạn. Sau đó, bạn chỉ cần thêm khối mã sau:
<?php ?>
Điều này đảm bảo rằng tệp mới của bạn sẽ được hiểu là PHP, là ngôn ngữ kịch bản mà WordPress được xây dựng trên.
Sau đó, bạn có thể lưu các thay đổi của mình và đóng tệp. Đảm bảo chọn hộp sau để đảm bảo nó sẽ được cập nhật trên máy chủ và áp dụng cho trang web của bạn:
Sau đó mở tệp functions.php trong cùng một thư mục chủ đề và thêm dòng mã sau vào cuối tài liệu:
include('shortcodes-personnalises.php');
Điều này sẽ yêu cầu hệ thống bao gồm bất kỳ thay đổi nào bạn thực hiện đối với tệp custom-shortcodes.php trong functions.php đồng thời cho phép bạn tách chúng ra. Khi bạn đã sẵn sàng, hãy lưu các thay đổi của bạn và đóng tệp.
Bước 2 - Tạo hàm mã ngắn
Tiếp theo, bạn sẽ cần tạo hàm shortcode, hướng dẫn nó những việc cần làm. Chọn lại tùy chọn Sửa xem trong số tệp của bạn custom-shortcodes.php. Sử dụng đoạn mã sau để thêm một hành động để nối hàm của bạn vào:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}Tiếp theo, bạn sẽ cần thêm một hàm gọi lại, hàm này sẽ chạy khi kích hoạt hành động hook. Việc thêm dòng mã sau ngay sau dòng mã được đề cập ở trên sẽ cho WordPress biết rằng hàm của bạn là một mã ngắn:
add_shortcode('sabonner', 'subscribe_link');Khi bạn tạo mã ngắn bằng hàm add_shortcode, bạn chỉ định một thẻ mã ngắn “ ($tag) "và một móc hàm tương ứng" ($func) sẽ chạy mỗi khi phím tắt được sử dụng.
Nói cách khác, nếu thẻ shortcode là [subscribe], thì hook 'subscribe_link' chuyển hướng khách truy cập đến URL được cung cấp.
Do đó, toàn bộ mã bạn sử dụng trong tệp của mình shortcodes-personnalises.php sẽ trông như thế này:
Cần lưu ý rằng khi đặt tên thẻ, bạn chỉ nên sử dụng chữ thường, mặc dù có thể sử dụng dấu gạch dưới. Nó cũng rất quan trọng tránh sử dụng dấu gạch nối, vì nó có thể ảnh hưởng đến các mã ngắn khác.
Bước 3 - Thêm mã ngắn tự đóng vào trang web
Bây giờ bạn có thể kiểm tra mã ban đầu của mình dưới dạng mã ngắn tự đóng trên trang web WordPress của mình. Sử dụng trình chỉnh sửa khối WordPress, bạn có thể chèn thẻ [subscribe] trực tiếp vào bài đăng:
Điều này sẽ hiển thị nội dung sau cho khách truy cập trang web của bạn:
Nếu bạn hài lòng với mã ngắn này, bạn không phải làm bất cứ điều gì khác. Tuy nhiên, nếu bạn muốn tùy chỉnh nó, bạn có thể bỏ qua bước tiếp theo.
Bước 4 - Thêm thông số vào mã ngắn
Bạn có thể điều chỉnh mã ngắn "đặt mua" để có thêm chức năng hiển thị các liên kết truyền thông xã hội khác. Bạn có thể làm điều này bằng cách thêm một tham số để sửa đổi URL.
Đổ thêm thuộc tính quản lý, bạn cần mở tệp custom-shortcodes.php và thêm mã sau:
function subscribe_link_att($atts) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');Điều này sẽ cho phép bạn tùy chỉnh các liên kết trong thẻ shortcode của mình để thêm chúng vào trình chỉnh sửa Gutenberg. Bạn có thể dán nó lên mã trước đó trong tệp tùy chỉnh-shortcodes.php. Nó sẽ trông giống như thế này:
Thêm hàm shortcode_atts () sẽ kết hợp các thuộc tính của người dùng với tất cả các thuộc tính đã biết và mọi dữ liệu bị thiếu sẽ được thay thế bằng các giá trị mặc định của chúng. Khi bạn đã sẵn sàng, hãy lưu các thay đổi của bạn và đóng tệp.
Bước 5 - Kiểm tra cài đặt
Bây giờ bạn có thể kiểm tra mã ngắn được cập nhật trong Trình chỉnh sửa khối WordPress. Trong ví dụ của chúng tôi, chúng tôi đang thử nghiệm các liên kết Twitter và Facebook của mình bằng các mã ngắn sau:
[link đăng ký = 'https: //www.facebook.com/live.blogpascher'] Facebook [/ subscribe]
[liên kết đăng ký = 'https: //twitter.com/BlogPasCher'] Twitter [/ đăng ký]
Điều này sẽ tạo ra kết quả sau trên giao diện người dùng:
Mã ngắn tự đóng này hiển thị URL trực tiếp của hồ sơ xã hội của bạn cho khách truy cập. Tuy nhiên, bạn có thể muốn tính năng này trông bóng bẩy một chút.
Ví dụ: bạn sẽ có thể tạo một phiên bản đính kèm cho phép bạn tùy chỉnh hoàn toàn văn bản liên kết hiển thị cho người dùng khi họ chuẩn bị nhấp vào nó. Chúng tôi sẽ hướng dẫn bạn cách thực hiện trong bước tiếp theo.
Bước 6 - Tạo mã ngắn bao gồm
Mã ngắn đi kèm sẽ được định dạng giống như ví dụ tự động đóng trước đó. Tuy nhiên, nó sẽ bao gồm một tham số bổ sung cho hàm.
Trước tiên, bạn sẽ cần thêm $content = null, xác định chức năng này như một mã ngắn đi kèm. Sau đó, bạn có thể thêm do_shortcode từ WordPress, sẽ tìm kiếm nội dung cho các mã ngắn.
Trong file custom-shortcodes.php, thêm shortcode đi kèm mới:
function subscribe_link_att($atts, $content = null) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
$content = do_shortcode($content);
return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');Khi bạn đã sẵn sàng, tệp của bạn custom-shortcodes.php sẽ trông như thế này:
Mã trước có một thuộc tính " Phong cách " bổ sung, sẽ thay đổi văn bản liên kết thành màu xanh lam. Đừng quên lưu các thay đổi của bạn khi bạn hoàn tất.
Bước 7 - Thêm mã ngắn đính kèm vào trang web
Bây giờ bạn có thể chèn mã ngắn của mình vào trình chỉnh sửa khối WordPress để xem kết quả cuối cùng:
Như bạn đã nhận thấy, bạn có thể dễ dàng thay đổi URL trang truyền thông xã hội của mình và văn bản liên kết được hiển thị cho khách truy cập bằng cách sử dụng mã ngắn của trình bao bọc này. Trong trường hợp này, chúng tôi đã chọn " Facebook " et Twitter :
Ở đó ! Bây giờ bạn đã tạo một shortcode tùy chỉnh cho các liên kết đăng ký trong các trang và bài đăng của mình. Lưu ý rằng tất cả các bước được đề cập ở trên có thể được sửa đổi để tạo tất cả các loại phần tử khác nhau bằng cách sử dụng tính năng WordPress Shortcodes.
Thêm chức năng bổ sung vào trang web WordPress của bạn dễ dàng hơn nhiều với các mã ngắn. Bạn có thể sử dụng chúng để cá nhân hóa nội dung hiện có của mình và thêm các tính năng tương tác, chẳng hạn như biểu mẫu liên hệ, phòng trưng bày hình ảnh hoặc liên kết đăng ký.
Các tài nguyên được đề xuất khác
Chúng tôi cũng mời bạn tham khảo các tài nguyên dưới đây để đi xa hơn trong việc kiểm soát và kiểm soát trang web và blog của bạn.
- Cách tạo một nút nổi có chỉ mục Z với Elementor
- Khi nào và làm thế nào để cài đặt WordPress trong một thư mục con
- Cách tạo một plugin Gutenberg Block WordPress đơn giản
- Cách thêm phông chữ tùy chỉnh vào trang web WordPress
Kết luận
Trong bài viết này, chúng ta đã học cách tạo shortcode của riêng bạn trong WordPress. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, vui lòng cho chúng tôi biết trong ý kiến.
Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Trong khi chờ đợi, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
