Как добавить версию css

Как обновить версию style.css?

Что за параметр ver ?? Как его обновить до версии, которая подгрузит актуальную версию style.css? Ну или как вообще убрать дописку этого параметра?
На сайте нет никаких плагинов кеширования.

• Вопрос задан более трёх лет назад
• 3737 просмотров

Комментировать
Решения вопроса 1

Денис Янчевский @deniscopro Куратор тега WordPress
WordPress-разработчик, denisco.pro

Попробуйте заменить строку
Version: 3.1.0.1553430030
на
Version: 3.1.0.1553430031

Файлы кешируются в браузере. Изменение версии помогает изменить ссылку на файл и заставить браузер загрузить новую версию файла с сайта.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ответы на вопрос 2

В хроме: Ctrl + F5 сбросит кеш.
Версию задают, как уже выше сказали, чтобы браузер загружал новую версию css.
На версию можно не обращать внимание, это тоже самое, что и просто удалить версию, эффект тот же. Версия задается в functions.php, предположительно в строке вида:

wp_enqueue_style( 'main-style', get_stylesheet_uri(), array(), '3.1.0.1553430030', true );

удалите последние 3 параметра до:

wp_enqueue_style( 'main-style', get_stylesheet_uri());

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

Верстальщик

в functions.php задаётся этот параметр, посмотрите место, где этот файл стилей подключается, и там есть параметр использовать версию или нет

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• WordPress

WordPress ACF, как получить в шаблоне ID самого повторителя (repeater), а также ID каждого из его полей (row) в цикле?

• 1 подписчик
• 44 минуты назад
• 5 просмотров

Подключения файла css к php

PHP генерирует HTML страничку и уже ее отсылает пользователю. PHP не может использовать сами css классы, так что нужно добавить тег link что бы сгенерированная HTML страничка могла ссылаться на стили и скачать их уже у пользователя по ссылке.

Что бы добавить этот тег достаточно вывести его с помощью echo :

echo ""; 

Отслеживать
ответ дан 3 июл 2017 в 20:10
1,810 1 1 золотой знак 19 19 серебряных знаков 37 37 бронзовых знаков

@pavel1787mego я не успел исправить, там были повсюду двойные кавычки и PHP думал что это PHP код между ними, вместо выводимого текста. Теперь должго работать.

Как добавить версию css

Как следует из названия, я не слишком уверен, как изменить версию файла .css в моей теме. На данный момент версия .css выглядит так:

Есть ли скрипт, который мне нужно запустить — где мне искать версию 4.6.2, как указано выше?

Четвертый аргумент $ver for wp_enqueue_style() позволяет вам установить версию:

$ ver (string | bool | null) (Необязательно) Строка, указывающая номер версии таблицы стилей, если он есть, который добавляется к URL-адресу в виде строки запроса в целях очистки кэша. Если для версии установлено значение false, автоматически добавляется номер версии, равный текущей установленной версии WordPress. Если установлено значение null, версия не добавляется. Значение по умолчанию: false

В основном wp_enqueue_style() функции используют тему внутри файла functions.php для добавления таблицы стилей в заголовок. Вот как узнать, делает ли ваша тема то же самое.

Откройте ваш wp-content/themes/YOUR_THEME_NAME/functions.php файл и найдите строку, которая добавляет таблицу стилей, например:

Вы можете искать идентификатор (кроме -css части) . если идентификатор: main_style-css ищите только main-style в вашем файле functions.php, и вы, вероятно, должны найти строку кода, которую вы искали.

Теперь, когда вы нашли код и знаете, что ваша тема добавляет эту таблицу стилей с помощью wp_enqueue_style() файла functions.php. Вам необходимо обновить этот код для версии.

Как вы можете видеть, этот код получает время последнего изменения файла style.css с помощью filemtime() функции PHP, а также преобразует время в метку времени с помощью time() функции PHP, чтобы все было чисто.

Если вы не хотите, чтобы версия динамически изменялась каждый раз, вы можете просто сделать это:

Это в значительной степени это. Мир!

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

$ ver (string | bool | null) (Необязательно) Строка, указывающая номер версии таблицы стилей, если он есть, который добавляется к URL-адресу в виде строки запроса для очистки кеша. Если для версии установлено значение false, автоматически добавляется номер версии, равный текущей установленной версии WordPress. Если установлено значение null, версия не добавляется. Значение по умолчанию: false

Но это очень загадочно, как это на самом деле работает. Я не мог получить номер версии wp_enqueue_style для запуска параметра запроса, как ?ver=1.2.3 в моей таблице стилей. Однако, установив его в true, можно объявить версию cache bust таблицы стилей в таблице стилей. (читать дальше)

как добавить версию style.css в wordpress

Как добавить версию style.css в WordPress, как показано ниже, я могу сделать в Joomla.

Я знаю, что style.css будет загружаться динамически. пожалуйста, помогите мне, как это сделать.

6 ответов

Номер версии — это параметр wp_enqueue_style()

В соответствии с Codex, вот все параметры, которые принимают wp_enqueue_style .

Так, например, чтобы загрузить таблицу стилей с номером версии, вы должны сделать следующее:

Вы можете достичь этого, используя один из следующих способов:

1) Добавьте следующий тег в файл header.php темы.

2) Добавьте следующий код в файл functions.php темы.

Для получения дополнительной информации см. эту страницу .

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

Вы можете использовать filemtime () для этого. Вот как это сделать в дочернем стиле, который ссылается на parent_style

лучший способ загрузить css в тему wordpress — это следующий код в файле functions.php:

Это правильный способ загрузки стилей в вашу тему, а также лучший способ для постановки /тестирования, потому что каждое обновление будет доставлять обновленную версию стиля.

Если вы хотите избежать первой загрузки, вы можете использовать эту короткую версию и поместить следующую строку в свой файл header.php и получить тот же результат:

Добавьте это в functions.php

Добавьте это в верхний или нижний колонтитул -> AUTOVER ( ‘/JS /main.js’);

Это довольно прямой способ получить номер версии, вызвав функцию bloginfo($show) дважды. Сначала для таблицы стилей и, во-вторых, для номера версии.

Вот и все. Надеюсь, что это полезно или полезно. Вы можете просмотреть все доступные параметры и посмотреть, что вы можете выводить с помощью функции bloginfo() .

Игнорировать мой комментарий, так как @Ravs указал на мою ошибку в отношении параметра ‘versions’ для функции bloginfo (). Он действительно печатает номер версии WordPress.

Принуждаем браузеры загружать свежие версии CSS и JS в WordPress

Современные браузеры кешируют большинство внешних аспектов сайта, они кешируют все изображения и даже таблицы стилей и файлы javascript вашего сайта. Во время редизайна сайта, когда вы будете изменять файлы HTML и CSS, и при тестировании этих изменений некоторые пользователи могу зайти на ваш сайт и просматривать страницу со старыми таблицами стилей, что, вероятно, приведет к тому, что дизайн отобразится «криво».

Просмотр новой страницы со старыми таблицами стилей непременно будет отображен некорректно.

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

Теперь же, когда вы проделаете изменения, то нужно будет всего лишь изменить версию вашей таблицы стилей на 2.

Это сработает для браузера, и тот будет подгружать последнюю версию, так как увидит для себя «новую» ссылку. Однако разработчику придется каждый раз запоминать это значение при внесении изменений в CSS, и значение легко можно забыть.

Существует еще один способ — использование функции time(), которая будет добавлять текущее время в конец ссылки на таблицу стилей.

Проблема заключается тут в том, что новая ссылка будет совершенно разной для каждой страницы, даже если сам stylesheet не изменился, и поэтому браузер будет каждый раз загружать новую версию, не смотря на то, что никаких изменений проделано не было.

Что же нужно сделать в таком случае? Нужно добавлять время последнего изменения в таблицу стилей, поместив его в ссылку на CSS файл с помощью функции filemtime().

Применяем технологию к WordPress

Для подключения таблицы стилей в WordPress вам нужно использовать функцию wp_enqueue_style(). Функция понимает определенный набор параметров. Четвертым параметром можно указать номер версии, который и будет добавлен к ссылке на ваш файл таблицы стилей.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

Вывод версии файла (CSS или JS)

Для чего это нужно?
Как мы знаем, на серверах можно настроить кеширование (чтобы статичный файлы типа картинок, JS или CSS кешировались в браузере клиента на N срок.
Но бывают ситуации когда разработчик активно администрирует сайт, и вносит правки в CSS или JS.

Представим ситуацию. На сервере настроено кеширование на 30 дней.

20 числа я зашел на сайт, браузер закешировал CSS шаблона.

24 числа разработчик внес измененеия в CSS.

29 числа я опять зашел на сайт, и у меня грузится старый CSS, не новый.

А ведь изменения были сделаны! Как быть?

Исправляется это подстановкой в УРЛ пути к css или JS, версии.

Везде пишут так:

А мы напишем вот так:

И “о ЧУДО”, я захожу 29 числа, и у меня грузится CSS Новой версии.
Так вот что бы автоматически уснанавливалась версия, надо писать так:

Вот эта функция filemtime, возвращает время последнего изменения файла на сервере. Все просто

P.S. На гениальность не претендую, просто решение которым я недавно начал пользоваться, возможно кому-то будет полезно

+2

2 Ответ от supleader 01-12-2016 18:59:41

Re: Вывод версии файла (CSS или JS)

Б****кс давно это использует) Можно даже без v=. Это первый лайфхак по функции filemtime — http://php.net/manual/ru/function.filemtime.php

Профессиональное создание сайтов любой сложности, аудит, продвижение, а также поддержка вашего интернет ресурса — web2life.ru

TIMEWEB > Всегда больше, чем просто хостинг для ImageCMS!

3 Ответ от absorber 01-12-2016 19:53:55 Отредактировано absorber (01-12-2016 19:54:27)

Re: Вывод версии файла (CSS или JS)

Б****кс давно это использует) Можно даже без v=.

Да, можно и без v=. Там хоть словами пиши)

4 Ответ от supleader 02-12-2016 14:09:35

Re: Вывод версии файла (CSS или JS)

Другой популярный коммерческий движок для интернет-магазинов

Профессиональное создание сайтов любой сложности, аудит, продвижение, а также поддержка вашего интернет ресурса — web2life.ru

TIMEWEB > Всегда больше, чем просто хостинг для ImageCMS!

5 Ответ от Sempai 23-11-2017 04:37:19

Re: Вывод версии файла (CSS или JS)

Для использования этой фичи в assetManager, идем по пути: /application/modules/CMSFactory/assetManager.php

Для стилей, в функции registerStyle, меняем следующую строку:

Для JS, в функции registerScript, меняем следующую строку:

После этих правок, стили подключенные через ->registerStyle(‘какойто_стиль’), как и JS скрипты, подключенные через
->registerScript(‘какойто_скрипт’), будут подгружаться всегда актуальные (по дате последних изменений).

Похожие публикации:

1. Как опустить footer в самый низ css
2. Как отключить кэширование css на сайте
3. Сколько учить html и css
4. Что выбрать arduino или raspberry

Знакомство с Bootstrap: установка и подходящие сценарии использования

Bootstrap — бесплатный HTML/CSS/JavaScript фреймворк для быстрого создания адаптивного дизайна сайта. У разработчиков к нему неоднозначное отношение. С одной стороны, Bootstrap позволяет с минимальными знаниями создавать интерфейсы, которые работают во всех популярных браузерах и не ломаются при изменении разрешения экрана. С другой стороны, фреймворк тащит в проект кучу ненужного кода, который увеличивает вес сборки.

Что нужно знать о Bootstrap перед началом работы

У меня отношение к Bootstrap нейтральное. Он отлично подходит для прототипирования. Если нужно быстро проверить какую-то гипотезу или показать пример заказчику, то сборка во фреймворке — оптимальный вариант. Если вы делаете индивидуальный дизайн, то проще верстать с нуля, а не пытаться перебрать все стили и скрипты в Bootstrap.

Про плюсы и минусы фреймворка вы можете почитать в этой статье . За 2 года ничего не изменилось. Bootstrap правда очень помогает сэкономить время и при этом создать приличный шаблон, но тащит кучу лишнего кода и слабо подходит для нестандартных проектов. Все недостатки Bootstrap можно устранить перебором его исходных файлов, но это занимает столько времени, что любой опытный разработчик выберет верстку макета с нуля.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Какую версию Bootstrap выбрать?

Последняя стабильная версия — 4.5.0. Ее и стоит использовать. Сетка в ней построена на Flexbox, это достаточно распространенная технология. Сервис Can I Use показывает , что верстка на флексах поддерживается всеми современными версиями браузеров. Частичная поддержка есть в Internet Explorer 10 и 11.

В третьей версии Bootstrap сетка построена на Float. Это устаревшая технология, которая не дает такой гибкости, как Flexbox. Зато на флоатах можно верстать для старых браузеров, вплоть до Internet Explorer 6. Если вашему проекту нужна такая поддержка (вряд ли), то используйте Bootstrap 3.4.1.

В июне 2020 года появилась новость о выпуске Bootstrap 5 alpha. Когда из нее сделают стабильную версию — непонятно. Но есть несколько моментов, о которых нужно знать всем, кто работает или собирается работать с фреймворком.

• В пятой версии не будет поддержки Internet Explorer.
• Из Bootstrap пропадет библиотека jQuery, с помощью которой в предыдущих версиях реализовывалось большинство возможностей JavaScript.

Радует, что фреймворк развивается. Разработчики обещают, что в пятой версии будет более быстрый JavaScript, меньшее количество зависимостей, улучшенные API. Но пока она находится на стадии альфа-тестирования, мы будем пользоваться последней стабильной сборкой — Bootstrap 4.5.1.

Читайте также

Как установить Bootstrap

Установить Bootstrap можно несколькими способами:

• Подключить компилированные файлы c помощью BootstrapCDN.
• Скачать скомпилированные файлы CSS и JS, подключить их к проекту через ссылки и верстать. Это отличный вариант для того, чтобы познакомиться с фреймворком.
• Скачать исходные файлы. Эта сборка удобнее для верстки, потому что позволяет гибко кастомизировать компоненты. Однако она требует использования дополнительных инструментов: компилятора Sass и постпроцессоров.
• Установить исходники через npm, yarn, RubyGems, Composer, NuGet.

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

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

Самый простой метод установки — подключение через BootstrapCDN. Вам не нужно скачивать файлы в проект. Просто создайте шаблон HTML и разместите внутри него ссылку на фреймворк.

Код может быть таким:

          
Привет, мир!  подключаем jQuery, Popper и Bootstrap JS, чтобы работали интерактивные компоненты -->     

Еще один простой способ установки — скачивание скомпилированных файлов. Внутри архива (его нужно распаковать) две папки: css и js.

В папке css — файлы стилей.

• bootstrap.css — стили фреймворка. Файл bootstrap.min.css — минифицированная версия.
• bootstrap-grid.css — сетка Bootstrap. Файл bootstrap-grid.min.css — минифицированная версия.
• bootstrap-reboot.css — нормализатор Bootstrap, устанавливающий базовые стили, чтобы во всех браузерах верстка смотрелась одинаково. Файл bootstrap-reboot .min. css — минифицированная версия.

В папке js — файлы для работы JavaScript.

• bootstrap.bundle.js — компилированные файлы JavaScript с Popper (плагином всплывающих подсказок). Файл bootstrap.bundle.min.js — минифицированая версия.
• bootstrap.js — компилированные файлы JavaScript без Popper. Файл bootstrap.js — минифицированая версия.

В четвертой версии Bootstrap для работы с JavaScript требуется библиотека JQuery. Она подключается перед Bootstrap JS.

Файл проекта index.html, к которому мы будем подключать Bootstrap, нужно разместить в той же директории, что и подключаемые файлы CSS и JavaScript.

Код шаблона может быть таким:

         
Привет, мир!      

Обратите внимание — я подключил не минифицированные файлы (с суффиксом min), а обычные. Так удобнее работать со стилями и скриптами. Однако на рабочем проекте нужно использовать минифицированные версии — они меньше весят и обеспечивают более быструю загрузку страницы. После редактирования стилей вам нужно самостоятельно минифицировать файл, заменив шаблонную версию.

Начинаем верстать с помощью Bootstrap

Для работы с Bootstrap нужен текстовый редактор и браузер, в котором вы будете видеть результат верстки с помощью фреймворка.

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

Допустим, я хочу быстро собрать слайдер. В примерах есть карусель. Внутри папки — два файла: index.html и carousel.css. Я открываю их в редакторе и исправляю так, как мне нужно.

Например, в моей карусели будет не три карточки, а пять. Для этого достаточно в файле index.html добавить еще два компонента.

Изначально карусель выглядит вот так.

Открываем файл index.html через любой текстовый редактор (я предпочитаю Visual Studio Code) и начинаем его править.

Находим в коде карусель. Вот она:

Добавляем в список с классом carousel-indicators два элемента с номерами 3 и 4. Они нужны для того, чтобы в карусели отображалось пять кнопок переключения между слайдами.

Далее находим блок слайда с классом carousel-item. Копируем все, что находится внутри, и вставляем в конце.

Дальше мы можем редактировать слайды так, как нравится: переписать заголовки и описания, добавить фоновое изображение или изменить цвет, настроить шрифт и отступы, изменить высоту контейнера. Все стили доступны в файле carousel.css.

Вся работа заняла пару минут. При этом компоненты имеют адаптивный дизайн. Вам не нужно настраивать даже медиа-запросы — они уже прописаны в исходных файлах Bootstrap. Такой подход позволяет значительно сэкономить время на верстку.

Конечно, редактирование шаблона — это не верстка. Но я могу взять код той же карусели и внедрить его в свой проект, к которому подключен Bootstrap. В этом главный плюс фреймворка.

Bootstrap содержит огромное количество готовых компонентов. Разработчику нужно только выбрать то, что необходимо для решения его задачи. По сути, это как работа с конструктором сайтов, только намного более гибким. Именно поэтому Bootstrap так хорош для прототипирования и быстрой верстки, но становится неудобным при разработке проектов с индивидуальным дизайном.