css 中损坏的 php 变量 - 颜色问题
corrupted php variable in css - color issue
这就是我想要做的。根据当前季节，我想在 css 中使用不同的颜色。此外，根据当前的白天，我希望稍微改变颜色的亮度。
这是以下代码的作用：
<?php
//check http://www.w3schools.com/php/func_date_date.asp for data function.
$month = date("n"); // 'n' requests a numeric representation of the current month without leading zeros
$hour = date("G"); // 'G' requests the hour in a 24 hour format (0-23) without leading zeros
if($month > 11 || $month <= 2) {
$color = "#920049"; // Winter
} else if ($month > 2 && $month <= 5) {
$color = "#e05038"; //Spring
} else if ($month > 5 && $month <= 8) {
$color = "#729f98"; //Summer
} else if ($month > 8 && $month <= 11) {
$color = "#97743a"; //Autumn
}
$brightness = (abs(12 - $hour))*-0.055;
$currentColor = color_luminance($color, $brightness);
function color_luminance( $hex, $percent ) {
// validate hex string
$hex = preg_replace( '/[^0-9a-f]/i', '', $hex );
$new_hex = '#';
if ( strlen( $hex ) < 6 ) {
$hex = $hex[0] + $hex[0] + $hex[1] + $hex[1] + $hex[2] + $hex[2];
}
// convert to decimal and change luminosity
for ($i = 0; $i < 3; $i++) {
$dec = hexdec( substr( $hex, $i*2, 2 ) );
$dec = min( max( 0, $dec + $dec * $percent ), 255 );
$new_hex .= str_pad( dechex( $dec ) , 2, 0, STR_PAD_LEFT );
}
return $new_hex;
}
?>
我将 php 文件包含在两个文件中：style.php 和 header.php。
style.php:
<?php
header("Content-type: text/css");
include 'color.php'; // include color.php file to have access to $currentColor
$highlight = $currentColor;
$white = '#fff';
?>
/*
Theme Name: Portfolio
Description: Template for my online portfolio
Author: Markus Lorenz Schilling
Author URI: http://malosch.com
*/
/********** NON-RESPONSIVE **********/
/* General structure */
* { margin: 0; padding: 0; color: #333; }
html, body { font-family: 'bariol_regular'; font-size: 18px; background-color: #efefef; overflow-x: hidden; }
.clear { clear: both; }
.header { height: auto; } /* header including the colored line + respsonsive menu button + hex color code */
#headerLine { height: 1px; width: 100%; background-color:<?=$highlight?>; } /* colored line on top of page */
.main { float: left; max-width: 926px; }
#footer p { margin: 16px 0 32px; color: #999; float:left; }
/* Headings */
h1 { font-family: 'bariol_bold'; font-size: 21px; margin: 16px 0 32px; }
h2 { font-family: 'bariol_regular'; font-size: 21px; margin-bottom: 32px; }
h3 { font-family: 'bariol_light'; font-size: 21px; margin: 32px 0 24px 0; color: <?=$highlight?>; border-style: solid; border-width: 1px 0 0 0; padding: 8px 0 0 0; } /* color needed for h3 on publication page */
/* Navigation panel */
.pushy { background: <?=$highlight?>; } /* pushy (mobile navigation) background */
ul { list-style-type: none; }
/* Links */
a { font-family: 'bariol_bold_italic'; text-decoration:underline; }
a:hover { color:<?=$highlight?>; }
a:visited { font-family: 'bariol_bold_italic'; text-decoration:underline; }
/* Colors */
.highlightColor { color:<?=$highlight?>; }
.white { color: <?=$white?>; }
/* Project links */
.featureImg { width:100%; height: 176px; overflow:hidden; position:relative; margin: 0 0 8px 0; display: inline-block; }
.featureImg img { width: 100%; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }
.featureImgBackup { width: 100%; height: 176px; background: <?=$highlight?>; }
.mask { background-color:<?=$highlight?>; display: table; width: calc(100% - 32px); height: 144px; padding:16px; float: left; position: absolute; left: 0px; top: 0px; opacity: 0; text-align: center; transition: opacity .5s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
.mask:hover { opacity: 1; }
.mask span { color: #fff; font-size: 21px; text-decoration: underline; display: table-cell; vertical-align: middle; }
.excerpt { padding-right: 16px; }
/* Project page */
.project_description { max-width: 100%; margin: 0 0 16px 0; float: left; }
.project_quote { text-align: center; float: left; width: 100%; border: 1px; border-color: <?=$highlight?>; color: <?=$highlight?>; margin: 16px 0 32px 0; border-style: solid none; padding: 16px; font-size: 24px; font-family: 'bariol_bold_italic'; }
.date { width: 298px; float: left; margin: 0 0 16px 0; }
/* Images */
img { vertical-align: top; max-width: 100%; height: auto; margin: 0 0 16px 0; float: left; } /* scale images to width of content but never larger than their actual size */
#contact img { margin: 0; }
.size-full { margin: 0 0 16px 0; max-width: 100%; }
/* 404 */
#DouglasAdams { text-align: center; }
.reload { cursor: pointer; }
/* About */
#contact { width:298px; float:left; margin: 0 0 32px 0; }
#profilePic { max-width: 926px; height: 320px; margin: 0 0 32px 0; background-image: url("assets/profilePic/profilePic.jpg"); background-position: center center; }
#bio { width: 100%; margin: 0 0 48px 0; }
#contact { width: 100%; margin: 0 0 32px 0; }
/* Videos */
iframe { margin-bottom: 16px; }
/* Publications */
.csl-bib-body { padding-left: 0 !important; text-indent: 0 !important; line-height: normal !important; }
/********** RESPONSIVE **********/
/* Basic responsive settings */
ul a { font-family: 'bariol_light'; font-size: 29px; line-height: 35px; text-decoration: none; text-transform: lowercase; } /* Links in navigation panel*/
ul a:hover { font-family: 'bariol_regular'; text-decoration: none; }
ul a:visited { text-decoration: none; }
.current_page_item a { font-family: 'bariol_regular'; }
.menu-btn { background-color:<?=$highlight?>; cursor: pointer; padding: 3px 8px 5px; color: #fff; margin: 24px 0 32px; }
.featureProject { margin: 0 0 32px 0; float: left; }
#sidebar_menu { width: 298px; padding: 0 16px 0 0; float: left; }
#container { margin: 0 auto; text-align: left; overflow: hidden; } /* need overflow: hidden; to avoid Google Chrome bug. See - */
#currentColor { float: right; }
/* Mobile */
ul a { color: <?=$white?>; }
ul a:hover { color: <?=$white?>; }
ul a:visited { color: <?=$white?>; }
.current_page_item a { color:<?=$white?>; }
.current_page_item a:hover { color:<?=$white?>; }
.current_page_item a:visited { color:<?=$white?>; }
.menu-btn { display: inline-block; }
.featureProject { width: 100%; }
#sidebar_menu { display: none; }
#container { max-width: 926px; padding: 0 16px; }
#currentColor { margin-top: 27px; }
/* tablets - portrait */
@media screen and (min-width: 644px) {
.featureProject { width: 50%; }
}
/* tablets - landscape */
@media screen and (min-width: 958px) {
.featureProject { width: 33.3%; }
}
/* desktops*/
@media screen and (min-width: 1272px) {
/* Navigation panel */
ul a { color: <?=$highlight?>; }
ul a:hover { color:<?=$highlight?>; }
ul a:visited { color: <?=$highlight?>; }
.current_page_item a { color:<?=$highlight?>; }
.current_page_item a:hover { color:<?=$highlight?>; }
.current_page_item a:visited { color:<?=$highlight?>; }
.menu-btn { display: none; }
.featureProject { width: 33.3%; }
#sidebar_menu { display: inline; }
#container { width: 1240px; max-width: initial; padding: 0; }
#currentColor { margin-top: 16px; }
}
/* @font-face shannanigens */
@font-face {
font-family: 'bariol_bold';
src: url('assets/fonts/bariol_bold-webfont.eot');
src: url('assets/fonts/bariol_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/bariol_bold-webfont.woff2') format('woff2'),
url('assets/fonts/bariol_bold-webfont.woff') format('woff'),
url('assets/fonts/bariol_bold-webfont.ttf') format('truetype'),
url('assets/fonts/bariol_bold-webfont.svg#bariol_boldbold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bariol_light';
src: url('assets/fonts/bariol_light-webfont.eot');
src: url('assets/fonts/bariol_light-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/bariol_light-webfont.woff2') format('woff2'),
url('assets/fonts/bariol_light-webfont.woff') format('woff'),
url('assets/fonts/bariol_light-webfont.ttf') format('truetype'),
url('assets/fonts/bariol_light-webfont.svg#bariol_lightlight') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bariol_regular';
src: url('assets/fonts/bariol_regular-webfont.eot');
src: url('assets/fonts/bariol_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/bariol_regular-webfont.woff2') format('woff2'),
url('assets/fonts/bariol_regular-webfont.woff') format('woff'),
url('assets/fonts/bariol_regular-webfont.ttf') format('truetype'),
url('assets/fonts/bariol_regular-webfont.svg#bariol_regularregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bariol_thin';
src: url('assets/fonts/bariol_thin-webfont.eot');
src: url('assets/fonts/bariol_thin-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/bariol_thin-webfont.woff2') format('woff2'),
url('assets/fonts/bariol_thin-webfont.woff') format('woff'),
url('assets/fonts/bariol_thin-webfont.ttf') format('truetype'),
url('assets/fonts/bariol_thin-webfont.svg#bariolthin') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bariol_bold_italic';
src: url('assets/fonts/bariol_bold_italic-webfont.eot');
src: url('assets/fonts/bariol_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/bariol_bold_italic-webfont.woff2') format('woff2'),
url('assets/fonts/bariol_bold_italic-webfont.woff') format('woff'),
url('assets/fonts/bariol_bold_italic-webfont.ttf') format('truetype'),
url('assets/fonts/bariol_bold_italic-webfont.svg#bariol_boldbold_italic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bariol_regular_italic';
src: url('assets/fonts/bariol_regular_italic-webfont.eot');
src: url('assets/fonts/bariol_regular_italic-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/bariol_regular_italic-webfont.woff2') format('woff2'),
url('assets/fonts/bariol_regular_italic-webfont.woff') format('woff'),
url('assets/fonts/bariol_regular_italic-webfont.ttf') format('truetype'),
url('assets/fonts/bariol_regular_italic-webfont.svg#bariolregular_italic') format('svg');
font-weight: normal;
font-style: normal;
}
header.php
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title><?php wp_title(); ?> - <?php bloginfo('name'); ?></title> <!-- Text displayed in tab -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.php" type="text/css" media="screen" /> <!-- Link to theme css -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/pushy.css" type="text/css" media="screen" /> <!-- Link to pushy css -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/hover.css" rel="stylesheet" media="all"> <!-- Link to hover css -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <!-- Pingback -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <!-- jQuery -->
<?php wp_head(); ?> <!-- Necessary wp header hook -->
</head>
<body>
<nav class="pushy pushy-left"> <!-- Pushy Menu -->
<h1><span class="white" id="pushyGreeting">Hello!</span></h1>
<ul>
<?php wp_list_pages('sort_column=menu_order&title_li='); ?> <!-- List all WP pages in a list -->
</ul>
</nav>
<div class="site-overlay"></div> <!-- Site overlay when responsive menu is open -->
<div id="headerLine"></div> <!-- Colored line at top of window -->
<div id="container"> <!-- Container aka "wrapper" (needs to be named '#container' for pushy menu to work -->
<div class="header">
<div class="menu-btn">☰ Menu</div> <!-- Menu Button -->
<p class="highlightColor" id="currentColor"><?php include 'color.php'; echo $currentColor; ?></p> <!-- Include color.php file in header.php to have access to the current color value -->
<br class="clear">
</div><!-- header -->
在样式 sheet 中，我使用该颜色作为我的突出显示颜色（悬停效果、突出显示等）。在 header.php 中，我只是显示值，让人们知道此时我的网站上使用的是什么突出显示颜色。
这是我网站顶部的屏幕截图：
现在我的问题是：
正如您所看到的，右上角显示了颜色 (#890044) 但是使用的高亮颜色是另一种颜色 (#610030)。检查工具确认正在使用两个不同的值。
有趣的是，css 文件甚至没有使用我的 php 中的起始颜色：#920049 或 #e05038 或 #729f98 或 #97743a。它开始处理颜色，但似乎还没有完成。但同样，header.php 正确显示了颜色。
这是否意味着 css 文件可以在其功能完成之前从 php 文件中获取值？如果是这样，我该如何防止这种情况发生？
注意：更令人困惑的是，我的本地 WordPress 安装（具有完全相同的文件）运行正常。完全没有颜色问题。
非常感谢对此问题的任何帮助 - 谢谢！
编辑：
我测试了以下建议，但到目前为止我没有运气。
- 检查我是否不小心在文件中多次包含 color.php（事实并非如此）
- 改变了没有做任何事情的变量名
-
谁能帮忙？我真的想不出有什么办法可以解决这个问题，因为我不太适合 php...
检查您是否多次调用 colors.php，我已经测试了这里的代码并且工作正常。
编辑 post 并放入完整代码以进行更深入的分析。
经过一些测试，我发现 $hour 变量导致了色差。只要我在
内将 $hour 更改为 0-23 中的任何数字
$brightness = (abs(12 - $hour))*-0.055;
HTML 和 CSS 显示相同的颜色代码。出于某种原因，当我通过日期函数计算当前小时时，我的代码不喜欢。
$hour = date("G"); // 'G' requests the hour in a 24 hour format (0-23) without leading zeros
但它不会抛出语法错误。它可以运行，但 HTML 和 CSS 使用两种不同的颜色代码。
有人知道为什么吗？
好的，我找到了答案。
在使用日期功能之前，我必须设置一个默认时区。类似于 date_default_timezone_set("America/Chicago");
现在我的color.php代码看起来像这样
<?php
date_default_timezone_set("America/Vancouver");
//check http://www.w3schools.com/php/func_date_date.asp for data function.
$month = date('n'); // 'n' requests a numeric representation of the current month without leading zeros
$hour = date('G'); // 'G' requests the hour in a 24 hour format (0-23) without leading zeros
$base = 12;
$multiplier = -0.055;
if($month > 11 || $month <= 2) {
$color = "#920049"; // Winter
} else if ($month > 2 && $month <= 5) {
$color = "#e05038"; //Spring
} else if ($month > 5 && $month <= 8) {
$color = "#729f98"; //Summer
} else if ($month > 8 && $month <= 11) {
$color = "#97743a"; //Autumn
}
$brightness = $base - $hour;
$brightness = abs($brightness);
$brightness = $brightness * $multiplier;
$currentColor = color_luminance($color, $brightness); // if I change $brightness with a number (e.g 0.5) everything works
//$currentColor = $color;
function color_luminance( $hex, $percent ) {
// validate hex string
$hex = preg_replace( '/[^0-9a-f]/i', '', $hex );
$new_hex = '#';
if ( strlen( $hex ) < 6 ) {
$hex = $hex[0] + $hex[0] + $hex[1] + $hex[1] + $hex[2] + $hex[2];
}
// convert to decimal and change luminosity
for ($i = 0; $i < 3; $i++) {
$dec = hexdec( substr( $hex, $i*2, 2 ) );
$dec = min( max( 0, $dec + $dec * $percent ), 255 );
$new_hex .= str_pad( dechex( $dec ) , 2, 0, STR_PAD_LEFT );
}
return $new_hex;
}
?>
可以在此处找到更多信息
PHP date() produces different results with same timestamp 在这里
http://php.net/manual/en/function.date-default-timezone-set.php
这就是我想要做的。根据当前季节，我想在 css 中使用不同的颜色。此外，根据当前的白天，我希望稍微改变颜色的亮度。 这是以下代码的作用：
<?php
//check http://www.w3schools.com/php/func_date_date.asp for data function.
$month = date("n"); // 'n' requests a numeric representation of the current month without leading zeros
$hour = date("G"); // 'G' requests the hour in a 24 hour format (0-23) without leading zeros
if($month > 11 || $month <= 2) {
$color = "#920049"; // Winter
} else if ($month > 2 && $month <= 5) {
$color = "#e05038"; //Spring
} else if ($month > 5 && $month <= 8) {
$color = "#729f98"; //Summer
} else if ($month > 8 && $month <= 11) {
$color = "#97743a"; //Autumn
}
$brightness = (abs(12 - $hour))*-0.055;
$currentColor = color_luminance($color, $brightness);
function color_luminance( $hex, $percent ) {
// validate hex string
$hex = preg_replace( '/[^0-9a-f]/i', '', $hex );
$new_hex = '#';
if ( strlen( $hex ) < 6 ) {
$hex = $hex[0] + $hex[0] + $hex[1] + $hex[1] + $hex[2] + $hex[2];
}
// convert to decimal and change luminosity
for ($i = 0; $i < 3; $i++) {
$dec = hexdec( substr( $hex, $i*2, 2 ) );
$dec = min( max( 0, $dec + $dec * $percent ), 255 );
$new_hex .= str_pad( dechex( $dec ) , 2, 0, STR_PAD_LEFT );
}
return $new_hex;
}
?>
我将 php 文件包含在两个文件中：style.php 和 header.php。
style.php:
<?php
header("Content-type: text/css");
include 'color.php'; // include color.php file to have access to $currentColor
$highlight = $currentColor;
$white = '#fff';
?>
/*
Theme Name: Portfolio
Description: Template for my online portfolio
Author: Markus Lorenz Schilling
Author URI: http://malosch.com
*/
/********** NON-RESPONSIVE **********/
/* General structure */
* { margin: 0; padding: 0; color: #333; }
html, body { font-family: 'bariol_regular'; font-size: 18px; background-color: #efefef; overflow-x: hidden; }
.clear { clear: both; }
.header { height: auto; } /* header including the colored line + respsonsive menu button + hex color code */
#headerLine { height: 1px; width: 100%; background-color:<?=$highlight?>; } /* colored line on top of page */
.main { float: left; max-width: 926px; }
#footer p { margin: 16px 0 32px; color: #999; float:left; }
/* Headings */
h1 { font-family: 'bariol_bold'; font-size: 21px; margin: 16px 0 32px; }
h2 { font-family: 'bariol_regular'; font-size: 21px; margin-bottom: 32px; }
h3 { font-family: 'bariol_light'; font-size: 21px; margin: 32px 0 24px 0; color: <?=$highlight?>; border-style: solid; border-width: 1px 0 0 0; padding: 8px 0 0 0; } /* color needed for h3 on publication page */
/* Navigation panel */
.pushy { background: <?=$highlight?>; } /* pushy (mobile navigation) background */
ul { list-style-type: none; }
/* Links */
a { font-family: 'bariol_bold_italic'; text-decoration:underline; }
a:hover { color:<?=$highlight?>; }
a:visited { font-family: 'bariol_bold_italic'; text-decoration:underline; }
/* Colors */
.highlightColor { color:<?=$highlight?>; }
.white { color: <?=$white?>; }
/* Project links */
.featureImg { width:100%; height: 176px; overflow:hidden; position:relative; margin: 0 0 8px 0; display: inline-block; }
.featureImg img { width: 100%; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }
.featureImgBackup { width: 100%; height: 176px; background: <?=$highlight?>; }
.mask { background-color:<?=$highlight?>; display: table; width: calc(100% - 32px); height: 144px; padding:16px; float: left; position: absolute; left: 0px; top: 0px; opacity: 0; text-align: center; transition: opacity .5s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
.mask:hover { opacity: 1; }
.mask span { color: #fff; font-size: 21px; text-decoration: underline; display: table-cell; vertical-align: middle; }
.excerpt { padding-right: 16px; }
/* Project page */
.project_description { max-width: 100%; margin: 0 0 16px 0; float: left; }
.project_quote { text-align: center; float: left; width: 100%; border: 1px; border-color: <?=$highlight?>; color: <?=$highlight?>; margin: 16px 0 32px 0; border-style: solid none; padding: 16px; font-size: 24px; font-family: 'bariol_bold_italic'; }
.date { width: 298px; float: left; margin: 0 0 16px 0; }
/* Images */
img { vertical-align: top; max-width: 100%; height: auto; margin: 0 0 16px 0; float: left; } /* scale images to width of content but never larger than their actual size */
#contact img { margin: 0; }
.size-full { margin: 0 0 16px 0; max-width: 100%; }
/* 404 */
#DouglasAdams { text-align: center; }
.reload { cursor: pointer; }
/* About */
#contact { width:298px; float:left; margin: 0 0 32px 0; }
#profilePic { max-width: 926px; height: 320px; margin: 0 0 32px 0; background-image: url("assets/profilePic/profilePic.jpg"); background-position: center center; }
#bio { width: 100%; margin: 0 0 48px 0; }
#contact { width: 100%; margin: 0 0 32px 0; }
/* Videos */
iframe { margin-bottom: 16px; }
/* Publications */
.csl-bib-body { padding-left: 0 !important; text-indent: 0 !important; line-height: normal !important; }
/********** RESPONSIVE **********/
/* Basic responsive settings */
ul a { font-family: 'bariol_light'; font-size: 29px; line-height: 35px; text-decoration: none; text-transform: lowercase; } /* Links in navigation panel*/
ul a:hover { font-family: 'bariol_regular'; text-decoration: none; }
ul a:visited { text-decoration: none; }
.current_page_item a { font-family: 'bariol_regular'; }
.menu-btn { background-color:<?=$highlight?>; cursor: pointer; padding: 3px 8px 5px; color: #fff; margin: 24px 0 32px; }
.featureProject { margin: 0 0 32px 0; float: left; }
#sidebar_menu { width: 298px; padding: 0 16px 0 0; float: left; }
#container { margin: 0 auto; text-align: left; overflow: hidden; } /* need overflow: hidden; to avoid Google Chrome bug. See - */
#currentColor { float: right; }
/* Mobile */
ul a { color: <?=$white?>; }
ul a:hover { color: <?=$white?>; }
ul a:visited { color: <?=$white?>; }
.current_page_item a { color:<?=$white?>; }
.current_page_item a:hover { color:<?=$white?>; }
.current_page_item a:visited { color:<?=$white?>; }
.menu-btn { display: inline-block; }
.featureProject { width: 100%; }
#sidebar_menu { display: none; }
#container { max-width: 926px; padding: 0 16px; }
#currentColor { margin-top: 27px; }
/* tablets - portrait */
@media screen and (min-width: 644px) {
.featureProject { width: 50%; }
}
/* tablets - landscape */
@media screen and (min-width: 958px) {
.featureProject { width: 33.3%; }
}
/* desktops*/
@media screen and (min-width: 1272px) {
/* Navigation panel */
ul a { color: <?=$highlight?>; }
ul a:hover { color:<?=$highlight?>; }
ul a:visited { color: <?=$highlight?>; }
.current_page_item a { color:<?=$highlight?>; }
.current_page_item a:hover { color:<?=$highlight?>; }
.current_page_item a:visited { color:<?=$highlight?>; }
.menu-btn { display: none; }
.featureProject { width: 33.3%; }
#sidebar_menu { display: inline; }
#container { width: 1240px; max-width: initial; padding: 0; }
#currentColor { margin-top: 16px; }
}
/* @font-face shannanigens */
@font-face {
font-family: 'bariol_bold';
src: url('assets/fonts/bariol_bold-webfont.eot');
src: url('assets/fonts/bariol_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/bariol_bold-webfont.woff2') format('woff2'),
url('assets/fonts/bariol_bold-webfont.woff') format('woff'),
url('assets/fonts/bariol_bold-webfont.ttf') format('truetype'),
url('assets/fonts/bariol_bold-webfont.svg#bariol_boldbold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bariol_light';
src: url('assets/fonts/bariol_light-webfont.eot');
src: url('assets/fonts/bariol_light-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/bariol_light-webfont.woff2') format('woff2'),
url('assets/fonts/bariol_light-webfont.woff') format('woff'),
url('assets/fonts/bariol_light-webfont.ttf') format('truetype'),
url('assets/fonts/bariol_light-webfont.svg#bariol_lightlight') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bariol_regular';
src: url('assets/fonts/bariol_regular-webfont.eot');
src: url('assets/fonts/bariol_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/bariol_regular-webfont.woff2') format('woff2'),
url('assets/fonts/bariol_regular-webfont.woff') format('woff'),
url('assets/fonts/bariol_regular-webfont.ttf') format('truetype'),
url('assets/fonts/bariol_regular-webfont.svg#bariol_regularregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bariol_thin';
src: url('assets/fonts/bariol_thin-webfont.eot');
src: url('assets/fonts/bariol_thin-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/bariol_thin-webfont.woff2') format('woff2'),
url('assets/fonts/bariol_thin-webfont.woff') format('woff'),
url('assets/fonts/bariol_thin-webfont.ttf') format('truetype'),
url('assets/fonts/bariol_thin-webfont.svg#bariolthin') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bariol_bold_italic';
src: url('assets/fonts/bariol_bold_italic-webfont.eot');
src: url('assets/fonts/bariol_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/bariol_bold_italic-webfont.woff2') format('woff2'),
url('assets/fonts/bariol_bold_italic-webfont.woff') format('woff'),
url('assets/fonts/bariol_bold_italic-webfont.ttf') format('truetype'),
url('assets/fonts/bariol_bold_italic-webfont.svg#bariol_boldbold_italic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'bariol_regular_italic';
src: url('assets/fonts/bariol_regular_italic-webfont.eot');
src: url('assets/fonts/bariol_regular_italic-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/bariol_regular_italic-webfont.woff2') format('woff2'),
url('assets/fonts/bariol_regular_italic-webfont.woff') format('woff'),
url('assets/fonts/bariol_regular_italic-webfont.ttf') format('truetype'),
url('assets/fonts/bariol_regular_italic-webfont.svg#bariolregular_italic') format('svg');
font-weight: normal;
font-style: normal;
}
header.php
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title><?php wp_title(); ?> - <?php bloginfo('name'); ?></title> <!-- Text displayed in tab -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.php" type="text/css" media="screen" /> <!-- Link to theme css -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/pushy.css" type="text/css" media="screen" /> <!-- Link to pushy css -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/hover.css" rel="stylesheet" media="all"> <!-- Link to hover css -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <!-- Pingback -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <!-- jQuery -->
<?php wp_head(); ?> <!-- Necessary wp header hook -->
</head>
<body>
<nav class="pushy pushy-left"> <!-- Pushy Menu -->
<h1><span class="white" id="pushyGreeting">Hello!</span></h1>
<ul>
<?php wp_list_pages('sort_column=menu_order&title_li='); ?> <!-- List all WP pages in a list -->
</ul>
</nav>
<div class="site-overlay"></div> <!-- Site overlay when responsive menu is open -->
<div id="headerLine"></div> <!-- Colored line at top of window -->
<div id="container"> <!-- Container aka "wrapper" (needs to be named '#container' for pushy menu to work -->
<div class="header">
<div class="menu-btn">☰ Menu</div> <!-- Menu Button -->
<p class="highlightColor" id="currentColor"><?php include 'color.php'; echo $currentColor; ?></p> <!-- Include color.php file in header.php to have access to the current color value -->
<br class="clear">
</div><!-- header -->
在样式 sheet 中，我使用该颜色作为我的突出显示颜色（悬停效果、突出显示等）。在 header.php 中，我只是显示值，让人们知道此时我的网站上使用的是什么突出显示颜色。
这是我网站顶部的屏幕截图：
现在我的问题是： 正如您所看到的，右上角显示了颜色 (#890044) 但是使用的高亮颜色是另一种颜色 (#610030)。检查工具确认正在使用两个不同的值。
有趣的是，css 文件甚至没有使用我的 php 中的起始颜色：#920049 或 #e05038 或 #729f98 或 #97743a。它开始处理颜色，但似乎还没有完成。但同样，header.php 正确显示了颜色。
这是否意味着 css 文件可以在其功能完成之前从 php 文件中获取值？如果是这样，我该如何防止这种情况发生？ 注意：更令人困惑的是，我的本地 WordPress 安装（具有完全相同的文件）运行正常。完全没有颜色问题。
非常感谢对此问题的任何帮助 - 谢谢！
编辑： 我测试了以下建议，但到目前为止我没有运气。 - 检查我是否不小心在文件中多次包含 color.php（事实并非如此） - 改变了没有做任何事情的变量名 -
谁能帮忙？我真的想不出有什么办法可以解决这个问题，因为我不太适合 php...
检查您是否多次调用 colors.php，我已经测试了这里的代码并且工作正常。
编辑 post 并放入完整代码以进行更深入的分析。
经过一些测试，我发现 $hour 变量导致了色差。只要我在
内将 $hour 更改为 0-23 中的任何数字$brightness = (abs(12 - $hour))*-0.055;
HTML 和 CSS 显示相同的颜色代码。出于某种原因，当我通过日期函数计算当前小时时，我的代码不喜欢。
$hour = date("G"); // 'G' requests the hour in a 24 hour format (0-23) without leading zeros
但它不会抛出语法错误。它可以运行，但 HTML 和 CSS 使用两种不同的颜色代码。
有人知道为什么吗？
好的，我找到了答案。
在使用日期功能之前，我必须设置一个默认时区。类似于 date_default_timezone_set("America/Chicago");
现在我的color.php代码看起来像这样
<?php
date_default_timezone_set("America/Vancouver");
//check http://www.w3schools.com/php/func_date_date.asp for data function.
$month = date('n'); // 'n' requests a numeric representation of the current month without leading zeros
$hour = date('G'); // 'G' requests the hour in a 24 hour format (0-23) without leading zeros
$base = 12;
$multiplier = -0.055;
if($month > 11 || $month <= 2) {
$color = "#920049"; // Winter
} else if ($month > 2 && $month <= 5) {
$color = "#e05038"; //Spring
} else if ($month > 5 && $month <= 8) {
$color = "#729f98"; //Summer
} else if ($month > 8 && $month <= 11) {
$color = "#97743a"; //Autumn
}
$brightness = $base - $hour;
$brightness = abs($brightness);
$brightness = $brightness * $multiplier;
$currentColor = color_luminance($color, $brightness); // if I change $brightness with a number (e.g 0.5) everything works
//$currentColor = $color;
function color_luminance( $hex, $percent ) {
// validate hex string
$hex = preg_replace( '/[^0-9a-f]/i', '', $hex );
$new_hex = '#';
if ( strlen( $hex ) < 6 ) {
$hex = $hex[0] + $hex[0] + $hex[1] + $hex[1] + $hex[2] + $hex[2];
}
// convert to decimal and change luminosity
for ($i = 0; $i < 3; $i++) {
$dec = hexdec( substr( $hex, $i*2, 2 ) );
$dec = min( max( 0, $dec + $dec * $percent ), 255 );
$new_hex .= str_pad( dechex( $dec ) , 2, 0, STR_PAD_LEFT );
}
return $new_hex;
}
?>
可以在此处找到更多信息 PHP date() produces different results with same timestamp 在这里 http://php.net/manual/en/function.date-default-timezone-set.php