如何将样式表仅添加到具有特定快捷码的页面？

时间：2013-07-31 作者：Padraic

我在短代码所在的页面上运行一个函数[make-me-a-map] 已使用。它将javascript排入页面队列并生成一个映射。那部分很好用（呜呜！）但我在以类似的方式将样式表仅添加到这些页面时遇到了麻烦。

functions.php (Current)

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;
    }
}
不幸的是，这似乎不起作用。正在将样式添加到所有页面。

我没有使用wp\\u register\\u样式（&；wp\\U enqueue\\U样式，因为this bug 仍在添加<Link /> 从这些函数到页脚的标记。

我本可以用add_action("wp_enqueue_scripts", "style_my_new_map") 而不是add_action(\'wp-head\', "style_my_new_map") 但就我所能看到并检查过的情况来看，没有什么区别？仍然会将样式表添加到所有页面。

所以我的问题实际上分为两部分：）

当前功能为何。php不工作，并向所有页面添加样式？我不确定是不是global 呼叫或if 语句

8 个回复
最合适的回答,由SO网友:Krzysiek Dróżdż 整理而成

2个问题，2个答案：）

为什么是当前功能。php不工作，并向所有页面添加样式？我不确定是全球呼叫还是if语句。。。

由于调用这些函数的顺序，它不起作用。在呈现post内容的过程中会调用您的快捷码回调（很可能是the_content 函数调用）。

二者都wp_enqueue_scripts 和wp_head 被称为更早：wp_head 在你的主题中的某个地方header.php 文件和wp_enqueue_scripts 在期间wp_head 呼叫

假设我不知道页面ID等，那么将样式表添加到仅使用上述短代码的页面标题的最佳方法是什么？

我认为没有这样的“最佳”方式。这根本不是一个好主意。浏览器缓存CSS文件。所以，如果您在所有页面上都有相同的CSS，浏览器将只获得一次。如果不同页面有许多CSS文件，浏览器将必须获取所有这些文件。所以我根本不会这么做，而是将这些CSS样式包含在全局CSS文件中。

虽然如果您必须只在使用此短代码的页面上包含它，那么（2个解决方案，您可以选择哪个更好；我认为第二个更好）。。。

您可以将这些样式添加为内联样式。只是要小心不要多次包含它们。因此，请将它们与您的短代码一起输出，并确保它们只打印一次wp_head/wp_enqueue_scripts 调用时，您可以向该挂钩添加一些函数，循环浏览选定的帖子，检查它们是否包含您的短代码，并在需要时将CSS排队。（当然效率不高）

SO网友:CommandZ

使用快捷码动态加载脚本和样式Does not search through all the posts every time the shortcode is called.不使用正则表达式，因为它们往往比strstr() 或strpos(). 如果需要接受args，可以切换到regex
  • 减少文件调用

      • 代码解释

      1. 使用save_post 仅当文章不是修订版本且与指定的post_type.

        使用将找到的帖子ID保存为数组add_option() 自动加载设置为“是”，除非条目已存在。然后它将使用update_option().

        使用钩子wp_enqueue_scripts 打电话给我们add_scripts_and_styles() 作用

        然后该函数调用get_option() 检索页面ID数组。如果当前$page_id 在$option_id_array 然后添加脚本和样式。

      Please note: 我转换了OOP命名空间类的代码，因此可能遗漏了一些内容。如果我做了，请在评论中告诉我。

      代码示例：查找出现的短代码

      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\' );
      代码示例：短代码动态包含脚本和样式

    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\');

    SO网友:benedict_w

    这对我很有用：

    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\');
    更多信息请点击此处：http://mikejolley.com/2013/12/sensible-script-enqueuing-shortcodes/

    SO网友:Lucas Stark

    您可以在主查询运行后挂接到一个操作，并确定是否需要加载样式和脚本。

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

    SO网友:Dev

    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\' );

    }

}
    我会使用has_shortcode 检查$post内容并使用wp\\u enqueue\\u脚本加载脚本，但这取决于短代码嵌入的位置。

    用上面代码中的shortcode标记替换掉$标记。

    添加到子主题函数文件中，并根据需要更改条件。

    SO网友:stellarcowboy

    对我来说，一个更简单的解决方案是在shortcode函数外注册脚本，然后将脚本放入函数内。然后它只在使用您的短代码的页面上加载脚本。

    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;
}
    可在此处找到该方法的说明：http://mikejolley.com/2013/12/sensible-script-enqueuing-shortcodes/

    请注意，这确实会在页脚中加载CSS，这可能不可取或W3C无效。就我而言，这不是一个问题。

    SO网友:Ari

    您可以这样做：

    // 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
    }
}
    它也适用于样式表。要在最后加载样式表，然后将数字添加到快捷码挂钩，如下所示：

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

    我已经对它进行了测试，效果很好。

    SO网友:OmAk

    使用Shortcode动态加载脚本和样式这是提供的解决方案的扩展代码Commandz 在上面

    我发现他的方法是最好的，而且更可行，因为数据库选项几乎在所有挂钩上都可用。

    更改它以查找短代码的出现情况only 对于当前的帖子内容，而不是浏览所有帖子-当帖子数量较大时，这可能会较慢。

    It is changed here in two lines after passing another $post_id variable from the save_post action to function find_shortcode_occurences()

    if( !empty($post_id) ) {
    $args[\'posts__in\'] = $post_id; 
}
    两种功能的代码都已更改

    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);
    }
}
    此外，还添加了另一个变量，以便您可以为数据库选项和短代码名称使用不同的名称。

    结束
    标签： shortcode   wp-enqueue-script   css   wp-enqueue-style   wp-head   小码农  

    相关推荐

    不同文件夹中父项的style.css的子项主题模板值

    我正在制作一个儿童主题.../wp-content/themes/ 然而，我构建的父主题位于.../wp-content/plugins/ 目录我可以导入父级style.css 文件使用目录路径，但当我尝试对模板值执行相同操作时，它不起作用。类似地，父主题文件夹的简单名称也不起作用，可能是因为父主题位于不同的目录中。有没有办法解决这个问题？