Mã ngắn hoạt động như thế nào trong WordPress?

Question

Khối » Khối mã ngắn

Một mã ngắn là một mã dành riêng cho WordPress cho phép bạn làm những việc tiện lợi với rất ít nỗ lực. Mã ngắn có thể nhúng tệp hoặc tạo đối tượng thường yêu cầu nhiều mã phức tạp, xấu xí chỉ trong một dòng. shortcode = mã tắt

Mỗi mã ngắn được đặt trong hai dấu ngoặc vuông [ ]. Bạn có thể thêm mã ngắn vào bất kỳ trang hoặc bài đăng nào bằng cách chèn khối mã ngắn trước. Hướng dẫn này sẽ chỉ cho bạn cách

Mục lục

Thêm khối mã ngắn

Để thêm khối Shortcode, hãy nhấp vào biểu tượng + Block Inserter và tìm kiếm “mã ngắn”. Nhấp vào nó để thêm khối vào bài đăng hoặc trang

Ngoài ra, bạn có thể nhập mã ngắn của mình bên trong hai dấu ngoặc vuông. Ví dụ: mã ngắn có thể được sử dụng để nhúng bất kỳ video YouTube công khai nào vào bất kỳ trang hoặc bài đăng nào

Hoặc nhập /shortcode và nhấn enter

Mã ngắn hoạt động như thế nào trong WordPress?

Thêm khối Shortcode bằng lệnh gạch chéo

Để biết thêm, hãy truy cập hướng dẫn chi tiết của chúng tôi về cách thêm khối

Viết mã ngắn của bạn

Khi bạn thêm khối Shortcode vào bài đăng hoặc trang của mình lần đầu tiên, nó sẽ trông như thế này

Nhập mã ngắn của bạn vào hộp được cung cấp hoặc dán nó từ. Trong ví dụ này, mã ngắn được thêm vào hộp để hiển thị bài viết theo ngày

Shortcode để hiển thị bài viết theo ngày

Trong phần xem trước bài đăng hoặc trang của bạn, các bài đăng sẽ được hiển thị theo thứ tự ngày tháng

Mã ngắn có sẵn

Dưới đây, bạn sẽ tìm thấy danh sách tất cả các mã ngắn có sẵn trên WordPress của mình. trang com. Ngoài ra, nhiều plugin của bên thứ ba (mà bạn có thể cài đặt trên WordPress. com Các gói Kinh doanh và Thương mại điện tử hoặc gói Pro kế thừa của chúng tôi) cũng sử dụng mã ngắn – tham khảo tài liệu plugin của bạn để tìm hiểu về mã ngắn của plugin đó

Konstantinos Kouratoras là kỹ sư phần mềm ở Crete, Hy Lạp. Người yêu WordPress và nhiếp ảnh gia nghiệp dư. Bạn có thể liên hệ với anh ấy qua trang web cá nhân hoặc … Thông tin thêm về Konstantinos ↬

Bản tin email

Email (đập vỡ) của bạn

Mẹo hàng tuần về front-end & UX
Được hơn 200.000 người tin cậy

Chuẩn bị cho các vai trò giao tiếp ngày nay Thạc sĩ Thiết kế Thông tin của Northwestern

Giao diện người dùng SmashingConf 2023
Quảng cáo trên tạp chí Smashing

Các mẫu thiết kế giao diện Đào tạo UX
Các mẫu thiết kế giao diện thông minh, khóa học 9h-video

Mã ngắn WordPress đã được giới thiệu trong phiên bản 2. 5 và kể từ đó đã được chứng minh là một trong những tính năng hữu ích nhất. Người dùng trung bình đóng vai trò biên tập viên có khả năng xuất bản nội dung động bằng cách sử dụng macro mà không cần kỹ năng lập trình

Khi một mã ngắn được chèn vào một bài đăng hoặc trang WordPress, nó sẽ được thay thế bằng một số nội dung khác. Nói cách khác, chúng tôi hướng dẫn WordPress tìm macro nằm trong dấu ngoặc vuông (

function recent_posts_function() {
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string = ''.get_the_title().'';
      endwhile;
   endif;
   wp_reset_query();
   return $return_string;
}

5) và thay thế nó bằng nội dung động thích hợp, được tạo bởi một hàm PHP

Đọc thêm trên SmashingMag.

Các chức năng của WordPress giúp viết blog dễ dàng hơn
Làm chủ mã ngắn WordPress
Tạo một plugin WordPress sử dụng API dịch vụ
Hình ảnh phản hồi hiện đã có trong WordPress Core

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ Thiết kế Cảm ứng cho Giao diện Di động, hướng dẫn hoàn toàn mới của Steven Hoober về thiết kế cho thiết bị di động với các nguyên tắc lấy con người làm trung tâm, phổ biến, đã được chứng minh. 400 trang, chứa đầy nghiên cứu chuyên sâu về người dùng và các phương pháp hay nhất

Chuyển đến mục lục ↬

Cách sử dụng khá đơn giản. Giả sử chúng tôi muốn hiển thị các bài đăng gần đây nhất trong một bài đăng nhất định. Chúng ta có thể sử dụng một cái gì đó như thế này

[recent-posts]

Đối với một mã ngắn nâng cao hơn, chúng tôi có thể đặt số lượng bài đăng sẽ hiển thị bằng cách đặt tham số

[recent-posts posts="5"]

Tiến thêm một bước nữa, chúng ta có thể đặt tiêu đề cho danh sách các bài đăng gần đây

[recent-posts posts="5"]Posts Heading[/recent-posts]

Mã ngắn đơn giản

Trong phần đầu tiên của hướng dẫn này, chúng ta sẽ tạo mã cho shortcode đơn giản này

[recent-posts]

Quá trình tạo rất đơn giản và không yêu cầu bất kỳ kiến thức PHP nâng cao nào. Các bước cơ bản là

Tạo chức năng, chức năng này sẽ được gọi bởi WordPress khi tìm thấy một mã ngắn
Đăng ký mã ngắn bằng cách đặt một tên duy nhất
Gắn chức năng đăng ký với một hành động WordPress

Tất cả các mã trong hướng dẫn này có thể được đặt trong

function recent_posts_function() {
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string = ''.get_the_title().'';
      endwhile;
   endif;
   wp_reset_query();
   return $return_string;
}

6 hoặc trong một tệp PHP riêng biệt sẽ được đưa vào

function recent_posts_function() {
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string = ''.get_the_title().'';
      endwhile;
   endif;
   wp_reset_query();
   return $return_string;
}

6

Tạo chức năng gọi lại

Khi một mã ngắn được tìm thấy, nó sẽ được thay thế bằng một số đoạn mã, đó là chức năng gọi lại. Vì vậy, hãy tạo một hàm tìm nạp các bài đăng gần đây từ cơ sở dữ liệu

function recent_posts_function() {
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string = ''.get_the_title().'';
      endwhile;
   endif;
   wp_reset_query();
   return $return_string;
}

Như được hiển thị, chúng tôi đang truy vấn cơ sở dữ liệu để lấy bài đăng mới nhất và trả về một chuỗi có liên kết tới bài đăng đó. Ιt đáng chú ý là hàm gọi lại không in bất cứ thứ gì mà trả về một chuỗi

Đăng ký mã ngắn

Bây giờ, chúng tôi nói với WordPress rằng chức năng này là một shortcode

________số 8_______

Ιnếu một mã ngắn của

function recent_posts_function() {
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string = ''.get_the_title().'';
      endwhile;
   endif;
   wp_reset_query();
   return $return_string;
}

8 được tìm thấy trong nội dung của một bài đăng, thì

function recent_posts_function() {
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string = ''.get_the_title().'';
      endwhile;
   endif;
   wp_reset_query();
   return $return_string;
}

9 sẽ tự động được gọi. Chúng ta nên đảm bảo rằng tên shortocode là duy nhất để tránh xung đột

Móc vào WordPress

Để thực thi chức năng

function register_shortcodes(){
   add_shortcode('recent-posts', 'recent_posts_function');
}

0 của chúng tôi, chúng tôi sẽ liên kết nó với hành động khởi tạo của WordPress

add_action( 'init', 'register_shortcodes');

Kiểm tra mã ngắn

Mã ngắn đơn giản của chúng tôi đã sẵn sàng và bước tiếp theo là kiểm tra xem nó có hoạt động bình thường không. Hãy tạo một bài đăng mới (hoặc mở một bài hiện có) và đặt dòng sau vào đâu đó trong nội dung

[recent-posts]

Xuất bản bài đăng và xem nó trong trình duyệt, bạn sẽ thấy một liên kết đến bài đăng gần đây nhất trên blog của mình, như được hiển thị trong ảnh chụp màn hình này

mã ngắn đơn giản

Mã ngắn nâng cao

Tham số mã ngắn

Mã ngắn rất linh hoạt vì chúng cho phép chúng tôi thêm các tham số để làm cho chúng có nhiều chức năng hơn. Giả sử chúng tôi muốn hiển thị một số bài đăng gần đây nhất định. Để làm điều này, chúng tôi cần thêm một tùy chọn bổ sung vào mã ngắn của mình để chỉ định số lượng bài đăng gần đây sẽ hiển thị

Chúng ta phải sử dụng hai chức năng. Đầu tiên là chức năng

function register_shortcodes(){
   add_shortcode('recent-posts', 'recent_posts_function');
}

1 tích hợp của 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 gốc và điền vào các giá trị mặc định khi cần. Hàm thứ hai là hàm

function register_shortcodes(){
   add_shortcode('recent-posts', 'recent_posts_function');
}

2 PHP, thực hiện đúng như tên gọi của nó. nó trích xuất các thuộc tính shortcode

Mở rộng chức năng gọi lại của chúng tôi, chúng tôi thêm một đối số, là một mảng các thuộc tính mà từ đó chúng tôi trích xuất tham số cho số lượng bài đăng. Sau đó, chúng tôi truy vấn cơ sở dữ liệu để lấy số lượng bài đăng mong muốn và tạo danh sách HTML để hiển thị chúng

function recent_posts_function($atts){
   extract(shortcode_atts(array(
      'posts' => 1,
   ), $atts));

   $return_string = '';
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string .= ''.get_the_title().'';
      endwhile;
   endif;
   $return_string .= '';

   wp_reset_query();
   return $return_string;
}

Nếu người dùng bỏ qua tùy chọn,

function register_shortcodes(){
   add_shortcode('recent-posts', 'recent_posts_function');
}

3 là giá trị mặc định. Theo cách tương tự, chúng ta có thể thêm nhiều thuộc tính hơn, cho phép mã ngắn chấp nhận nhiều tham số. Nhờ chức năng nâng cao này, chúng tôi có thể đặt số lượng bài đăng sẽ hiển thị

[recent-posts posts="5"]

Khi xem nó trong trình duyệt, bạn sẽ thấy các liên kết đến năm bài đăng gần đây nhất trong nội dung

mã ngắn nâng cao

Nội dung trong Shortcode

Chúng tôi có thể tiến thêm một bước đối với mã ngắn của mình và thêm khả năng chuyển một số nội dung dưới dạng đối số, trong trường hợp này sẽ là tiêu đề cho danh sách các bài đăng gần đây. Để làm điều này, chúng tôi sử dụng tham số thứ hai,

function register_shortcodes(){
   add_shortcode('recent-posts', 'recent_posts_function');
}

4, trong hàm gọi lại và thêm tham số đó dưới dạng tiêu đề

function register_shortcodes(){
   add_shortcode('recent-posts', 'recent_posts_function');
}

5 trước danh sách. Chức năng mới như sau

[recent-posts posts="5"]

0

Loại shortcode này tương tự như thẻ HTML. Chúng tôi đính kèm nội dung trong một mã ngắn mở và đóng

[recent-posts posts="5"]

1

Kết quả giống như ví dụ trước, ngoại trừ tiêu đề mới cho danh sách bài đăng

Nội dung trong shortcode

Mã ngắn mọi lúc, mọi nơi

Theo mặc định, các mã ngắn bị bỏ qua trong các tiện ích thanh bên của WordPress. Lấy ví dụ sau

[recent-posts posts="5"]

Nếu bạn nhập mã ngắn này vào một tiện ích, nó sẽ giống như thế này

Mã ngắn trong tiện ích trước khi bật chức năng

Với WordPress, chúng tôi có thể kích hoạt chức năng này bằng một dòng mã. Để có thể thêm mã ngắn vào widget, hãy thêm vào như sau

[recent-posts posts="5"]

3

Bây giờ, không cần phải thay đổi gì nữa, shortcode sẽ hiển thị đúng trong widget

Mã ngắn trong tiện ích sau khi bật chức năng

Tương tự, chúng ta có thể kích hoạt mã ngắn trong nhận xét

[recent-posts posts="5"]

4

Và đoạn trích

[recent-posts posts="5"]

5

Shortcode TinyMCE Editor Button

Mặc dù mã ngắn là một cách hữu ích để thêm nội dung động vào bài đăng, nhưng mã ngắn có thể hơi khó hiểu đối với người dùng bình thường, đặc biệt là khi chúng trở nên phức tạp với nhiều tham số. Hầu hết người dùng không quen thuộc với cú pháp giống như HTML;

Để giải quyết vấn đề này, chúng ta có thể thêm một nút vào giao diện của trình soạn thảo TinyMCE, cho phép người dùng tạo một mã ngắn chỉ bằng một cú nhấp chuột đơn giản. Có hai bước cơ bản để tạo nút này

Tạo tệp JavaScript cho nút
Đăng ký nút và tệp JavaScript

Tệp JavaScript cho nút

Tệp JavaScript được sử dụng để đăng ký plugin TinyMCE thông qua API TinyMCE. Chúng tôi tạo một tệp mới có tên

function register_shortcodes(){
   add_shortcode('recent-posts', 'recent_posts_function');
}

6 trong thư mục

function register_shortcodes(){
   add_shortcode('recent-posts', 'recent_posts_function');
}

7 của chủ đề của chúng tôi, sau đó chúng tôi nhập đoạn mã sau

[recent-posts posts="5"]

6

Như được hiển thị bên dưới, chúng tôi tạo một plugin mới, gọi phương thức

function register_shortcodes(){
   add_shortcode('recent-posts', 'recent_posts_function');
}

8, chuyển vào tên của plugin và các thuộc tính. Phần quan trọng nhất của mã này là hàm

function register_shortcodes(){
   add_shortcode('recent-posts', 'recent_posts_function');
}

9, nơi chúng tôi xác định tên, tệp biểu tượng và trình xử lý sự kiện cho nút bằng cách sử dụng hàm

add_action( 'init', 'register_shortcodes');

0

Trong hai dòng đầu tiên của hàm

add_action( 'init', 'register_shortcodes');

0, người dùng được nhắc nhập các tham số cho số lượng bài đăng và tiêu đề danh sách của mã ngắn. Sau đó, tùy thuộc vào giá trị của các tham số này, dạng mã ngắn phù hợp sẽ được chèn vào trình chỉnh sửa

Cuối cùng, plugin TinyMCE của chúng ta được thêm vào PluginManager bằng hàm

add_action( 'init', 'register_shortcodes');

2. Bây giờ chúng tôi đã tích hợp thành công mã ngắn

function recent_posts_function() {
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string = ''.get_the_title().'';
      endwhile;
   endif;
   wp_reset_query();
   return $return_string;
}

8 vào một chủ đề WordPress

Đăng ký Nút và Plugin TinyMCE

Sau khi tạo tệp JavaScript, chúng ta cần đăng ký nó và nút shortcode. Vì vậy, chúng tôi tạo hai chức năng và liên kết chúng với các bộ lọc WordPress tương ứng

Hàm đầu tiên có tên là

add_action( 'init', 'register_shortcodes');

4 và đẩy mã ngắn vào dãy nút, thêm dấu phân cách giữa nút mới và nút hiện có

[recent-posts posts="5"]

7

Hàm thứ hai,

add_action( 'init', 'register_shortcodes');

5, trỏ đến đường dẫn và tên của tệp JavaScript

[recent-posts posts="5"]

8

Bước tiếp theo là thêm bộ lọc với các chức năng trước đó. Hàm

add_action( 'init', 'register_shortcodes');

4 được liên kết với bộ lọc

add_action( 'init', 'register_shortcodes');

7, được thực thi khi trình chỉnh sửa tải phần bổ trợ và hàm

add_action( 'init', 'register_shortcodes');

5 được liên kết với bộ lọc

add_action( 'init', 'register_shortcodes');

9, được thực thi khi sắp tải các nút

[recent-posts posts="5"]

9

Chức năng trước đó không có tác dụng nếu người dùng không có quyền chỉnh sửa bài đăng hoặc trang hoặc nếu người dùng không ở chế độ trình chỉnh sửa trực quan

Cuối cùng, chúng tôi kết nối chức năng vào hành động khởi tạo của WordPress để thực hiện điều này khi tải trang

[recent-posts posts="5"]Posts Heading[/recent-posts]

0

Cách sử dụng nút

Để kiểm tra xem nút shortcode có hoạt động bình thường hay không, hãy tạo một bài đăng mới hoặc chỉnh sửa bài đăng hiện có. Một nút mới, với biểu tượng mà chúng ta đã đặt trước đó, lẽ ra phải được thêm vào bên trái dòng đầu tiên của các nút TinyMCE, như trong ảnh chụp màn hình này

Shortcode Nút soạn thảo TinyMCE

Khi chúng ta nhấn nút shortcode, một hộp thoại xuất hiện nhắc chúng ta nhập tham số shortcode cho số lượng bài đăng

Shortcode Nút soạn thảo TinyMCE

Sau khi chèn số lượng bài đăng, hộp thoại thứ hai xuất hiện, yêu cầu chúng tôi nhập tiêu đề của danh sách

Shortcode Nút soạn thảo TinyMCE

Nếu bất kỳ tham số nào bị bỏ trống, nó sẽ không được đưa vào mã ngắn cuối cùng

Cuối cùng, mã ngắn xuất hiện trong trình chỉnh sửa

Shortcode Nút soạn thảo TinyMCE

Một số mã ngắn hữu ích

Phần này của hướng dẫn cung cấp mã nguồn cho một số mã ngắn WordPress hữu ích sẽ đưa blog của bạn lên một bước

Nút liên kết

Một ví dụ đơn giản là shortcode nút liên kết

[recent-posts posts="5"]Posts Heading[/recent-posts]

1

Sử dụng mã ngắn này như sau

[recent-posts posts="5"]Posts Heading[/recent-posts]

2

Một cái gì đó như thế này sẽ xuất hiện

Mã ngắn nút liên kết

Trình đơn WordPress

Hãy chuyển sang một shortcode phức tạp hơn, một shortcode lấy menu WordPress

[recent-posts posts="5"]Posts Heading[/recent-posts]

3

Khi gọi mã ngắn này, hãy nhập tên của menu bạn muốn hiển thị

[recent-posts posts="5"]Posts Heading[/recent-posts]

4

Menu sẽ xuất hiện trong nội dung của bạn

thực đơn mã ngắn

bản đồ Google

Mã ngắn Google Maps thực sự hữu ích vì chúng tôi có thể chèn bản đồ vào nội dung của mình mà không cần chỉnh sửa mã nguồn

[recent-posts posts="5"]Posts Heading[/recent-posts]

5

Khi nhập mã ngắn, hãy nhập chiều rộng và chiều cao và liên kết từ Google Maps dưới dạng tham số

[recent-posts posts="5"]Posts Heading[/recent-posts]

6

Kết quả là như sau

Mã ngắn Google Maps

Biểu đồ Google

Một dịch vụ hữu ích khác là Google Charts, vì nó rất dễ tùy chỉnh. Đây là một ví dụ shortcode với nhiều thuộc tính

[recent-posts posts="5"]Posts Heading[/recent-posts]

7

Để tạo biểu đồ hình tròn với bốn loại dữ liệu, chúng tôi chèn dòng sau

[recent-posts posts="5"]Posts Heading[/recent-posts]

8

Kết quả là một chiếc bánh như sau

Mã ngắn Biểu đồ Google

nhúng PDF

Chúng tôi có thể sử dụng trình xem PDF của Google Tài liệu để nhúng tệp PDF vào trang web của bạn. Đây là mã ngắn để làm điều này

[recent-posts posts="5"]Posts Heading[/recent-posts]

9

Để nhúng tệp PDF, hãy nhập mã ngắn

[recent-posts]

0 và chuyển URL làm đối số nội dung

[recent-posts]

0

Khi xem trang, khách truy cập sẽ thấy trình xem bằng PDF

Mã ngắn nhúng PDF

Plugin mã ngắn WordPress

Nhờ các plugin WordPress, việc thêm chức năng mã ngắn vào trang web không cần chỉnh sửa mã nguồn nào cả. Nếu bạn nhìn vào thư mục plugin của WordPress, bạn sẽ thấy một số lượng lớn các plugin như vậy để tạo kiểu cho bài đăng và trang. Trong phần này, chúng tôi sẽ đề xuất một số plugin mã ngắn tốt nhất (ưu tiên những plugin miễn phí) để đáp ứng mọi nhu cầu của bạn

Mã ngắn cuối cùng

Không còn nghi ngờ gì nữa, đây là plugin shortcode tốt nhất hiện có. Nó cho phép bạn dễ dàng tạo các nút, tab, hộp, thanh trượt, chú giải công cụ và nhiều yếu tố khác

Mã ngắn cuối cùng

Mã ngắn J

Plugin J Shortcodes tương tự như Shortcodes Ultimate, cung cấp một tập hợp các yếu tố hữu ích để tạo kiểu cho trang web, bao gồm các nút, hộp, tab và đàn accordion. J Shortcodes cho phép bạn đặt các thuộc tính tùy chỉnh trên các phần tử, chẳng hạn như màu sắc, kích thước và hình dạng, đồng thời xác định bố cục cột tùy chỉnh trên bất kỳ trang hoặc bài đăng nào

programming wordpress

Mã ngắn hoạt động như thế nào trong WordPress?

Thêm khối mã ngắn

Viết mã ngắn của bạn

Mã ngắn có sẵn

Bản tin email

Đọc thêm trên SmashingMag.

Mã ngắn đơn giản

Tạo chức năng gọi lại

Đăng ký mã ngắn

Móc vào WordPress

Kiểm tra mã ngắn

Mã ngắn nâng cao

Tham số mã ngắn

Nội dung trong Shortcode

Mã ngắn mọi lúc, mọi nơi

Kích hoạt mã ngắn trong Widget

Shortcode TinyMCE Editor Button

Tệp JavaScript cho nút

Đăng ký Nút và Plugin TinyMCE

Cách sử dụng nút

Một số mã ngắn hữu ích

Nút liên kết

Trình đơn WordPress

bản đồ Google

Biểu đồ Google

nhúng PDF

Plugin mã ngắn WordPress

Mã ngắn cuối cùng

Mã ngắn J

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội