Question

我目前正在为wordpress开发一个插件。我的插件内容会被定义的短代码触发。我将一个参数传递给短代码来制作一些条件。我可以有条件地加载JS，但我还需要有条件地加载CSS。

让我说我使用短代码： [myshortcode css =＆＃34; dark＆＃34;] 我进行数据库查询并注入想要的css。

这有可能吗？我已经阅读了一些关于它的线索。我知道这是因为代码在头部加载后触发。我无法找到解决方案。

我有哪些选择？

谢谢！

Answer 1

您可能正在搜索这些功能：

has_shortcode()
get_shortcode_regex() - 在这里你可以找到很好的例子，它接近你的要求

您可以通过 add_action（＆＃39; wp＆＃39;，＆＃39; yourCustomFunction＆＃39;）检查您的帖子，页面或自定义帖子类型，并测试您的 get_post_field（＆＃39; post_content＆＃39;）包含指定的短代码并根据指定的属性有条件地将CSS文件排入队列。

Answer 2

有一种更好的方法。您只需wp_enqueue_scripts wp_register_style wp_register_script或/** * Register scripts */ function my_plugin_scripts() { wp_register_style( 'dark-css', $css_path ); wp_register_script( 'script-name', $js_path, array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'my_plugin_scripts' ); /** * My Shortcode */ function my_plugin_shortcode( $atts ) { $atts = shortcode_atts( array( 'css' => 'default' ), $atts ); if ( $atts['css'] == 'dark') { wp_enqueue_style('dark-css') } // do shortcode actions here } add_shortcode( 'shortcode-id','my_plugin_shortcode' );，import {ComponentRef, ViewContainerRef, ComponentFactoryResolver } from '@angular/core'; @Component({ selector: 'fancy-box', template: `<div>{{fancyContent}}</div> `, }) export class FancyBox { fancyContent; doStuff() { console.log('done'); } } @Component({ selector: 'fancy-parent', template: `<div (click)="addNewFancyBox()">Add Box</div> `, }) export class FancyParent { private counter = 0; constructor( private viewContainerRef: ViewContainerRef, private resolver: ComponentFactoryResolver) { } addNewFancyBox() { const factory = this.resolver.resolveComponentFactory(FancyBox); fancybox = this.viewContainerRef.createComponent(factory); const fancyboxElement = fancybox.instance as FancyBox; fancyboxElement.content = 'box number: ' + counter; fancyboxElement.doStuff(); counter++; } } css和脚本，然后将短代码中的注册脚本排入队列。您将有机会根据某些条件将脚本排入队列。

这是一个代码示例。

WM_GETDLGCODE

Answer 3

如果我理解你的问题，你可以做这样的事情来加载一个样式表或另一个：

function aw_shortcode_function($atts) {

    $a = shortcode_atts( array(
        'css' => 'light', // this is the default value
    ), $atts );

    $colorTheme = $a['css'];

    if ($colorTheme == 'dark') {
        // load/enqueue/get/do whatever based on the css="dark" shortcode attribute
    }
}

WP插件开发 - 短代码的条件CSS

3 个答案: