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

Правильное подключение скриптов и стилей в WordPress

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

Для этого нам нужен доступ к functions.php, потому что нам нужно добавить в него код для вызова стилей и скриптов. Мы НЕ будем добавлять приведенный ниже код в начало нашей веб-страницы:

Вместо этого вы должны войти в functions.php и добавить код, который выглядит так:

Давайте разберем этот код, чтобы вы могли не только использовать его, но и понять, как он работает.

Сначала мы объявляем функцию, написав «function», затем мы даем функции имя. В этом случае мы написали theme_name_scripts, и мы должны закончить это “()” без пробела. Вы можете изменить это название, но вы должны понимать, что оно используется дважды в коде выше, в начале и в конце кода, поэтому не забудьте изменить его в обоих местах. Затем мы открываем функцию с набором фигурных скобок » < >», а внутри добавляем остальную часть кода для запуска.

wp_enqueue_style, если это таблица стилей или wp_enqueue_script, если это файл сценария.

Оба они заканчиваются на «()», как и первая функция, которую мы назвали. На этот раз нам нужно добавить несколько строк внутри “()”.

Первое, что нужно добавить — это имя, можете назвать так, как вам удобно. Однако есть некоторые стандартные имена, используемые WordPress для вызова стилей и скриптов, включенных в их загрузку, поэтому нужно убедиться, что имя, которое вы используете, очень специфично для вас или вашего проекта. Не забудьте добавить запятую «,» после имени и перед объявлением пути. Мы назвали стиль или функцию скрипта, давайте направим его в правильном направлении.

Добавьте Основную Таблицу Стилей

В WordPress у вас должна быть основная таблица стилей в корне вашей темы, а не внутри другой папки, такой как css/style.css. Таким образом, в WordPress есть быстрая функция для вызова вашей основной таблицы стилей, и это get_stylesheet_uri().

Добавление Дополнительных Таблиц Стилей

Теперь вам нужно добавить другие таблицы стилей, которые могут находиться в другой папке. В WordPress есть встроенная функция, которая позволяет нам быстро добраться до корня темы, которую мы построили, и это get_template_directory_uri(). Затем мы должны добавить папку, а затем имя файла в эту функцию. Мы должны использовать то, что называется конкатенацией. Конкатенация — это просто громкое слово для добавления функций и строк.

После функции get_template_directory_uri () нам нужно добавить пробел, а затем точку «.», затем еще один пробел, за которым следует набор одинарных кавычек». Внутри одинарных кавычек мы добавляем косую черту, за которой следует путь к нужной таблице стилей. Вот так:

Добавить Файлы Скриптов

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

Использование CDN

Я настоятельно рекомендую использовать CDN для вызова любых, если не всех ваших скриптов и стилей. CDN означает сеть доставки контента и относится к быстрому способу получения контента конечному пользователю. Если вы знаете, что вам понадобится большая библиотека js, например Twitter Bootstrap, вы можете вытащить ее из CDN вместо того, чтобы вытаскивать ее из файла на вашем сервере. Зачем это делать? Когда контент передается с CDN, он на самом деле поступает с разных серверов и, следовательно, быстрее загружается в веб-браузер ваших читателей, особенно если он уже закеширован. Это очень полезно при создании мобильных дружественных веб-сайтов, потому что веб-сайт будет загружаться быстрее.

Пример

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

Внутри «()» мы должны описать, что мы делаем. В этом случае мы запрашиваем стили и скрипты, поэтому мы добавляем wp_enqueue_scripts в одинарных кавычках, за которыми следует запятая, а затем имя, которое мы дали всей нашей функции.

Если вы хотите, чтобы ваш скрипт загружался в подвале сайта, используйте значение true в конце строки. Значение false – это значение по умолчанию, при котором скрипт загружается в секции head.

Например

array(‘jquery’), — используется, если подключаемый скрипт зависит от какой-либо библиотеки, в данном случае jquery и должен подключаться только после загрузки данной библиотеки.

‘20151215’ – необязательный параметр, который означает версию файла.

Для большинства пользователей WordPress — это черный ящик. Вы помещаете Read more

Понимание того, как использовать функцию wp_query может поднять ваши навыки Read more

В моей последней статье я писала о создании пользовательских типов Read more

Эта статья научит вас, как реализовать пользовательские типы записей WordPress. Read more

functions.php файл шаблона функций в WordPress действительно является двигателем вашей Read more

Сегодня мы поговорим о еще трех файлах, которые, если их Read more

Источник

Как подключить файлы со стилями и скриптами к теме wordpress

Привет друзья. На этот раз хочу поделиться тем, как подключить собственные стили и скрипты к теме wordpress. Бывает, так что хочется расширить возможности своей темы, и добавить к ней чего то, что изначально не было предусмотрено её разработчиками. К счастью вордпресс – это очень гибкая платформа, и к ней можно подключить jquery плагины, кастомные стили css и всё что вам угодно.

Я нашёл два простых способа как подключить собственные стили и скрипты к wordpress. Первый способ состоит в том что нам нужно зарегистрировать и подключить скрипты по всем правилам в файле functions.php. Второй, подключить их с помощью плагина zia3-css-js. Если вы не захотите возиться с файлом functions.php, то используйте второй способ. Но так вам придется ставить дополнительный плагин. Если же вы уверены в себе, то просто внесите несколько строк кода в functions.php, ведь здесь нет ничего сложного.

Правильный путь подключения файлов css и js к wordpress

Правильный способ подключения стилей и скриптов состоит в том чтобы подключить их через систему регистрации wordpress в файле functions.php. Для этого используется специальная функция для регистрации и подключения стилей и скриптов. Называется она wp_register_style().

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

На примере видно что я подключил файл со стилями библиотеки bootstrap и файл custom.css с собственными стилями. Вы можете скопировать этот код, вставить в свой файл functions.php и изменить названия файлов и пути к ним. Так же обязательно измените идентификаторы файлов со стилями. Идентификатор это каждый первый параметр этой функции, например: wp_register_style (‘bootstrap‘). Он должен быть уникальным для каждого файла со стилями иначе wordpress его не увидит. Проверить подключение можно нажав на ctrl+U и посмотреть исходный код страницы. На скриншоте ниже видно что файлы успешно подключены.

Таким же образом подключаю второй файл со скриптами, тольк в этом случае сделаю это с помощью функции
wp_register_script() :

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

Подключаем стили и скрипты дублируя код темы

Также можно подключать файлы с собственными стилями css и скриптами js присоединив их рядом с другими файлами темы. Для этого в своём файле functions.php найдите приблизительно такой комментарий:

* Enqueue scripts and styles.

Здесь написано, что это порядок на загрузку стилей и скриптов вашей темы. Под комментарием идут подключаемые скрипты. Если вы хотите подключить свой файл css со стилями, просто продублируйте код темы и переделывайте его прописав в нём название своих файлов. Например, у меня есть такой код подключающий иконочные шрифты font-awesome:

Здесь видно, что данный код подключает стили со шрифтами font-awesome к моей теме. Они лежат в папке fonts. Переделываем его так:

Здесь мы видим, что был подключён файл custom.css, который лежит в папке css.

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

Подключаем файлы с скриптами и стилями к теме wordpress с помощью плагина zia3-css-js

Функционал данного плагина позволяет подключить файлы глобально ко всему сайту или только к отдельной странице, или записи блога. Загрузите файлы со стилями и скриптами в соответствующие папки вашей темы wordpress. Вам не нужно ничего прописывать в functions.php, просто установите плагин и активируйте его. Далее идите на любую страницу и прокрутите ее вниз. Там вы увидите список не подключенных и подключенных файлов. Поставьте галочки в чекбоксы напротив файлов, которые следует подключить. Если стили нужно вставить только для какой-то одной страницы, то вставьте их в соответствующее поле. Для ccs будет одно поле, а для java script другое. Обновите страницу

Заключение

Иногда ваши собственные стили могут привести к конфликту со стилями темы, и вёрстка темы может «съехать» и некоторые стили темы переопределиться. Чтобы восстановить всё к первоначальному виду нужно понять какие стили повлияли на вёрстку и изменить порядок подключаемых файлов. Следует помнить, что стили подключаемые в коде ниже имеют высший приоритет и могут переопределить стили темы. Если такое произошло, то поднимите их выше в коде и будет все ок.

Если вам помогла эта статья подключить собственные стили к вордпресс, то сохраните пост на стене и оставьте свои комментарии. Всем удачи!

Источник

Как подключить стили WordPress

Оформление сайта на WordPress осуществляется с помощью стилей. Существует несколько вариантов подключения файла(ов) со стилями к HTML документу. В WordPress самым «правильным» способом (на момент написания статьи) является подключение в файле functions.php. Это решение используется в темах поставляемых вместе с WordPress по-умолчанию, например Twenty Fifteen.

Стили Вордпресс по-умолчанию

Для меня остается загадкой, почему обязательный для любой темы WordPress файл стилей style.css не подключается к этой самой теме (шаблону) автоматически. И необходимо прописать подключение файла таблицы CSS Вордпресс вручную.

В этой статье я расскажу как правильно в WordPress подключить CSS стили.

Таблица стилей WordPress

Для того, чтобы ваша тема WordPress использовала стили оформления из файла style.css необходимо, чтобы в файле functions.php вашего шаблона присутствовали следующие строки:

Дополнительные CSS WordPress

Если вам необходимо подключить к теме несколько файлов со стилями, например вы используете сброс CSS стилей в файле reset.css, то тогда необходимый код в файле functions.php будет выглядеть так:

Пример приведен для случая, когда файл reset.css лежит в корне вашей темы рядом с файлом style.css.

Устаревшие методы подключения файла CSS стилей

Раньше файл стилей в WordPress можно было подключить к теме добавив следующий код (пример для HTML5) в секцию HEAD или перед закрывающим тегом BODY:

Но теперь этот способ считается устаревшим.

Полезные ссылки

При написании статьи были использованы следующие источники:

Источник

Подключение CSS в WordPress

В этом руководстве мы будем говорить о произвольных стилях CSS в WordPress. Рассмотрим:

К концу вы будете знать всё о добавлении произвольных стилей CSS в WordPress. Это поможет настроить определённые элементы и сделать ваш сайт более привлекательным или более удобным. Так что давайте приступать к работе!

Вариант 1 — Подключение CSS в WordPress через плагин

Самый просто способ подключения произвольных стилей в CSS в WordPress — это применение плагинов. И существует множество вариантов. Давайте посмотрим на самые популярные из них и на их работу. Все инструменты, которые мы используем в этом руководстве могут быть легко установлены в разделе Плагины › Добавить новый в админ консоли.

Плагин Simple Custom CSS

Это один из самых популярных плагинов CSS WordPress среди сообщества. Он позволяет вам описать свои стили и переопределять стили CSS текущей темы. Значения, которые вы установили здесь, будут сохраняться, даже если вы измените тему.

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

WP Add Custom CSS

Еще один отличный инструмент, который вы можете использовать для создания пользовательского CSS в WordPress.

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

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

Site Origin CSS

Удобный, интерактивный инструмент для добавления пользовательских стилей CSS в WordPress.После установки инструмент будет доступен в разделе Внешний вид › Пользовательский CSS.Этот плагин имеет удобный интерфейс для редактирования, где вы можете выбрать любую часть своего сайта и изменить его с помощью встроенных инструментов или путем добавления кода вручную.

Simple Custom CSS and JS

Last, but not least, you may also try this tool. It features a few extra functionalities compared to earlier entries. One of them is the ability to add custom JavaScript entries.

Наконец, но не в последнюю очередь, вы также можете попробовать этот инструмент. Он имеет несколько дополнительных функций по сравнению с предыдущими записями. Одна из них – возможность добавлять свой код JavaScript.

Как только плагин установлен, он появится в отдельном разделе в вашей админ консоли. Там вы сможете создавать собственные стили CSS аналогично тому, как вы создаёте записи в WordPress.

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

Вариант 2 — Добавление Custom CSS WordPress через настройщик темы

Вы можете легко добавить произвольный CSS в WordPress, если версия вашей CMS 4.7 и выше, так как она включает встроенный инструмент в настройке темы. Чтобы использовать его, перейдите в раздел Внешний вид › Настроить в админ консоли. Прокрутите вниз до раздела Дополнительные стили.
Для вас будет открыт встроенный инструмент, который позволит вам добавить любой код CSS. Он прост в использовании и позволяет просматривать как мобильные, так и планшетные версии вашего сайта, что очень ценно, учитывая, насколько важна мобильность в настоящее время.
Поздравления! Теперь вы знаете, как применять пользовательский CSS в WordPress без каких-либо плагинов.

Вариант 3 — Добавление стилей Custom CSS WordPress, используя дочернюю тему

Все приведенные выше примеры показали вам, как добавить свой собственный CSS в уже живой сайт (запущенный онлайн) на WordPress. Однако есть ситуации, когда вам нужно сначала проверить это. Возможно, вы ещё не знаете точно, что хотите сделать, или не хотите рисковать своим сайтом. Чтобы этого не произошло, мы рекомендуем создать дочернюю тему WordPress. Это позволит вам развязать своё воображение и попробовать различные комбинации CSS. И самое главное, ваш живой сайт при этом никак не пострадает!

Разрешение общих вопросов, связанных с пользовательскими стилями в WordPress

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

Изменения не появляются

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

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

И наконец, некоторые хостинг-провайдеры предлагают встроенные инструменты кэширования, чтобы улучшить работу вашего сайта на WordPress. Мы делаем это и на Hostinger. Наши встроенные плагины для WordPress могут быть отключены или очищены через раздел Плагины › Установленные › Must-Use.

Ошибки в синтаксисе CSS

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

Слишком много вариантов

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

Отсутствие идей

Хотя это не проблема, очень часто самая сложная часть – это выяснить, какие стили CSS вы хотите применить в WordPress. Это может вызвать огромную головную боль, поскольку вы должны учитывать много вещей. Если это ваша ситуация, вот несколько ресурсов, которые могут помочь вам почерпнуть свежие идеи:

Заключительное слово

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

Если вы нашли это руководство полезным, не стесняйтесь делиться им на Facebook, Twitter или в других социальных сетях. И, наконец, если у вас есть какие-либо советы, хитрости или идеи, которыми вы хотите поделиться, мы с нетерпением ждём их в комментариях ниже!

Источник

Как подключить CSS файл к WordPress

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

Для начала приведу основные способы подключения СSS к HTML файлу. То-есть сначала рассмотрим обычное, стандартное подключение стилей к сайту, это пригодится в дальнейшем.

Чтобы подключить CSS файл к обычной HTML странице нужно:

Первый способ подключения CSS к HTML странице

прописать следующий код:

Тут все довольно просто, css — это папка, куда помещен файл стилей, reset.css — сам подключаемый файл.

Или так, с указанием полного адреса URL нахождения стилевого файла:

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

Второй способ подключения CSS к HTML странице

Для этого нужно в самом начале style.css (см. название своего файла) прописать следующий код:

Или для стороннего файла стилей, с указанием полного адреса:

Как видно из примера, в код подключения просто вставляется ссылка на сторонний ресурс.

Из личного опыта

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

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

Как подключить CSS файл к WordPress

Подключать файлы CSS к WordPress можно и вышепреведенными способами, но правильнее будет последовать следующим примерам.

Первый способ подключить CSS файл к WordPress

Открываем файл header.php и сразу перед закрывающим тегом нужно прописать такой код:

Но самым правильным способом считается подключение CSS файлов к сайту на WordPress является нижеприведенный пример.

Регистрация CSS файлов в WordPress

Добавляем в файл functions.php этот код:

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

function my_style_load() — my_style_load — название функции, можете придумать свое, пишется без пробелов в нижнем регистре букв и без знака — (тире). Обратите внимание, что встречается оно в коде два раза.

$theme_uri = get_template_directory_uri(); — get_template_directory_uri(); значит, что подключаемый файл должен обязательно находится внутри папки вашей темы, в директории шаблона.

/css/my-style.css — это как можно догадаться, путь к папке и название подключаемого CSS файла.

Вот и все, стоит потратить 5-10 минут и немного разобраться просто что-где прописывать и ваши стили CSS не будут загружаться по два раза.

Если вы уверены, что к сайту не подключен подобный CSS файл, то для подключения подойдут все способы указанные в статье. Выбирайте какой нравится!

Возможно вам будет интересно

— Как вам статья «Как на WordPress подключить CSS файл?» Если что, пишите.

Лучший способ отблагодарить автора

Похожие по Тегам статьи

WordPress может использоваться для создания широкого спектра веб-сайтов. Вы можете создать портфолио сайты, новостные…

Сайдбар — часть практически любого сайта, размещается обычно слева, справа от зоны контента, либо…

В данной статье мы разберемся, что такое дочерний шаблон WordPress, для чего он нужен…

Источник