Mã ngắn trong WordPress là thứ mà mọi người đều thích sử dụng. nhưng đôi khi, bạn không thực sự nhớ có bao nhiêu mã ngắn đang hoạt động trên trang web của mình
Trong bài viết này, tôi sẽ chỉ cho bạn cách dễ nhất để lấy danh sách các mã ngắn đang hoạt động trên trang web của bạn và hiển thị chúng dưới dạng danh sách trong khu vực Trang/Bài đăng và Phụ trợ (Quản trị viên WP) của WordPress
Nghe có vẻ thú vị. ?. Hãy nhảy vào vấn đề này
Nhận danh sách mã ngắn WordPress
Để lấy danh sách shortcode, đầu tiên chúng ta sẽ tạo một shortcode tùy chỉnh để lấy danh sách shortcode đang hoạt động, sau đó sẽ sử dụng shortcode đó để hiển thị danh sách shortcode
Mở các chức năng của chủ đề của bạn. php và dán mã bên dưới vào dưới cùng và lưu nó
// Functions to display a list of all the shortcodes function diwp_get_list_of_shortcodes(){ // Get the array of all the shortcodes global $shortcode_tags; $shortcodes = $shortcode_tags; // sort the shortcodes with alphabetical order ksort($shortcodes); $shortcode_output = "<ul>"; foreach ($shortcodes as $shortcode => $value) { $shortcode_output = $shortcode_output.'<li>['.$shortcode.']</li>'; } $shortcode_output = $shortcode_output. "</ul>"; return $shortcode_output; } add_shortcode('get-shortcode-list', 'diwp_get_list_of_shortcodes');Đoạn mã trên sẽ tạo một mã ngắn tùy chỉnh có tên [get-shortcode-list] trong chủ đề của bạn
Quảng cáo Giờ đây, bạn có thể sử dụng mã ngắn này [get-shortcode-list] trong trang, bài đăng, tiện ích con, chủ đề hoặc bằng PHP để hiển thị danh sách tất cả các quảng cáo đang hoạt động. .
Tôi đã viết một bài viết về cách sử dụng mã ngắn trong chủ đề, nơi tôi đã phác thảo cách sử dụng mã ngắn bên trong chủ đề, mẫu, tiện ích, tệp PHP
Và bạn sẽ thấy danh sách tất cả các mã ngắn đang hoạt động trên trang web WordPress của mình như trong hình bên dưới
Ghi chú. Danh sách mã ngắn của bạn có thể khác với hình ảnh hiển thị bên dưới
Ồ, 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ì
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
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
/** Enqueuing the Stylesheet for the CTA Button */ function salcodes_enqueue_scripts() { global $post; if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) { wp_register_style( 'salcodes-stylesheet', plugin_dir_url( __FILE__ ) . 'css/style.css' ); wp_enqueue_style( 'salcodes-stylesheet' ); } } add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');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
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
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 [đó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 = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>'; 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()
<?php echo do_shortcode("[name_of_your_shortcode]"); ?>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
Ảnh chụp màn hình bên dưới hiển thị đầu ra chúng tôi nhận đượ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 đó, 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 để TweetTó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