Chèn shortcode vào wordpress là cách đơn giản để bạn có thể thêm thắt nhiều yếu tố quan trọng vào website của mình mà không cần phải chỉnh sửa code. Trong bài viết này, lamweb.vn sẽ viết bài Tổng hợp các cách chèn shortcode vào wordpress mới nhất 2020.
Xem thêm: Tổng hợp 5 plugin bình luận wordpress đẹp mới nhất 2020
Mục lục
Tổng hợp các cách chèn shortcode vào wordpress mới nhất 2020
Shortcode là gì?
Shortcode dịch theo đúng tiếng Việt nghĩa là Code ngắn hay nói cách khác là một đoạn code ngắn. Đoạn code ngắn này sẽ thực thi những tác vụ gì đó mà bạn vừa mới định sẵn trong lúc tạo shortcode, gợi ý như hiển thị một Loop chẳng hạn. Bạn có thể thực thi shortcode này ở bất cứ đâu như trong bài viết, trong theme, ngoại trừ excerpt và widget, nhưng mình sẽ có phương pháp hướng dẫn bạn khắc phục.
ngày nay shortcode được dùng khá phổ biến, bạn có thể vào thư viện plugin WordPress và tìm plugin với keyword shortcode ra là có rất nhiều plugin support bạn sẵn một số shortcode quá đủ yêu cầu, nào là trang trí bài viết, nào là sử dụng các công việc khó khăn hơn. Và trong nhiều theme, nó cũng có thể support sẵn một vài shortcode của nó.
mẹo tạo 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:
- xây dựng function thực thi code trong shortcode.
- Tạo một tên shortcode lệ thuộc function đã tạo cho nó.
Để dễ ảnh dung, mình mang ra một mẫu tạo shortcode thế này.
01 02 03 04 05 06 | //Khởi tạo function cho shortcodefunction create_shortcode() echo "Hello World!";//Tạo shortcode tên là [test_shortcode] và sẽ thực thi code từ function create_shortcodeadd_shortcode( 'test_shortcode', 'create_shortcode' ); |
Những gì cần thiết mình đã comment hết vào code rồi. Nghĩa là 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 vạch.
Nhưng có một chủ đề là cái chữ Hello World! Nó sẽ luôn luôn ở đầu bài viết do chúng ta dùng lệnh echo. Nếu muốn cho nó hiển thị ngay đúng vị trí đặt shortcode, bạn nên dùng cú pháp return thay vì echo. Bạn đủ nội lực sửa echo "Hello World!" thành return "Hello World!" nhé và sau này khi viết shortcode, tránh dùng echo.
Tương tự, ta vận dụng thêm một xíu văn hóa về Loop và Query để tạo một shortcode hiển thị 10 bài ngẫu nhiên nhé.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | function create_shortcode_randompost() $random_query = new WP_Query(array('posts_per_page' => 10,'orderby' => 'rand'));ob_start();if ( $random_query->have_posts() ) :
while ( $random_query->have_posts() ) :$random_query->the_post();?>endwhile;"";endif;$list_post = ob_get_contents(); //Lấy all nội dung phía trên bỏ vào biến $list_post để returnob_end_clean();return $list_post;add_shortcode('random_post', 'create_shortcode_randompost'); |
Bạn có thể thấy từ đoạn 08 đến 21 mình vạch loop bên trong hàm ob_start() và ob_end_clean(). Thực chất ở đây mục tiêu của mình chẳng phải là cache gì cả mà mình sẽ wrap phần đó lại để mình dùng hàm ob_get_contents() vào biến $list_post, sau đó là return cái biến này ra mà thôi vì khi sử dụng shortcode mình phải sử dụng return mà. Nếu ai có hướng dẫn nào hay hơn thì cho mình biết nhé.
hiện tại thì bạn viết shortcode [random_post] vào vị trí mà bạn cần hiển thị mục lục bài ngẫu nhiên trong bài là xong.
Xem thêm: Hướng dẫn chuyển host cho website mới nhất 2020
Tạo shortcode sử dụng tham số
Ở phần trước chúng ta chỉ tìm hiểu qua cách tạo một shortcode đơn giản, nghĩa là nó chỉ hiển thị y chóc những gì ta đã vạch vào shortcode mà k cho phép chỉnh lại theo ý muốn của người dùng. Nếu bạn mong muốn cho user có thể tự sửa lại những gì hiển thị ra thì ở đây chúng ta phải dùng các tham số.
gợi ý, ở đoạn shortcode trên chúng ta đã cho hiển thị 10 post ngẫu nhiên. Nhưng nếu khi sử dụng tham số, chúng ta có thể cho user tùy biến lại tham số ở phần số lượng bài viết hiển thị ra và có thể tùy chọn thứ tự sắp đặt nếu bạn mong muốn.
Để tạo shortcode có chứa tham số, ta tạo lại shortcode như sau:
01 02 03 04 | function create_shortcode_thamso($args, $content) return "Đây là số ". $args['thamso1'];add_shortcode( 'shortcode_thamso', 'create_shortcode_thamso' ); |
trước nhất là ở phần tạo function, ta có hai tham số là $args và $content. Biến $args nghĩa là tham số trong shortcode và biến $content nghĩa là đoạn nội dung được bọc trong code. Bạn nhìn thấy gợi ý dưới:
[shortcode_thamso thamso1="100]Đây là biến $content[/shortcode]
như vậy, ta có thamso1 là tham số và số 100 nghĩa là giá trị của tham số mà user đủ sức đặt bất kỳ. Còn $content là nội dung được bọc bên trong shortcode, nhưng ở đoạn trên mình không dùng biến $content để in nên dù bạn có viết như thế thì phần $content cũng chưa hiển thị ra đâu.
hiện nay bạn vạch cái shortcode trên vào bài thì sẽ thấy nó hiển thị là “Đây là số 100“. Right? Và đó cũng chính là shortcode chứa tham số.
Tương tự, mình có một gợi ý rất cơ bản giống như sau, ta sử dụng một shortcode tính tổng chẳng hạn.
01 02 03 04 05 | function create_shortcode_tinhtong($args, $content) $tong = $args['term1'] + $args['term2'];return "Tổng là ".$tong;add_shortcode( 'tinhtong', 'create_shortcode_tinhtong' ); |
Và khi vạch shortcode ta sẽ vạch như sau:
01 | [tinhtong term1="50" term2="30"] |
kết quả sẽ trả về là “Tổng là 80“. Right?
Và thêm một ví dụ có dùng biến $content nè.
01 02 03 04 | function create_shortcode_content($args, $content) return strtoupper($content); //In hoa toàn bộ nội dung trong shortcodeadd_shortcode('shortcode_content', 'create_shortcode_content'); |
Và cho đến nay bạn thử viết trong bài shortcode này nhìn thấy.
[shortcode_content]Viết cái gì đó vào đây[/shortcode_content]
Có phải là nó đã in hoa all chữ trong content của shortcode không?
Thế thì, vì sao ví dụ trên mình chỉ sử dụng $content mà phải khai báo cả $args? Bởi vì mặc định nếu bạn chỉ khai báo một tham số thì nó sẽ tự hiểu biến đó chính là tham số thứ nhất, nên tốt nhất bạn nên khai báo cả 2 biến, dĩ nhiên bạn đủ sức đặt tên bất kỳ.
Tóm lại:
- $args sẽ có cấu trúc tham số dạng $args[‘thamso’], và cái chữ thamso là tham số trong shortcode mà bạn phải ghi giống vậy.
- $content là biến in ra all content được đặt giữa thẻ mở shortcode và thẻ đóng shortcode.
cách vạch shortcode vào file PHP
Shortcode chỉ thực thi trong trình soạn thảo của WordPress thôi chứ ở các hoàn cảnh không giống nó k hiểu. do đó nếu bạn muốn chèn shortcode vào một file PHP thì phải dùng hàm do_shortcode() để nó thực thi. gợi ý như sau:
mẹo viết shortcode vào widget Text
Mặc định widget Text sẽ k cho bạn chèn shortcode vào, 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');
Những gợi ý điển ảnh để làm shortcode
Shortcode hiển thị video từ Youtube
Mặc định đoạn mã nhúng video từ Youtube sẽ có dạng.
01 | <iframe src="//www.youtube.com/embed/0KJ60uJZ3-Q" height="480" width="640" allowfullscreen="" frameborder="0">iframe> |
Vậy thì ở đây chúng ta chơi luôn 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.
Ok let’s do it!
01 02 03 04 05 | function create_youtube_shortcode( $args, $content ) $content = ';return $content;add_shortcode('youtube', 'create_youtube_shortcode'); |
'Và hướng dẫn viết shortcode sẽ là thế này (xóa dấu / đi):
[/youtube width="500" height="300" id="0KJ60uJZ3-Q"]
Nó sẽ tự truyền các tham số mà bạn vừa mới nhập vào shortcode.
Chèn một box thông báo đủ màu sắc
ví dụ này ta sẽ giúp việc với $content trong shortcode.
01 02 03 04 05 06 | function create_thongbao_shortcode($args, $content) return "class='thongbao'>".$content."";add_shortcode( 'thongbao', 'create_thongbao_shortcode' ); |
Và thêm một xíu CSS vào file phong cách.css nhé
01 02 03 04 05 06 | .thongbao background: #585858;padding: 1.5em 2em;color: #FFF;border: 1px solid #C7C7C7; |
Ok, hiện giờ bạn đủ nội lực viết vào content là [thongbao]Nội dung thông báo[/thongbao] rồi xem hiệu quả nhé.
Shortcode get thông tin Fb
Ở ví dụ này code sẽ hơi dài một chút do có sử dụng get content từ JSON thông qua Facebook Graph. Cấu trúc shortcode sẽ là [\fbgraph username="thachpham92"]. Cái thachpham92 nghĩa là tham số nhập vào, tức là username của Facebook cần hiển thị.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | function create_fbgraph_shortcode($args, $content) $get_info = wp_remote_get('https://graph.facebook.com/'.$args['username']);$get_avatar = "https://graph.facebook.com/".$args['username']."/picture?type=large";$dc_info = json_decode($get_info['body'], true);$dc_avatar = json_decode($get_avatar['data'], true);// Tạo biến cho dễ giải quyết.$fb_id = $dc_info['id'];$fb_username = $dc_info['username'];$fb_url = $dc_info['link'];$fb_name = $dc_info['first_name'];// Ghi giới tính thành tiếng Việtif ($dc_info['gender'] == 'male') $fb_gender = "Nam";else if ($dc_info['gender'] == female) $fb_gender = "Nữ";else$fb_gender = "Chưa xác định giới tính!";ob_start();?>class="fb-info">
|
Và thêm một xíu CSS giống như demo
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .fb-info overflow: hidden;padding: 0.5em 1em;background: #3B5998;border: 1px solid #E8E8E8;color: #FFF;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;.fb-info .avatar width: 30%;float: left;margin-right: 5%;padding: 10px;background: #FFF;border: 1px solid #F3F3F3;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;.fb-info .info width: 60%;float: right; |
Ok, hãy thử xem nào.
Kết bài
giống như vậy là ở bài này bạn đang biết qua hướng dẫn tạo một shortcode cơ bản là như thế nào, rồi tạo một shortcode có sử dụng tham số và mình cũng vừa mới lý giải khá kỹ càng về nó (nên bài nó mới dài thế này).
Thật sự shortcode trong WordPress là một tính năng vô cùng mạnh mẽ để bạn có thể chèn một cái gì đó vào bài một cách khẩn trương. Nhưng hãy cẩn thận khi dùng nó bởi vì nếu bạn đã sử dụng ở nhiều bài, sau này bạn k muốn sử dụng shortcode đó nữa rồi tắt đi, lúc đó mới thật sự là mệt.
Nguồn: Thachpham.com
Xem thêm: Tổng hợp plugin chống copy wordpress đơn giản mới nhất 2020