Посадка верстки на wordpress торрент
Полный профессиональный курс фриланс-профессии WordPress-разработчик - Обучение WordPress для начинающих
Научитесь работать с самым главным функционалом, который чаще всего требуют заказчики. И зарабатывайте на создании полноценного продукта на CMS WordPress.
Посадка верстки и создание тем на CMS WordPress - Онлайн обучение Вордпресс для начинающих
Поделитесь страницей с друзьями
О курсе - Чему Вы научитесь?
Курс состоит из 3-х частей. Сначала подробное введение в CMS WordPress, установка, натяжка своей верстки. Далее работаем над внесением изменений на веб-сайте из административной панели. И третья часть - превращаем наш сайт в многостраничник.
WordPress – самая популярная CMS для создания веб сайтов. Научитесь на практике устанавливать свою верстку, создавать темы на WordPress, устанавливать админ-панель, работать с backend частью сайта и зарабатывайте на создании полноценного продукта!
Чему вы научитесь
Станете востребованным WordPress-специалистом/разработчиком, т.к. курс ориентирован на работу с самым главным функционалом, который востребован заказчиками.
Вы научитесь дорабатывать сайт таким образом, чтобы сам заказчик мог вносить изменения любой информации самостоятельно. Т.е. вы сможете устанавливать админпанель и работать с back-end частью.
Материал может быть удален по запросу правообладателя!
Описание курса:
Этот курс направлен на подробное обучение посадке верстки и созданию тем на CMS WordPress, без воды, но главное, что здесь мы немедленно применяем все знания на практике. Это значит, что вы получите весь материал для работы и мы вместе будем создавать реальный проект шаг за шагом.
Для кого подойдет этот курс:
- Если вы никогда не работали с back-end частью, но хотите изучить эту часть.
- Если вы хотите создавать полноценный продукт для заказчика (с административной панелью для изменения любой информации на сайте).
- Если вы хотите научиться работать с самой популярной системой управления сайтом — WordPress.
Что внутри курса:
Мы с вами пройдем путь от знакомства с понятием систем управления сайтами, настройки и установки WordPress на локальном сервере до создания полноценно функционирующих и полностью настраиваемых продуктов. Мы будем изучать теоретическую часть и сразу же применять её на реальных проектах. Все ссылки на ресурсы, дополнительные материалы и бонусные макеты для практики будут предоставлены внутри курса.
Почему стоит начать свое обучение уже сейчас:
Для кого этот курс:
- Для тех людей, кто хочет научиться устанавливать административную панель на сайте.
- Для тех людей, кто хочет создавать полноценный продукт для заказчика.
- Для тех людей, кто хочет познакомится с backend-разработкой.
Чему вы научитесь:
Если Вы не видите ссылку для скачивания материала — отключите блокиратор рекламы и добавьте наш сайт в список исключений. Если Вы против рекламы на нашем сайте — покупайте контент напрямую у авторов.
В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.
Добавление темы
Следующим шагом нужно добавить скриншот нашей темы. Сохраните изображение главной страницы из psd макета размером 880х660 в папку темы whitesquare с именем screenshot.jpg.
Предварительный осмотр
Структура страниц
Большинство руководств по созданию тем для WordPress ограничивается созданием макета и стилей для него. Мы же опишем весь порядок действий по созданию полноценного сайта на WordPress в рамках предоставленных макетов.
Добавление страниц осуществляется через панель администратора: Pages -> Add new. Для каждой страницы в области Page Attributes в поле Order укажите цифрой порядок страницы в главном меню.
После добавления, список страниц должен выглядеть вот так:
Когда все страницы будут добавлены, нужно указать, что страница Home будет главной. Для этого зайдите в меню Settings -> Reading и в поле Front page displays укажите: A static page -> Home.
Header.php и Footer.php
Шапка в терминологии WordPress, это не только визуальная шапка на макете сайта. По сути, она содержит весь общий код, который встречается в начале всех страниц сайта. Давайте создадим файл header.php в папке нашего шаблона и наполним его содержимым.
Кроме этого, нам нужно подключить css и js файлы. В текущих версиях wordpress это делается не прямым текстом в header.php, а через подключение в специальных функциях. Для этого откройте файл functions.php внутри нашей темы и добавьте в него следующий код:
В функции enqueue_styles мы зарегистрировали и подключили нужные стили, а затем указали вордпрессу, что эта функция является подключением стилей. Аналогично и для js файла, который требуется для отображения html5 тегов в старых браузерах.
Футер аналогично шапке — содержит общий код, который встречается в конце всех страниц сайта. Давайте запишем его содержимое в файл footer.php.
Здесь мы закрываем открытые блоки и вызываем wp_footer(), чтобы добавить скрипты футера WordPress.
Шаблон страницы
Следующим шагом, нам нужно сделать шаблон обычной страницы WordPress.
Создайте в папке темы файл page.php и добавьте в него следующий код:
Здесь мы подключили наши файлы шапки и футера, создали блок названия страницы и в теге section вставили стандартный блок вывода контента страниц и постов.
Теперь нужно стилизовать получившуюся страницу. Сохраните фоны в файлы images/bg.jpg и images /h1-bg.jpg. Далее добавьте немного базовых стилей в файл style.css:
В результате должна получиться вот такая картина:
Логотип
После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.jpg. В шаблон шапки, в файле header.php вставьте разметку для логотипа:
Форма поиска
WordPress позволяет достаточно гибко сохранять блоки кода в отдельные файлы, а затем использовать их в нескольких разных местах. Рассмотрим пример на нашей форме поиска.
В папке темы создайте новый файл searchform.php и сохраните в него код формы поиска:
А в файл стилей запишите стили для формы:
Всё, что осталось сделать – это подключить searchform.php внутри header.php.
Навигация
Добавить навигацию на страницу можно разными способами, например через функцию wp_list_pages, но более современным способом будет добавление через админку. По умолчанию функционал добавления меню не активирован, для того, чтобы это сделать, добавьте в файл темы functions.php следующий код:
Теперь, когда меню создано, нужно его показать на страницах сайта. Для этого добавьте в конец header.php следующий код:
После этого меню уже появится на страницах но без стилей. Стилизуем его:
Футер
Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images
images/footer-logo.jpg – логотип футера
images/social.jpg – спрайты больших иконок
images/social-small.jpg – спрайты маленьких иконок
Далее делаем вёрстку в файле footer.php:
И прописываем стили в style.css:
В итоге главная страница сайта должна выглядеть вот так:
Главная страница
Если вы посмотрите на psd макеты, то увидите, что разметка главной страницы отличается от внутренних. В частности, на главной странице нет сайдбара и заголовка страницы.
WordPress позволяет задавать разные шаблоны для разных страниц. Такой шаблон должен храниться в файле page-.php. Если шаблон не найден, то будет подключаться шаблон по умолчанию page.php.
Для главной страницы создайте новый файл front-page.php в папке темы. Добавьте в него следующий код:
Он отличается от кода page.php только тем, что в нем нет заголовка страницы.
То, что мы будем делать дальше, уже выходит за рамки создания темы WordPress, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самой темы.
Прежде, чем добавить контент главной страницы – необходимо нарезать все изображения этой страницы и добавить их в библиотеку WordPress через меню Media -> Library. Назовём эти изображения так:
home-1.jpg
home-2.jpg
home-3.jpg
home-4.jpg
home-5.jpg
clients-1.jpg
clients-2.jpg
clients-3.jpg
clients-4.jpg
clients-5.jpg
clients-6.jpg
clients-7.jpg
Далее, перейдите в панели администратора к форме редактирования главной страницы Pages -> Home -> Edit Page и в поле text введите содержимое страницы:
Теперь осталось стилизовать данный код.
Если вы сейчас посмотрите на страницу, то увидите, что заголовки блоков разъехались. Это связано с тем, что редактор WordPress добавил пустые параграфы в наш код в местах перевода строк. Чтобы решить эту проблему, создайте в папке темы файл functions.php и поместите в него код:
После этого, главная страница должна отобразиться правильно.
Сайдбар
Теперь, когда главная страница готова, давайте вернемся к шаблону внутренних страниц и добавим в него сайдбар.
Для этого создайте файл sidebar.php и поместите в него следующий код:
Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов. Для полноты картины в качестве подменю предлагаем показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали меню. При создании подменю в разделе админки Appearance -> Menus создадим новое меню с именем aside-menu. Чтобы добавить в него посты, кликните наверху в Screen options и отметьте галочкой Show on screen: Posts. Блок карты особых вопросов не вызывает.
После того, как блок сайдбара готов, нужно его подключить для всех подстраниц в файле page.php:
Далее нам нужно добавить стили для вёрстки:
Ну и в заключение, добавьте несколько постов в наш блог. Делается это в панели администратора на вкладке Posts -> Add New. Мы добавили точно такие же названия, как были в psd макете.
Теперь, когда у нас готов шаблон для внутренних страниц, давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в в медиа библиотеку. Назовите изображения вот так:
about-1.jpg
about-2.jpg
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg
Далее перейдите в редактирование страницы в панели администратора и добавьте код:
И стили в style.css:
Шаблон поста
После предыдущих действий, на нашем сайте уже доступны все страницы, кроме страниц с постами. За отображение одиночных постов отвечает шаблон single.php. Создайте его со следующим содержимым:
Этот шаблон аналогичен предыдущим шаблонам с той лишь разницей, что здесь мы сначала отображаем контент поста, а затем комментарии к нему.
В самом начале, когда мы создавали шаблон шапки мы добавили в него поиск, однако страницы для отображения результатов поиска у нас еще нет. Создайте в папке темы файл search.php и добавьте в него содержимое:
От других шаблонов этот отличается тем, что мы выводим заголовок с текстом поиска, а затем список результатов поиска.
В WordPress помимо одиночных постов существуют страницы, на которых отображаются списки постов. Это могут быть категории, сортировка по дате, автору или по ключевым словам. В нашем макете такого функционала нет, но добавить его обязательно нужно, так как мы создаем шаблон, который может использоваться с разным контентом. Для каждого из указанных списков, существуют свои шаблоны, однако если они не найдены, WordPress пытается найти общий файл archive.php. Мы этим воспользуемся и создадим его. Поскольку его содержимое ничем не будет отличаться от содержимого обычной страницы – просто скопируйте page.php в archive.php.
Заключение
На этом создание шаблона WordPress закончено. Готовый проект можно скачать здесь.
Этот курс направлен на подробное обучение посадке верстки и созданию тем на CMS WordPress, без воды, но главное, что здесь мы немедленно применяем все знания на практике. Это значит, что вы получите весь материал для работы и мы вместе будем создавать реальный проект шаг за шагом.
- Если вы никогда не работали с back-end частью, но хотите изучить эту часть.
- Если вы хотите создавать полноценный продукт для заказчика (с административной панелью для изменения любой информации на сайте).
- Если вы хотите научиться работать с самой популярной системой управления сайтом - WordPress.
- мы изучим основные принципы работы с системами управления сайтом (CMS);
- мы научимся "натягивать" верстку на движок системы управления сайтами Wordpress;
- мы научимся создавать свои темы для Wordpress;
- мы научимся работать с плагинами для WP;
- мы научимся работать с локальными серверами и phpmyadmin;
- мы научимся создавать полноценный продукт для заказчика, который он сможет настраивать по своему желанию;
- В виде бонуса будет предоставлен реальный макет для самостоятельного закрепления полученных знаний.
При создании web-сайтов любой разработчик приходит к тому, что заказчик в один момент захочет изменять любую информацию на сайте самостоятельно, без обращения к вам. Нужно быть к этому готовым и владеть навыками "посадки" верстки на систему управления сайтом. И WordPress - это отличный выбор для начала своего пути. Это самая популярная и не сильно сложная относительно других система управления сайтами (CMS). Навык работы с ней будет полезен как на фрилансе, так и в веб-студиях, он откроет вам путь к работе с back-end частью и позволит вам создавать полноценные продукты уже сейчас!
Читайте также: