将自定义样式和脚本包含到自定义张贴类型单一模板中

时间：2020-05-29 作者：Walter P.

我正在创建一个插件来添加自定义帖子类型。对于每个自定义帖子类型，我还创建了自定义的单个模板。自定义单个模板未使用get\\u header（）；或wp\\u head（）函数，它是手动从头开始编写的。我把这种风格排成这样：

<link rel="stylesheet" href="<?php echo esc_url( plugins_url( \'/public/css/wp-myplugin-public.min.css\', dirname(__FILE__) ) ); "/>

当我提交插件时，WordPress团队鼓励我使用内置WordPress函数，如wp\\u enqueue\\u style（），而不是上述方法。

由于我不使用get\\u header（）和wp\\u head，因此无法将其排入单个模板的头中。

我尝试过几种类似的方法：

function wp_myplugin_enqueue_style() {
global $post;
if ($post->post_type == \'myplugin\') {
       wp_enqueue_style( \'myplugin-public-css\',  plugin_dir_url( __FILE__ ) . \' public/css/wp-myplugin-public.min.css \' );
}
}
add_action( \'wp_enqueue_scripts\', \' wp_myplugin_enqueue_style\' );

包括以下内容：

function wp_myplugin_enqueue_style() {
if ( get_post_type( get_the_ID() ) == \'myplugin\' ) {
       wp_enqueue_style( \'myplugin-public-css\',  plugin_dir_url( __FILE__ ) . \' public/css/wp-myplugin-public.min.css \' );
}
}
add_action( \'wp_enqueue_scripts\', \' wp_myplugin_enqueue_style \' );

也像这样：

function wp_myplugin_enqueue_main_css() {
    if (is_page_template(\'wp-myplugin-base-template.php\')){
    wp_enqueue_style( \'myplugin-public-css\',  plugin_dir_url( __FILE__ ) . \' public/css/wp-myplugin-public.min.css \' );
    }
}
add_action( \'wp_enqueue_scripts\', \'wp_myplugin_enqueue_main_css\' );

上述代码根本不起作用。

这个<head> 单个模板的如下所示：

<?php
** Custom Single Template for MyPlugin
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
<?php if (in_array(\'wordpress-seo/wp-seo.php\' || \'wordpress-seo-premium/wp-seo-premium.php\', apply_filters( \'active_plugins\', get_option(\'active_plugins\' )))) :
    if ($meta_title = get_post_meta($post->ID, \'_yoast_wpseo_title\', true ));
    elseif ($meta_title = get_post_meta( get_the_ID(), myplugin_prefix( \'meta-title\' ), true ));
    else $meta_title = get_option(sanitize_text_field(\'myplugin_meta_title\'));
    if ($meta_description = get_post_meta($post->ID, \'_yoast_wpseo_metadesc\', true ));
    elseif ($meta_description = get_post_meta( get_the_ID(), myplugin_prefix( \'meta-description\' ), true ));
    else $meta_description = get_option(sanitize_text_field(\'myplugin_meta_description\'));
?>
<?php
if ($set_noindex = get_post_meta( get_the_ID(), myplugin_prefix( \'noindex\' ), true ));
else $set_noindex = get_option(sanitize_text_field(\'wp_myplugin_noindex\'));
if ($set_nofollow = get_post_meta( get_the_ID(), myplugin_prefix( \'nofollow\' ), true ));
else $set_nofollow = get_option(sanitize_text_field(\'wp_myplugin_nofollow\'));
?>
<?php
if ($set_noindex === "yes") {
$noindex = "noindex";
} else {
$noindex = "index";
}
if ($set_nofollow === "yes") {
$nofollow = "nofollow";
} else {
$nofollow = "follow";
}
?>
        <meta charset="<?php bloginfo( \'charset\' ); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="profile" href="http://gmpg.org/xfn/11">
        <link rel="pingback" href="<?php echo esc_url( get_bloginfo( \'pingback_url\' ) ); ?>">
        <link rel="icon" type="image/png" href="<?php echo esc_html(get_option(\'myplugin_upload_favicon\')); ?>">
        <title><?php echo $meta_title; ?></title>
        <meta name="description" content="<?php echo $meta_description; ?>">
        <meta name="robots" content="<?php echo $noindex ?>, <?php echo $nofollow ?>" />
        <meta name="googlebot" content="<?php echo $noindex ?>, <?php echo $nofollow ?>, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
        <meta name="bingbot" content="<?php echo $noindex ?>, <?php echo $nofollow ?>, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
        <!-- WordPress team doesn\'t allow below method to enqueue the style -->
        <link rel="stylesheet" href="<?php echo esc_url( plugins_url( \'/css/wp-myplugin-public.min.css\', dirname(__FILE__) ) ); ?>"/>
<?php endif; ?>
<?php $custom_css = get_option(sanitize_text_field(\'wp_myplugin_custom_css\'));
if ($custom_css == \'\') {
    echo \'\';
} else {
    echo \'<style type="text/css">\'.$custom_css .\'</style>\';
  }
?>
    </head>

为了包括wp-myplugin-public.min.css 样式表，我能使用的最佳方法是什么？我真的需要你的帮助。

提前非常感谢！

2 个回复

最合适的回答,由SO网友:Mort 1305 整理而成

首先，您的每个wp_enqueue_style 通话：您的报价中有空格。此外，因为您选择不调用wp_head() 方法hook 不会调用相同名称的。那个钩子反过来，calls 这个wp_enqueue_scripts 方法，其中calls 同名的钩子。由于您没有这样做wp_enqueue_scripts 钩子坏了。（你必须像我一样跟踪代码才能知道这一点。）所以，有两个原因让你成为福巴。

一句话wp_head(): WordPress核心使用它来做大量的事情，以便WordPress能够正常运行。使用它是一种很好的做法，这样WordPress就不会崩溃，这也是WP开发的一个基本概念。如果您不使用内置的WP核心，您将继续遇到这些错误，并且您必须自己找出如何完成WP流程所需的核心功能（这肯定会让您满意）。5 second read 了解打电话的地点wp_head(). 扰流板警报：介于<；头部>标记。

考虑到所有这些，这里有一个仅输出样式表的解决方案。修改模板，让WordPress输出特定的样式表，然后告诉它输出到哪里（因为您选择不制作the call 到wp_print_styles() 输出可能需要的所有其他内容。这可以通过以下方式完成getting 类的全局实例，称为WP_Styles, 和“做”那一件事。（或者，最好使用wp_head() 代替wp_styles()... 行。）

<?php
** Custom Single Template for MyPlugin
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
    <?php
    // Here\'s where the magic happens
    wp_enqueue_style(\'myplugin-public-css\');        // Tell WP to output this
    wp_styles()->do_item(\'myplugin-public-css\');    // Do the output
    ?>
    ...

接下来，你必须告诉我WP_Styles 举例说明myplugin公共css是什么。这就是排队的作用所在。这个wp_enqueue_style() 方法加载我们稍后将在上述模板中获取的对象。因为你没有使用wp_head(), 你得找点别的事做。那么，让我们试试init 钩

// Notice there are no spaces inside the quotation marks ...
// We use register the script so it is not output unless we enqueue it later.  That saves on resources.
function wp_myplugin_register_style() {
    wp_register_style( \'myplugin-public-css\', plugin_dir_url(__FILE__).\'public/css/wp-myplugin-public.min.css\' );
}
add_action( \'init\', \'wp_myplugin_register_style\' );

那应该差不多了。还有，这里有一个提示：把你的模板放在你调用的任何地方。这样，您的样式表就会被注册，直到需要它的时候：只有当它与模板的调用一起排队时，才需要它。

另一方面，你说你不使用get_header(), 但我在你的代码中看得很清楚。无需对此做出任何回应，只想指出这一点，因为没有人喜欢违反自己的编码策略！

SO网友:Tommy Pradana

您可以使用do_action( \'your_hook_name\' );

在您的cpt模板文件中：

<head>
...
<?php do_action( \'your_hook_name\' ); ?>
...
</head>

然后向挂钩添加回调：

function add_css_file() {
   ?><link rel="stylesheet" href="<?php echo esc_url( plugins_url( \'/public/css/wp-myplugin-public.min.css\', dirname(__FILE__) ) ); "/><?php
}
add_action( \'your_hook_name\', \'add_css_file\' );

小码农CODE

将自定义样式和脚本包含到自定义张贴类型单一模板中

相关推荐

Updating modified templates