programming wordpress

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

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

'.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

'.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;
}

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

'.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

'.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"]

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"]

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"]

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]

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]

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

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

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]

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]

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]

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]

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]

Để 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]

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]

Để 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]

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

Thêm khối mã ngắn

Đọc thêm trên SmashingMag.

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

Đă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

Toplist mới

Bài mới nhất

Chủ Đề