Chuyển đổi HTML thành mã ngắn

Xin chào, tôi đang cố gắng nhúng một trình phát nhạc từ trang web cấp phép âm nhạc của tôi (Youlicense) vào một trang trên trang web wordpress của tôi. Không giống như soundcloud và các trình phát nhạc khác, Youlicense chỉ cung cấp mã nhúng html (mà trình soạn thảo văn bản WP của tôi sẽ không nhận ra). Có cách nào để chuyển đổi mã này thành mã ngắn WP không?

Nội dung chính Show

• Thích xem phiên bản video?
• Mã ngắn là gì?
• Lịch sử ngắn về mã ngắn
• Mã ngắn WordPress là gì?
• 2 loại mã ngắn
• Mã ngắn WordPress mặc định
• Cách sử dụng mã ngắn WordPress
• Sử dụng mã ngắn WordPress trong Trang và Bài đăng
• Sử dụng WordPress Shortcodes trong Sidebar Widgets
• Sử dụng WordPress Shortcodes trong Header và Footer
• Giới thiệu nhanh về API Shortcode
• Hiểu những điều cơ bản về API mã ngắn
• Nơi để thêm tập lệnh mã ngắn tùy chỉnh của bạn?
• Triển khai ứng dụng của bạn lên Kinsta - Bắt đầu với Khoản tín dụng $20 ngay bây giờ
• Cách tạo một mã ngắn tùy chỉnh trong WordPress (Cấp độ mới bắt đầu)
• Hãy xem video của chúng tôi – Cách tạo mã ngắn tùy chỉnh trong WordPress cho người mới bắt đầu
• ví dụ 1. Mã ngắn sử dụng [current_year]
• ví dụ 2. Mã ngắn cho nút CTA
• ví dụ 3. Mã ngắn Sử dụng nội dung $
• Mã ngắn WordPress. Ưu vs Nhược điểm
• Ưu điểm
• Nhược điểm
• Mã ngắn và Khối Gutenberg
• Tóm lược
• Làm cách nào để chuyển đổi HTML thành shortcode?
• Mã ngắn HTML là gì?
• WordPress có mẫu mã ngắn không?
• Add_shortcode trong WordPress là gì?

Cảm ơn nhiều

Blog tôi cần trợ giúp là. (chỉ hiển thị cho người dùng đã đăng nhập)

14 Tháng Năm, 2014 lúc 5. 37 giờ chiều

galois

Thành viên

chỉ cung cấp mã nhúng html (mà trình soạn thảo văn bản WP của tôi sẽ không nhận ra)

Sao chép mã ở đây, giữa các thẻ mã

15 Tháng Năm, 2014 tại 1. 40 giờ chiều

michaelshawbond

Thành viên

Áp phích gốc

mmm, điều đó vẫn không hoạt động. Tôi nghĩ rằng tôi cần một số loại mã ngắn. Bất kỳ cách nào để chuyển đổi html sang shortcode?

Mã ngắn WordPress là một tính năng mạnh mẽ để làm những thứ thú vị với ít nỗ lực. Bạn có thể làm khá nhiều thứ với chúng. Với mã ngắn, việc nhúng các yếu tố tương tác hoặc tạo bố cục trang phức tạp dễ dàng như chèn một dòng mã

Nếu bạn muốn thêm một bộ sưu tập, bạn chỉ cần nhập mã sau

[gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"]

Thao tác này sẽ xuất ra một thư viện có ID hình ảnh được đề cập. Nó sẽ có 4 cột và kích thước tối đa của chúng sẽ là 'trung bình' (theo định nghĩa của WordPress)

Không cần bất kỳ mã HTML xấu xí nào

Ví dụ về mã ngắn thư viện

Mã ngắn loại bỏ sự cần thiết của các tập lệnh phức tạp. Ngay cả khi bạn có ít hoặc không có kỹ năng lập trình, bạn vẫn có thể dễ dàng thêm nội dung động với sự trợ giúp của họ

Chúng rất phổ biến trong các nhà phát triển WordPress, vì chúng giúp ích rất nhiều cho việc tự động hóa nội dung và tạo thiết kế. Mã ngắn dành cho nhà phát triển WordPress, Macro dành cho nhà phân tích dữ liệu hoặc Phím tắt dành cho nhà thiết kế đồ họa chuyên nghiệp

Trong hướng dẫn này, bạn sẽ tìm hiểu mọi thứ cần biết về mã ngắn. Bạn sẽ tìm hiểu cách làm việc với Shortcode API bằng cách tạo các mã ngắn của riêng bạn. Cuối cùng, chúng ta sẽ thảo luận về tương lai của mã ngắn và nơi chúng phù hợp với trình chỉnh sửa Khối mới của WordPress

Bị kích thích?

Xem cách Kinsta chống lại đối thủ. Đối chiếu

Thích xem phiên bản video?

Mã ngắn là gì?

Tóm lại, Shortcode = Shortcut + Code

Thông thường, mã ngắn sử dụng thẻ dấu ngoặc vuông [] để xác định cách chúng được sử dụng. Mỗi mã ngắn thực hiện một chức năng cụ thể trong một trang web. Nó có thể đơn giản như định dạng nội dung hoặc phức tạp như xác định cấu trúc của toàn bộ trang web

Ví dụ: bạn có thể sử dụng mã ngắn để nhúng thanh trượt, biểu mẫu hoặc bảng giá. Bạn thậm chí có thể sử dụng chúng để tạo các mẫu thiết kế trang có thể tái sử dụng

Lịch sử ngắn về mã ngắn

Mã ngắn lần đầu tiên được phổ biến bởi một phần mềm diễn đàn trực tuyến có tên là Ultimate Bulletin Board (UBB). Năm 1998, họ giới thiệu BBCode (Bulletin Board Code), một tập hợp các thẻ dễ sử dụng để người dùng định dạng bài đăng của họ một cách dễ dàng

Dễ dàng định dạng với BBCodes đơn giản

Là một ngôn ngữ đánh dấu nhẹ, BBCode hoạt động theo nguyên tắc giống như HTML, ngoại trừ cách đơn giản hơn

Using predefined tags is much safer too, as users cannot insert HTML code and introduce security vulnerabilities. For instance, a user with malicious intent could use the

Ngay sau đó, các phần mềm diễn đàn trực tuyến khác như phpBB, Diễn đàn XMB và vBulletin đã thêm chức năng BBCode vào bảng tin của họ

Mã ngắn trao quyền cho quản trị viên để có quyền kiểm soát tốt hơn đối với những gì người dùng của họ có thể và không thể làm. Ngoài ra, họ cho phép người dùng định dạng nội dung của họ thông qua các thẻ đơn giản

Vì lý do bảo mật tương tự, WordPress ngăn mã PHP chạy bên trong nội dung trang web. Để khắc phục hạn chế này, WordPress 2. 5 đã giới thiệu chức năng mã ngắn vào năm 2008 với việc phát hành API mã ngắn. Nó đã được chứng minh là một trong những tính năng được sử dụng nhiều nhất bởi nhiều nhà phát triển chủ đề và plugin WordPress

Mã ngắn WordPress là gì?

Mã ngắn WordPress là các chuỗi dấu ngoặc vuông ([ ]) biến đổi một cách kỳ diệu thành thứ gì đó hấp dẫn trên giao diện người dùng. Chúng cung cấp cho người dùng một cách dễ dàng để tạo và thay đổi nội dung phức tạp mà không cần lo lắng về mã HTML hoặc mã nhúng phức tạp

2 loại mã ngắn

Chủ yếu có hai loại mã ngắn trong WordPress

• Mã ngắn tự đóng. Những thứ này không cần thẻ đóng

Thí dụ. Mã ngắn thư viện không cần thẻ đóng. Chúng tôi thêm mọi thứ cần thiết với các thuộc tính khác nhau

• Kèm theo mã ngắn. Những thứ này cần một thẻ đóng. Các mã ngắn kèm theo thường thao tác nội dung giữa các thẻ mở và thẻ đóng

Thí dụ. Mã ngắn chú thích được sử dụng để bọc chú thích xung quanh bất kỳ nội dung nào. Nó chủ yếu được sử dụng để thêm chú thích cho hình ảnh, nhưng nó hoạt động với bất kỳ phần tử HTML nào

Một số mã ngắn hoạt động có hoặc không có thuộc tính. Nó phụ thuộc vào cách chúng được định nghĩa

Mã ngắn WordPress mặc định

WordPress đi kèm với 6 mã ngắn mặc định

• • âm thanh. Nhúng tệp âm thanh vào trang web của bạn. Nó bao gồm các điều khiển phát lại đơn giản như Phát & Tạm dừng
  • đầu đề. Bọc chú thích xung quanh nội dung của bạn với nó. Nó chủ yếu được sử dụng để thêm chú thích hình ảnh, nhưng bạn có thể sử dụng nó cho bất kỳ phần tử HTML nào
  • nhúng. Mở rộng trên tính năng oEmbed mặc định. Mã ngắn này cho phép bạn đặt các thuộc tính khác nhau cho nội dung nhúng của mình, chẳng hạn như đặt kích thước tối đa của chúng
  • bộ sưu tập. Chèn một bộ sưu tập hình ảnh đơn giản trên trang web của bạn. Bạn có thể sử dụng các thuộc tính để xác định hình ảnh nào được sử dụng và tùy chỉnh giao diện của thư viện
  • danh sách phát. Hiển thị bộ sưu tập tệp âm thanh hoặc video bằng mã ngắn tự kèm theo này. Bạn có thể cung cấp cho nó chế độ 'tối' thú vị với thuộc tính kiểu của nó
  • băng hình. Nhúng tệp video và phát lại bằng trình phát video đơn giản. Mã ngắn này hỗ trợ nhúng video với các định dạng này. mp4, webm, m4v, webm, ogv, wmv, flv

Để biết thêm chi tiết về cách bạn có thể sử dụng các mã ngắn mặc định và những thuộc tính mà chúng hỗ trợ, bạn có thể tham khảo các tài liệu Codex được liên kết

Cách sử dụng mã ngắn WordPress

Sử dụng mã ngắn trong WordPress là một quá trình đơn giản. Nhưng nó phụ thuộc vào nơi bạn muốn thêm chúng trên trang web của mình. Đảm bảo đọc tài liệu về mã ngắn để hiểu cách thức hoạt động của nó. Tìm hiểu các thuộc tính mà nó hỗ trợ, để bạn có thể nhận được chính xác những gì bạn muốn

Sử dụng mã ngắn WordPress trong Trang và Bài đăng

Trước tiên, hãy chuyển đến trình chỉnh sửa trang/bài đăng nơi bạn muốn chèn mã ngắn

Nếu đang sử dụng trình chỉnh sửa Gutenberg, bạn có thể thêm thẻ shortcode vào khối Shortcodes độc lập. Chúng ta có thể tìm thấy nó trong phần Widgets

Bạn vẫn đang sử dụng Classic Editor (hoặc plugin)? . Một số mã ngắn thậm chí có thể có một nút trong màn hình trình chỉnh sửa để dễ dàng chèn chúng vào

Sử dụng WordPress Shortcodes trong Sidebar Widgets

Mã ngắn cũng có thể được chèn vào các tiện ích thanh bên. Để thêm chúng, hãy vào Giao diện » Tiện ích và thêm tiện ích Văn bản vào phần bạn muốn thêm phím tắt

Dán mã ngắn bên trong tiện ích Văn bản và Lưu nó. Bạn có thể truy cập giao diện người dùng của trang web của mình và xem đầu ra của mã ngắn trong thanh bên của bạn

Ghi chú. wordpress 4. Các phiên bản 8 trở xuống không hỗ trợ mã ngắn trong tiện ích thanh bên. Đọc Cải tiến Widget trong WordPress 4. 9 cập nhật để biết thêm

Sử dụng WordPress Shortcodes trong Header và Footer

Mã ngắn WordPress thường dành cho các trang, bài đăng và tiện ích con. Nhưng bạn có một cách dễ dàng để chèn mã ngắn vào bất kỳ đâu trong trang web của mình

Giả sử bạn muốn thêm nút kêu gọi hành động ở chân trang hoặc trong tất cả các bài đăng của mình trước phần nhận xét. Hàm gọi lại do_shortcode() có ích ở đây

Bạn cần thêm đoạn mã sau vào tiêu đề của chủ đề. php, chân trang. php hoặc bất kỳ tệp mẫu nào của nó

Điều này sẽ xuất mã ngắn ở nơi bạn đã chèn mã

Bạn cần bao gồm các dấu ngoặc vuông ở giữa các dấu ngoặc kép để lặp lại mã ngắn. Chỉ bao gồm tên của nó sẽ không hoạt động

Tương tự như vậy, bạn có thể sử dụng chức năng gọi lại do_shortcode() để bật mã ngắn ở bất kỳ đâu trong WordPress, như trong phần bình luận

Giới thiệu nhanh về API Shortcode

API mã ngắn WordPress xác định cách bạn có thể sử dụng mã ngắn để tùy chỉnh và mở rộng chức năng trang web của mình. Nó cho phép các nhà phát triển tạo nội dung độc đáo (e. g. biểu mẫu, băng chuyền, thanh trượt, v.v. ) mà người dùng có thể thêm vào trang web của họ bằng cách dán mã ngắn có liên quan

Bạn có thể thêm hầu hết mọi tính năng bạn có thể tưởng tượng vào trang web của mình với sự trợ giúp của mã ngắn

API hỗ trợ cả mã ngắn tự đóng và kèm theo. Nó xử lý tất cả các phân tích phức tạp và bao gồm các hàm trợ giúp để đặt và tìm nạp các thuộc tính mặc định

Nhờ có API, bạn có thể đi thẳng vào việc phát triển và tùy chỉnh mã ngắn, thay vì lãng phí thời gian quý báu để xác định các biểu thức thông thường cho mọi mã ngắn bạn tạo

Hiểu những điều cơ bản về API mã ngắn

Mỗi khi bạn mở một trang hoặc đăng trong WordPress, nó sẽ tìm các mã ngắn đã đăng ký trong khi xử lý nội dung của trang web

Nếu tìm thấy mã ngắn đã đăng ký, API mã ngắn sẽ tiếp quản và trả về đầu ra của (các) mã ngắn. Chuỗi đầu ra được trả về sẽ thay thế thẻ mã ngắn ở vị trí mà nó đã được thêm vào

Bạn đăng ký shortcode trong WordPress với hàm add_shortcode(). Đây là cách nó được thực hiện

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

• • • shortcode_name. Thẻ mà WordPress sẽ tìm kiếm trong khi phân tích nội dung bài đăng. API Shortcode khuyên bạn chỉ nên sử dụng các chữ cái viết thường, số và dấu gạch dưới để xác định giá trị của nó (tránh dấu gạch ngang)
    • shortcode_handler_function. Chức năng gọi lại sẽ được thực thi sau khi WordPress xác nhận sự hiện diện của một mã ngắn đã đăng ký

Chức năng xử lý shortcode được định nghĩa như vậy

function shortcode_handler_function( $atts, $content, $tag ){ }

• • • $atts. Một mảng kết hợp của các thuộc tính (i. e. một mảng các cặp khóa-giá trị). Nếu bạn không xác định thuộc tính nào, nó sẽ mặc định là một chuỗi rỗng
    • nội dung $. Nội dung đính kèm, nếu bạn đang xác định một mã ngắn kèm theo. Hàm xử lý có trách nhiệm đảm bảo giá trị $content được trả về đầu ra
    • thẻ $. Giá trị thẻ của shortcode (shortcode_name trong ví dụ trên). Nếu hai hoặc nhiều mã ngắn chia sẻ cùng chức năng gọi lại (hợp lệ), giá trị thẻ $ sẽ giúp bạn xác định mã ngắn nào đã kích hoạt chức năng xử lý

API phân tích cú pháp thẻ, thuộc tính và nội dung kèm theo (nếu có) của mã ngắn, bỏ qua các giá trị cho hàm xử lý, hàm này sẽ xử lý chúng và trả về một chuỗi đầu ra

Chuỗi đầu ra này thay thế macro mã ngắn trên giao diện người dùng của trang web của bạn. Những gì bạn thấy cuối cùng trong trình duyệt là kết quả này

Nơi để thêm tập lệnh mã ngắn tùy chỉnh của bạn?

Bạn có thể thêm các tập lệnh mã ngắn tùy chỉnh của mình vào các chức năng của chủ đề. php hoặc đưa chúng vào một plugin

Nếu bạn đang thêm nó vào một tệp chủ đề, bạn có thể chạy chức năng như vậy

Nhưng nếu bạn đang thêm nó vào một plugin, tôi khuyên bạn chỉ nên khởi tạo nó sau khi WordPress đã tải xong. Bạn có thể đảm bảo điều đó bằng cách bọc hàm add_shortcode() trong một hàm khác. Đây được gọi là chức năng bao bọc

function shortcodes_init(){
 add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

Hàm móc hàm shortcodes_init chỉ kích hoạt sau khi WordPress tải xong (nó được gọi là)

Triển khai ứng dụng của bạn lên Kinsta - Bắt đầu với Khoản tín dụng $20 ngay bây giờ

Chạy nút của bạn. js, Python, Go, PHP, Ruby, Java và Scala, (hoặc hầu hết mọi ứng dụng khác nếu bạn sử dụng Dockerfiles tùy chỉnh của riêng mình), trong ba bước đơn giản

Cách tạo một mã ngắn tùy chỉnh trong WordPress (Cấp độ mới bắt đầu)

Bây giờ chúng tôi đã đề cập đến những điều cơ bản, đã đến lúc tạo một mã ngắn tùy chỉnh

Để làm theo các bước được cung cấp bên dưới, bạn cần quen làm việc với mã PHP và chỉnh sửa các tệp chủ đề WordPress của mình. Vào thời điểm bạn hoàn thành hướng dẫn, bạn sẽ có mã ngắn WordPress tùy chỉnh đầu tiên của mình sẵn sàng kích hoạt

Chúng tôi sẽ bắt đầu với shortcode đơn giản nhất có thể, sau đó chuyển sang những shortcode phức tạp hơn. Tận hưởng các cột mốc ngắn của bạn trên con đường trở thành bậc thầy về mã ngắn

Hãy xem video của chúng tôi – Cách tạo mã ngắn tùy chỉnh trong WordPress cho người mới bắt đầu

ví dụ 1. Mã ngắn sử dụng [current_year]

Hãy tạo một mã ngắn có tên [current_year] để hiển thị năm hiện tại trên trang web của bạn

Mã ngắn này hữu ích nếu bạn đang thêm nội dung vào trang web của mình cần được cập nhật hàng năm. Chẳng hạn, thêm thông báo bản quyền vào chân trang của trang web của bạn

Tôi sẽ sử dụng plugin barebones để thêm chức năng mã ngắn của mình. Bạn có thể thêm nó vào các chức năng của chủ đề của bạn. php và nhận được kết quả tương tự, nhưng tôi không khuyên dùng nó. Mặc dù vậy, nó vẫn ổn để thử nghiệm và học hỏi

Thông tin

Hãy sao lưu trước khi bạn thực hiện bất kỳ thay đổi nào đối với trang web của mình. Kinsta cung cấp sao lưu tự động cho tất cả khách hàng của mình

Hãy bắt đầu bằng cách tạo một plugin. Tạo một thư mục mới trong thư mục /wp-content/plugins/ của bạn

Tôi đang đặt tên cho plugin của mình là "salcodes" nhưng bạn có thể đặt tên cho nó theo bất kỳ tên nào bạn muốn

Trong thư mục plugin salcodes, tạo một tệp PHP có cùng tên (salcodes. php). Sau khi hoàn tất, hãy thêm tiêu đề sau vào tệp plugin của bạn

Tiêu đề plugin đơn giản này đủ tốt cho mục đích của chúng tôi. Bạn có thể tìm hiểu thêm về yêu cầu tiêu đề plugin trong WordPress Codex. Lưu tệp này và sau đó truy cập bảng điều khiển WordPress của bạn để kích hoạt plugin

Bây giờ, hãy đăng ký mã ngắn và chức năng xử lý của nó. Để làm điều đó, hãy thêm đoạn mã sau vào tệp plugin của bạn

/**
 * [current_year] returns the Current Year as a 4-digit string.
 * @return string Current Year
*/

add_shortcode( 'current_year', 'salcodes_year' );
function salcodes_init(){
 function salcodes_year() {
 return getdate()['year'];
 }
}
add_action('init', 'salcodes_init');

/** Always end your PHP files with this closing tag */
?>

• • • Thẻ @return trong nhận xét PHP xác định loại đầu ra được trả về. Nó được theo sau bởi một mô tả ngắn về cùng một
    • current_year là thẻ hoặc tên mã ngắn. Điều này xác định thẻ tự đóng mà bạn cần thêm vào nội dung của mình, trong trường hợp này sẽ là [current_year]
    • salcodes_year là tên của hàm xử lý mã ngắn sẽ trả về chuỗi đầu ra. Chúng tôi sẽ xác định chức năng gọi lại này trong các dòng tiếp theo. Vì chúng tôi đang tạo một mã ngắn tự đóng đơn giản nên bạn không cần phải chuyển cho nó bất kỳ giá trị biến nào như $attributes, $content hoặc $tag
    • salcodes_init là hàm bao bọc được nối với 'init' để đảm bảo rằng mã ngắn được đăng ký và chỉ chạy sau khi WordPress tải xong. Chức năng add_action() sẵn có của WordPress giúp điều này trở nên khả thi
    • getdate() là một hàm PHP trả về một mảng thông tin ngày của dấu thời gian hiện tại. Khóa năm giữ giá trị của năm hiện tại (dưới dạng chuỗi 4 chữ số). Vì vậy, getdate()[‘year’] trả về năm hiện tại. Đầu ra này chính xác là những gì chúng ta muốn

Lưu tệp plugin của bạn. Bây giờ là lúc để kiểm tra xem mã ngắn có hoạt động như dự định không

Thêm mã ngắn vào bất kỳ đâu trong trang web của bạn (trang, bài đăng, tiện ích thanh bên, v.v. ). Tôi đang thêm nó vào tiện ích Văn bản trên thanh bên của trang web của mình

Kiểm tra mã ngắn tùy chỉnh bằng cách thêm nó vào trang web

Và như mong đợi, nó hoạt động hoàn hảo

Sản lượng shortcode của năm

Chúc mừng bạn đã đạt được cột mốc đầu tiên

Mã ngắn bạn vừa tạo không có bất kỳ biến $attributes hoặc $content nào được liên kết với nó. Bạn sẽ học cách sử dụng chúng trong các ví dụ sau

ví dụ 2. Mã ngắn cho nút CTA

Hãy tạo một mã ngắn Nút CTA có thể tùy chỉnh. Điều này cũng sẽ tự đóng (xin lỗi nội dung $, bạn cần giữ cho đến lần tiếp theo)

Mệt mỏi vì một máy chủ chậm cho trang web WordPress của bạn? . Kiểm tra kế hoạch của chúng tôi

Tôi muốn người dùng có thể tùy chỉnh kích thước và màu sắc của Nút CTA bằng các thuộc tính mã ngắn

Vì đầu ra cuối cùng là một phần tử nút nên các thuộc tính HTML của nó như href, id, class, target & label có thể được sử dụng để tùy chỉnh dễ dàng

Bạn có thể sử dụng thuộc tính id và lớp để tạo kiểu cho nút vì cả hai đều là bộ chọn CSS phổ biến

Tôi không gói chức năng xử lý của mình ở đây để giải thích mọi thứ đơn giản

/**
 * [cta_button] returns the HTML code for a CTA Button.
 * @return string Button HTML Code
*/

add_shortcode( 'cta_button', 'salcodes_cta' );

function salcodes_cta( $atts ) {
 $a = shortcode_atts( array(
 'link' => '#',
 'id' => 'salcodes',
 'color' => 'blue',
 'size' => '',
 'label' => 'Button',
 'target' => '_self'
 ), $atts );
 $output = '
' . esc_attr( $a['label'] ) . '
';
 return $output;
}

Ồ, có rất nhiều thứ để giải nén ở đây. Tôi sẽ giải thích từng dòng một để bạn có thể hiểu nó hoạt động như thế nào

• • • Chúng tôi đã đề cập đến hàm add_shortcode() và cách thức hoạt động của nó trong phần trước
    • shortcode_atts() là một chức năng WordPress kết hợp các thuộc tính mã ngắn của người dùng với các thuộc tính đã biết. Nó điền vào các giá trị mặc định khi cần (bạn cũng có thể tự đặt giá trị này). Kết quả sẽ là một mảng chứa mọi khóa từ các thuộc tính đã biết, được hợp nhất với các giá trị từ các thuộc tính mã ngắn do người dùng xác định
    • Bên trong hàm xử lý mã ngắn, chúng tôi xác định một biến ($a) và gán nó cho mảng được trả về bởi shortcode_atts(). Chúng tôi gán cho các thuộc tính giá trị mặc định của chúng bằng cú pháp. 'thuộc tính' => 'giá trị mặc định'. Ví dụ, trong đoạn mã trên, chúng tôi đang đặt giá trị mặc định của nhãn thuộc tính thành Nút với cú pháp ‘nhãn’ => ‘Nút’
    • Chúng ta có thể trích xuất các giá trị cho từng khóa thuộc tính bằng cú pháp PHP cho mảng. $a[‘thuộc tính’]
    • The $output variable stores the HTML code of the button element ( tag with ‘button’ class). It’s the string that’s finally returned by the function.

Nếu bạn muốn đặt liên kết mặc định làm URL trang chủ của trang web, bạn có thể sử dụng chức năng home_url() của WordPress

Hãy thử sử dụng shortcode nguyên trạng, không có thuộc tính nào được xác định và xem kết quả xuất ra là gì

Tôi đang thêm mã ngắn vào tiện ích văn bản thanh bên để kiểm tra nó

Nếu bạn đang thắc mắc dấu ngoặc vuông kép dùng để làm gì ([[cta_button]]), thì chúng được gọi là. Chúng giúp bạn xuất bất kỳ mã ngắn đã đăng ký nào trong trang web của bạn dưới dạng văn bản thông thường, như trong hình bên dưới

Đầu ra của mã ngắn Nút CTA cho thấy nó hoạt động hoàn hảo như mong đợi

Đầu ra HTML của Nút CTA không có thuộc tính.

Người dùng có thể tùy chỉnh kích thước và màu sắc của nút bằng shortcode. Chúng tôi đã đặt các giá trị mặc định của chúng trong hàm xử lý, nhưng chúng tôi cần đăng ký và đưa biểu định kiểu vào danh sách các tài nguyên có sẵn. Biểu định kiểu này phải có tất cả các lớp được xác định trong mã ngắn

Bạn cũng có thể đặt các lớp này trong biểu định kiểu chung của chủ đề, nhưng bạn nên tải chúng riêng biệt. Điều này đảm bảo rằng ngay cả khi bạn thay đổi hoặc cập nhật chủ đề WordPress của mình, các lớp này vẫn sẽ tải cùng với mã ngắn

________số 8_______

Hàm salcodes_enqueue_scripts() xác định biến toàn cục $post, sau đó xác nhận hai điều kiện thông qua

• • • là một(). kiểm tra xem $post có phải là một thể hiện của đối tượng WP_Post không. Nó đề cập đến tất cả các loại bài đăng trong WordPress
    • has_shortcode(). kiểm tra xem nội dung bài đăng có chứa mã ngắn [cta_button] hay không

Nếu cả hai điều kiện đều đúng, hàm sẽ đăng ký và liệt kê kiểu. biểu định kiểu css có trong thư mục CSS. Hàm plugin_dir_url($file) giúp dễ dàng lấy URL của thư mục plugin

Tôi sẽ không hiển thị cho bạn mã CSS ở đây, nhưng bạn có thể tìm thấy nó trong mã nguồn được liên kết ở cuối phần này

Cuối cùng, hãy kiểm tra mã ngắn [cta_button] bằng cách thêm nó vào nội dung bài đăng

Lưu ý các thuộc tính liên kết, màu sắc, kích thước và nhãn tùy chỉnh

Hình ảnh bên dưới cho thấy Nút CTA trông như thế nào trên giao diện người dùng

Nút CTA hiện có URL, màu sắc, kích thước và nhãn mới

Bây giờ bạn đã học cách xác định các thuộc tính tùy chỉnh và bao gồm các kiểu, bạn có thể thêm nhiều chức năng khác vào mã ngắn Nút CTA của mình. Chẳng hạn, bạn có thể cung cấp cho người dùng của mình tùy chọn để thêm hoạt ảnh, hiệu ứng di chuột và nhiều kiểu nút khác

ví dụ 3. Mã ngắn Sử dụng nội dung $

Đối với ví dụ cuối cùng của chúng tôi, hãy tạo một mã ngắn kèm theo có tên [được đóng hộp] để xuất bất kỳ nội dung nào giữa các thẻ của nó trong một hộp có tiêu đề đầy màu sắc

Hãy bắt đầu bằng cách đăng ký mã ngắn và xác định chức năng xử lý của nó

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
*/

add_shortcode( 'boxed', 'salcodes_boxed' );

function salcodes_boxed( $atts, $content = null, $tag = '' ) {
 $a = shortcode_atts( array(
 'title' => 'Title',
 'title_color' => 'white',
 'color' => 'blue',
 ), $atts );
 
 $output = '
'.'
' . esc_attr( $a['title'] ) . '
'.'
' . esc_attr( $content ) . '
'.'
';
 
 return $output;
}

• • • nội dung $ = null. điều này đăng ký mã ngắn dưới dạng một loại kèm theo. Bạn có thể sử dụng biến $content bên trong hàm xử lý của mình để thay đổi đầu ra theo ý muốn
    • thẻ $ =”. điều này xác định biến $tag của shortcode. Nó không cần thiết trong ví dụ này, nhưng đó là một cách tốt để đưa nó vào

Trong ví dụ này, chúng tôi sửa đổi nội dung bằng các kiểu CSS nội tuyến

Các kiểu cho bất kỳ lớp nào được sử dụng bên trong mã ngắn đều được đăng ký và đưa vào hàng đợi như chúng tôi đã làm trong ví dụ về mã ngắn trước đó

Nhưng có hai mã ngắn sử dụng cùng một biểu định kiểu có nghĩa là bạn phải tải nó nếu một trong hai mã được sử dụng. Vì vậy, hãy cập nhật hàm salcodes_enqueue_scripts()

0

• • • $has_shortcode. một biến do người dùng xác định để kiểm tra xem một trong hai mã ngắn có tồn tại trên trang/bài đăng hay không. Các. (Toán tử OR) biến điều đó thành có thể

Bây giờ, hãy lấy mã ngắn [được đóng hộp] của chúng tôi để quay

Thêm mã ngắn được đóng hộp cùng với tiêu đề, title_color và thuộc tính màu

Ảnh chụp màn hình bên dưới hiển thị đầu ra chúng tôi nhận được

Rốt cuộc, một chiếc hộp đẹp không khó để có được

Bây giờ bạn đã học được cách tạo mã ngắn của riêng mình, bạn có thể nghĩ ra [hộp] và tạo cho chúng ý tưởng của riêng bạn. Đừng quên chia sẻ sáng tạo của bạn với chúng tôi

Nếu muốn, bạn có thể tải xuống mã nguồn Shortcode Plugin từ đây

Mã ngắn WordPress. Ưu vs Nhược điểm

Ưu điểm

• • • Mã ngắn đơn giản hóa việc bổ sung các tính năng phức tạp trong các trang web WordPress. Bạn có thể thêm hầu hết mọi thứ bằng cách nhập một dòng mã
    • Mã ngắn tự động hóa quy trình phát triển. Chúng loại bỏ nhu cầu viết các tập lệnh phức tạp mỗi khi bạn muốn chèn một tính năng nhất định
    • Mã ngắn thân thiện với người dùng hơn so với việc thêm mã HTML hoặc tập lệnh PHP
    • Mã ngắn có thể được gói bên trong plugin. Ngay cả khi bạn cập nhật WordPress hoặc thay đổi/cập nhật chủ đề của mình, các mã ngắn sẽ vẫn hợp lệ và tiếp tục hoạt động như trước đây
    • Gói mã ngắn bên trong plugin giúp chúng dễ sử dụng trên nhiều trang web WordPress. Nếu bạn là nhà phát triển xử lý nhiều trang web, thì việc chuẩn bị sẵn sàng tất cả các mã ngắn tùy chỉnh của bạn là cứu cánh
    • Vì các mã ngắn cũng chấp nhận các thuộc tính nên người dùng có thể sửa đổi cách hoạt động của cùng một mã ngắn bằng cách thay đổi các tùy chọn thuộc tính của nó

Nhược điểm

• • • Mã ngắn không trực quan để sử dụng cho người dùng cuối, đặc biệt nếu nhiều mã ngắn được sử dụng trên một trang. Trong những trường hợp như vậy, chúng phù hợp hơn cho các nhà phát triển
    • Thật khó để biết shortcode làm gì chỉ bằng cách nhìn vào nó. Nhóm cốt lõi của WordPress đã khéo léo đặt tên cho chúng là “mã nhúng thịt bí ẩn” vì lý do chính xác này
    • Mã ngắn đi kèm với chủ đề sẽ ngừng hoạt động nếu bạn thay đổi chủ đề của mình
    • Mã ngắn không rõ ràng về cú pháp của chúng. Ví dụ: một số trong số chúng hỗ trợ đóng tùy chọn, vì vậy bạn có thể sử dụng chúng dưới dạng tự đóng hoặc kèm theo hoặc thậm chí cả hai nếu chúng được lồng vào nhau. Bạn có thể đoán làm thế nào nó có thể trở nên siêu khó hiểu siêu nhanh
    • Mã ngắn có thể phá vỡ HTML do các thẻ xung đột hoặc các vấn đề về khả năng tương tác. Không bao giờ là một cảnh tượng tốt khi nhìn thấy chúng trên giao diện người dùng của bất kỳ trang web nào
    • Mã ngắn thêm một tải bổ sung trên máy chủ của bạn. Khi số lượng mã ngắn trên trang/bài đăng của bạn tăng lên, tải này cũng vậy. Quá nhiều mã ngắn có thể khiến trang web của bạn bị thu thập dữ liệu (e. g. đầu ra của hầu hết các trình tạo trang)

Mã ngắn và Khối Gutenberg

Việc giới thiệu Gutenberg đã làm giảm mức độ mong muốn của mã ngắn. Giờ đây, người dùng có thể thêm các khối trực tiếp từ giao diện trình chỉnh sửa, thay vì xử lý các đánh dấu mã ngắn, bất kể nó đơn giản đến đâu

Và nếu bạn muốn thêm mã ngắn, Gutenberg thậm chí còn đi kèm với một khối chuyên dụng để thêm mã ngắn. Khối là Mã ngắn mới

“Nếu bạn có thể làm điều đó với một mã ngắn, thì bạn có thể làm điều đó dưới dạng một khối. ” —

Điều đó giải thích tại sao tất cả các mã ngắn phổ biến đang được chuyển thành khối. Nhiều nhà phát triển WordPress đã chuyển sang làm cho các sản phẩm và dịch vụ của họ hoạt động độc quyền với trình chỉnh sửa khối (Gutenberg)

Nhưng điều đó không có nghĩa đó là ngày tận thế của mã ngắn. Nhóm cốt lõi của WordPress đã hứa hẹn nhiều cải tiến cho trình chỉnh sửa khối mà bạn có thể thấy trong Twenty Twenty, nhưng cho đến lúc đó, các mã ngắn vẫn ở đây

Bạn nói ít hơn, làm được nhiều hơn? . Tìm hiểu chúng là gì và cách tạo của riêng bạn với hướng dẫn chuyên sâu này. Cuộc sống quá ngắn để không sử dụng mã ngắn〚〛💪Nhấp để Tweet

Tóm lược

Thêm chức năng phức tạp ở bất cứ đâu vào trang web WordPress của bạn thật dễ dàng với mã ngắn. Chúng cung cấp cho người dùng các thẻ dễ nhập để có thể sử dụng mà không phải lo lắng về việc sử dụng các mã phức tạp

Mặc dù có thể không có lối tắt nào trong cuộc sống, nhưng chắc chắn có rất nhiều mã ngắn để sử dụng trong WordPress. Mục yêu thích của tôi là Shortcodes Ultimate và Shortcodes của Angie Makes

Và nếu bạn không thể tìm thấy cái bạn đang tìm kiếm, bạn có thể tự tạo một cái

Bạn thậm chí có thể sử dụng phím tắt để tạo mã ngắn tùy chỉnh của mình bằng cách sử dụng plugin Shortcoder. Nó chăm sóc tất cả các yếu tố cần thiết cho bạn. Và hãy nhớ. cuộc sống ngắn ngủi, hãy sử dụng mã ngắn

---

Nhận tất cả các ứng dụng, cơ sở dữ liệu và trang web WordPress của bạn trực tuyến và dưới một mái nhà. Nền tảng đám mây hiệu suất cao, đầy đủ tính năng của chúng tôi bao gồm

• Dễ dàng thiết lập và quản lý trong bảng điều khiển MyKinsta
• Hỗ trợ chuyên gia 24/7
• Mạng và phần cứng Google Cloud Platform tốt nhất, được cung cấp bởi Kubernetes để có khả năng mở rộng tối đa
• Tích hợp Cloudflare cấp doanh nghiệp cho tốc độ và bảo mật
• Tiếp cận đối tượng toàn cầu với tối đa 35 trung tâm dữ liệu và hơn 275 PoP trên toàn thế giới

Hãy tự kiểm tra với $20 trong tháng đầu tiên của Lưu trữ ứng dụng hoặc Lưu trữ cơ sở dữ liệu. Khám phá kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm thấy sự phù hợp nhất của bạn

Làm cách nào để chuyển đổi HTML thành shortcode?

Tạo mã ngắn dễ dàng .

Đặt tên cho shortcode

Dán HTML/JavaScript/CSS dưới dạng nội dung mã ngắn

Tiết kiệm

Bây giờ hãy chèn mã ngắn [sc name="my_shortcode"] vào bài đăng/trang của bạn

thì đấy. Bạn đã nhận được HTML/Javascript/CSS trong bài đăng của mình

Mã ngắn HTML là gì?

Tóm lại, mã ngắn cho phép chúng tôi thêm HTML động và đánh dấu khác trực tiếp vào bài đăng hoặc trang nơi người dùng muốn chúng xuất hiện, trong khi vẫn cho phép người chỉnh sửa cập nhật trang< . Ví dụ (bên trái bên dưới) hiển thị một trang có các tính năng tương tác trên đó. Các nút và đàn accordion được thêm động bằng mã ngắn. . The example (left below) shows a page with interactive features on it. The buttons and an accordion are dynamically added by shortcode.

WordPress có mẫu mã ngắn không?

Hàm do_shortcode của WordPress giúp bạn dễ dàng thêm mã ngắn trực tiếp vào tệp mẫu của chủ đề. Tất cả những gì bạn cần làm là đưa mã ngắn vào bên trong hàm do_shortcode và lặp lại hàm ở vị trí mẫu mà bạn muốn mã ngắn xuất hiện .

Add_shortcode trong WordPress là gì?

Hàm add_shortcode được dùng để đăng ký trình xử lý mã ngắn . Phải mất hai tham số. tên mã ngắn (chuỗi được sử dụng trong nội dung bài đăng) và tên hàm gọi lại. Ba tham số được truyền cho chức năng gọi lại shortcode. Bạn có thể chọn sử dụng bất kỳ số nào trong số chúng, kể cả không có cái nào.

Đọc tiếp