<MyRusakov.ru />

Фреймворк Yii 2.0 с нуля. Пример создания сайта

Фреймворк Yii 2.0 с нуля. Пример создания сайта

Видеокурс "Фреймворк Yii 2.0 с нуля. Пример создания сайта" обучит Вас созданию профессиональных сайтов с использованием фреймворка Yii. В курсе есть 2 раздела: теоретический и практический. В теоретическом разделе будут разобраны возможности фреймворка Yii с примерами их использования, а в практической части будет создан сайт Blog.MyRusakov.ru с помощью полученных знаний из теоретического раздела.

Так же почти ко всем урокам идут упражнения для закрепления материала из урока на практике.

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

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

Подписавшись по 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):

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