Как подключить стили css в php
Перейти к содержимому

Как подключить стили css в php

  • автор:

wp_enqueue_style() – подключение стилей CSS

Рекомендуемый метод подключения CSS-стилей в WordPress. Так же, как и wp_enqueue_script(), эта функция ставит файл в очередь на вывод. После этого выводит его в HTML либо между тегами , либо в футере сайта.

Если хотите узнать больше про правильное подключение CSS стилей WordPress, то могу порекомендовать вам мой видеоурок.

Стили выводятся в футере (перед ) только в том случае, если они были поставлены в очередь на вывод где-то в середине HTML-документа.

wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' )

Параметры функции wp_enqueue_style()

$handle (строка) рабочее название, идентификатор таблицы стилей, которую нужно подключить (поставить в очередь) $src (строка|логическое) абсолютный URL таблицы стилей на сайте. Этот параметр (а также все последующие) нужен только в том случае, если WordPress ещё не знает про таблицу стилей с указанным идентификатором, то есть, если она уже зарегистрирована при помощи wp_register_style(), то этот и последующие параметры отпадают. $deps (массив) зависимости от других CSS-файлов, то есть, если есть какие-то стили, которые нужно загрузить перед нашим подключаемым файлом, то нужно перечислить их идентификаторы в массиве $ver (строка|логическое) версия файла. По умолчанию — текущая версия WordPress. Можно указать null , тогда версия не будет указана вообще. Параметр нужен для того, чтобы посетитель получал актуальную версию файла, а не из кэша. Подробнее про параметр. $media (строка) атрибут media таблицы стилей. По сути означает — для каких устройств предназначен данный файл стилей, например all — для всех, print — для печати и т.д.

Почему CSS не подключается к HTML?

Хочу тем не менее также ответить вам и на этот вопрос. И правда, почему CSS-файл нельзя подключить напрямую к HTML, например вставить тег ?

Итак, вот почему – если вы подключите CSS напрямую в HTML, то с ним уже ничего нельзя будет сделать, по сути он будет захардкоден в вашей теме WordPress. Его нельзя будет отключить, плагины оптимизации не смогут его сжать или объединить с другими CSS-файлами, невозможно будет поменять порядок подключения с другими стилями.

Пример 1. Как подключить стили

Стили также можно подключать через хуки wp_enqueue_scripts (сайт) и admin_enqueue_scripts (админка WordPress).

add_action( 'wp_enqueue_scripts', 'true_stili_frontend', 25 ); function true_stili_frontend() { wp_enqueue_style( 'true_stili', get_stylesheet_directory_uri() . '/assets/true_stili.css' ); }

Теперь сделаем так, чтобы файл подключался только в админке:

add_action( 'admin_enqueue_scripts', 'true_stili_backend', 25 ); function true_stili_backend() { wp_enqueue_style( 'true_stili', get_stylesheet_directory_uri() . '/assets/true_stili.css' ); }

А что, если файл с указанным рабочим названием уже зарегистрирован через wp_register_style()? Тогда подключить его будет ещё проще.

add_action( 'wp_enqueue_scripts', 'true_stili_frontend', 25 ); function true_stili_frontend() { wp_enqueue_style( 'true_stili' ); }

Подробнее про кэширование и параметр $ver

Хотел бы чуть подробнее рассказать про варианты использования параметра $ver .

использование параметра $ver в функции wp_enqueue_style() в WordPress

  • По умолчанию параметр принимает значение false , при этом значении параметра в качестве версии ?ver= файла стилей будет использоваться текущая версия WordPress, поэтому я бы не рекомендовал оставлять это значение параметра.
  • Мы можем полностью отказаться от этого query string, если укажем значение параметра null , тогда ?ver= не будет добавляться в конце URL файла стилей.
  • Я иногда использую time() на своих тестовых сайтах, т.к. этот параметр возвращает текущее значение текущего UNIX-времени в секунду и значит, каждую секунду значение другое. Но это вариант для ленивых и только для тестовых сайтов, потому что полностью скипается любое кэширование.
  • Лучший вариант – filemtime() , которая позволяет получить значение UNIX-времени последнего обновления файла! Пример ниже.
wp_enqueue_style( 'true_stili', get_stylesheet_directory_uri() . '/assets/true_stili.css', array(), filemtime( get_stylesheet_directory() . '/assets/true_stili.css' ) );

Также можете почитать подробнее про функции get_stylesheet_directory_uri() и get_stylesheet_directory(), потому что у них есть одно принципиально важное отличие.

Если хотите узнать больше про правильное подключение стилей в WordPress, то могу порекомендовать вам мой видеоурок.

Пример 2. CSS для отдельной страницы

Если вы хотите подключить какой-то один определённый CSS-файл для какой-либо определённой страницы сайта, то можете воспользоваться любыми условными тегами WordPress.

Скажу вам, что такое бывает нужно не очень часто, только в том случае, если одна единственная определённая страница сайта содержит огромное количество стилей, которые не используются где-либо ещё.

Например вы хотите подключить отдельный файл для страницы контактов:

add_action( 'wp_enqueue_scripts', 'true_stili_contacts', 25 ); function true_stili_contacts() { if( is_page( 'contacts' ) ) { wp_enqueue_style( 'true_stili', . ); } }

Пример 3. CSS специально для настроек плагина

В данном случае очевидно, что файл с таблицей стилей нужно использовать только на одной-единственной странице — странице настроек данного плагина. WordPress позволяет реализовать это при помощи специального хука.

Итак, предположим, у нас есть какой-то плагин, вставляем в него следующий код:

/* * Пример будет работать начиная с версии WordPress 2.6.3, */ add_action( 'admin_init', 'true_plugin_init' ); add_action( 'admin_menu', 'true_plugin_menu' ); function true_plugin_init() { /* * Сначала регистрируем стили * файл должен находиться в папке с выполняемым файлом плагина */ wp_register_style( 'trueplugin', plugins_url('true-plugin.css', __FILE__) ); } function true_plugin_menu() { /* * Создаем страницу настроек плагина, она будет находиться в разделе Параметры */ $page_suffix = add_submenu_page( 'options-general.php', 'True плагин', 'True плагин настройки', 'administrator', __FILE__, 'true_plugin_html' ); /* * Создаем хук, содержащий суффикс созданной страницы настроек $page_suffix */ add_action( 'admin_print_styles-' . $page_suffix, 'true_plugin_stili' ); } function true_plugin_stili() { /* * Ставим в очередь на вывод */ wp_enqueue_style( 'trueplugin' ); } function true_plugin_html() { /* * Собственно содержимое страницы настроек */ echo 'Это страница настроек'; }

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Как подключить стили css в php

Здесь могла бы быть ваша реклама

Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006
Откуда: Israel

Помог: 3 раз(а)

Секрет
Теперь, когда вы уже наверняка второпях отправили свой запрос,
я расскажу вам простой секрет, который сэкономит вам уйму ожиданий,
даже если первый ответ по теме последуем сразу же.

Само собой я знаю что ответят мне тут же, и если я посмотрю
на сообщения на форуме, то пойму что в общем то я и не ошибаюсь.
Но еще я точно замечу, что очень мало тем, в которых всего два ответа :
вопрос автора и еще два сообщение вида Ответ + Спасибо

После этого приходится начинать уточнять этим неграмотным что мне надо.
Они что, сами читать не умеют? А уточнять приходится.
И иногда пока они переварят то что я им скажу проходит и не одна ночь..

Уверен что если бы я им сказал что у меня есть
фиолетовый квадрат, и нужно превратить его в синий треугольник
и я пытался взять кисточку, макнуть в банку и поводить ей по квадрату
но почему то кисточка не принимала цвет краски в банке,
то на мой вопрос — где взять правильные банки мне бы ответили гораздо быстрее
предложив её открыть, а не тратить еще стольник на жестянку.

Поэтому с тех пор я строю свои вопросы по проверенной давным давно схеме:
Что есть
Что нужно получить
Как я пытался
Почему или что у меня не получилось.

На последок как оно происходит на форумах

Цитата:

Новичок: Подскажите пожалуста самый крепкий сорт дерева! Весь инет перерыл, поиском пользовался!
Старожил: Объясни, зачем тебе понадобилось дерево? Сейчас оно в строительстве практически не используется.
Новичок: Я небоскрёб собираюсь строить. Хочу узнать, из какого дерева делать перекрытия между этажами!
Старожил: Какое дерево? Ты вообще соображаешь, что говоришь?
Новичок: Чем мне нравиться этот форум — из двух ответов ниодного конкретного. Одни вопросы неподелу!
Старожил: Не нравится — тебя здесь никто не держит. Но если ты не соображаешь, что из дерева небоскрёбы не строят, то лучше бы тебе сначала школу закончить.
Новичок: Не знаите — лучше молчите! У меня дедушка в деревянном доме живёт! У НЕГО НИЧЕГО НЕ ЛОМАЕТСЯ.
Но у него дом из сосны, а я понимаю, что для небоскрёба нужно дерево прочнее! Поэтому и спрашиваю. А от вас нормального ответа недождёшся.
Прохожий: Самое крепкое дерево — дуб. Вот тебе технология вымачивания дуба в солёной воде, она придаёт дубу особую прочность:
Новичок: Спасибо, братан! То что нужно.

Отредактировано модератором: Uchkuma, 26 Апреля, 2011 — 10:21:12

Как правильно подключить css?

Author24 — интернет-сервис помощи студентам

Нужно подключить файл css. Есть файл index.php к которому обращается сервер, файл index.php перенаправляет на другие страницы html и php. Пробовал такую цепочку файл index.php перенаправляет на name.html в котором подключается файл css но не получилось. Все происходит на денвере. Нужно что-бы сначало выполнялся php код.

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как правильно подключить php файл?
Доброе утро. Подскажите пожалуйста. У меня есть сайт, и левый блок сайта left.php подключается.

Как правильно подключить стили и скрипты?
ПОМОГИТЕ — МОЙ ПЕРВЫЙ САЙТ 1- Есть сайт сделанный на WP — скопирован (например с САЙТНАWP.com) .

Как правильно подключить html-файл в php
Доброе время суток, форумчане. Прошу помочь, не могу найти как правильно подключить html-файл.

include require как подключить правильно файл
Проблема в следующем: Нужно подключить файл который находиться в другой директории. Имеем файл.

79 / 79 / 36
Регистрация: 28.02.2014
Сообщений: 400
ну css можно и в php подключить

link rel="stylesheet" href="css/main.css" type="text/css" />

Регистрация: 29.06.2014
Сообщений: 53

нет, у меня не получается на ошибки проверял 100 раз что только не пробовал. Подключалось только если сервер первым делом запрашивает файл html и в самом html файле я подключал, а через php никак.

Эксперт PHP

3839 / 3185 / 1340
Регистрация: 01.08.2012
Сообщений: 10,805

Что означает «перенаправляет»? Подключает с помощью include/require?

Попробуйте добавить в начало ссылки / т.е. /css/main.css.

Если не получится, откройте HTML код страницы в браузере, откройте файл css в новом окне и посмотрите, какой там путь. И сравните с путём к этому же файлу при открытии из файла php. Скиньте эти два пути и опишите иерархию ваших файлов и папок.

«не получилось» не означает «не работает», где-то вы допускаете ошибку.

Регистрация: 29.06.2014
Сообщений: 53

Вообщем есть файл index.php к нему обращается сервер и этот файл перенаправляет с помощью include на другие файлы html и php. Нужно что-бы в файле html был подключен css как это сделать ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
 header('Content-type: text/html; charset=utf-8'); include_once 'setting.php'; session_start(); $CONNECT = mysqli_connect(HOST, USER, PASS, DB); if ($_SERVER['REQUEST_URI'] == '/') { $Page = 'index'; $Module = 'index'; } else { $URL_Path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH); $URL_Parts = explode('/', trim($URL_Path, ' /')); $Page = array_shift($URL_Parts); $Module = array_shift($URL_Parts); if (!empty($Module)) { $Param = array(); for ($i = 0; $i  count($URL_Parts); $i++) { $Param[$URL_Parts[$i]] = $URL_Parts[++$i]; } } } if ($Page == 'index') include('/la.html'); else if ($Page == 'login') include('page/login.php'); else if ($Page == 'register') include('page/register.php'); else if ($Page == 'files') include('page/files.php'); ?> html> link rel="stylesheet" href="/css/main.css" type="text/css" /> body> body> html>
1 2 3 4 5 6 7 8 9 10 11
 html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8"> title>FG Portal/title> link rel="stylesheet" href="/css/main.css" type="text/css" /> /head> body> /body> /html>

Как подключить css в php?

У меня все получилось. Я могу тебе попробовать помочь, но без примера твоего кода я не смогу это сделать.

assets/css/style.php — у тебя у style расширение файла стоит php, а должно быть css, это же файл для стилей.

Так тоже не работает
Я все проверил никак не получается

 - это в index.php ______________________________________________________________________________________________ 

вот так я написал, но никак не могу подключить и в NETWORK говориться, что Status Code:
404 Not Found
так тоже не получается css и php
Также как и в html, только расширение файла будет .php
Ошибся где-то в коде, вот и неподключается css

Если папка assets лежит в корне проекта, нужно добавить слеш перед assets в ссылке к css файлу, потому что идет через веб-сервер, а не через файловую систему запуск: href >

Sign up or Log in to write an answer

  • Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.

Общие ссылки

  • Отзывы
  • Политика конфидециальности
  • Условия использования
  • Блог
  • Цена и оплата
  • Курсы и скринкасты
  • Сертификаты
  • Партнерская программа
  • Комьюнити

Наши курсы и скринкасты

  • HTML/CSS Advanced
  • Bootstrap 4
  • Vue JS
  • Linux, GIT and web-hosting
  • HTML and CSS
  • Modern Javascript
  • Javascript/jQuery
  • Codeigniter
  • Все курсы и скринкасты

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *