Как сделать разный title если header везде одинаковый?
Здравствуйте!
У меня есть папка с файлами сайта. Header и Footer вынесены в отдельные файлы php и шаблонизированы с помощью
<?php include 'header.php'; ?> |
<?php include 'header.php'; ?>
Но возникла проблема. Файл Header содержит информацию не только с контактами, но и с микроразметкой json, а также title и скрипт google tag manager, которые должны быть разные на всех страницах.
Вопрос: как мне шаблонизировать только контакты, чтобы title и микроразметка json были разные на всех страницах? Я могу поместить в файл Header только контактную инфомацию?
То есть в итоге получится, что в файле Header будет так:
<link rel="stylesheet" href="css/style-home.css"> <link rel="stylesheet" href="css/home-media.css"> <link rel="stylesheet" type="text/css" href="/slick-1.8.1/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="/slick-1.8.1/slick/slick-theme.css"/> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen"> <!-- <link rel="icon" href="https://мойсайт.ru/favicon.ico" type="image/x-icon"> --> </head> <body> <div class="wrapper"> <div class="container"> <header class="header"> <div class="container"> <div class="header__body"> <a href="index.php" class="header__logo"> <img src="images/logo/logo-invert2.png" alt="#"> </a> <div class="social-sm"> <a href="#"> <img src="images/icons/telegram.png" alt="#"> </a> <a href="#"> <img src="images/icons/whatsapp.png" alt="#"> </a> </div> <div class="social"> <a href="#"> <img src="images/icons/telegram.png" alt="#"> </a> <a href="#"> <img src="images/icons/whatsapp.png" alt="#"> </a> </div> <div class="header__burger"> <span> </span> </div> <nav class="header__menu" > *тут меню и контакты* </nav> </div> </div> </header> |
<link rel="stylesheet" href="css/style-home.css"> <link rel="stylesheet" href="css/home-media.css"> <link rel="stylesheet" type="text/css" href="/slick-1.8.1/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="/slick-1.8.1/slick/slick-theme.css"/> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen"> <!-- <link rel="icon" href="https://мойсайт.ru/favicon.ico" type="image/x-icon"> --> </head> <body> <div class="wrapper"> <div class="container"> <header class="header"> <div class="container"> <div class="header__body"> <a href="index.php" class="header__logo"> <img src="images/logo/logo-invert2.png" alt="#"> </a> <div class="social-sm"> <a href="#"> <img src="images/icons/telegram.png" alt="#"> </a> <a href="#"> <img src="images/icons/whatsapp.png" alt="#"> </a> </div> <div class="social"> <a href="#"> <img src="images/icons/telegram.png" alt="#"> </a> <a href="#"> <img src="images/icons/whatsapp.png" alt="#"> </a> </div> <div class="header__burger"> <span> </span> </div> <nav class="header__menu" > *тут меню и контакты* </nav> </div> </div> </header>
А остальные файлы будут начинатьс так:
<!DOCTYPE html> <html lang="ru"> <head> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-W84CGY9YFS"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-W84CGY9YFS'); </script> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> <title>Уникальный заголовок</title> <!-- <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Главная", "item": "https://мойсайт.ru/index.html" } ] } </script> --> <meta name="robots" content="index, follow"> <meta name="description" content="Наше утп"> |
<!DOCTYPE html> <html lang="ru"> <head> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-W84CGY9YFS"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-W84CGY9YFS'); </script> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> <title>Уникальный заголовок</title> <!-- <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Главная", "item": "https://мойсайт.ru/index.html" } ] } </script> --> <meta name="robots" content="index, follow"> <meta name="description" content="Наше утп">
Можно ли так делать? Я пока проблем не увидела, проверяла на Open Server. Но все-таки лучше спрошу, дабы избежать неприятных сюрпризов.
Благодарю всех заранее!
Дополнительно:
переменные можно устанавливать во внешнем файле, а использовать во вкладываемых, как вариант что-то типа
$header = [ /* все что нужно хедеру */ ]; include 'header.php'; |
$header = [ /* все что нужно хедеру */ ]; include 'header.php';
а в header.php
$header += [ /* значения по умолчанию */ ]; // генерация header по переданному |
$header += [ /* значения по умолчанию */ ]; // генерация header по переданному
Спасибо большое за ответ) Но, похоже отсутствие знаний php мешает мне применить эту схему так, как надо.
Видимо, нельзя добавлять в переменную head, или же нельзя его делить на части, надо добавлять полностью , иначе все ломается и вместо сайта белый экран.
Я нашла как сделать хотя бы разный title)
в index.php :
<?php $header = 'Уникальный заголовок'; include 'header.php'; ?> |
<?php $header = 'Уникальный заголовок'; include 'header.php'; ?>
в header.php:
<title><?= $header ?></title>
Каким-то чудом заголовок меняется))
в index.php
<?php $headerData = [ 'title' => 'Главная', ]; |
<?php $headerData = [ 'title' => 'Главная', ];
include 'header.php';
а в header.php
<?php $headerData ??= []; $headerData += [ 'title' => 'Заголовок страницы', ]; ?> <title><?= $headerData['title'] ?></title> |
<?php $headerData ??= []; $headerData += [ 'title' => 'Заголовок страницы', ]; ?> <title><?= $headerData['title'] ?></title>
таким образом можно переопределять нужные данные, но работает только с ключами верхнего уровня
ПС: и не чудом, а логикой, переменные объявленные до include доступны и в этом самом include, однако это не касается функций и т.п. — там нужно по классике использовать global или $GLOBALS
Создаете 4 файла: template.php, header.php, content.php, footer.php.
Подключаете в файле template.php остальные 3 файла:
//template.php <!DOCTYPE html> <html lang="ru"> <?php include_once 'header.php'; ?> <body> <?php include_once 'content.php'; include_once 'footer.php'; ?> </body> </html> |
//template.php <!DOCTYPE html> <html lang="ru"> <?php include_once 'header.php'; ?> <body> <?php include_once 'content.php'; include_once 'footer.php'; ?> </body> </html>
Потом в том файле, который будет выводить содержимое страницы, сначала получаете нужные данные (допустим из базы), а далее подключаете файл template.php.
Допустим, для главной страницы будет примерно так:
//index.php $data = [ 'title' => 'Главная страница', 'content' => 'Содержимое главной страницы', ]; include_once 'template.php'; |
//index.php $data = [ 'title' => 'Главная страница', 'content' => 'Содержимое главной страницы', ]; include_once 'template.php';
Ну и соответственно в файлах шаблона выводите переменные:
//header.php <head> <title><?=$data['title']?></title> </head> |
//header.php <head> <title><?=$data['title']?></title> </head>
//content.php <div> <p><?=$data['content']?></p> </div> |
//content.php <div> <p><?=$data['content']?></p> </div>
//footer.php <footer> <p>Подвал сайта</p> </footer> |
//footer.php <footer> <p>Подвал сайта</p> </footer>
- Спасибо большое за подробное объяснение, от всей души благодарю! Просто учебный материал)
PHP позволяет решить эту задачу множеством способов, использовать готовый шаблонизатор, например Twig.
Или реализовать свой с использованием функций ob_start() и ob-get-clean(): создаете файлы index.php и functions.php, каталог templates в котором будут храниться все файлы шаблонов. В каталоге templates создаете файлы: layout.php, header.php, footer.php, content.php.
Файл functions.php:
/** * Функция загрузки шаблона * * @param string $template Путь до файлов шаблона * @param mixed[] $data Данные для подстановки в шаблон * @return string Возвращает готовый код шаблона */ function render_template($template, $data = []) { ob_start(); if (file_exists($template)) { extract($data); require($template); } else { print('Нет файла шаблона: '.$template); } $html = ob_get_clean(); return $html; } |
/** * Функция загрузки шаблона * * @param string $template Путь до файлов шаблона * @param mixed[] $data Данные для подстановки в шаблон * @return string Возвращает готовый код шаблона */ function render_template($template, $data = []) { ob_start(); if (file_exists($template)) { extract($data); require($template); } else { print('Нет файла шаблона: '.$template); } $html = ob_get_clean(); return $html; }
Файл index.php:
require_once __DIR__ . '/functions.php'; $header = render_template('templates/header.php', ['title' => 'Главная страница']); $footer= render_template('templates/footer.php'); $content = render_template('templates/content.php'); $page_layout = render_template('templates/layout.php', ['header' => $header, 'footer' => $footer, 'content' => $content]); print($page_layout); |
require_once __DIR__ . '/functions.php'; $header = render_template('templates/header.php', ['title' => 'Главная страница']); $footer= render_template('templates/footer.php'); $content = render_template('templates/content.php'); $page_layout = render_template('templates/layout.php', ['header' => $header, 'footer' => $footer, 'content' => $content]); print($page_layout);
Файл templates/header.php:
<head> <title><?=$title?></title> </head> |
<head> <title><?=$title?></title> </head>
Файл templates/layout.php (в котором вместо <?=$header?> будет выводиться содержимое из файла templates/header.php и т.д.):
<!DOCTYPE html> <html lang="ru"> <?=$header?> <body> <?=$content?> <?=$footer?> </body> </html> |
<!DOCTYPE html> <html lang="ru"> <?=$header?> <body> <?=$content?> <?=$footer?> </body> </html>
- Спасибо большое за такую подробную инструкцию! Поэксперементирую сегодня!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы задать разные значения для атрибута "title" на разных страницах вашего сайта, несмотря на то, что у вас одинаковый заголовок на каждой странице, вы можете использовать различные способы.
1. Используйте JavaScript: Вы можете добавить скрипт на каждую страницу, который будет устанавливать значение атрибута "title" динамически. Например:
document.title = "Заголовок страницы 1";
2. Используйте PHP: Если вы используете PHP для создания своего сайта, вы можете установить значение атрибута "title" на каждой странице, используя условные операторы. Например:
$title = "Заголовок страницы 1";
3. Используйте HTML: Вы также можете установить значение атрибута "title" непосредственно в HTML-коде каждой страницы, добавив его к тегу
<title>Заголовок страницы 1</title>
4. Используйте метатеги: Вы можете добавить метатег на каждую страницу, который будет устанавливать значение атрибута "title" для поисковых систем. Например:
Выберите подходящий способ для вашего сайта и настройте значение атрибута "title" на каждой странице соответственно. Это позволит улучшить опыт пользователей и повысить SEO-оптимизацию вашего сайта.