Варианты подключения Header и Footer на ProcessWire

ProcessWire очень гибкая CMS и Header с Footer можно подключить многими способами. Рассмотрим более распространенные из них.

 

Header и Footer в ProcessWire прописанные сразу в _main.php

Вариант не особо удобен тем, что для редактирования из под админки Header и Footer придется прицеплять их пользовательские поля к определенным созданным в админке страницам. Файл _main.php в этом случае будет выглядеть так:

_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>

Для подключения пользовательских полей мы будем в адмике создавать ресурс с этими полями и цеплять их к Header и Footer командой:

Подключение текстовых полей и картинок

<img class="container-header__navbar-logo" src="<?php echo $pages->get(1016)->logo_header->url ?>" alt="" uk-img>
<p class="container-003__maintext"><?php echo $pages->get(1016)->main_text; ?></p>

 

Header и Footer в ProcessWire как отдельные файлы php

В этом случае создаем в папке шаблонов ProcessWire два файла - header.php и footer.php с HTML разметкой. В админке создадим два шаблона и прикрепим к ним эти два файла, далее создадим ресурсы используя эти шаблоны. Назовем их Header и Footer.

В _main.php организуем подключение этих двух блоков командами include('./header.php'); и include('./footer.php');.

_main.php

<!DOCTYPE html>
<html lang="ru">

<?php
include('./head.php');
?>

<body>

<?php
include('./header.php');
?>
	
<div id="main-content"></div>

<?php
include('./footer.php');
?>

<?php
include('./script.php');
?>

</body>
</html>

Пользовательские поля уже буду браться непосредственно с нужного ресурса, без id страницы.

Подключение текстовых полей и картинок

<img class="container-header__navbar-logo" src="<?php echo $page->logo_header->url ?>" alt="" uk-img>
<p class="container-003__maintext"><?php echo $page->main_text; ?></p>

 

Header и Footer в ProcessWire как отдельные блоки проекта

В этом случае Header и Footer создаются отдельными блоками также как и каждый блок сайта. Для этого в папке "site - templates" создаем php файл с именем "first_block.php" (конечно же можно любое имя). В ProcessWire переходим в шаблоны и создаем новый шаблон, цепляем на него наш только что созданный php файл, и этому шаблону присвоится автоматически текущее имя - "first_block".

Далее в ProcessWire в разделе страниц создаем дочернюю страницу от главной с именем "first_page" (конечно же можно любое имя) и цепляем к ней шаблон "first_block".

Вот по такому правилу создается Header с Footer. И после мы все блоки сайта включая Header и Footer собираем в home.php переименовав при этом _main.php в __main.php.

home.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" type="text/css" href="<?php echo $config->urls->templates?>assets/css/uikit.min.css">
	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>assets/css/styles.css">
</head>
<body>
    
    
    
    
    
<?php
        
        foreach($page->children as $child) {
        $name_template = $pages->get($child->id)->template;
        include('./' . $name_template . '.php');
        }

?>





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





</body>
</html>

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

Подключение текстовых полей и картинок

<img class="container-header__navbar-logo" src="<?php echo $page->logo_header->url ?>" alt="" uk-img>
<p class="container-003__maintext"><?php echo $page->main_text; ?></p>

 

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

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

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

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