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

Для начала переходим в папку "Site - Templates". В эту папку, в корень, переносим всю папку "assets" из нашего проекта.

Займемся Header и Footer, это будут повторяющиеся блоки на нашем всем сайте. Первое что нужно сделать, это в файл конфигурации внесем изменения.

Изменения в файле config.php

$config->appendTemplateFile = '_main.php';
$config->useMarkupRegions = true;

Теперь правим сам шаблон "_main.php". В нем блок <div id="main-content"></div> будет отвечать за контент страниц.

_main.php

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<meta name="Description" content="">
	<meta name="keywords" content="">

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>assets/css/styles.css">

	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">

	<link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/css/owl.carousel.css">
	<link rel="stylesheet" href="<?php echo $config->urls->templates?>assets/css/owl.theme.default.css">
</head>
<body>





	<a id="home"></a>
	<div class="container-header1">
		<div class="container-header1-content">
			<div class="container-header1__logo">
				<a class="container-header1__logo-link" href="">
					<img class="container-header1__logo-link-img" src="<?php echo $config->urls->templates?>assets\images\logo.png" alt="">
					<p class="container-header1__logo-link-text">ОИК</p>
				</a>
			</div>
			<div class="container-header1__center">
				<p class="container-header1__center-text1">
					Комплексные решения для производства электроники
				</p>
				<p class="container-header1__center-text2">
					Решения "под ключ" технологический аудит, программные продукты
				</p>
			</div>
			<div class="container-header1__phone">
				<a class="container-header1__phone-link1" href="">+7(495)123-45-78</a>
				<a class="container-header1__phone-link2" href="">КОНСУЛЬТАЦИЯ</a>
			</div>
		</div>
	</div>





	<div class="container-header2">
		<div class="container-header2-content">
			<nav class="navbar navbar-expand-lg">
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="fa fa-bars"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="#link1">ГЛАВНАЯ</a>
					</li>
					<p class="sep">/</p>
					<li class="nav-item">
						<a class="nav-link" href="#link2">О КОМПАНИИ</a>
					</li>
					<p class="sep">/</p>
					<li class="nav-item">
						<a class="nav-link" href="#link3">УСЛУГИ</a>
					</li>
					<p class="sep">/</p>
					<li class="nav-item">
						<a class="nav-link" href="#link4">ПРОЕКТЫ</a>
					</li>
					<p class="sep">/</p>
					<li class="nav-item">
						<a class="nav-link" href="#link4">ОТЗЫВЫ</a>
					</li>
					<p class="sep">/</p>
					<li class="nav-item">
						<a class="nav-link" href="#link4">НОВОСТИ</a>
					</li>
					<p class="sep">/</p>
					<li class="nav-item">
						<a class="nav-link" href="#link4">ВАКАНСИИ</a>
					</li>
					<p class="sep">/</p>
					<li class="nav-item">
						<a class="nav-link" href="#link4">КОНТАКТЫ</a>
					</li>
				</ul>
				</div>
			</nav>
		</div>
	</div>
	
	
	
	
	
<div id="main-content"></div>





	<div class="container-footer1">
		<div class="container-footer1-content">
			<div class="container-footer1__items">

				<div class="container-footer1__items-itm">
					<p class="container-footer1__items-itm-maintext">
						О компании
					</p>
					<p class="container-footer1__items-itm-text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.
					</p>
				</div>

				<div class="container-footer1__items-itm">
					<p class="container-footer1__items-itm-maintext">
						Услуги
					</p>
					<p class="container-footer1__items-itm-text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.
					</p>
				</div>

				<div class="container-footer1__items-itm lastblock">
					<p class="container-footer1__items-itm-maintext">
						Контакты
					</p>
					<p class="container-footer1__items-itm-text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.
					</p>
				</div>

			</div>
		</div>
	</div>





	<div class="container-footer2">
		<div class="container-footer2-content">
			<div class="container-footer2__items">

				<div class="container-footer2__items-itm">
					<a class="container-footer2__items-itm-link" href="">Политика конфеденциальности</a>
				</div>

				<div class="container-footer2__items-itm">
					<p class="container-footer2__items-itm-text">2010-2022</a>
				</div>

				<div class="container-footer2__items-itm itm-right">
					<a class="container-footer2__items-itm-link" href="">Разработка сайта</a>
				</div>

			</div>
		</div>
	</div>





<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

<script src="<?php echo $config->urls->templates?>assets/js/main.js"></script>

<script src="<?php echo $config->urls->templates?>assets/js/owl.carousel.js"></script>
<script>
	$(document).ready(function(){
	$('#carousel-one').owlCarousel({
		loop: false,
		autoplay: false,
		margin: 0,
		nav: false,
		dots: false,
		responsive:{
					0:{
                        items:2
                    },
                    400:{
                        items:2
                    },
                    576:{
                        items:2
                    },
                    768:{
                        items:2
                    },
                    950:{
                        items:3
                    },
                    1200:{
                        items:3
                    }
                }
	});
	$('#pre01').parent().addClass('off-element');
	});
</script>




</body>
</html>

Все пути, которые у нас выглядят вот так: "href="assets/css/styles.css"" меняем на "href="<?php echo $config->urls->templates?>assets/css/styles.css"", то есть добавляем "<?php echo $config->urls->templates?>".

Если вдруг, нужен будет снова базовый _main.php, то его можно будет скачать вот здесь.

Далее переходим к правке шаблона "home.php". В него помещаем всю нашу верстку без Header и Footer, они уже добавлены. Но, все блоки контента нам нужно поместить внутрь блока <div id="main-content"></div>.

home.php

<div id="main-content">




		<div class="container-002">
		<div class="container-002-content">
			<div class="container-002__leftblock">
				<img class="container-002__leftblock-img" src="assets/images/pict001.jpg" alt="">
			</div>
			<div class="container-002__rightblock">
				<p class="container-002__rightblock-title1">Решения для производства электроники</p>
				<p class="container-002__rightblock-title2">Компания СОИК</p>
				<hr>
				<p class="container-002__rightblock-text">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
				<ul class="container-002__rightblock-list">
					<li class="container-002__rightblock-list-element">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
					<li class="container-002__rightblock-list-element">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
					<li class="container-002__rightblock-list-element">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
					<li class="container-002__rightblock-list-element">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
				</ul>
			</div>
		</div>
	</div>





	<div class="container-003">
		<div class="container-003-content">
			<div class="container-003__info">
				<p class="container-003__info-text">Lorem ipsum dolor sit amet, consectetur adipiscing</p>
				<div class="container-003__info-link">
					<a class="container-003__info-link-lnk" href="">Заказать звонок</a>
				</div>
			</div>
		</div>
	</div>





	<div class="container-004 overlay-black" style="background-image: url(assets/images/back001.jpg);">
		<div class="container-004-content">
			<hr>
			<p class="container-004__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
			<hr>
		</div>
	</div>





	<div class="container-005">
		<div class="container-005-content">
			<div class="container-005__items">

				<div class="container-005__items-itm">
					<img class="container-005__items-itm-img" src="assets/images/icon001.png">
					<p class="container-005__items-itm-title">Делаем работу в срок</p>
					<p class="container-005__items-itm-text">
						Многолетний практический опыт позволяет нам точно оценить маштабы проекта и грамотно спланировать работу.
					</p>
				</div>

				<div class="container-005__items-itm">
					<img class="container-005__items-itm-img" src="assets/images/icon002.png">
					<p class="container-005__items-itm-title">Держим в курсе 24/7</p>
					<p class="container-005__items-itm-text">
						Ваш персональный менеджер всегда на связи и готов проконсультировать по всем вопросам.
					</p>
				</div>

				<div class="container-005__items-itm">
					<img class="container-005__items-itm-img" src="assets/images/icon003.png" alt="">
					<p class="container-005__items-itm-title">Внесем изменения</p>
					<p class="container-005__items-itm-text">
						Любые дополнения и корректировки мы вносим оперативно. Нам нужен качественный результат.
					</p>
				</div>

			</div>
		</div>
	</div>




	
</div>

При этом также не забываем править пути, добавляя "<?php echo $config->urls->templates?>".

Если нужен исходный файл "home.php", то он здесь.

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

 

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

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены