<MyRusakov.ru />

WordPress 4. Пример создания блога

WordPress 4. Пример создания блога

Видеокурс "WordPress 4. Пример создания блога" научит Вас создавать любые сайты на самой популярной CMS - WordPress.

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

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

Курс очень простой и проходится за один вечер, а знания останутся с Вами навсегда.

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

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

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