Посадка верстки на wordpress торрент

Обновлено: 07.07.2024

Полный профессиональный курс фриланс-профессии 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 закончено. Готовый проект можно скачать здесь.

Если вы никогда не работали с back-end частью, но хотите изучить эту часть.
Если вы хотите создавать полноценный продукт для заказчика (с административной панелью для изменения любой информации на сайте).
Если вы хотите научиться работать с самой популярной системой управления сайтом - WordPress.

мы изучим основные принципы работы с системами управления сайтом (CMS);
мы научимся "натягивать" верстку на движок системы управления сайтами Wordpress;
мы научимся создавать свои темы для Wordpress;
мы научимся работать с плагинами для WP;
мы научимся работать с локальными серверами и phpmyadmin;
мы научимся создавать полноценный продукт для заказчика, который он сможет настраивать по своему желанию;
В виде бонуса будет предоставлен реальный макет для самостоятельного закрепления полученных знаний.

При создании web-сайтов любой разработчик приходит к тому, что заказчик в один момент захочет изменять любую информацию на сайте самостоятельно, без обращения к вам. Нужно быть к этому готовым и владеть навыками "посадки" верстки на систему управления сайтом. И WordPress - это отличный выбор для начала своего пути. Это самая популярная и не сильно сложная относительно других система управления сайтами (CMS). Навык работы с ней будет полезен как на фрилансе, так и в веб-студиях, он откроет вам путь к работе с back-end частью и позволит вам создавать полноценные продукты уже сейчас!

Читайте также: