Wordpress

Верстка на wordpress: Верстка шаблона для сайта на движке WordPress | Создание динамической структуры

24.05.2023

Урок #7. Вёрстка страницы записи. Создание темы WordPress.

Страница single.html выводит полный текст записи. Эту страницу можно стилизовать под свои нужны и добавлять в нее другие информационные блоки, начиная от формы комментариев, кнопок социальных сетей, форм подписки и тд.

Подготовка к вёрстке

0. Создаём копию файла page.html и переименовываем его в single.html.

1. Каркас страницы single.html мы будем создавать по готовому дизайну, но на данном этапе не будем производить вёрстку формы комментариев, так как её мы подключим позже, когда будем адаптировать вёрстку под WordPress.

HTML каркас

Находим блок div с классом information-post и добавляем в строку, которая выводит информацию о записи новый элемент — категория.


		<!-- Информация о записи страницы/записи-->
		<div>
			<h2>Тестовая страница</h2>
			<p>Категория: Тест / Опубликовано: 2017-07-24 / Просмотров: 30</p>
		</div>

После закрытия блока text-post создаём новый div с классом devide-line, который будет являться разделительной линией для блоков.


		<!-- Разделительная линия -->
		<div></div>

После блока devide-line, создаём новый div с классом related-post.


		<!-- Похожие записи -->
		<div>
			<p>Еще записи по теме</p>
			<ul>
				<li><a href="">Урок #1. Структура темы WordPress.</a></li>
				<li><a href="">Урок #2. Создание макета для темы WordPress в Balsamiq Mockups.</a></li>
				<li><a href="">Установка локального web-сервера Xampp (Windows)</a></li>
			</ul>
		</div>

После закрытия блока related-post вставляем еще один блок devide-line, он будет отделять блок «Похожие записи» от блока с «Комментариями».


		<!-- Разделительная линия -->
		<div></div>

Готовый каркас страницы single.html.


<!DOCTYPE html>
<html>
<head>
	<!-- Charset -->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<!-- Page info -->
	<title>Страница</title>
	<meta name="language" content="ru">
	<!-- Favicon -->
	<link rel="shortcut icon" href="favicon/favicon.
 
 png" type="image/png">
	<link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon">
	<link rel="apple-touch-icon" href="favicon/favicon_apple_60.png">
	<link rel="apple-touch-icon" href="favicon/favicon_apple_76.png">
	<link rel="apple-touch-icon" href="favicon/favicon_apple_120.png">
	<link rel="apple-touch-icon" href="favicon/favicon_apple_152.png">
	<!-- Style CSS-->
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="style.css">
	<!-- JQuery Library -->
	<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>

<!-- Обёртка -->
<div>

	<!-- Шапка -->
	<div>
		<!-- Название блога и описание -->
		<div>
			<h2><a href="">Блог Артёма Санникова</a></h2>
			<p>Подробные пошаговые обучающие уроки по сайтостроению и продвижению.
 
 
 </p>
		</div>
		<!-- Навигация -->
		<div>
			<ul>
				<li><a href="">Главная</a></li>
				<li><a href="">Об авторе</a></li>
				<li><a href="">Контакты</a></li>
				<li><a href="">Карта сайта</a></li>
			</ul>
		</div>
	</div>

	<!-- Область для вывода контента -->
	<div>

		<!-- Информация о записи страницы/записи-->
		<div>
			<h2>Тестовая страница</h2>
			<p>Опубликовано: 2017-07-24 / Просмотров: 30</p>
		</div>

		<!-- Текст страницы/записи -->
		<div>

			<p>Конечно, возникают некоторые вопросы, связанные с использованием Lorem ipsum на сайтах и проектах, ориентированных на кириллический контент – написание символов на латыни и на кириллице значительно различается.
 
 </p>

			<p>И даже с языками, использующими латинский алфавит, могут возникнуть небольшие проблемы: в различных языках те или иные буквы встречаются с разной частотой, имеется разница в длине наиболее распространенных слов. Отсюда напрашивается вывод, что все же лучше использовать в качестве «рыбы» текст на том языке, который планируется использовать при запуске проекта.</p>

			<p>Сегодня существует несколько вариантов Lorem ipsum, кроме того, есть специальные генераторы, создающие собственные варианты текста на основе оригинального трактата, благодаря чему появляется возможность получить более длинный неповторяющийся набор слов.</p>

		</div>

		<!-- Разделительная линия -->
		<div></div>

		<!-- Похожие записи -->
		<div>
			<p>Еще записи по теме</p>
			<ul>
				<li><a href="">Урок #1. Структура темы WordPress.</a></li>
				<li><a href="">Урок #2.
 
 
  Создание макета для темы WordPress в Balsamiq Mockups.</a></li>
				<li><a href="">Установка локального web-сервера Xampp (Windows)</a></li>
			</ul>
		</div>

		<!-- Разделительная линия -->
		<div></div>

	</div>

	<!-- Боковая колонка -->
	<div>
		<div>
			<h6>CMS системы</h6>
		</div>
		<div>
			<ul>
				<li><a href="">Wordpress</a>
					<ul>
						<li><a href="">Настройки</a></li>
						<li><a href="">Функции</a></li>
						<li><a href="">Плагины</a></li>
						<li><a href="">Хаки</a></li>
						<li><a href="">Создание темы</a></li>
					</ul>
				</li>
				<li><a href="">Программы</a>
					<ul>
						<li><a href="">Google Chrome</a></li>
						<li><a href="">Balsamiq Mockups</a></li>
						<li><a href="">Sublime Text</a></li>
						<li><a href="">Adobe Photoshop</a></li>
					</ul>
				</li>
			</ul>
		</div>

		<div>
			<h6>Текстовый блок</h6>
		</div>
		<div>
			<p>Каждый веб-разработчик знает, что такое текст-«рыба».
 
 
  Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он <a href="">веб-дизайнерами</a> для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. </p>
		</div>

		<div>
			<h6>Изображение</h6>
		</div>
		<div>
			<center><img src="//artemsannikov.ru/mc/40collage-instagram/images/box.png"></center>
		</div>

	</div>

	<!-- Подвал-->
	<div>
		<p>Использование и копирование материалов сайта без согласия автора категорически запрещено.</p>
		<p>Артём Санников © 2014 - 2017</p>
	</div>

</div>

</body>
</html>

CSS стили

Ниже предоставлен код css для оформления блоков devide-line и related-post. Добавьте его в файл

style. css.


		/*Разделительная линия*/
		.devide-line {
			width: 670px;
			height: auto;
			border-bottom: 1px solid #f5f5f5;
			margin: 30px 0;
		}
		/*Похожие записи*/
		.related-post {
			width: 670px;
			height: auto;
			overflow: hidden;
		}
			.related-post p {/*заголовок блока*/
				font-size: 16px;
				font-weight: bold;
				color: #333;
				margin: 0 0 30px 0;
				line-height: 1;
			}
			.related-post ul {/*стилизация списка*/
				list-style-position: inside;
				list-style-type: none;
				margin: 0 0 0 20px;
			}
				.related-post ul li a {
					display: inline-block;
					color: #666;
					font-size: 14px;
					color: #666;
					text-decoration: none;
					margin: 0 0 15px 0;
					line-height: 1;
				}
					.related-post ul li a:before {
						float: left;
						content: "-";
						font-size: 14px;
						color: #666;
						margin: 0 10px 0 0 ;
					}
					.
 
 
 related-post ul li:last-child a {
						margin: 0 0 0 0;
					}
					.related-post ul li a:hover {
						text-decoration: underline;
						color: #2d3e50;
					}

С уважением, Артём Санников

Сайт: ArtemSannikov.ru

Метки: WordPress, Создание темы.

Верстка сайта на wordpress • фриланс-работа для специалиста • категория Веб-программирование ≡ Заказчик Вячеслав Жмурко

Switch to English version?

Yes

Переключитись на українську версію?

Так

Переключиться на русскую версию?

Да

Przełączyć się na polską weкrsję?

Tak

6 из 6

проект завершен

  1. публикация

  2. прием ставок

  3. утверждение условий

  4. резервирование

  5. выполнение проекта

  6. проект завершен


Доброго времени суток.

Необходимо сверстать сайт из psd файлов.

Всего 4 страницы. Сайт новостного плана.  По типу https:// bitjournal . media

1. Главная — презентация новостей, и вверху слайдер

2. Блог или лента новостей.

3. Страница самой записи.

4. Контакты.

Сверстать нужно на движок wordpress с адаптацией под мобильные устройства. 

Необходимо, что бы удобно было в админке управлять контентом, да и настраивать внешний вид самого сайта.

Сам макет пока в отрисовке. Предлагайте цены и сроки.

Верстка сайта на wordpress

Качество

Профессионализм

Стоимость

Контактность

Сроки


Профессионально выполненная работа. Грамотный специалист. Сделал все как было задумано и даже предлагал варианты для улучшения сайта. Что особенно понравилось — сразу понимает в чем проблема. Рекомендую к сотрудничеству

Отзыв фрилансера о сотрудничестве с Вячеславом Жмурко

Верстка сайта на wordpress

Оплата

Постановка задачи

Четкость требований

Контактность


Спасибо за проект!
Была плотная работа с заказчиком, выбирали лучшие решения для сайта.
Быстрые ответы на вопросы и желание сделать проект лучше!

Владислав Бараник | Сейф

  • Ставки 15
  • Отклоненные 30
  • Обсуждение 2

дата онлайн рейтинг стоимость время выполнения


  1.  фрилансер больше не работает на сервисе

  2.  фрилансер больше не работает на сервисе

  3. 4 дня5000 UAH

    4 дня5000 UAH

    Готова выполнить.
    Контакты для связи:
    E-mail: [email protected]

  4. 5 дней4500 UAH

    5 дней4500 UAH

    Обращайтесь, опыт работы с вордпрессом 5 лет. Мое портфолио можете посмотреть у меня в профиле.

  5.  фрилансер больше не работает на сервисе

  6.  фрилансер больше не работает на сервисе

  7. 1152

     21  0


    10 дней3000 UAH

    Вероника Родина

    10 дней3000 UAH

    Добрый день .
    Меня заинтересовал ваш проект
    Готова к работе приступить прямо сейчас.
    Покажите пожалуйста макет
    Обращайтесь буду рада помочь.

    С ув. Вероника

  8. 5 дней3000 UAH

    5 дней3000 UAH

    Здравствуйте!
    Занимаюсь версткой более 5х лет. Хорошие знания и навыки HTML5, CSS3, JS, JQuery, php. Есть опыт верстки параллакс-эффектов, анимациии.
    Гарантирую кроссбраузерную, валидную, семантическуюя верстку, быструю загрузку сайта, адаптивность, работа с различными формами захвата.
    Буду рад сотрудничеству.
    Цена оговаривается после уточнения требований!
    Мое портфолио: Freelancehunt

  9. 4 дня1500 UAH

    4 дня1500 UAH

    Доброго дня . У меня огромный опыт работы с Wrdpress. Я делаю быстро и качественно. Все время на связь.
    Доброго дня. Маю величезний досвід роботи з Wrdpress. Виконаю швидко і якісно. Весь час на звязку.

    Показать оригинал

    Перевести

  10. ставка скрыта фрилансером

  11. 6 дней2500 UAH

    6 дней2500 UAH

    Здравствуйте! Готов выполнить верстку и натяжку на Вордпресс вашего сайта.

    Примеры работ есть в моем портфолио: Freelancehunt

    Подробнее можем обсудить в ЛС

  12. ставка скрыта фрилансером

  13. 6 дней8000 UAH

    6 дней8000 UAH

    Здравствуйте Вячеслав. Готов сверстать и натянуть ваш сайт на WordPress. Есть хороший опыт в веб-разработках (HTML5, CSS3, SASS bootstrap, JS, JQuery, WordPress, Landing Page, верстка сайтов pixelperfect, сайты под ключ) Сайт будет высокого уровня по дизайну, будет правильно отображаться на различных экранах, включая мобильные устройства.

    Во время работы над проектом я постоянно доступен для связи!

    Связаться со мной можно по E-mail, телефону или в ЛС.
    Тел/Telegram: +380954712370
    Email — [email protected]

  14. 7 дней5000 UAH

    7 дней5000 UAH

    Привет, Вячеслав. Готов выполнить работу в лучшем виде. Мой сайт-портфолио: prologue.ho.ua
    Моя почта: [email protected]
    Мой скайп: seroga_501

  15. ставка скрыта фрилансером

  1. 12 дней8000 UAH

    12 дней8000 UAH

    Работа выполненная мной не будет вызывать отвращения. Все поля будут удобны для заполнения. Во время реализации проекта всегда на связи

  2. ставка скрыта фрилансером

  3. 14 дней5000 UAH

    14 дней5000 UAH

    Здравствуйте, Вячеслав!
    C cms wordpress хорошо знаком, с удовольствием выполню поставленную работу.
    Цена и срок указана приблизительная, нужно видеть чтоб оценить объем работ по верстке и посадке на cms wordpress.

  4.  фрилансер больше не работает на сервисе

  5.  фрилансер больше не работает на сервисе

  6. 6″ data-days=»5″ data-lastactivity=»1564739548″>

     фрилансер больше не работает на сервисе

  7. 7 дней4000 UAH

    7 дней4000 UAH

    Здравствуйте. Готов выполнить ваш проект. Опыт роботы c WordPress более трех лет. Пишите в ЛС.

  8.  фрилансер больше не работает на сервисе

  9. 9 дней999 UAH

    9 дней999 UAH

    Веб студия Elite-Designs.ru Мы без проблем сможем выполнить для Вас этот проект. Обращайтесь! Всегда рады новым клиентам!

  10. 5 дней5000 UAH

    5 дней5000 UAH

    Здравствуйте! Имею большой опыт адаптивной верстки сайтов.
    Буду рад качественно и в срок выполнить Ваш проект.

  11.  фрилансер больше не работает на сервисе

  12. 6 дней3000 UAH

    6 дней3000 UAH

    Здравствуйте.
    Наша команда готова выполнить верстку: html5, css3, bootstrap4, js, jquery. Занимаемся разработкой сайтов под cms WordPress. Сроки и цена зависит от макета. Поэтому точно можем назвать после согласования ТЗ.
    Обращайтесь. Будем рады помочь

  13.  фрилансер больше не работает на сервисе

  14.  фрилансер больше не работает на сервисе

  15.  фрилансер больше не работает на сервисе

  16. 10 дней7000 UAH

    10 дней7000 UAH

    Сделаю. Адаптивно, валидно, кроссбраузерно и оптимизировано.

  17.  фрилансер больше не работает на сервисе

  18. ставка скрыта фрилансером

  19. ставка скрыта фрилансером

  20. 5 дней2000 UAH

    5 дней2000 UAH

    Здравствуйте.
    Есть большой опыт разработки проектов на вордпрессе. Готов приступить к выполнению
    Мой скайп live:v.mihaylishin

  21. ставка скрыта фрилансером

  22. 7 дней2800 UAH

    7 дней2800 UAH

    Добрый день, готова к сотрудничеству,
    есть портфолио Freelancehunt .
    Если заинтересовала моя кандидатура, пишите в личку,
    skype — mandarin4ik90,
    viber — 0934526521

  23. 5 дней5000 UAH

    5 дней5000 UAH

    Здравствуйте.
    Готов взяться.
    Есть опыт в наравлении: Лендинг (http://www.dorogihsvadeb.net), Корпоративный сайт (http://tdtrust.org)(https://mklass.kiev.ua/kupit-kuxnyu-kiev/),
    Интернет-магазин (https://blockmodul.kz).
    На связи 7 дней в неделю 16 часов в день
    Специализируюсь на программировании более 3 лет
    skype: sviatmaz
    e-mail: [email protected]

  24. 10 дней10 000 UAH

    10 дней10 000 UAH

    Добрый день, сделаю ваш проект качественно и в срок, обращайтесь!
    С уважением, Виталий!

  25.  фрилансер больше не работает на сервисе

  26. 7 дней7000 UAH

    7 дней7000 UAH

    Здравствуйте!
    Был бы очень рад выполнить Ваше задание, если оно еще актуально, я к Вашим услугам.
    С уважением, Роман!

  27.  фрилансер больше не работает на сервисе

  28. 5 дней3000 UAH

    5 дней3000 UAH

    Здравствуйте.
    Имею опыт работы веб-программистом более 6 лет.
    Более детально нужно обсудить на основе дизайна.
    Мое портфолио:
    http://ubi-logistic.com.ua
    https://profit-work.com.ua
    http://ubi-pack.com.ua
    http://travelpost.in.ua
    https://www.hostwell.com
    … https://gunatech.com.ua
    http://ubi-pack.com
    http://catering-studio.com.ua
    https://beremytske.com.ua
    https://oxemize.com
    http://brio35.lotosk.com.ua
    https://weidetrans.com.ua
    https://cryptoinvestors.co
    http://shtoras. com.ua
    http://beauty-kshk.com

  29. 6 дней8000 UAH

    6 дней8000 UAH

    Здравствуйте Вячеслав
    Сейчас свободен, другими проектами не занят
    Онлайн c 9.00 до 18.00
    Навыки с работой на ВП, JS, jQuery, Vue.js, LESS, Bitbucket, Git, BEM, Pixel perfect.

    Несколько выполненных работ:
    http://agi.webstar.od.ua
    http://yourparquet.webstar.od.ua
    https://iphone.webstar.od.ua/ — вёрстка
    … https://megatrade.webstar.od.ua/ — вёрстка + WordPress
    https://romeo.webstar.od.ua/ — вёрстка + WordPress
    https://optika.webstar.od.ua/ — вёрстка + адаптив + Modx
    https://nailbrand.webstar.od.ua/ — вёрстка
    https://taxi.webstar.od.ua/ — верстка
    https://palatso.webstar.od.ua/ — верстка
    https://orujeiniy.webstar.od.ua
    https://starburger.webstar. od.ua
    https://voda.webstar.od.ua
    https://gustavs.webstar.od.ua
    https://india.webstar.od.ua
    https://brandon.webstar.od.ua
    https://rakurs.webstar.od.ua

    Skype: starweb16

  30. 7 дней1500 UAH

    7 дней1500 UAH

    Здравствуйте!
    Готов выполнить поставленную работу.
    Владею: HTML/CSS.
    Опыт роботы c WordPress более 6 месяцев.
    Мои контакты: E-mail: [email protected]


5 лет назад

348 просмотров

  • верстка
  • HTML-верстальщик
  • Разработка сайта
  • адаптивная верстка
  • разработка сайта под ключ
  • web верстальщик
  • недорогой сайт на wordpress
  • HTML-вёрстка
  • верстка psd макета
  • сверстать сайт
  • разработка сайта на CMS wordpress
  • кроссбраузерная html верстка
  • валидная верстка html-страниц
  • сверстать psd

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

Когда WordPress 5.0 запустил редактор блоков, он представил концепцию широких и полных выравниваний (технически это «ширины» или «размеры», но давайте перепрыгнем через эту странность классификации размеров в существующую систему выравнивания). Темы могут добавить поддержку через add_theme_support( 'align-wide' ) , чтобы позволить пользователям выбирать эти дополнительные ширины для блоков, которые будут расширяться за пределы области содержимого:

Группа полной ширины с вложенным содержимым без ширины, установленной в Twenty Twenty-One.

Решение было новаторским первым шагом. Однако, опять же, авторы темы в основном были оставлены, чтобы выяснить, как это работает, самостоятельно. Флагманская тема Twenty Twenty-One содержала десятки строк CSS, чтобы охватить различные сценарии, чтобы заставить ее работать. На тот момент WordPress еще не включал стандартизированную систему компоновки.

Перенесемся к выпуску WordPress 5.9 в начале 2022 года. В обновлении добавлена ​​функция глобальных настроек и стилей, которая включает систему макетов для работы с широкими размерами. Авторам темы просто нужно было определить settings.layout.contentSize и settings.layout.wideSize в файле theme.json , как показано в следующем фрагменте кода:

 {
        "версия": 2,
        "настройки": {
                "макет": {
                        "contentSize": "38рем",
                        "wideSize": "64rem"
                }
}
}
  Язык кода: JSON / JSON с комментариями (json)

Это означало, что разработчики могли удалить большую часть (в некоторых случаях все) своих пользовательских CSS для содержимого, широких и полноразмерных макетов. По сравнению с предыдущей темой по умолчанию, в Twenty Twenty-Two было всего несколько обходных путей CSS для проблем, связанных с выравниванием по всей ширине и заполнением корневого уровня.

Новая система компоновки поставляется с новыми «правилами» для выравнивания вложенных дочерних элементов блоков контейнерного типа, таких как Group. И WordPress будет показывать широкие и полные параметры только в том случае, если они разрешены. Это вызвало некоторые проблемы совместимости для принятия классической темы 9.0003 theme.json , до которого мы и доберемся. Однако в целом система, наконец, собиралась воедино.

Полноразмерная группа с вложенным текстом шириной содержимого и широким изображением.

У пользователей была стандартная система, которая была совместима с несколькими темами (по крайней мере, те, у кого была поддержка theme.json ), и авторам тем нужно было только подключить несколько значений конфигурации.

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

Авторы классических тем, принявшие theme.json , начали замечать две основные проблемы:

  1. При использовании широкого блока-контейнера в классических темах большинство тем по умолчанию автоматически отображали вложенные блоки по ширине содержимого. Однако в новой системе на основе theme.json дочерние блоки заполняют ширину своего родителя.
  2. В классической версии пользователи могли назначать ширину/полную ширину любому блоку, независимо от его контейнера. Новая система поддерживает широкое/полное выравнивание для дочерних элементов только в том случае, если родитель поддерживает это, например, когда блок Group устанавливает вложенные блоки для наследования ширины по умолчанию (контента).

Пользовательский интерфейс по умолчанию изменился и нарушил совместимость для классических тем, которые приняли theme.json после выпуска WordPress 5.9. Само существование этого файла переводит пользователя на новую систему раскладки, независимо от того, задан ли явным образом settings.layout . У разработчиков нет механизма для отказа от этого. Это препятствует постепенному внедрению компонентов FSE.

По этой причине я рекомендую авторам классических тем временно отложить внедрение theme. json , если у них есть существующая база пользователей. Для новых проектов добавление поддержки не должно быть проблемой.

Есть хорошие новости. Во-первых, я (вместе с другими) обновил документацию макета, чтобы включить предупреждение в Theme Handbook об этой проблеме.

Однако, возможно, будет готово более постоянное исправление. Существует открытый запрос на вытягивание для создания нового типа макета ширины контента. Это также сделало бы это настройкой по умолчанию для вновь созданных групповых блоков, вернув пользовательский интерфейс к исходному поведению. Для этого нет установленного срока, но я надеюсь, что он появится в WordPress 6.1.

Beaver Themer 101: Как создавать макеты Themer всего за 4 шага

Возможно, вы уже знаете и любите наш плагин Beaver Builder для WordPress. Это удобно для создания отдельных сообщений и страниц или настройки навигации вашего сайта. Однако, если вы хотите создать макеты для частей страницы, которые находятся за пределами области содержимого, вам также может понадобиться Beaver Themer.

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

Мы также пошагово объясним вам, как создавать макеты в местах, недоступных для стандартного Beaver Builder.

Начинаем!

Мы только что запустили 6 БЕСПЛАТНЫХ курсов Beaver Builder. Узнайте, как легко создавать веб-сайты WordPress с помощью пошаговых видеоуроков. Начните сегодня.

Знакомство с Beaver Themer: все, что вам нужно знать

Проще говоря, Beaver Themer — это надстройка премиум-класса для Beaver Builder. Это означает, что это плагин, который использует и улучшает наш конструктор страниц.

***Обратите внимание, что вам по-прежнему необходимо установить тему WordPress, если вы используете плагин Beaver Themer.

Темы WordPress позволяют вам контролировать многие аспекты и стили вашего сайта. Но Beaver Themer позволяет вам переопределять макеты или части страницы, обычно управляемые темой, такие как заголовки, нижние колонтитулы, архивные страницы и сообщения.

Обратите внимание, что Beaver Themer НЕ тема WordPress.

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

Например, Beaver Themer привносит мощь Beaver Builder в верхние и нижние колонтитулы вашего веб-сайта.

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

Одной из уникальных особенностей Beaver Themer является использование полевых подключений.

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

Как интегрировать Beaver Themer в свой веб-сайт

Прежде чем мы перейдем к самой интересной части и начнем создавать несколько макетов Themer, давайте удостоверимся, что у вас есть все необходимое для установки Beaver Themer.

Для использования Beaver Themer у вас должна быть установлена ​​премиум-версия Beaver Builder, поэтому, если у вас есть бесплатная версия Lite, вам придется сначала обновить ее.

Кроме того, надстройка Beaver Themer не входит в наши премиальные пакеты Beaver Builder, поэтому вам необходимо приобрести Beaver Themer, чтобы загрузить пакет плагина и получить лицензионный ключ:

Хорошей новостью является то, что вы можете использовать плагин Beaver Themer на любом количестве веб-сайтов, а первоначальные инвестиции в размере 147 долларов США в подписку Themer могут быть продлены со скидкой.

После того, как вы приобрели Beaver Themer, загрузите дополнение со страницы Моя учетная запись . Он включен в ту же лицензию, что и Beaver Builder, поэтому после установки и активации плагина Themer он автоматически лицензируется на вашем сайте.

Beaver Themer дает вам новую Themer Layouts Опция в меню Beaver Builder:

Это место, где вы будете создавать и редактировать свои Themer макеты или добавлять правила для использования макетов. Вот скриншот настроек для макета Themer типа Header:

С настройками Location вы включаете и исключаете , где появляются ваши макеты. Создав Правила , вы можете использовать условную логику для управления при применении вашего макета.

Например, вы можете показывать определенный макет заголовка Themer только тогда, когда пользователь вошел на ваш сайт.

Как создать макет Beaver Themer всего за 4 шага

Чтобы создать макет Themer, нужно выполнить всего несколько шагов. То, что вы можете сделать с вашим дизайном, ограничено только вашим творческим потенциалом.

Шаг 1. Создайте новый макет Themer

Чтобы начать работу, перейдите к Beaver Builder > Добавить новый :

Введите название для макета Themer. Название не отображается публично.

Для Type выберите Themer Layout. В этом примере для Layout выберите Header :

Когда вы будете удовлетворены своим выбором, нажмите Add Themer Layout . Откроется экран Edit Themer Layout .

Шаг 2: Запустите Beaver Builder и отредактируйте свой макет

Из Редактировать макет Themer , вы можете указать место, где будет отображаться этот макет:

Чтобы начать редактирование макета Themer, нажмите Launch Beaver Builder .

Вместо пустого экрана макета к вашему макету уже применен шаблон макета заголовка.

Если вы когда-нибудь захотите вернуться к этому шаблону, вы найдете его на вкладке Templates панели Content:

Как и в любом другом макете Beaver Builder, у вас есть доступ к модулям и другим инструменты для создания страниц:

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

Название сайта отображается через модуль Заголовок.

Как вы можете видеть на следующем снимке экрана, вместо имени сайта поле Название сайта извлекает эту информацию из Настройки > Общие > Название сайта в области администрирования WordPress.

URL для названия сайта в шапке взят из Настройки > Общие > Адрес WordPress (URL) .

Добавив URL-адрес, если пользователь нажмет на название сайта в заголовке, он вернется на домашнюю страницу.

Преимущество использования связей полей вместо статического текста заключается в том, что если заголовок или адрес вашего сайта когда-либо изменятся, ваш заголовок будет автоматически обновлен.

Любая настройка в Beaver Builder, допускающая полевое подключение, имеет знак плюса с правой стороны поля.

Помимо информации о сайте, существуют другие соединения полей с содержимым, которое меняется от страницы к странице, например, заголовок публикации, избранное изображение публикации и т. д.

Благодаря этому макет Themer действует как «шаблон», отображая правильную информацию везде, где она появляется на вашем сайте.

Вы также можете установить соединения полей с настраиваемыми полями, как собственными для WordPress, так и с помощью плагинов, таких как Advanced Custom Fields и Pods. Это дает вам возможность создавать и использовать информацию, которая действительно делает ваш сайт уникальным.

Давайте добавим модуль Photo в макет заголовка: 

Поле Photo модуля Photo позволяет подключать поля, но в WordPress нет настроек для логотипа заголовка, поэтому вам нужно добавить изображение из вашей медиатеки или URL.

Однако вы можете использовать поле URL-адрес сайта для обратной ссылки на домашнюю страницу.

По завершении нажмите Готово > Сохранить черновик .

Шаг 3. Добавление правил местоположения

Нажмите «Редактировать макет темы» в верхней панели администратора WordPress или вернитесь назад, чтобы открыть экран редактирования макета на панели управления WordPress.

Щелкните раскрывающееся меню в разделе Location и выберите место, где вы хотите применить только что созданный заголовок:

Это сайт WooCommerce, поэтому для этого мы выберем Категория продукта пример. Это активирует второе поле местоположения со всеми вашими ранее созданными категориями продуктов, где вы можете выбрать все категории или определенные.

Вы можете добавить больше правил, если вам нужны определенные страницы, или использовать пустое правило и исключить определенные страницы.

Мы выберем Hoodie в качестве нашей категории продуктов, что означает, что любой продукт, который находится в категории Hoodie, и только эти страницы продуктов отображают макет заголовка Themer.

Когда вы закончите, нажмите Добавить правило местоположения и перейдите к последнему шагу.

Шаг 4. Опубликуйте свой пользовательский макет Themer

Когда вы будете готовы к запуску своего макета, откройте его для редактирования в Beaver Builder и нажмите Готово > Опубликовать , как и для стандартного макета Beaver Builder.

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

Теперь щелкните один из товаров с капюшоном, чтобы открыть страницу продукта. Вы должны увидеть только что созданный макет Beaver Themer, а не заголовок, который появился на главной странице продукта:

Таким образом, вы только что создали и применили собственный макет заголовка Beaver Themer. Это действительно так просто.

Как создавать макеты Singular Themer

Еще один тип шаблона макета, который вы можете сделать чрезвычайно мощным, — это макет Singular Themer. Этот шаблон чаще всего используется для отображения отдельных сообщений в блоге или любых пользовательских сообщений.

Выполните шаги, описанные выше, для создания нового макета, но выберите Singular в качестве типа Layout :

Нажмите Запустите Beaver Builder . Еще раз вы увидите, что шаблон макета Singular уже был применен, содержащий большую часть информации, которую вы обычно находите для одного сообщения, с уже настроенными стандартными полевыми соединениями.

Вы можете настроить этот шаблон или начать с нуля.

В макете Singular есть несколько собственных специальных модулей, доступ к которым можно получить в группе панели содержимого под названием Тематические модули :

Некоторые из этих модулей являются просто специальными версиями существующих модулей. Например, модуль «Заголовок сообщения» — это просто модуль «Заголовок» с полевым подключением к заголовку сообщения.

Если вы наведете указатель мыши на панель инструментов этого модуля в макете шаблона, он скажет, что это модуль заголовка.

Модуль Post Content уникален и заслуживает упоминания. В отличие от всех других модулей Beaver Builder, он служит заполнителем в макете Singular Themer.

Фактический контент извлекается из блока WordPress или классического редактора.

Из-за того, как работает WordPress, вы можете создать стандартный макет Beaver Builder для содержимого публикации или создать макет Themer для области за пределами содержимого публикации (а именно, заголовок публикации, избранное изображение, метаинформация, навигация и и так далее), но вы не можете иметь оба в одном и том же сообщении.

Вот видео, которое проведет вас через это…

Тонкая настройка, когда должен отображаться контент кто может видеть ваш контент.

Вот пример скриншота установки условных логических правил при редактировании макета Themer:

В этом примере макет Themer отображается только тогда, когда пользователь вошел в систему с ролью редактора.

Кроме того, при установленном Beaver Themer эти параметры условной логики доступны в качестве дополнительного выбора в настройке Display на вкладке Advanced для отдельных строк, столбцов и модулей в любом макете Beaver Builder:

As В другом примере вы можете отображать элемент как кнопку только тогда, когда указанное настраиваемое поле имеет значение.

Лучший способ узнать больше о правилах условной логики — обратиться к статье нашей базы знаний.

Заключение

Возможность выбирать, где именно определенные элементы дизайна появляются на вашем веб-сайте, может изменить правила игры. Когда вы добавите Beaver Themer в свой набор инструментов, вы сможете убедиться, что весь ваш сайт выглядит и ощущается целостным.

Начать работу с Beaver Themer легко, если вы помните эти четыре ключевых шага:

  1. Добавьте новые макеты Themer из Beaver Builder > Добавить новый на панель управления WordPress.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *