Привет, с Вами я, Алексей Иванков и сегодня я хотел бы рассказать обо одной очень интересной методике, которая заключается в добавлении html-страницы в шаблон WordPress.
Данная статья будет рассчитана на людей, которые ничего не понимают в верстке, не знают JavaScript, PHP и т.п.
Многие люди, которые хотят завести блог, обычно обращаются к одному из бесплатных движков, называемых CMS. Одним из таких движков, как мы знаем является WordPress.
Данный движок позволяет очень хорошо спроектировать шаблоны, но для этого нужно обладать приличными навыками работы с html и CSS, а также неплохо бы знать JavaScript и PHP. В этом случае вы сможете написать шаблон. Но а как же, быть, если вы не программист? Ответ очевиден — использовать шаблон.
В сети существует множество шаблонов, как платных, так и бесплатных. Есть множество очень хороших бесплатных шаблонов. Но обычно они обладают меньшим функционалом, чем платные.
Если вы web-программист со знаниями вышеперечисленных технологий, то легко или относительно легко сможете исправить данный шаблон и настроить его полностью под себя. Если же нет, то придется довольствоваться только теми функциями, которые предоставляет шаблон.
Но я скажу честно, что даже с минимальными знаниями того, как устроен WordPress и немного поигравшись с шаблонами, можно достаточно сильно изменить внешний вид шаблона.
Когда я делал этого блог, то столкнулся вот с такой задачей... Мне захотелось, чтобы у меня была в качестве главной страницы запуска — простая статическая страница. Обычно на блогах на главной странице сразу отображаются посты. Но встречаются и те, которые имеют простую статическую страницу.
Статическую страницу легко сделать прямо в WordPress вручную или с помощью плагинов, таких как Elementer. Но в этом посте речь не об этом.
Давайте представим, что у Вас есть уже готовая статическая страница, которую вам кто то сделал, а может быть вы сами ее когда то сделали, она вам нравится и именно ее вы бы хотели сделать главной на вашем блоге, а уже с нее переходить непосредственно на какую-либо из страниц блога, например на ту, где у вас расположены посты.
ok, хорошо. Это легко можно сделать. Конечно у меня не сразу это получилось, да и в сети информации об этом крайне мало. Поэтому у меня и появилась идея рассказать об этом вам.
Допустим у вас есть страница со стилями, шрифтами, картинками и скриптами. Что нам нужно сделать, чтобы внедрить ее в WordPress и сделать главной?
- Необходимо создать шаблон для статической страницы. Дело в том, что WordPress не имеет статических страниц (если только не установлен плагин кеширования). WordPress создает страницы динамически на основе шаблона. В шаблон же подставляются значения из базы данных в виде записей, картинок и так далее. И получается страница, которую вы видите у себя на экране, когда загружаете какой-либо сайт. Поэтому нам нужно создать шаблон для нашей страницы. Создайте для этого на компьютере текстовый файл и назовите его mainpage.php;
- Добавьте в этот файл следующий код и сохраните файл:
<?php
/**
* Template Name: Главная страница
*/
?>Этим кодом вы создадите шаблон. В данном шаблоне «Главная страница» — это название шаблона. Можете назвать его как хотите. Позже это название нужно будет просто выбрать из списка.
- Загрузите этот файл себе на хостинг по адресу: /www/ваш домен/wp-content/themes/ваша тема/
- В моем примере это выглядело так: /www/ivankov.net/wp-content/themes/root/
- Затем войдите в консоль WordPress и перейдите в «Страницы». Добавьте новую страницу.
- В свойствах новой страницы укажите как на рисунке ниже:
Обязательно нужно выбрать шаблон. Наш шаблон, который мы создавали, называется «Главная страница». Также следует указать заголовок, который будет являться названием страницы и ярлык. Назовем страницу Главная. Заголовок же следует писать транслитерацией на латинском. Это необходимо для SEO-продвижения. Для этого удобно пользоваться сервисом транслитерации от Яндекс: После этого нужно обновить/сохранить страницу.
Вам также потребуется создать еще одну страницу. Ее можно назвать, например, «Блог». На этой странице будут публиковаться записи вашего блога (Если у вас сайт-блог).
Теперь следует перейти в Настройки / Чтение и в рубрике На главной странице отображать выбрать установить переключатель на Статическая страница.
После этого из двух раскрывающихся списков необходимо выбрать страницу, которая будет отображаться в качестве главной и страницу, на которой будут публиковаться записи блога.
В качестве статической страницы выбираем созданную страницу — Главная. В качестве страницы записей — страницу Блог. Сохраняем изменения.
Теперь, если вы запустите ваш сайт, появится пустая страница. Так и должно быть, ведь для нашей главной страницы мы выбрали шаблон, но ничем его не заполнили.
Теперь есть два пути. Вы можете оформлять страницу вручную, например используя различные редакторы и плагины, такие как Elementor. А можете внедрить ту страницу, которая у вас уже есть, которую вы сами ранее разработали, либо ее кто-то разработал для вас. В общем ту страницу, которая вам нравится.
Переходим в свой хостинг и открываем список файлов вашего блога по адресу: /www/ваш домен/wp-content/themes/ваша тема/ и открываете файл шаблона главной страницы mainpage.php, который мы создавали. Можете скопировать его на свой компьютер, сделать его копию, а затем вносить в него изменения.
Какие изменения нужно внести в этот файл? Вам необходимо скопировать содержимое html-файла вашей страницы, которую вы хотите добавить и вставить в файл mainpage.php сразу после кода, определяющего шаблон. В моем случае — это выглядит так. То, что выделено жирным остается, а сразу после этого вставляем содержимое html-файла.
<strong><?php
/**
* Template Name: Главная страница
*/
?></strong>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Блог Алексея Иванкова</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/app.js" defer></script>
<script src="libs/rain.js" defer></script>
</head>
....... продолжение кода.
Сохраним наш файл и загрузим его обратно на хостинг с заменой предыдущего. Запускаем сайт и видим, что у нас появилось содержимое главной страницы, но оно пока еще не обладает тем видом, как итоговая страница.
В моем случае это выглядело так:
На красивую главную страницу это не похоже, но все же здесь уже что-то появилось. Выглядит это все так потому что сейчас еще не загружены стили, скрипты, шрифты, картинки вашей страницы.
Вашу html-страницу обязательно сопровождают файлы стилей, файлы шрифтов (скорее всего), файлы изображений. Из них собирается страница. Возможно для удобства эти элементы сгруппированы по папкам. Это зависит от того, как это делал верстальщик. И в общем все эти папки и файлы следует скопировать в корневую папку темы нашего сайта, как всегда в: /www/ваш домен/wp-content/themes/ваша тема/
На хостинге для удобства, чтобы потом вспомнить что это за папки и для чего они нужны, вы можете их переименовать или вовсе сделать одну папку для стартовой страницы и в нее поместить все эти папки и файлы. Просто теперь, чтобы html-страница «увидела» эти файлы нужно указать для нее пути до этих файлов. Пути указываются все в том же файле шаблона mainpage.php. Это делается следующим образом:
...
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Блог Алексея Иванкова</title>
<link rel="icon" href="https://ivankov.net/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/css/main.css" />
<script src="<?php echo get_template_directory_uri() . '/js/app.js'; ?>" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri() . '/js/rain.js'; ?>" type="text/javascript"></script>
</head>
<body>
<div class="logo" style="background-image: url(<?php echo get_template_directory_uri(); ?>/img/logo.svg);"></div>
<section class="layers">
...Обратите внимание на код с тегами link, script и div. Здесь указываются пути к файлам. У вас могут по другому называться папки и файлы. Например файл main.css (который у меня является файлом стилей для главной страницы) у вас может называться по другому. Он также может находиться в другой папке, не в css, как у меня. Вы для удобства можете скопировать этот main.css (у вас может по другому называться) в любую удобную для вас папку на хостинге. Главное в коде указать до него путь. С остальными файлами совершенно аналогично — прописываем до них пути размещения.
Теперь сохраняем наш файл mainpage.php и загружаем его на сервер. Запускаем сайт и получаем вашу красивую статическую страницу, которую вы хотели разместить.
Примечание автора: статическая страница построена на основе материалов сайта: https://webdesign-master.ru
