Вот что я пытаюсь сделать. В зависимости от текущего сезона я хочу, чтобы в моем 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 - http://stackoverflow.com/questions/15550205/strange-rendering-issue-in-chrome-with-floats-in-a-div-with-margin-top */
#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">&#9776; 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 -->

В таблице стилей я использую этот цвет как цвет выделения (эффекты наведения, выделения и т. Д.). В header.php я просто показываю значение, чтобы люди знали, какой цвет выделения используется на моем сайте в данный момент.

Вот скриншот того, как выглядит верхняя часть моего сайта:

Portfolio Index Page

Теперь вот моя проблема: Как вы можете видеть, в правом верхнем углу отображается цвет (# 890044), НО используется другой цвет выделения (# 610030). Инструмент Inspect подтверждает, что используются два разных значения.

HTML vs CSS

Интересно, что файл css даже не использует начальные цвета из моего php: # 920049 или # e05038 , или # 729f98 или # 97743a . Начал обрабатывать цвет, но вроде еще не закончил. Но опять же, header.php правильно отображает цвет.

Означает ли это, что файл css может получить значение из файла php до того, как его функция будет завершена? И если да, то как я могу предотвратить это? Примечание: что еще больше сбивает с толку, моя локальная установка WordPress - с точно такими же файлами - работает нормально. Никаких проблем с цветом.

Любая помощь в этом вопросе приветствуется - спасибо!

Изменить: Я проверил следующие предложения, но пока мне не повезло. - Проверено, если я случайно включил color.php более одного раза в файл (что не так) - Изменено имя переменной, которая ничего не делала -

Кто может помочь? Я не могу придумать ничего, что я мог бы попытаться исправить, так как я не очень хорошо разбираюсь в php ...

2
malosch 5 Янв 2016 в 14:31

3 ответа

Лучший ответ

Хорошо, я нашел ответ. Перед использованием функции даты мне пришлось установить часовой пояс по умолчанию. Что-то вроде 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 () дает разные результаты с той же меткой времени и здесь http://php.net/manual/en/function. date-default-timezone-set.php

0
Community 23 Май 2017 в 11:45

После некоторого тестирования я понял, что переменная $ 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 используют два разных цветовых кода.

Кто-нибудь знает, почему?

0
malosch 14 Янв 2016 в 21:31

Убедитесь, что вы вызываете colors.php более одного раза, я протестировал здесь код и работает нормально. введите описание изображения здесь

Отредактируйте пост и поместите полный код для более глубокого анализа.

0
Rogerio Kleinkauf 5 Янв 2016 в 11:44