- ЧАСТЬ 1. Изучение WordPress. Теория разработки тем
ЦЕЛИ И ЗАДАЧИ БЛОКА
В данной части мы не будем создавать полноценную тему для WordPress. В плане дизайна это будет, скорее, некая схематичная тема. Главная задача данной части курса – это изучение именно теории создания тем для WordPress. И здесь мы познакомимся с понятием самой темы WordPress, узнаем о том, что такое файлы шаблонов, познакомимся с иерархией шаблонов, изучим основные функции и теги шаблонов, которые используются при создании тем WordPress. Особое внимание мы уделим такой теме, как кастомайзер, без которого не обходится ни одна тема для продажи. Благодаря кастомайзеру мы можем создать действительно качественную и удобную в управлении тему, которая придется по душе пользователю. Также пристальное внимание мы уделим локализации тем и вопросу мультиязычности. Без этого также невозможно создать тему для продажи. Ведь если вы создадите тему на русском языке, то ее вряд ли купит пользователь для англоязычного рынка, и наоборот – англоязычная тема вряд ли будет востребована на русскоязычном рынке. Но тема с локализацией, тема, подготовленная для перевода на любой язык – будет актуальна для любого рынка. А теперь перейдем к урокам. Их в данной части 26, общей продолжительностью более 7 часов.
- Урок 1. Введение. Организационные вопросы
В первом уроке курса мы пройдемся по организационным моментам, рассмотрим структуру курса, узнаем основные источники документации, остановимся на преимуществах движка по сравнению с его прямыми конкурентами, узнаем немного о WordPress. Также обозначим необходимое программное обеспечение (сервер, редактор).
- Урок 2. Установка WordPress
В этом уроке мы пройдем несложную процедуру установки WordPress. Весь процесс установки занимает всего несколько минут и справится с этим даже неискушенный пользователь, что является дополнительным плюсом в пользу этой замечательной CMS. Также из урока вы узнаете, откуда именно стоит скачивать дистрибутив WordPress для его дальнейшей установки.
Начиная с данного урока, мы приступим к непосредственному созданию тем и вопросу теории разработки тем для WordPress. В этом уроке мы создадим папку будущей темы и познакомимся с ключевыми файлами, без которых невозможно создание темы WP в принципе.
- Урок 4. Импорт тестовых данных
После установки WordPress в нашем распоряжении не так много тестовых данных: всего одна рубрика, одна запись в ней и одна страница. При разработке сайта нам зачастую понадобится больше материалов для тестирования. И чтобы не создавать их вручную, мы можем воспользоваться инструментом импорта демо-данных, который создаст для нас множество демонстрационных категорий, записей и страниц. Нам лишь останется сосредоточиться на разработке темы для сайта.
- Урок 5. Файлы шаблона header и footer
В этом уроке мы создадим так называемые включаемые шаблоны темы – это шаблоны header и footer. В данные шаблоны мы сможем вынести повторяющиеся части нашего сайта, каковыми, как правило, являются шапка и подвал сайта. Нам лишь останется подключить эти шаблоны к основным шаблонам темы, используя специальные функции WordPress.
- Уроки 6-7. Подключение стилей и скриптов
В следующей паре уроков мы с вами затронем одно из ключевых понятий при создании тем и плагинов для WordPress – это понятите хуков. Здесь мы создадим еще один специальный файл, без которого невозможно создать современную тему для WordPress – это файл functions.php. Используя данный файл и механизм хуков, мы подключим к теме все необходимые файлы стилей и скриптов. При этом мы сделаем это рекомендуемым кодексом WordPress способом, т.е. правильно.
- Урок 8. Цикл The Loop в WordPress
Основой вывода в WordPress данных на страницы сайта является знаменитый цикл WordPress. Благодаря данному стандартному циклу и использованию его в том или ином шаблоне мы можем вывести нужные данные, которые будут зависеть от подключаемого самим WordPress шаблона нашей темы. В уроке мы рассмотрим каждую из функций цикла и выведем всю необходимую информацию на сайт.
Текущий урок мы посвятим изучению основных функций или, иначе, тегов постов. Данные функции, как правило, используются внутри цикла WordPress. Используя предлагаемые функции, мы сможем получать и выводить различную информацию о статьях и страницах: название, полный текст статьи или ее цитату, ссылку на полный текст, дату публикации и т.д. и т.п.
В данном уроке мы создадим еще один важный шаблон – это шаблон отдельной записи single. Как можно предположить из названия, данный шаблон темы используется движком для показа отдельной статьи. Именно в нем мы можем определить разметку статьи и все, что касается ее оформления.
- Урок 11. Иерархия шаблонов
Данный вопрос является одним из ключевых при создании тем WordPress. Поэтому важно понимать суть данного вопроса, чтобы создаваемая тема имела все необходимые шаблоны, и вы могли четко понимать, для чего используется тот или иной шаблон вашей темы. Все это будет рассмотрено в предлагаемом уроке.
- Уроки 12-13. Работа с медиафайлами в WordPress
В следующих двух уроках мы будем изучать тему работы с медиафайлами. Речь идет прежде всего об изображениях. WordPress позволяет прикреплять картинки (миниатюры) к записям и страницам, мы можем добавлять их в текст постов. При этом работать с библиотекой медиафайлов в WordPress – одно удовольствие. Все очень удобно и понятно. В уроках мы узнаем, что делает WordPress при загрузке картинки и как мы можем управлять размерами загружаемых файлов.
- Урок 14. Пагинация в WordPress
В этом уроке мы познакомимся с функцией WordPress, позволяющей реализовать постраничную навигацию по записям сайта. Когда-то, в предыдущих версиях WordPress, для реализации качественной пагинации был необходим сторонний плагин. Но в современных версиях WordPress для этого предусмотрена простая и удобная функция, предлагающая массу параметров для настройки пагинации.
- Урок 15. Функция bloginfo - информация о сайте
В данном уроке мы будем работать с функцией bloginfo, благодаря которой можно получить различную информацию о нашем сайте: название сайта, которое можно использовать в качестве заголовка и лого, описание сайта, которое можно использовать в качестве слогана и т.д.
- Уроки 16-17. Работа с меню в WordPress
Одной из отличных возможностей WordPress является возможность создания произвольных меню. Мы можем зарегистрировать и создавать сколько угодно различных меню. При этом управлять ими очень просто и удобно. В качестве пунктов создаваемых меню WordPress позволяет использовать не только материалы сайта (категории, страницы, посты), но и даже произвольные ссылки. В результате мы получаем очень гибкий инструмент, позволяющий создать меню любой сложности – от обычного одноуровневого меню, до многоуровневого и даже т.н. мегаменю.
- Уроки 18-19. Сайдбары и виджеты в WordPress
В следующих двух уроках мы создадим еще один шаблон – это шаблон боковой колонки sidebar. А также мы познакомимся с понятием виджетов в WordPress. Виджеты – это по-настоящему классная штука, позволяющая реализовать удобные блоки различного функционала, которые часто выводятся как раз в сайдбаре. WordPress из коробки предлагает достаточно большой набор виджетов, например: поиск, список категорий, календарь, меню, произвольный HTML-код и много других.
- Уроки 20-24. Кастомайзер тем
Следующему вопросу курса мы отведем целых пять уроков. Это действительно важный вопрос и фактически неотъемлемая составляющая так называемых Премиум-тем WordPress. Используя кастомайзер, мы предлагаем пользователю темы возможность ее изменения, ее кастомизации под себя. При этом пользователь избавлен от необходимости лезть в исходный код. Например, пользователь легко, буквально в пару кликов мыши, может изменить фоновый цвет отдельных секций или всего сайта в целом, может быстро изменить шапку сайта, установив для нее другое изображение, может настроить вывод постов, изменив их количество или категорию, из которой они будут выводиться, может изменять расположение секций, разрешить или отменить вывод сайдбара и многое-многое другое. Фактически, использование кастомайзера и его функционал ограничены лишь фантазией разработчика темы и его желанием.
- Урок 25. Локализация и мультиязычность WordPress
Если вы собираетесь создавать темы на продажу или просто создать многоязычный сайт, тогда вам не обойти стороной вопрос локализации темы. Речь идет о подготовке темы к переводу, что и принято называть локализацией. Благодаря локализации темы и использованию плагина для реализации мультиязычности сайта – на выходе мы можем получить полностью многоязычный сайт, где при выборе того или иного языка буквально каждый элемент сайта и каждая строка контента будут показаны на выбранном языке. В этом уроке мы узнаем, как подготовить тему для перевода, т.е. произвести локализацию темы.
В последнем уроке теоретической части курса мы познакомимся с классом WP_Query. Используя данный класс и цикл WordPress, мы сможем гибко управлять выборкой информации на страницы сайта. Например, мы сможем выбрать посты определенной рубрики или даже нескольких рубрик сразу. Сможем выбирать записи по дате или автору, по меткам постов и т.д. При создании более-менее продвинутой темы WordPress сложно обойтись без пользовательской выборки данных, поэтому мы обязательно рассмотрим этот вопрос в данном уроке.
- ЧАСТЬ 2. Создание темы Clean
ЦЕЛИ И ЗАДАЧИ БЛОКА
Во второй части курса мы перейдем от теории к практике. И здесь мы создадим относительно несложную, но очень красивую тему под названием Clean. В данной части мы добавим к изученным ранее вопросам еще два основных момента, которые нужны и важны, если вы хотите создавать действительно профессиональные темы не только на заказ, но и на продажу. В частности, в уроках второй части мы познакомимся с понятием стартового шаблона темы и используем стартовую тему Underscores, которая может быть взята за основу любой разрабатываемой темы. Второй момент, который будет новым в данной части, – использование фреймворков для WordPress. И здесь мы начнем знакомиться с фреймворком Unyson, который дает нам фактически неограниченные возможности для создания красивых страниц практически любого уровня сложности. А теперь перейдем к урокам. Их в данной части 14, общей продолжительностью почти 4 часа видео. В качестве шаблона для темы мы используем шаблон ниже.
- Урок 1. Стартовая тема Underscores
В этом уроке мы с вами узнаем, что такое стартовая тема Underscores, что она из себя представляет и для чего она нужна. На сегодняшний день создание тем для WordPress на основе стартовой темы Underscores стало уже фактически стандартом. В уроке мы скачаем и подключим данную тему.
- Урок 2. Подключение стилей и скриптов
В данном уроке мы проанализируем имеющуюся у нас верстку, из которой и будем создавать тему WordPress. Также мы подключим все необходимые скрипты стили и шрифты, которые использованы в верстке. При этом мы не будем создавать файл functions.php с нуля и не будем писать в нем функцию подключения стилей и скриптов… все это уже имеется в стартовой теме Underscores, нам остается лишь дополнить функцию подключаемыми файлами.
В данном видео мы зарегистрируем необходимое меню для нашей темы и создадим его в админской части сайта. При этом нам, опять-таки, не нужно вспоминать функцию, необходимую для регистрации меню, поскольку она уже используется в functions.php стартовой темы Underscores, мы лишь немного изменим ее под себя. Также мы более подробно рассмотрим вопрос кастомизации меню WordPress, расширяя для этого класс Walker_Nav_Menu и переопределяя некоторые из его методов.
Главная страница создаваемой нами темы напоминает лендинг, т.е. здесь присутствуют несколько секций. Ключевой секцией страницы является секция портфолио. Это может быть портфолио дизайнера, фотографа или же просто красивый показ статей сайта. В этом уроке мы реализуем вывод записей в секции портфолио.
- Урок 5. Настройка секции Portfolio в кастомайзере
В данном уроке мы улучшим юзабилити создаваемой темы, добавив в кастоймайзер возможность выбора категории, из которой будут показаны записи для секции портфолио. Это очень удобно для конечного пользователя нашей темы и сделает нашу тему намного интереснее и практичнее.
Данный урок будет посвящен вопросу подготовки темы для перевода или ее локализации. Для этого мы воспользуемся специальной программой Poedit, с которой поработаем в данном уроке. Благодаря локализации темы, она может быть предложена как для отечественного, так и для зарубежного рынка, поскольку не будет привязана только к одному языку и может быть легко переведена на любой другой язык.
- Урок 7. Установка фреймворка Unyson
Как уже отмечалось выше, главная страница нашей темы представлена в стиле лендинга. Реализовать управление контентом такой страницы без фреймворка и конструктора страниц (page builder) – крайне проблематично. Именно поэтому в данном уроке мы установим фреймворк Unyson для дальнейшей работы с ним.
Одной из классических секций лендинговых страниц являются секции услуг и команды. В следующих двух уроках мы займемся реализацией секции Наша команда, где активно начнем использовать возможности фреймворка Unyson.
Данная секция также во многом является стандартной для лендингов. Здесь рассказывается о преимуществах компании или о ее услугах. Реализовать такую секцию, используя конструктор страниц фреймворка Unyson, - будет совсем не сложно. Это мы и сделаем в предлагаемом уроке.
После реализации главной страницы сайта мы можем смело перейти к реализации основных шаблонов темы. И первым таким шаблоном будет шаблон категорий, который мы добавим в нашу тему.
В этом уроке мы реализуем структуру уже знакомого нам шаблона отдельной статьи – это шаблон single.
В предпоследнем уроке второй части мы добавим шаблон постоянных страниц к нашей теме. Этот шаблон нам уже также знаком – это шаблон page.
- Урок 14. Реализуем мультиязычность
При разработке тем для продажи важным моментом является локализация темы, т.е. подготовка ее для перевода. Без этого тема не может считаться полноценной. Наша тема уже локализована, это мы сделали в одном из предыдущих уроков. В этом же уроке мы поработаем с темой в качестве конечного пользователя, подобрав, установив и настроив плагин мультиязычности. Для примера мы создадим английский и русский языки, протестировав корректность работы нашей темы на этих языках. В итоге мы получим полностью мультиязычный сайт.
- ЧАСТЬ 3. Создание темы Law
ЦЕЛИ И ЗАДАЧИ БЛОКА
Последняя часть курса будет посвящена разработке достаточно сложной темы Law, которая подойдет, к примеру, для сайта юридической компании. Стартовая страница темы будет выполнена в виде лендинга, т.е. объемной страницы со множеством секций. На сегодняшний день стартовые лендинговые страницы становятся чуть ли не стандартом разработки любого сайта. В третьей части курса мы будем активно работать с фреймворком Unyson. И здесь мы не просто будем использовать его возможности, но и активно кастомизировать фреймворк, изменяя существующие его компоненты, расширяя их, а также создавая свои собственные компоненты. Ну а теперь перейдем к урокам. Их в данной части 24, общей продолжительностью более 7 часов видео. В качестве шаблона для темы мы используем шаблон ниже.
- Урок 1. Стартовая тема и шаблон
В этом уроке мы сгенерируем, скачаем и установим уже знакомую нам стартовую тему Underscores. Также мы рассмотрим шаблон, который будем использовать для создания новой темы WordPress. Это будет достаточно сложный шаблон со множеством секций на главной странице. Данный шаблон идеально подойдет для какого-нибудь корпоративного сайта, например, для сайта юридической компании.
- Урок 2. Подключение стилей и скриптов
В этом уроке мы пройдем уже знакомую нам процедуру подключения файлов стилей, скриптов и шрифтов с сервиса Google Fonts к нашей теме. Подключаемых файлов, ввиду разнообразия и сложности шаблона, достаточно много, поэтому функция их подключения получится достаточно объемной.
Урок 3. Плагин TGM
В качественных темах принято выводить в админской части сайта уведомление о необходимости установки плагинов. Данное уведомление будет показано до тех пор, пока администратор сайта не установит предлагаемые плагины. Для реализации задачи мы воспользуемся плагином TGM Plugin Activation, который встраивается непосредственно в тему. Используя возможности плагина, мы без проблем подскажем пользователю, какие плагины требует наша тема и поможем быстро установить эти плагины.
Создаваемая в данной части курса тема предполагает наличие двух меню, которые мы зарегистрируем для темы. При этом меню в шапке будет двухуровневым, и его реализация немного отличается от меню, генерируемого WordPress. Поэтому мы кастомизируем меню, используя уже знакомый класс Walker_Nav_Menu и переопределяя некоторые из его методов.
В данном уроке мы поработаем с лого сайта. В шаблоне это обычный текст со стилизованной точкой. Для вывода лого мы используем функцию bloginfo и покажем наименование сайта. Ну а для стилизации точки мы добавим немного кода на JavaScript.
- Урок 6. Кастомизация слайдера фреймворка
Фреймворк Unyson из коробки предлагает нам на выбор несколько вариантов слайдеров, которые подойдут вам в большинстве случаев. Однако, могут быть и случаи, когда имеющихся вариантов слайдеров недостаточно. Unyson позволяет достаточно легко добавить собственные плагины слайдеров, что мы и проделаем в данном уроке, расширив функционал фреймворка Unyson. После этого новый вариант слайдера можно использовать в теме многократно.
- Уроки 7-8. Пользовательский шорткод для Unyson
Фреймворк Unyson из коробки имеет много различных типовых компонентов. Однако, на все случаи жизни этих компонентов все равно не хватит. Но фреймворк имеет достаточно гибкую структуру и позволяет создавать собственные компоненты. В следующих двух уроках мы собственный шорткод, который можно использовать многократно, и который мы используем для вывода секции со счетчиками.
В уроках 9 и 10 мы будем реализовывать секцию видео. Здесь мы выведем видео с сервиса YouTube в левой колонке секции. В правой же колонке мы выведем некоторый описательный текст и красивые прогрессбары. Для вывода последних мы также воспользуемся собственным компонентом для Unyson.
В этом уроке мы построим классическую секцию услуг, используя, как и прежде, page builder фреймворка Unyson. Для получения результата, соответствующего шаблону, нам будет достаточно всего нескольких правил в файле стилей.
- Уроки 12-14. Компонент формы
Следующая секция, которую мы реализуем в течение трех уроков – это секция с контактной формой. Unyson имеет в комплекте конструктор форм, вот только полученные формы отправляются с перезагрузкой страницы. В документации можно найти решение по добавлению возможностей AJAX для отправки формы без перезагрузки страницы. Однако, можно попробовать написать и собственное решение, что мы и сделаем в предлагаемых уроках.
- Уроки 15-16. Секция последних постов
Следующие два урока будут отведены под реализацию секции последних постов. И здесь мы не просто реализуем пользовательскую выборку данных с помощью класса WP_Query, но мы пойдем дальше и расширим функционал фреймворка. Для этого мы создадим еще один свой компонент, который и будет выводить заданное количество последних постов.
- Урок 17. Секция Наши сотрудники
В предлагаемом уроке мы опять-таки реализуем классическую секцию с сотрудниками компании. Стандартный компонент фреймворка Unyson плюс чуточку стилей с нашей стороны – и мы получим соответствующий верстке результат.
В футере нашего шаблона представлена преимущественно контактная информация: часы работы, телефоны, адрес. Но также там присутствует и второе меню, которое мы уже зарегистрировали в одном из первых уроков. Для реализации футера мы воспользуемся возможностями виджетов WordPress.
- Урок 19. Страница контактов
В этом уроке мы займемся реализацией страницы контактов, на которой представлена контактная форма и Google карта. Реализовать контактную форму будет проще простого, поскольку шаблон формы у нас уже есть – аналогичную форму мы сделали для одной из секций главной страницы. Ну а для Google карты фреймворк Unyson предлагает еще один отличный компонент, который мы и используем.
- Урок 20. Шаблоны index и single
В текущем уроке мы реализуем пару шаблонов – это шаблон index, который будет использован для страницы вывода записей и шаблон single – он, как мы уже знаем, используется для показа отдельной статьи.
- Урок 21. Комментарии на сайте
В этом уроке мы займемся реализацией функционала, не предусмотренного нашим шаблоном – речь о комментариях. Но поскольку комментарии все же используются на сайтах достаточно часто – мы все же добавим их и узнаем, как работать с комментариями в WordPress.
В данном уроке мы реализуем еще один функционал, не предусмотренный шаблоном, но необходимый практически для любого сайта – поиск. Здесь мы создадим еще один шаблон, на котором будут показаны результаты поиска. Также мы создадим шаблон формы поиска и подключим его к сайту.
- Уроки 23-24. Настройки темы
Последние два урока мы отведем под реализацию страницы настроек темы. В предыдущей теме для этого мы использовали возможности кастомайзера тем. В этой теме для разнообразия мы создадим отдельную страницу. При этом страница настроек будет реализована с помощью фреймворка Unyson, который значительно упрощает задачу по сравнению с нативными возможностями Settings API WordPress.
3D - моделирование (319)
Бизнес и заработок (416)
Графика и видео (449)
Графический дизайн (93)
Дети и их родители (84)
Духовные практики (20)
Женщина и мужчина (37)
Здоровье и спорт (192)
Инвестиции и финансы (290)
Иностранные языки (28)
Компьютер и программы (103)
Личностный рост (110)
Маркетинг и реклама (143)
Музыка и звука (21)
Программирование (92)
Работа и карьера (19)
Создание сайтов и блогов (296)
Строительство и ремонт (116)
Хобби и увлечения (158)
Разные курсы (1)
