个性化阅读
专注于IT技术分析

使用WordPress后端UI元素更改CSS值

我在大多数高级WordPress主题中都看到过, 允许后端用户更改CSS属性, 例如背景色, 字体颜色, 字体家族, 而仅使用某些UI元素与后端一起使用。

外观部分上有一个颜色选择器, 用户可以更改特定元素的颜色并将其保存。

我正在构建一个小的wordpress主题, 我希望用户也可以通过这种方式更改CSS值。

那么, 这是怎么做的呢?

它类似于文件写入吗?还是动态的? (将CSS存储在数据库中吗?)

谢谢!


#1


你有几种使用数据库值的方法:

a)将它们作为内联样式回显

<body style="background:<?php echo get_option('body_background'); ?>">

b)在<head>标签内将它们作为样式规则回显:

<head>
    <style>
    body {background:<?php echo get_option('body_background'); ?>}
    </style>
</head>

C)使用PHP生成动态样式表(这是可取的, 因为该文件可以缓存, 也可以压缩):

style.php:

<?php 
header("Content-type: text/css; charset: UTF-8"); 
define('WP_USE_THEMES', false);
require('path/to/wp-load.php'); // Located in the root of WordPress
?>

body {background:<?php echo get_option('body_background'); ?>}

header.php:

<head>
    <link href="style.php" rel="stylesheet" type="text/css" />
</head>

编辑(2016年3月)

我最终创建了wp-dynamic-css:一个允许你从动态内容生成CSS的库, 我相信这对你非常有用。这是可以使用的方式:

// 1. Load the library
require_once 'wp-dynamic-css/bootstrap.php';

// 2. Set the callback function (used to convert variables to actual values)
function my_dynamic_css_callback( $var_name )
{
   return get_theme_mod($var_name);
}
wp_dynamic_css_set_callback( 'my_dynamic_css_callback' );

// 3. Enqueue the stylesheet (using an absolute path, not URL)
wp_dynamic_css_enqueue( 'path/to/my-style.css' );

现在, 假设你有一个名为my-style.css的文件, 其代码如下:

body {
   background-color: $body_bg_color;
}

例如, 如果调用get_theme_mod(‘body_bg_color’)返回值#fff, 则my-style.css将被编译为:

body {
   background-color: #fff;
}

这将被打印到文档<head>。这种方法的好处是, 在定制程序中所做的任何更改都会立即更新, 以显示更改实时生效。


#2


一种解决方法是将CSS设置设置为嵌入式样式。内联样式始终会覆盖任何内部或外部样式表, 同时, 如果不存在任何内联样式, 则可以让这些样式表提供默认样式。

假设你正在使用设置API(https://codex.wordpress.org/Settings_API)创建自定义设置, 那么它就是这样工作的。

获取设置:

//Get the group of options named custom_css_settings, registered using register_setting()
//These are of course example names and could be anything
$custom_css = get_option('custom_css_settings');
//Get the CSS-option for the element named body
$custom_css_body_bg = $custom_css['body_bg'];

将CSS应用于例如body-tag作为内联CSS(如果已设置):

//If its set, use the setting - if not print the <body> tag without styling
($custom_css_body_bg) ? "<body style='background:" . $custom_css_body_bg . ";'" : "<body>" ;

#3


当在WordPress中创建动态CSS文件时, 你可能需要对其进行一些调整。根据CSS Tricks, 最简单的方法是将其添加到你的style.php中:

<?php
 $absolute_path = explode('wp-content', $_SERVER['SCRIPT_FILENAME']);
 $wp_load = $absolute_path[0] . 'wp-load.php';
 require_once($wp_load);

  /**
  Do stuff like connect to WP database and grab user set values, like:
  ?>
  body {background:<?php echo get_option('body_background');
  */

  header('Content-type: text/css');
  header('Cache-control: must-revalidate');
?>

下一个替代方法是” ..保留名为style.css的文件, 并使用.htaccess将其解析为PHP。只需确保此代码位于.htaccess文件(仅适用于Apache服务器)中, 并且与CSS文件位于同一目录级别然后在其中使用PHP, 就像在其他任何PHP文件中一样。”

资料来源:https://css-tricks.com/css-variables-with-php/

赞(0) 打赏
未经允许不得转载:srcmini » 使用WordPress后端UI元素更改CSS值
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏