Верстка под WordPress. Как сделать верстку WordPress
От автора: если вы сегодня выберите для себя профессию верстальщика и решите работать в веб-студии, тогда будьте готовы к тому, что просто знаний HTML и CSS и непосредственно верстки сайтов на сегодняшний день уже недостаточно. Реалии сегодняшнего дня требуют дополнительных знаний, например верстка под WordPress или другую популярную CMS. В данной статье попробуем узнать, чем отличается верстка сайта под WordPress от просто верстки сайтов и как сделать верстку сайта на WordPress.
Что должен знать современный верстальщик?
Времена, когда верстальщику достаточно было знать только HTML и CSS уже давно прошли. Это раньше для того, чтобы устроиться работать верстальщиком, требовалось лишь умение работать с готовым макетом PSD и сверстать страницу по предоставленному макету. А были даже времена, когда достаточно было лишь знаний HTML… но это, конечно, было уже очень давно, в те времена, когда все верстали таблицами 
Сейчас же, если вы откроете сайты вакансий и наберете соответствующий поисковый запрос, то увидите, что зачастую современная должность верстальщика предполагает наличие дополнительных знаний и обязанностей, которые ранее целиком и полностью возлагались на программиста. Например, это знание JavaScript и jQuery, знание основ PHP или даже MySQL, умение сделать верстку под популярные CMS. Просто знания HTML и CSS сегодня уже мало кому интересны.
Ну а поскольку WordPress является сейчас наиболее популярной CMS, то неудивительно, что многие работодатели требуют навыков работы с WordPress и умения сделать верстку WordPress. Хотя, на мой взгляд, верстка сайта под WordPress — это все же работа программиста, а не верстальщика, но, как говорится, время и реалии рынка диктуют нам свои правила, которым остается лишь следовать.
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курсВерстка WordPress
Если вы пока еще не сталкивались с версткой сайта на WordPress, волнуетесь и задаетесь вопросом а получится ли у вас, ведь вы не программист, тогда постараюсь вас успокоить. Верстка на WordPress — не слишком сложна и зачастую потребует от вас знаний лишь основ программирования на PHP.
WordPress имеет замечательную документацию, в том числе и переводную, что значительно упрощает работу с ним и создание сайта на WordPress. Зачастую вам будет достаточно в нужном месте сверстанного вами обычного шаблона HTML вызывать функции WordPress, которые часто можно скопировать прямо из документации. Собственно, в этом и состоит по большому счету все отличие верстки под WordPress от просто верстки шаблона.
Например, перед нами стоит банальная задача — вывести на страницу записи. Согласитесь, совсем несложно загуглить простейший запрос wordpress вывод постов и прочесть в документации о цикле WordPress и использовать пример цикла из той же документации в своей верстке сайта.
Конечно, если вам нужна верстка и создание нестандартного или сложного макета, тогда без уверенных знаний WordPress и программирования все же не обойтись, но все это приходит с практикой. Сделав верстку пары-тройки несложных сайтов WordPress, вы набьете руку и уже сможете ставить для себя и реализовывать проекты посложнее, верстать сложные и нестандартные макеты WordPress.
Ну а если кому-то более удобно воспринимать информацию с экрана, то и здесь есть выбор — множество всевозможных уроков и курсов, как платных, так и бесплатных. Да далеко ходить и не нужно. Если вы ищете уроки верстки под WordPress, тогда вам безусловно пригодится наш курс. Изучив курс, вы узнаете, как сделать верстку WordPress и на практике сверстаете три разных темы для WordPress.
В целом могу сказать, что научиться верстать под WordPress — достаточно просто. Уже через несколько дней после начала изучения вы сможете сверстать свой первый несложный сайт. Ну а через неделю-другую это может быть вполне сайт и на порядок сложнее. Так что все в ваших руках. Ну а я на этом с вами прощаюсь. До новых встреч!
Основы создания тем WordPress
Научитесь создавать мультиязычные темы с нестандартной структурой страниц
СмотретьМой блог на WordPress. Часть 2. — Верстка шаблона WordPress
В первой части этой статьи я рассказал Вам о том, как создавался этот сайт, почему я решил перенести этот сайт с Joomla на WordPress и как я переделывал дизайн этого сайта.
В этой статье я расскажу, как проходила верстка шаблона для WordPress и перенос контента со старого сайта на новый. Сразу скажу, что при этом возникли некоторые сложности, которые я обнаружил лишь потом, когда сайт уже во всю работал на сервере. Но об этом позже…
Итак, после того, как дизайн был готов, я принялся за верстку шаблона (а точнее темы — в WordPress это называется так).
Все работы по верстке темы проходили на локальном сервере Denwer, то есть на моем домашнем компьютере. И только после окончания всех работ сайт был выложен на хостинг.
Я не стал искать более подходящую тему, решил все сделать на стандартной. Да-да. Все, что вы видите, сделано на стандартной теме, которая есть по умолчанию в движке WordPress. Это тема «Twentyten»… Совсем не похоже, правда?
Первым делом был сформирован макет темы. Проведена разбивка и форматирование по размерам элементов сайта: шапки, блока основного контента и сайдбара (он в этой теме один) и подвала.
Затем были изменены зоны виджетов. В сайдбар были добавлены зоны с двумя колонками. Изменены зоны виджетов подвала. Их по умолчанию было четыре, а мне надо было три.
О том, как изменить или добавить зоны виджетов я в ближайшем будущем напишу отдельную статью. Это делается не очень сложно. Следите за выходом новых статей.
После того, как все работы по разметке были выполнены, я приступил к прописыванию стилей и привязке элементов дизайна к шаблону.
В этой работе огромную службу мне сослужил плагин для браузера Firefox — Firebug. Даже не знаю, как бы я делал все это без него.
Работа по верстке шаблона заняла у меня чуть более двух суток. Это основа. Мелкие недостатки, конечно, встречаются и сейчас. Они исправляются «на ходу».
Поэтому обращаюсь ко всем. Если Вы заметили какой-нибудь косяк на моем новом сайте, пожалуйста сообщите мне об этом в комментариях. Укажите где, какой недостаток Вы обнаружили и какой Вы используете браузер. Заранее спасибо за поддержку.
В процессе верстки были постепенно установлены и внедрены в работу необходимые плагины для WordPress. Об этом планирую скоро выпустить небольшой обучающий видеокурс. В нем будут рассмотрены различные плагины для WordPress — их назначение, важность и настройка.
Чтобы не пропустить выход этого курса, обязательно подпишитесь на получение информации о выходе новых обучающих продуктов.
И вот, через 2 дня я подошел к тому моменту, когда пора было переносить контент со старого сайта. Все это делалось вручную. Благо, там пока не очень много накопилось.
Каждую статью приходилось копировать со старого сайта и заново вносить на новый. Особенно муторно получалось с картинками, потому что они лежали на стороннем сервере (об этом я говорил в первой части статьи).
Но, как говорится:»Глаза боятся, а руки делают». Постепенно все статьи были перенесены на новый сайт.
Пришло время заменить сайт на сервере.
Были сделаны резервные копии обоих сайтов (файлов и баз данных). После этого старый сайт был удален с сервера.
Перед тем, как создавать резервную копию новой базы данных, обязательно нужно в админке изменить адрес сайта на тот, который будет использоваться. Иначе сайт работать не будет.
Я создал новую базу данных на сервере и провел импорт данных из резервной копии нового сайта.
Затем перенес новые файлы на сервер. Стоит отметить, что нужно не забыть внести изменения в файл wp-config.php. Там нужно прописать название базы данных, имя пользователя базы данных и пароль доступа к базе данных.
После этого, все вроде бы заработало. Но как оказалось немного позже — радоваться было рано.
Когда я проверял работоспособность сайта в разных браузерах, я обнаружил, что картинки не подгружаются.
А произошло это потому, что я загружал картинки на сайт, который находился на локальном сервере. И пути к файлам картинок прописались неправильно. Они ссылались на картинки, расположенные на моем домашнем компе.
Пришлось вручную изменять адреса всех картинок во всех статьях. Вот так то!
Для чего я это все рассказываю. Для того, чтобы Вы (если столкнетесь) не допускали подобных ошибок и не тратили свое время на двойную работу.
И вот только после этого сайт заработал как надо. Я очень доволен проделанной работой и готов снова писать для Вас.
Подведем итог. Неделя времени и новый сайт запущен и работает.
Поздравляю всех нас с новым сайтом!!!
Ну и конечно же с Днем России! Совсем забыл, что сегодня праздник. УРАА!!!
WordPress для верстальщика
Не секрет, что вероятнее всего верстка, старательно выполненная верстальщиком по
Рано или поздно любой верстальщик захочет увеличить свои доходы и CMS WordPress — это то, что надо верстальщику изучить. Верстка всегда стоит дешевле, чем сайт под ключ, даже если это простой лендинг или сайт-визитка. Если верстальщик сделал вёрстку простого сайта-визитки, а заказчик требует прикрутить ещё админку, форму или таймер обратного отсчета, то придется отказаться от дополнительного дохода или плотно изучать программирование. А это время и деньги, намного быстрее освоить WordPress + основы PHP. Без знаний основ PHP будет трудно работать в WordPress.
Что надо уметь верстальщику делать в WordPress
Самое главное — это интегрировать статичную HTML верстку в файлы темы WordPress. Сделать некоторые настройки в админке (настроить постоянные ссылки, бэкапы), поставить и настроить SEO плагин, логин форму и форму контактов. Уметь создавать произвольные типы постов, таксономии.
Почему WordPress?
WordPress является самой популярной CMS в мире, просто посмотрите на зарубежной фриланс бирже upwork.com по ключевому слову «wordpress», в базе находится 7 897 заказов. Заказы самой разной сложности, давайте посмотрим наиболее подходящие верстальщику, без знаний PHP.
Реальные заказы на Upwork
Fix Header on WordPress Site (пофиксить шапку у WordPress сайта)
Заказчик просит опустить пониже слайдер, чтобы он не перекрывал шапку сайта. За эту работу он платит $50. Конечно конкуренции там хватает, но и заказы сыпятся с частотой в одну минуту.
Copy a website to a wordpress Website (перенести сайт на WordPress)
По сути надо существующую верстку сайта натянуть на WordPress и перенести контент, оплата $10/час.
Плюсы в пользу изучения WordPress верстальщику
Огромное количество заказов
Раз это самая популярная CMS
Много простых заказов
Можно обойтись без знаний программирования, но основы PHP желательно знать, чтобы образно говоря «не сесть в лужу».
Много готовых решений
Это касается тем оформления и плагинов как бесплатных, так и премиум. Прикрутить форму обратной связи, сделать e-mail рассылку, добавить в контакты Google Map, повесить слайдер — самые востребованные фичи и на все это есть плагины.
Низкий порог входа
Простая и интуитивно понятная админка. Установив валидную тему и нужные плагины, можно легко обойтись вообще без знаний PHP. Поэтому многие люди, которые раньше никогда раньше не сталкивались с веб-разработкой, так легко отваживаются на то, чтобы самим сделать себе сайт на WordPress. Но со временем, они хотят что-то поменять или расширить функционал и тогда вынуждены обратиться к специалистам, а мы уже тут и готовы им помочь.
Документация + сообщество разработчиков
WordPress имеет самую подробную документацию по сравнению с другими CMS, но это ещё не всё, в вашем распоряжении огромное сообщество разработчиков, где можно получить ответы на любой вопрос. Вы не останетесь в одиночестве, вам всегда помогут.Почему мы часто слышим мнение, что самые кривые и косые сайты в мире сделаны на WordPress?
Отчасти, это правда и объясняется это очень просто, но только WordPress здесь не причём. Виноват низкий порог входа, на WordPress можно создавать сайты без знаний вёрстки и основ PHP. Пользователь ставит плагин с визуальным компоновщиком или платную тему с уже встроенным таким компоновщиком, расставляет все компоненты, добавляет ещё плагинов и разумеется, что такой сайт сильно медленно загружается. А все шишки летят в сторону WordPress.
Минусы у WordPress
Неужели совсем нет у него минусов?
Первый минус — на
Второй минус — на WordPress PHP код идет в перемешку с HTML кодом, что создает проблемы верстальщику, незнающему основ PHP.
Выводы
CMS WordPress — нехороший и неплохой сам по себе — это отличный инструмент для создания типовых сайтов, но совершенно не подходящий для уникальных и сложных решений. WordPress для верстальщика просто необходим и добавьте к этому основы PHP, которые изучить можно в моём видео-курсе.
-
Создано 13.08.2018 10:36:10 -
Михаил Русаков
Создано 13.08.2018 10:36:10
Михаил РусаковКопирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
верстка шаблона | метки | www.wordpress-abc.ru
Вёрстка сайтов с нуля по его макету, занятие увлекательное, хоть и требует массы знаний. Общие сведения про работу верстальщика в этой статье.
Читать дальше …
На любых веб-ресурсах, созданных на любой CMS визуально выделяется место внизу сайта, называемое подвал или футер. Не исключение CMS WordPress и футер WordPress есть на всех шаблонах системы. В этой статье познакомимся с подвалом WordPress, поймем, что такое футер WordPress и узнаем, какой функцией, подключается футер в шаблоне.
Читать дальше …
Если вы участвуете в создании и администрировании своего сайта, рано или поздно придётся разбираться с языками программирования. Почему бы не начать с языка HTML и структуры HTML документа.
Читать дальше …
Вы знаете, что WordPress архивирует всё и самым разным образом. По умолчанию на WordPress есть архивы дат, авторов, рубрик, меток. В этой статье посмотрим, как можно оформить страницы архивов рубрик и не только.
Читать дальше …
В большинстве шаблонов WordPress авторы статей выводятся ссылкой в мета–блоке статьи. Ссылка автора ведет на страницу архива автора. Чтобы снизить количество ссылок с главной страницы последних записей и для повышения безопасности сайта, можно убрать ссылку на author wordpress, без нарушения микро разметки сайта.
Читать дальше …
Правка CSS файла рабочего шаблона, одна из популярнейших тем для тонкой настройки шаблона WordPress под себя. Редактируя CSS стили шаблона можно значительно изменить, и подчас, улучшить, внешний вид своего сайта. В сообществе WordPress есть несколько рекомендательных правил верстки CSS WordPress, они же касаются и его редактирования.
Читать дальше …
Одна из особенностей CMS WordPress это возможность изменить WordPress шаблон под себя. Иногда такую доработку шаблона WordPress называют тонкой настройкой. В этой статье: проверка верстки шаблона правилам SEO.
Читать дальше …
Как изменить шаблон WordPress. Настройка шаблона WordPress под себя
От автора: приветствую вас, друзья. В очередной статье на тему WordPress мы с вами рассмотрим вопрос, как изменить шаблон WordPress. Если вы еще никогда не сталкивались с необходимостью изменения шаблона WordPress, тогда обязательно прочтите данную статью, поскольку рано или поздно вам, скорее всего, придется столкнуться с вопросами настройки и редактирования шаблона WordPress.
Для начала давайте определимся с наиболее часто возникающими вопросами, с которыми сталкиваются пользователи при настройке шаблона WordPress под себя. Вот примерный их список:
как редактировать шаблон WordPress
изменить ширину шаблона на WordPress
как изменить размер шаблона WordPress
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курскак изменить цвет шаблона WordPress
как изменить шрифт в шаблоне WordPress
И это лишь небольшой перечень проблем, с которыми вы можете столкнуться или которые вы сможете помочь решить другим, в том числе и за вознаграждение, если вы занимаетесь разработкой сайтов на заказ.
Все вопросы в списке выше можно решить двумя способами в зависимости от темы, которая используется для сайта. Начнем с самого простого варианта, который не требует знаний верстки. Этот вариант подойдет, если шаблон поддерживает редактирование из настроек.
Перейдем в раздел Внешний вид — Настроить и увидим главную страницу сайта и в левой части страницы доступные настройки сайта. Среди них могут быть и настройки оформления.
Для примера давайте попробуем изменить цветовую схему сайта. Зайдем в меню Цвета и изменим фон боковой и центральной частей сайта.
Как видим, это довольно удобно и изменить цвет шаблона WordPress достаточно просто — результат мы видим сразу же и можем его оценить.
Однако не всякая тема предлагает все необходимые нам настройки шаблона WordPress. Например, там вряд ли будут настройки, позволяющие изменить ширину шаблона на WordPress, например, даже в текущей теме нет настроек, позволяющих изменить шрифт в шаблоне и так далее. Как же быть в этом случае? Вот здесь нам и придется прибегнуть ко второму варианту и здесь уже необходимы некоторые навыки верстки.
Итак, нам потребуется редактировать чаще всего только один файл — это файл стилей style.css. Находится он в папке вашей темы. Давайте в качестве примера изменим цвет шрифта. Кстати, сделать это можно прямо из админки WordPress. Только будьте аккуратны и внимательны, чтобы случайно не «поломать» сайт. Лучше всего сделайте резервную копию темы перед тем, как что-то менять в ней. Итак, идем в меню Внешний вид — Редактор и по умолчанию у Вас должен быть открыт для редактирования файл стилей темы.
Если это не так, тогда выберите этот файл из списка справа, он называется Таблица стилей (style.css). Чаще всего цвет шрифта задается в body, поэтому найдем стили данного элемента и пропишем красный цвет для в качестве цвета шрифта.
После сохранения файла можем обновить сайт и увидеть красный цвет для основного шрифта на сайте.
Как видим, настройка шаблона WordPress под себя — достаточно несложная задача. Достаточно немного знаний CSS и вы сможете изменить шаблон WordPress и произвести необходимую настройку шаблона. По той же схеме мы можем решить и другие аналогичные задачи. На этом я с вами прощаюсь. Удачи и до новых встреч!
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курсОсновы создания тем WordPress
Научитесь создавать мультиязычные темы с нестандартной структурой страниц
СмотретьПроверка верстки шаблона правилам SEO
Зачем редактировать шаблон
После того, как вы выбрали шаблон для установки на свой сайт WordPress, стоит проверить его верстку на соответствие основным правилам SEO (оптимизации). Например, коробочный шаблон «Twenty Fourteen» сверстан так, что заголовки виджетов выводятся в тегах <h2></h2>, что может отрицательно сказаться на продвижении сайта. Бывают другие недочеты верстки шаблонов, от которых нужно избавиться до наполнения сайта материалами и его открытия для поисковиков.
Чрезвычайно трудно найти готовый шаблон WordPress полностью удовлетворяющий своим потребностям. Довольно часто, подобранный шаблон нравится, но не устраивает его цветовая гамма или не нравится расположение сайдбара, заголовка, шрифт, и т.д. На платформе WP есть все возможности изменить WordPress шаблон под себя.
Для примера изменим коробочный шаблон WordPress под названием «Twenty Fourteen». Этот шаблон выступит практичным примером, на котором можно посмотреть все нюансы тонкой и не только тонкой настройки шаблонов WordPress.
Подготовка к редактированию шаблона
Перед любыми работами с кодом WordPress, в том числе изменении рабочего шаблона, нужно сделать и иметь под рукой:
Шаблон должен быть предварительно настроен на вкладке Внешний вид→Настройка.
Примечание: Чтобы сделать не сбрасываемые изменения в шаблоне, нужно перейти на дочернюю тему. Работа на дочерней теме WordPress позволяет обновлять шаблон без потери сделанных изменений.
Как изменить WordPress шаблон «Twenty Fourteen» под себя
Я постараюсь показать принцип изменения шаблона, что позволит делать свои изменения любого шаблона WordPress.
Итак, задача: Есть шаблон «Twenty Fourteen» фото 1, делаем пользовательские изменения в шаблоне, заодно, проверяем верстку шаблона для соответствия правилам SEO оптимизации.
Примечание: Отмечу, что авторы многих шаблонов создают перенастраиваемые настройки своего шаблона, выводя интерфейс настроек на отдельную вкладку. Работая с такими шаблонами, вы легко, без изменения в коде шаблона можете выставить пользовательские настройки шаблона. Это не вариант, описанный в этой статьи.
Проверка верстки шаблона для правил SEO
Разберемся сначала с версткой шаблона. Перед проверкой выставляем предусмотренные настройки шаблона.
Примечание: Мы не ищем ошибки кода шаблона. Это можно сделать на специальных сервисах проверки валидности кодов. Например, тут: https://validator.w3.org/
Для проверки верстки на соответствие правил SEO нам понадобится:
- Поместить любой виджет на сайдбар (ы) шаблона. Пусть это будет календарь. Обязательно дадим виджету название.
- Создать тестовую страницу и тестовый пост сайта.
Шаги проверки верстки шаблона для правил SEO
Шаг 1. Проверка главной страницы
1. Открываем домашнюю страницу сайта. Любой браузер имеет инструменты разработчика. Простое управление инструментами находим на правой кнопке мыши, для браузера Chrom «Посмотреть код». 2. На домашней странице сайта (страница последних записей) смотрим код на заголовке сайта. Если это текст, то он должен быть в тегах h2. Если это картинка, то она НЕ должна быть в тегах h2.Важно! На любой странице сайта не должно быть больше двух тегов h2. Один открывающий <h2>, второй закрывающий </h2>.
3. Чтобы не «тыкать» все заголовки на странице, на правой кнопке мыши смотрим «Код страницы» и, открыв поиск по странице (кнопки ctrl+F) ищем «h2». Если поиск находит больше двух тегов h2, смотрим, что они обрамляют, и пытаемся это исправить. Исправление чуть ниже. проверка верстки шаблона4. Анонсы статей, в нашем примере это одна тестовая статья. Заголовок анонса должен быть в тегах h3. Если заголовки анонсов статей в тегах h2 или h4 нужно исправить. Исправление чуть ниже. 5. Все заголовки виджетов должны быть в тегах h4 или h5. Этот сайт сверстан так, что заголовки виджетов обернуты в тегах , это нужно исправить. Исправление чуть ниже.Повторяюсь! На любой странице сайта не должно быть больше двух тегов h2. Один открывающий <h2>, второй закрывающий </h2>.
Шаг 2. Проверка страницы тестового поста
После главной страницы сайта, открываем тестовый пост сайта. Здесь проверяем, чтобы тегами h2 обертывался только заголовок поста. Проверку делаем аналогично посту сайта. Нужно, чтобы тегами h2 обертывался только заголовок страницы.
Шаг 3. Проверка виджетов
Аналогично, смотрим теги заголовков виджетов в сайдбаре и футере.
проверка верстки шаблона виджетыИтоги проверки верстки
В результате проверка верстки шаблона, на этом шаблоне, обнаружили, что заголовки виджетов в футере и сайдбаре сайта, обернуты в теги h2. Это нужно исправить.
1. Для исправления идем в каталог шаблона и открываем для редактирования файлfunctions.php. Под словами «идем в каталог шаблона», понимаем копирование нужного файла (можно из редактора консоли) и правки его в текстовом редакторе типа Notepad++.
2. В файле functions.php ищем, как задан вывод виджетов в шаблоне. Для этого шаблона видим, что заголоки виджета в тегах h2. Меняем h2 на h4.
3. Если в файле functions.php не задан вид заголовка виджета, идем в файл footer.php и смотрим, как в этом файле обернут заголовок виджетов в футере. Меняем h2 на h4.Если мы нашли, что на главной странице анонсы статей выводятся в тегах h2, то есть на странице последних записей, есть несколько заголовков в h2, читаем статью ТУТ и устраняем эту SEO ошибку верстки.
Тема статьи оказалась больше, чем я ожидал, поэтому придется изменить WordPress шаблон под себя, а именно изменить его внешний вид, будем в следующей статье. Предварительно, можно почитать статьи: Правила верстки файла каскадных стилей WordPress.
©www.wordpress-abc.ru