Cách ý tưởng để đăng ký / enqueue script và / hoặc style để sử dụng trong plugin là gì?
Gần đây tôi đã tạo một plugin đơn giản để thêm avatar / gravatar của người dùng bằng một shortcode. Tôi có các tùy chọn kiểu khác nhau để hiển thị hình đại diện (hình vuông, hình tròn, v.v.) và quyết định đặt css trực tiếp vào chính shortcode.
Tuy nhiên, tôi nhận ra rằng đây không phải là một cách tiếp cận tốt vì nó sẽ lặp lại css mỗi khi sử dụng shortcode trên một trang. Tôi đã thấy một số cách tiếp cận khác trên trang web này và codp wp thậm chí có hai ví dụ của riêng họ, vì vậy thật khó để biết cách tiếp cận nào phù hợp và nhanh nhất.
Dưới đây là các phương pháp tôi hiện đang biết:
Phương pháp 1: Bao gồm trực tiếp trong shortcode - Đây là những gì tôi hiện đang làm trong plugin, nhưng có vẻ không tốt vì nó lặp lại mã.
class My_Shortcode {
function handle_shortcode( $atts, $content="" ) {
/* simply enqueue or print the scripts/styles in the shortcode itself */
?>
<style type="text/css">
</style>
<?php
return "$content";
}
}
add_shortcode( 'myshortcode', array( 'My_Shortcode', 'handle_shortcode' ) );
Phương pháp 2: Sử dụng lớp để xử lý các tập lệnh hoặc kiểu có điều kiện
class My_Shortcode {
static $add_script;
static function init() {
add_shortcode('myshortcode', array(__CLASS__, 'handle_shortcode'));
add_action('init', array(__CLASS__, 'register_script'));
add_action('wp_footer', array(__CLASS__, 'print_script'));
}
static function handle_shortcode($atts) {
self::$add_script = true;
// shortcode handling here
}
static function register_script() {
wp_register_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true);
}
static function print_script() {
if ( ! self::$add_script )
return;
wp_print_scripts('my-script');
}
}
My_Shortcode::init();
Phương pháp 3: Sử dụng get_shortcode_regex();
function your_prefix_detect_shortcode() {
global $wp_query;
$posts = $wp_query->posts;
$pattern = get_shortcode_regex();
foreach ($posts as $post){
if ( preg_match_all( '/'. $pattern .'/s', $post->post_content, $matches )
&& array_key_exists( 2, $matches )
&& in_array( 'myshortcode', $matches[2] ) )
{
// css/js
break;
}
}
}
add_action( 'wp', 'your_prefix_detect_shortcode' );
Phương pháp 4: Sử dụng has_shortcode();
function custom_shortcode_scripts() {
global $post;
if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'myshortcode') ) {
wp_enqueue_script( 'my-script');
}
}
add_action( 'wp_enqueue_scripts', 'custom_shortcode_scripts');
Method 4: Using has_shortcode();là tốt nhất bởi vì nó sẽ đảm bảo rằng các tập lệnh và kiểu sẽ tải một lần nếu nội dung bài đăng có shortcode bất kể nhiều lần sử dụng shortcode. Mặc dù nó có thể không hoạt động để sử dụng shortcode trong các widget hoặc trong sidebar, nhưng không chắc chắn. Nếu đó là một plugin thì tôi không khuyên bạn nên buộc các tập lệnh bằng shortcode bởi vì một số có thể gọi hàm của bạn thay vì shortcode để có đầu ra mong muốn.