在CSS中显示主题选项

时间:2016-03-28 作者:Scott Reinmuth

我真的在拼命想弄明白这一点。我已经做了将近12个小时了。

作为PHP和主题开发的新手,我很难理解如何theme_options(\'value\'); 在放入PHP样式表时显示。

我从我读到的一篇博文中举了一个例子here 使用parse\\u请求方法。

代码输入header.php

<link rel=\'stylesheet\' type=\'text/css\' href="<?php echo get_template_directory() ?>/css/theme_styles.php?my-custom-content=css" />
并且在theme-styles.php

<?php
    add_action( \'parse_request\', \'my_custom_wp_request\' );
    function my_custom_wp_request( $wp ) {
        if ( !empty( $_GET[\'my-custom-content\'] ) && $_GET[\'my-custom-content\'] == \'css\' ) {
            # get theme options
            header( \'Content-Type: text/css\' );
?>
        a { color: <?php echo get_option(\'some_other_option\') ?> !important; }
<?php
        exit;
        }
    }
?>
这就是帖子上所说的,所以现在我迷路了。我尝试了许多其他解决方案,但也没有奏效。感谢您的帮助!

2 个回复
SO网友:Scott Reinmuth

虽然@Jevuska确实解决了我的问题,但我找到了一个更简单的解决方案,可以从我的主题选项页面添加动态CSS。开始了!

将此添加到functions.php

add_action(\'wp_head\', \'my_custom_css\');
function my_custom_css(){
require_once( get_template_directory() . \'/css/theme-styles.php\' );
}
现在你可以治疗theme-styles.php 作为常规CSS样式表

<style type="text/css">
a {
    color: <?php echo get_option(\'some_other_option\');?> !important;
}
</style>
完成!就这么简单。

SO网友:Jevuska

CSS可通过操纵parse\\u查询进行自定义,Scott Reimuth,我认为您对这些教程的指导有误,是的,您使用了parse_request 方法

如果您遵循,则此代码是一个带有函数的钩子,您需要将functions.php

<?php
    add_action( \'parse_request\', \'my_custom_wp_request\' );
    function my_custom_wp_request( $wp ) {
        if ( !empty( $_GET[\'my-custom-content\'] ) && $_GET[\'my-custom-content\'] == \'css\' ) {
        # get theme options
        header( \'Content-Type: text/css\' );
?>
a {color: <?php echo get_option(\'some_other_option\'); ?> !important;}
<?php
        exit; 
        }
    }
?>
并且在header.php 使用此代码(无文件/css/theme_styles.php ) 使用参数发出请求my-custom-content 和价值css. 这就是为什么我们需要一个有功能的钩子来让它工作。

<link rel=\'stylesheet\' type=\'text/css\' href="<?php bloginfo( \'url\' ); ?>/?my-custom-content=css" />
我们在这里完成了。

但是如果您需要在外部函数中使用css,那么您可以创建custom-css.php. 以及您在functions.php 将如下所示:

add_action( \'parse_request\', \'my_custom_wp_request\' );
function my_custom_wp_request( $wp ) {
    if ( !empty( $_GET[\'my-custom-content\'] ) && $_GET[\'my-custom-content\'] == \'css\' ) {
    # get theme options
       header( \'Content-Type: text/css\' );
       require dirname( __FILE__ ) . \'/css/custom-css.php\';
       exit;
    }
}       
在你的custom-css.php

a {
  color: <?php echo get_option(\'some_other_option\'); ?> !important;
} 
在中header.php 以上仍然相同。

验证的类似方法

我的验证数据的类似方法。我们只使用文件functions.php 主题添加此代码。

/** Enqueue style for custom css
 *  we use parameter wpse_css and ( int ) 1 as value
 *
 */
add_action( \'wp_enqueue_scripts\', \'wpse221867_enqueue_style\', 99 );
function wpse221867_enqueue_style()
{
    /** check url ssl */
    $url = ( is_ssl() ) ?
            home_url( \'/\', \'https\' ) : home_url( \'/\' );
    
    /** Register and enqueue wpse_style_php
     *  Build query with wpse_css as parameter, 1 as number to validation
     *
     */
    wp_register_style( \'wpse_style_php\',
        add_query_arg( array(
            \'wpse_css\' => ( int ) 1
        ), $url ),
        array(), //your style handled
        null, //remove wp version
        \'all\' //media
    );
    wp_enqueue_style( \'wpse_style_php\' );
}

/** Fire parse_request with function wpse221867_print_css
 *  Generate css in PHP
 *
 *  @return string CSS Content
 */
add_action( \'parse_request\', \'wpse221867_print_css\' );
function wpse221867_print_css()
{
    /** validate query on input */
    $css = filter_input( INPUT_GET, \'wpse_css\', FILTER_VALIDATE_INT );
    
    if ( ! $css || ( int ) 1 != $css )
        return;
    
    ob_start();
    header( \'Content-type: text/css\' );
    
    /** wpse_option_settings contain css in an array i.e
     *  array( \'wpse_css_content\' => \'a{color:#ececec}\' )
     *
     */
    $options = get_option( \'wpse_option_settings\' );
    $raw_css = ( isset( $options[\'wpse_css_content\'] ) )
                ? $options[\'wpse_css_content\'] : \'\';
    
    /** sanitize for output */
    $content = wp_kses( $raw_css,
        array( \'\\\'\', \'\\"\' )
    );
    $content = str_replace( \'&gt;\', \'>\', $content );
    echo $content; // output
    die();
}
IMHO,不建议使用此方法,尤其是对于性能问题。只需使用静态css文件,找到另一种方法使其成为可自定义的css,请查看wp_add_inline_style (示例可用)和get_theme_mod.

相关推荐

为什么我的主题的css在另一个网站上不起作用

我在Neve theme的基础上开发我的on theme。首先,我对脚本有问题,因为它不起作用,但我不得不从页脚更改它们的位置。php到标题。php的一切都很好。新的一些脚本无法工作,因为css根本没有加载。我尝试了5种不同的方法,但都失败了。标题中的。php我只是给他们<style> </style></我在函数中使用了寄存器样式。php,标题。php和页脚。php function my_theme_enqueue_styles() { &#x