Tôi đang chạy một chức năng trên các trang [make-me-a-map]sử dụng shortcode . Nó liệt kê javascript vào trang và tạo một bản đồ. Phần đó hoạt động tốt (woot!) Nhưng tôi gặp rắc rối với việc thêm biểu định kiểu vào chỉ những trang đó theo cách tương tự.

Hàm.php (Hiện tại)

add_shortcode("make-me-a-map", "create_new_map");
add_action("wp_head", "style_my_new_map");

function create_new_map () {
    global $new_map_called_for;
    $map_called_for = true;

    wp_register_script('make-a-new-map', get_template_directory_uri() . '/js/new-map.js', array('jquery'), '0.1', true);
    wp_enqueue_script('make-a-new-map');
    }

function style_my_new_map() {
    global $new_map_called_for;
    if ($new_map_called_for == true) {
        $tDir = get_template_directory_uri();

        // Echo stylesheets because wp_register_style & wp_enqueue_style don't work atm
        // And add_action('wp_enqueue_script', 'style_my_new_maps') with those functions would add style to all pages
        // Not just the ones with [make-me-a-map] shortcode
        echo "<link rel='stylesheet' href='", $tDir, "/css/new-map.css' />", PHP_EOL;

        // Echo Javascript straight to page (couldn't do it with wp_enqueue_script) to let js code know the template directory
        echo '<script type="text/javascript">var templateDir = "', get_template_directory_uri(), '";</script>', PHP_EOL;
        $map_called_for = false;
    }
}

Điều này dường như không làm việc không may. Các phong cách đang được thêm vào tất cả các trang.

Tôi đã không sử dụng wp_register_style & wp_enqueue_style vì lỗi này vẫn đang thêm <Link />thẻ vào chân trang từ các chức năng đó.

Tôi có thể đã sử dụng add_action("wp_enqueue_scripts", "style_my_new_map")thay vì add_action('wp-head', "style_my_new_map")nhưng theo như tôi có thể thấy và đã kiểm tra, có sự khác biệt nào không? Vẫn thêm các bảng định kiểu cho tất cả các trang.

Vì vậy, câu hỏi của tôi thực sự có hai phần: :)

1. Tại sao các hàm.php hiện tại không hoạt động và thêm kiểu cho tất cả các trang? Tôi không chắc đó là globalcuộc gọi hay iflời tuyên bố ...
2. Cách tốt nhất để tôi thêm các bảng định kiểu vào tiêu đề chỉ các trang mà shortcode trên được sử dụng, giả sử tôi sẽ không biết id trang, v.v.?

Cảm ơn trước! P

2 câu hỏi nên 2 câu trả lời :)

Tại sao các hàm.php hiện tại không hoạt động và thêm kiểu cho tất cả các trang? Tôi không chắc đó là cuộc gọi toàn cầu hay câu lệnh if ...

Nó không hoạt động vì thứ tự các hàm này được gọi. Gọi lại mã ngắn của bạn được gọi trong khi kết xuất nội dung bài đăng (rất có thể là the_contentchức năng gọi).

Cả hai wp_enqueue_scriptsvà wp_headđược gọi sớm hơn nhiều: wp_headở đâu đó trong header.phptệp chủ đề của bạn và wp_enqueue_scriptstrong khi wp_headgọi.

Cách tốt nhất để tôi thêm các bảng định kiểu vào tiêu đề chỉ các trang mà shortcode trên được sử dụng, giả sử tôi sẽ không biết id trang, v.v.?

Tôi không nghĩ có cách "tốt nhất" như vậy. Đó không phải là một ý tưởng tốt cả. Trình duyệt lưu tập tin CSS. Vì vậy, nếu bạn có cùng CSS trên tất cả các trang, trình duyệt sẽ chỉ nhận được một lần. Nếu có nhiều tệp CSS cho các trang khác nhau, trình duyệt sẽ phải lấy tất cả chúng. Vì vậy, tôi sẽ không làm điều đó, và bao gồm các kiểu CSS này trong tệp css toàn cầu.

Mặc dù nếu bạn chỉ đưa nó vào các trang sử dụng mã ngắn này, thì (2 giải pháp, lựa chọn tốt hơn là của bạn; tôi nghĩ rằng trang thứ 2 đẹp hơn) ...

1. Bạn có thể thêm các kiểu này làm kiểu nội tuyến. Chỉ cần cẩn thận để không bao gồm chúng nhiều lần. Vì vậy, hãy xuất chúng bằng shortcode của bạn và đảm bảo chúng sẽ chỉ được in một lần.
2. Vì các bài đăng đã được chọn, khi wp_head/ wp_enqueue_scriptsđược gọi, bạn có thể thêm một số chức năng vào hook này, lặp qua các bài đăng được chọn, kiểm tra xem chúng có chứa shortcode của bạn không và xử lý CSS của bạn nếu cần. (Tất nhiên nó sẽ không hiệu quả lắm).

Đang tải tập lệnh và kiểu động bằng cách sử dụng Shortcode

Ưu điểm

• Không tìm kiếm thông qua tất cả các bài viết mỗi khi shortcode được gọi.
• Chỉ có thể tự động thêm kiểu cũng như tập lệnh khi shortcode ở trên trang.
• Không sử dụng regexes vì ​​chúng có xu hướng chậm hơn strstr()hoặc strpos(). Bạn có thể chuyển sang regex nếu bạn cần chấp nhận args.
• Giảm cuộc gọi tập tin

Giải thích về Mã

1. Tìm mã ngắn trên trang chỉ sử dụng save_posthook khi bài đăng không phải là bản sửa đổi và phù hợp với chỉ định post_type.

2. Lưu id bài đăng được tìm thấy dưới dạng một mảng bằng cách sử dụng add_option()tự động tải được đặt thành có trừ khi mục nhập đã có sẵn. Sau đó, nó sẽ sử dụng update_option().

3. Sử dụng hook wp_enqueue_scriptsđể gọi add_scripts_and_styles()chức năng của chúng tôi .

4. Hàm đó sau đó gọi get_option()để lấy mảng id trang của chúng tôi. Nếu hiện tại $page_idlà trong $option_id_arrayđó nó thêm các kịch bản và phong cách.

Xin lưu ý: Tôi đã chuyển đổi mã từ các lớp Không gian tên OOP để tôi có thể đã bỏ lỡ điều gì đó. Hãy cho tôi biết trong các ý kiến ​​nếu tôi đã làm.

Mã ví dụ: Tìm kiếm sự xuất hiện của Shortcode

function find_shortcode_occurences($shortcode, $post_type = 'page')
{
    $found_ids = array();
    $args         = array(
        'post_type'   => $post_type,
        'post_status' => 'publish',
        'posts_per_page' => -1,
    );
    $query_result = new \WP_Query($args);
    foreach ($query_result->posts as $post) {
        if (false !== strpos($post->post_content, $shortcode)) {
            $found_ids[] = $post->ID;
        }
    }
    return $found_ids;
}

function save_option_shortcode_post_id_array( $post_id ) {
    if ( wp_is_post_revision( $post_id ) OR 'page' != get_post_type( $post_id )) {
        return;
    }
    $option_name = 'yourprefix-yourshortcode';
    $id_array = find_shortcode_occurences($option_name);
    $autoload = 'yes';
    if (false == add_option($option_name, $id_array, '', 'yes')) update_option($option_name, $id_array);
}

add_action('save_post', 'save_option_shortcode_id_array' );

Mã ví dụ: Shortcode tự động bao gồm tập lệnh và kiểu

function yourshortcode_add_scripts_and_styles() {
    $page_id = get_the_ID();
    $option_id_array = get_option('yourprefix-yourshortcode');
    if (in_array($page_id, $option_id_array)) {
        wp_enqueue_script( $handle, $src, $deps, $ver, $footer = true );
        wp_enqueue_style( $handle, $src , $deps);
    }
}

add_action('wp_enqueue_scripts', 'yourshortcode_add_scripts_and_styles');

Điều này làm việc cho tôi:

function register_my_css () {
    wp_register_style('my-style', plugins_url('styles.css', __FILE__));
}

function register_my_scripts () {
    wp_register_script('my-script', plugins_url('scripts.js', __FILE__));
}

// only enqueue the scripts / styles when the short code is called
function do_my_shortcode () {
    wp_enqueue_style('my-style');
    wp_enqueue_script('my-script');

    // do short code stuff...
}

// register css
add_action('wp_enqueue_scripts', 'register_my_css');

// register javascript
add_action('wp_enqueue_scripts', 'register_my_scripts');

// register shortcode
add_shortcode('my-shortcode', 'do_my_shortcode');

Thêm thông tin tại đây: http://mikejcar.com/2013/12/sensible-script-enqueuing-shortcodes/

Bạn có thể nối vào một hành động sau khi truy vấn chính đã chạy và xác định xem bạn có cần tải kiểu và tập lệnh của mình không.

add_action('template_include', 'custom_template_include');
function custom_template_include($template) {
    if (is_single() || is_page()) {
          global $post;
          if (has_shortcode($post->post_content, 'your_short_code')) {
              add_action('wp_enqueue_scripts, 'custom_enqueue_scripts');
          }
    } 
}

function custom_enqueue_scripts() {
    //Enqueue your stuff here. 
}

add_action( 'wp_enqueue_scripts', 'enqueue_shortcode_styles', 1 );
function enqueue_shortcode_styles() {

    global $post;

    if ( isset($post->post_content) && is_singular(array( 'post','page' ) ) && ! has_shortcode( $post->post_content, '$tag' ) ) {

    wp_enqueue_style( 'shortcode-styles', get_stylesheet_directory_uri() . '/style.css' );

    }

}

Tôi sẽ sử dụng has_shortcodeđể kiểm tra nội dung $ post và tải tập lệnh bằng wp_enqueue_scripts nhưng nó phụ thuộc vào vị trí mã ngắn của bạn được nhúng.

Trao đổi thẻ $ với thẻ shortcode của bạn trong mã trên.

Thêm vào tập tin chức năng chủ đề con của bạn và thay đổi các điều kiện nếu cần.

Một giải pháp đơn giản hơn nhiều cho tôi là đăng ký tập lệnh bên ngoài hàm shortcode và sau đó liệt kê tập lệnh trong hàm. Sau đó, nó chỉ tải tập lệnh trên các trang bằng cách sử dụng shortcode của bạn.

wp_register_script('make-a-new-map', get_template_directory_uri() . '/js/new-map.js', array('jquery'), '0.1', true);
wp_register_style('make-a-new-map-style', get_template_directory_uri() . '/css/new-map.css');

add_shortcode("make-me-a-map", "create_new_map");
add_action("wp_head", "style_my_new_map");

function create_new_map () {
   wp_enqueue_script('make-a-new-map');
   wp_enqueue_style('make-a-new-map-style');

   global $new_map_called_for;
   $map_called_for = true;
}

Một mô tả về phương pháp đó có thể được tìm thấy ở đây: http://mikejcar.com/2013/12/sensible-script-enqueuing-shortcodes/

Lưu ý rằng điều này không tải CSS ở chân trang, có thể không mong muốn hoặc W3C hợp lệ. Trong trường hợp của tôi đó không phải là một vấn đề.

Bạn có thể chỉ cần làm như thế này:

// shortcode hook
add_shortcode("make-me-a-map", "create_new_map");

// shortcode callback
function style_my_new_map() {
    global $new_map_called_for;
    if ($new_map_called_for == true) {
  wp_register_script('make-a-new-map', get_template_directory_uri() . '/js/new-map.js', array('jquery'), '0.1', true);
  wp_enqueue_script('make-a-new-map');

// the rest of your codes
    }
}

Nó cũng hoạt động cho bảng định kiểu. Để tải biểu định kiểu của bạn ở cuối cùng, sau đó thêm số vào hook shortcode của bạn, như thế này:

add_shortcode("make-me-a-map", "create_new_map", 9999);

Tôi đã thử nó và nó hoạt động.

Đang tải tập lệnh và kiểu động bằng cách sử dụng Shortcode

Đây là mã mở rộng cho giải pháp được cung cấp bởi Commandz ở trên.

Tôi đã tìm thấy phương pháp của mình là tốt nhất và khả thi hơn vì tùy chọn cơ sở dữ liệu có sẵn ở hầu hết các hook.

Nó được thay đổi để tìm sự xuất hiện của mã ngắn chỉ cho nội dung bài đăng hiện tại, thay vì đi qua tất cả các bài đăng - có thể chậm hơn khi số lượng bài đăng lớn.

Nó được thay đổi ở đây thành hai dòng sau khi chuyển một biến $ post_id khác từ hành động save_post sang hàm find_shortcode_occurences ()

if( !empty($post_id) ) {
    $args['posts__in'] = $post_id; 
}

Mã thay đổi cho cả hai chức năng

function find_shortcode_occurences($shortcode, $post_id='', $post_type = 'page') {
    $found_ids = array();
    $args         = array(
        'post_type'   => $post_type,
        'post_status' => 'publish',
        'posts_per_page' => -1,
    );

    if( !empty($post_id) ) {
        $args['posts__in'] = $post_id; 
    }

    $query_result = new WP_Query($args);
    foreach ($query_result->posts as $post) {
        if (false !== strpos($post->post_content, $shortcode)) {
            $found_ids[] = $post->ID;
        }
    }
    return $found_ids;
}

add_action('save_post', 'save_option_for_sppro_pages' );
function save_option_for_sppro_pages( $post_id ) {
    if ( wp_is_post_revision( $post_id ) ) {
        return;
    }
    $option_name = 'database-option';
    $shortcode = 'shortcode-name';
    $id_array = find_shortcode_occurences($shortcode, $post_id);
    $autoload = 'yes';
    if (false == add_option($option_name, $id_array, '', 'yes')) {
        $current_value = get_option($option_name);
        $new_value = array_merge($current_value, $id_array);
        update_option($option_name, $id_array);
    }
}

Ngoài ra, một biến khác đã được thêm vào để bạn có thể có các tên khác nhau cho tùy chọn cơ sở dữ liệu và tên shortcode.