WordPress – OpenCart – SEO – Web Development

Cách thêm một Shortcode trong WordPress

Bạn đã từng muốn thêm một đoạn nội dung giống nhau cho một số bài hoặc muốn nhúng một widget, một số nội dung được gọi trở lại từ một số trang web hoặc API. Làm thế nào bạn có thể thêm các loại nội dung này vào bài viết trong wordpress. Hướng dẫn này sẽ đưa bạn từ quá trình xây dựng, lắp đặt và sử dụng một shortcode trong WordPress. Hãy bắt đầu bằng với câu hỏi shortcode là gì.

Shortcode trong Wordpress là gì?

Shortcode là một mã code đặt biệt thay thế một nội dung mà bạn đã định sẵn trong lúc tạo Shortcode. Nếu bạn đã từng nhúng một bộ sưu tập(gallery) vào bài viết WordPress trên blog Bạn sẽ nhìn thấy nó được tạo ra bằng 1 đoạn code ngắn. Khi bạn tải một trang blog với[gallery] shortcode, WordPress thay thế [gallery] shortcode với tất cả các mã mà bạn đã tạo ra và hiển thị một bộ sưu tập hình ảnh của bạn. Như bạn có thể nhìn thấy từ ví dụ trên, một shortcode trông giống như một thẻ HTML, nhưng kèm theo dấu ngoặc vuông thay vì dấu ngoặc nhọn. Mã này được thay thế bằng một số mã khác khi trang được thực sự được nạp trong một trình duyệt web. Điều thực sự rất hữu và WordPress cho phép bạn tạo shortcodes riêng của bạn để hiển thị bất cứ điều gì! Bạn có thể sử dụng nó để xuất một video Youtube, xuất box liên hệ.. hoặc xây dựng bất cứ điều gì nếu bạn muốn.

Làm thế nào để tạo một shortcode?

Toàn bộ code trong bài này bạn viết vào file functions.php của theme nhé. Để tạo một shortcode ta sẽ bao gồm 2 bước chính:
  • Thiết lập function thực thi code trong shortcode.
  • Tạo một tên shortcode dựa vào function đã tạo cho nó.
Để dễ hình dung, mình có một mẫu tạo shortcode thế này. [php] //Khởi tạo function cho shortcode function create_shortcode() { echo "Hello World!"; } //Tạo shortcode tên là [test_shortcode] và sẽ thực thi code từ function create_shortcode add_shortcode( 'test_shortcode', 'create_shortcode' );[/php] Lúc này nếu bạn viết [test_shortcode] vào nội dung bài viết thì nó sẽ hiển thị cụm từ Hello World! thay cho cái shortcode bạn vừa viết.

Shortcode hiển thị video từ Youtube

Mặc định đoạn mã nhúng video từ Youtube sẽ có dạng. [php]<iframe src="//www.youtube.com/embed/yUX490TrDWc" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>[/php] Ở đây chúng ta có 3 tham số là:
  • Tham số nhập ID của video.
  • Tham số chỉnh chiều rộng của video.
  • Tham số chỉnh chiều ngang của video.
[php] function create_youtube_shortcode( $args, $content ) { $content = '<iframe src="//www.youtube.com/embed/'.$args['id'].'" width="'.$args['width'].'" height=" '.$args['height'].'" frameborder="0" allowfullscreen="allowfullscreen"></iframe>;';return $content; } add_shortcode('youtube', 'create_youtube_shortcode'); [/php] Và cách viết shortcode sẽ là thế này: [\youtube width="500" height="300" id="yUX490TrDWc"] Nó sẽ tự truyền các tham số mà bạn đã nhập vào shortcode.

Shortcode hiển thị 5 bài viết ngẫu nhiên

[php]function create_shortcode_randompost() { $random_query = new WP_Query(array( 'posts_per_page' => 5, 'orderby' => 'rand' )); ob_start(); if ( $random_query->have_posts() ) : "<ul>"; while ( $random_query->have_posts() ) : $random_query->the_post();?> <li><a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?></h4></a></li> <?php endwhile; "</ul>"; endif; $list_post = ob_get_contents(); // Lấy toàn bộ nội dung ở phía trên bỏ vào biến $list_post để return. ob_end_clean(); return $list_post; } add_shortcode('random_post', 'create_shortcode_randompost'); [/php]

Cách viết shortcode vào file PHP

Shortcode chỉ thực thi trong trình soạn thảo của WordPress do đó nếu bạn muốn chèn shortcode vào một file PHP thì phải sử dụng hàm do_shortcode() để nó thực thi. Ví dụ như sau: <?php do_shortcode('[\test_shortcode]'); ?>

Cách viết shortcode vào widget Text

Mặc định Widget Text sẽ không cho bạn chèn shortcode, nếu muốn nó thực thi thì bạn chỉ cần filter lại nó là xong. Chèn đoạn sau vào file functions.php add_filter('widget_text', 'do_shortcode'); Đó là tất cả! Hãy bắt đầu tạo shortcode đầu tiên của bạn thôi :).

Từ khóa:

Avatar photo

Giới thiệu tác giả

Giới thiệu tác giả: .

Gửi bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Top