<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как подключить CSS, шрифт и скрипты на WordPress

Как подключить CSS, шрифт и скрипты на WordPress

Данная статья научит вас, как подключать стили, шрифты и скрипты к сайту. Дело в том, что верстальщик отлично знает, что такие вещи подключаются в хедере сайта. В WordPress-е так нельзя делать, все подключения осуществляются через специальную функцию.

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

Подключение стилей к WordPress

По умолчанию в файле "функции" темы Underscores уже вставлена функция, которая подключает главный файл стилей нашей темы. В качестве первого параметра мы задаём название - my_theme-style, которое будет использоваться для файла. В качестве второго параметра мы задаём путь, функция get_... сгенерирует путь к главному файлу стилей. Обычно разработчики для своих стилей создают кастомные файлы, а не добавляют их в главный файл.

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

Добавим кастомный test.css. Подключать надо точно так же, как и глобальные стили. В качестве первого параметра передаём название блога + название стилей (my_theme_test). В качестве второго параметра задаём путь к этому файлу, прописываем функцию получения пути к директории, точку (оператор конкатенации, который возвращает строку, представляющую собой соединение левого и правого аргументов) и test.css.

wp_enqueue_style( 'my_theme_test', get_template_directory_uri().'/test.css');

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

Как подключить CSS, шрифт и скрипты на WordPress

Подключение скриптов

Имеется функция, которая отвечает за подключение JS скриптов. Создадим файл - test.js в папке js. В стартовой теме уже есть одно подключение JS, продублируем его и подставим вместо названий дефолтных параметров, своё название - my_theme-test и укажем локализацию test.js. URL мы не указываем жёстко, он должен определиться динамически.

wp_enqueue_script( 'my_theme-test', get_template_directory_uri() . '/js/test.js', array(), true );

передаются ещё 2 параметра:

array()- отвечает за очередность загружаемых скриптов.

true - все кастомные скрипты рекомендуется подгружать в футере, чтобы сайт быстрее открывался.

Посмотрим успешно ли подключился наш js файл, идём в исходный код и видим, что наш файл находится в футере.

Как подключить CSS, шрифт и скрипт на WordPress

Подключение шрифтов на WordPress (первый способ)

Разберём на примере Google Fonts, как подключить шрифты к WordPress. Мы выбрали шрифт - Pacifico и давайте подключим его самым простым способом.

Копируем код стандартного подключения, и вставляем в хедер, между тегами head.

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

или копируем код @IMPORT

<style> @import url('https://fonts.googleapis.com/css?family=Pacifico'); </style>

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

<link href="https://fonts.googleapis.com/css?family=Pacifico|Oswald" rel="stylesheet">

Второй способ

Подключается так же, как и стили.

wp_enqueue_style( 'googlefonts', 'https://fonts.googleapis.com/css?family=Pacifico:400,700&subset=cyrillic' );

На странице с исходным выводит ссылку:

<link rel='stylesheet' id='googlefonts-css' href='https://fonts.googleapis.com/css?family=Pacifico%3A400%2C700&subset=cyrillic&ver=4.9.6' type='text/css' media='all' />

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

font-family: 'Pacifico', cursive;

Если вы хотите пользоваться WordPress-ом на более высоком уровне, чем просто пользователь, то рекомендую получить базовые знания по PHP, пройдя видео-курс по PHP 7.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.