Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Створення перемикача таблиць стилів CSS, що змінює їх в залежності від часу

by
Difficulty:BeginnerLength:LongLanguages:

Ukrainian (українська мова) translation by Nadia Gonzales (you can also view the original English article)

У наш час перемикачі стилів стали популярною можливістю веб-сайтів. Таблиці стилів CSS дозволяють веб-дизайнерові змінювати вид та відчуття від веб-сайтів без особливих зусиль. Деякі сайти використовують тип перемикачів стилів  "Day and Night" (* «День и Ніч». Тут і надалі примітка перекладача), при якому тема сайту змінюється автоматично в залежності від часу доби.

У цьому посібнику вам буде показано, як створювати перемикач таблиць стилів CSS, що змінює їх в залежності від часу, за допомогою PHP, завдяки якому ви можете негайно змінювати безліч таблиць стилів при настанні певного часу доби. Також додано трохи коду jQuery UI задля втіхи!


Чому будемо використовувати PHP замість JavaScript?

Єдиний недолік при використанні PHP для реалізації обговорюваного тут перемикача таблиць стилів CSS, – це те, що час визначається або веб-сервером, або «часовим поясом», заданим у скрипті.

Коли я створював свій персональний сайт-портфоліо, то створив обговорюваний тут перемикач таблиць стилів за допомогою JavaScript та jQuery. Функція скрипта, в якій задається стиль в залежності від часу, працювала коректно. Проте, завжди був присутній короткий «спалах» версії сторінок з використанням таблиці стилів за налаштуванням після завантаження сторінок.

У веб-сторінках з великою кількістю коду JavaScript можуть виникати конфліктні ситуації між різними скриптами JavaScript. Замість нього я вирішив використовувати PHP для реалізації нашого перемикача. Оскільки PHP використовується на стороні сервера, то були відсутні конфліктні ситуації JavaScript і скрипт працював належним чином.

Єдиний недолік при використанні PHP для реалізації обговорюваного тут перемикача таблиць стилів CSS, – це те, що час визначається або веб-сервером, або «часовим поясом», заданим у скрипті. За допомогою JavaScript ви можете зробити так, щоб функції скрипта, в яких визначається стиль в залежності від часу, працювали на основі часу, встановленому на комп'ютері користувача.


Попередні підготування

Якщо ви не знайомі з PHP, то вам необхідно встановити та налаштувати серверне програмне забезпечення на вашому локальному комп'ютері (у браузері неможливо переглядати файли PHP). Власне я віддаю перевагу XAMPP (* X – усі операційні системи, Apache, MySQL, PHP, Perl). У цій статті описуються декілька варіантів серверного програмного забезпечення та базові інструкції з налаштування локального сервера.

Хоча ви й можете використовувати Notepad для створення та редагування файлів PHP, редактор коду може бути дуже корисним при написанні веб-сторінок на PHP та іншим мовах програмування. За додатковою інформацією про вибір редактора коду звертайтеся до цих статей:

У цьому посібнику наводиться код для створення базової версії перемикача таблиць стилів CSS, що змінює їх в залежності від часу, і ви можете переглянути демоверсію тут. У початкових файлах містяться дві додаткові демоверсії.

Тепер приступаємо до справи!


Крок 1: Створюємо 1-шу таблицю стилів CSS (Ніч)

Створіть файл для таблиці стилів CSS під назвою style-1.css та скопіюйте до нього наступний код:


Крок 2: Створюємо 2-гу таблицю стилів CSS (Ранок)

Відкрийте style-1.css та збережіть його як style-2.css. Замініть фонове зображення body bokeh_2.jpg на bokeh_4.jpg. Замініть main_image_1.jpg на main_image_4.jpg.


Крок 3: Створюємо 3-тю таблицю стилів CSS (День)

Скористайтеся style-1.css або style-2.css для створення файлу з 3-ю таблицею стилів – style-3.css. Замініть фонове зображення body на bokeh_3.jpg та головне зображення на main_image_5.jpg.


Крок 4: Створюємо 4-ту таблицю стилів CSS (Вечір)

Створіть файл style-4.css з 4-ю таблицею стилів. Замініть фонове зображення body на bokeh_1.jpg та головне зображення на main_image_8.jpg.

Для кроків з 2 по 4 сміло можете змінювати інші елементи, наприклад: колір шрифту або границі зображень. Замість зображень із початкових файлів ви можете використовувати власні для створення ваших власних стилів CSS.


Крок 5: Завантажуємо jQuery та jQuery UI

Щоб показати вам, як скрипт PHP негайно змінює безліч таблиць стилів, для стильового оформлення області сторінки з вкладками використовуються jQuery Themeroller Themes.

Перейдіть на сторінку завантаження jQuery UI та завантажте теми "Flick" та "Start".

Далі перейдіть на офіційний веб-сайт jQuery та завантажте jQuery.


Крок 6: Розмітка HTML-документа

Створіть файл PHP з наступним кодом:


Крок 7: Код PHP для перемикача таблиці стилів CSS

Створіть файл PHP з наступним кодом:


Аналіз розмітки HTML-документа

Використання директиви include PHP для підключення скрипта для створення посилань rel="stylesheet"

Скрипт для переключення таблиць стилів CSS буде міститися у файлі PHP, що додається (* файл, що додається до проекту за допомогою директиви include; файл з початковим текстом, який може перед трансляцією  за допомогою include додаватися (вбудовуватися) препроцесором до тексту головної програми), під назвою stylesheets.php.

Завдяки директиві include підключається та оброблюється вказаний файл. Підключення додаваного файлу stylesheets.php відбувається за допомогою цього коду:

Оскільки ми використовуємо скрипт PHP для зміни таблиць стилів CSS у зазначений час, то посилання rel="stylesheet" буде згенеровано скриптом PHP.

Розташовуємо посилання на бібліотеки jQuery та jQuery UI

Нам необхідно впевнитися, що на сторінці є посилання на бібліотеки jQuery та jQuery UI.

Між тегами head веб-сторінки було додано наступний код:

Ініціалізуємо jQuery UI Tabs

У цьому посібнику використовується jQuery UI Tabs з налаштуваннями за налаштуванням. У наступному коді відбувається ініціалізація вкладок:

Контейнер Div для jQuery UI Tabs

(Кінцеві теги </div> для Wrapper та Content Container 1 показані у блоці коду з розміткою для jQuery UI Tabs)

Більшість віджетів jQuery UI налаштовано таким чином, що заповнюють 100% ширини області, куди їх поміщено.

Ширині контейнера div content_container_1 було задано фіксоване значення 650px в таблиці CSS таким чином, що область сторінки з вкладками не заповнює всієї ширини екрана.

Розмітка для головного зображення

Для того щоб головне зображення також змінювалося у встановлений час за допомогою скрипта PHP, воно повинно бути додано до сторінки у вигляді фонового зображення елемента в таблиці CSS.

Так що замість додавання зображення  до сторінки за допомогою подібного коду:

його було додано до сторінки у вигляді фонового зображення <div> в таблиці CSS з класом "main_image" наступним чином:

Розмітка для jQuery UI Tabs

У нижчезазначеному коді додається область сторінки з вкладками, що працює на основі jQuery UI, стильове оформлення якої задано за допомогою jQuery Themeroller Themes.

«Вкладки» меню створюються за допомогою невпорядкованого списку. Розділи з контентом створюються за допомогою тегів <div>, у яких задано унікальні ID, що відповідають якорям тегів <li></li>.

Наприклад: <div id="tabs-1"> відповідає <a href="#tabs-1">.


Аналіз коду PHP для перемикача таблиць стилів CSS

Встановлюємо часовий пояс за налаштуванням:

За допомогою date_default_timezone_set встановлюємо часовий пояс за налаштуванням, який використовується всіма функціями в скрипті, що працюють з датою/часом.

Якщо в скрипті не міститься date_default_timezone_set, то для всіх функцій в скрипті, що працюють з датою/часом, буде використовуватися час веб-сервера, на якому розміщується сайт.

Звертайтеся, будь ласка, до List of Supported Timezones (* Список підтримуваних часових поясів) для знаходження відповідного вашому місцезнаходженню часового поясу.

У нових версіях PHP серед функціональних можливостей date_default_timezone_set є й "Daylight Savings Times" (* декретний час – поясний час, переведений на 1 годину вперед для повнішого використання населенням світлової частини доби). У деяких пізніших версіях PHP "Daylight Savings Times" не враховується.

Встановлюємо час у 24-годинному форматі запису

date("H") встановлює локальний час/дату у 24-годинному форматі, при якому спереду розташовуються нулі. Перейдіть за посиланням для перегляду інформації про 24-годинний формат запису часу.


Аналіз речень з операторами If, Elseif, Else

Я поділив на частини решту коду PHP, щоб показати відрядково, як буде функціонувати скрипт PHP.  У коді використовуються речення з декількома операторами, включаючи:

if

Якщо 00 (північ) Менше або дорівнює поточному часу І поточний час Менше 07 (7:00am (* ante meridiem – до полудня)), То в скрипті будуть використані таблиці стилів CSS style-1.css та flick.

elseif

Якщо 07 (7:00am) Менше або дорівнює поточному часу І поточний час Менше 12 (12:00pm (* post meridiem – после полудня)), То в скрипті будуть використані таблиці стилів CSS style-2.css та start.

elseif

Якщо 12 (12:00pm) Менше або дорівнює поточному часу І поточний час Менше 18 (6:00pm), То в скрипті будуть використані таблиці стилів CSS style-3.css та start.

else

Якщо Жодна з вищезазначених умов не виконується, То в скрипті будуть використані таблиці стилів CSS style-4.css та flick.


Завершення

За допомогою CSS ви можете створювати безліч різних стилів для своїх веб-сторінок. Завдяки PHP ви можете застосовувати ці стилі динамічно до вашого веб-сайту. Додайте трохи jQuery UI, і ваші веб-сторінки буде цікаво не тільки вам створювати, але й споглядати вашим користувачам!

Якщо у вас є якісь запитання відносно цього посібника, то, будь ласка, задавайте їх нижче! Дуже дякую за проявлену зацікавленість!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.