Настройка главной страницы на вордпресс?

Question

[Deomid]

Сайт ring of elysium.xyz
Не умею правильно натягивать вёрстку на шаблон. Просто через админпанель в окно, где пишут контент вставил html/css код главной страницы, предварительно написанный в блокноте. Всё по началу казалось хорошо, но когда я увидел свой сайт на большом экране (обычно юзаю ноут) понял, что что-то не так. Подскажите пожалуйста, как убрать эти отступы вокруг фона.

Answer 1

[Орхан Гасанлы]

Вам бы неплохо было ознакомиться с рнр + ВП кодекс.
https://wp-kama.ru/
https://codex.wordpress.org/

Вы хотите создать тему или натянуть только главную страницу на уже имеющуюся тему?
Информация по созданию темы - https://codex.wordpress.org/Theme_Development

Информация по верстке страницы:
- создайте рнр шаблон front-page.php Назначьте ее шаблоном для главной страницы
- вставьте html код в шаблон.
- Добавьте рнр код get_header('home'); get_footer('home'); (Чтобы для главной страницы был свой хедер и футер)
- создайте 2 шаблона header-home.php footer-home.php
- разместите в них код код wp_footer(); wp_head()
- подключите скрипты и стили через functions.php
чтобы не подключать их на всем сайте используйте conditional logic
https://wp-kama.ru/function/is_front_page

Краткая инструкция по основным функциям ВП для создания темы или верстки страницы:
https://yadi.sk/d/5ARTiBzq3QX5Wu

И да, проверьте стили, добавьте медиа запросы + при надобности подключите бутстрап для адптива.

Comments

[Deomid]

Спасибо Вам большое за столь развернутый ответ. Но, к сожалению, мне всё равно не всё понятно.
Я хочу натянуть только главную страницу на уже имеющуюся тему. Хочу оставить шапку и колонтитул темы Astra. А между ними блок на всю ширину и высоту экрана без отступов. В этом блоке хочу поставить фон и несколько заголовков.
А не понял я вот что:
Куда загрузить файл front-page.php и как сделать его шаблоном главной страницы.
В каком месте вставить рнр код get_header('home'); get_footer('home'); После закрывающего тега хтмл в файле front-page.php ?
Обязательно-ли создавать 2 шаблона header-home.php footer-home.php, если я хочу оставить футер и меню сайта такое же, как в теме Astra.

Ещё раз огромное Вам спасибо.

[Орхан Гасанлы]

Здравствуйте!

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

Чтобы создать шаблон вам нужно подключиться по фтп /wp-content/themes/Astra/

скопировать страницу page.php --> переименовать страницу на front-page.php залить обратно новую страницу.

Потом добавьте код в этот шаблон :

<?php
/*
* Template Name: Главная страница
*/
?>

На странице редактирования главной страницы выберите этот шаблон. А в настройках укажите статичную главную страницу.

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

if  (is_front_page()) {
// мои скрипты и стили здесь
}

Должно сработать.

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

Готово.

Чтобы выполнить вышеуказанное вы должны владеть: html, css, php, WP codex

[Deomid]

ringofelysium.xyz

[Deomid]

azerphoenix, ещё раз Вам огромное спасибо. Но вот что я так и, к сожалению, не понял:
Куда мне вписать html-код для главной страницы? Я предполагаю, что в front-page.php, но где именно? боюсь испортить php код, в котором не сильно разбираюсь. Помогите пожалуйста.

[Орхан Гасанлы]

Вам необходимо хотя бы чуть-чуть изучить основы рнр и кодекс ВП. Если вкратце, вам нужно интегрировать рнр с html.

Этапы:
- Создайте рнр файл. (было бы неплохо увидеть содержимое файла page.php на основе, которого вы создаете шаблон для Главной).
- Вставьте туда ваш html код
- Если вы предполагаете, что не будете в дальнейшем редактировать страницу из админки, то вставлять кастомные поля не нужно. Если же вы хотите редактировать страницу из админки, то интегрируйте в нужные места рнр код. В этом вам поможет плагин Advanced Custom Fields.
- Не забудьте, что вверху и внизу страницы должен быть следующий рнр код get_header() & get_footer()
- После того, как шаблон будет готов, то вы можете подключать стили. Так как подключение стилей и скриптов напрямую некорректно с точки зрения кодекса ВП, то вам необходимо подключить их через functions.php Чтобы не загружать все стили и скрипты этой страницы на всем сайте, а только на конкретной странице используйте условный тег.

function my_scripts_styles() {
	if (is_front_page()) {

		wp_register_script('myJS', get_template_directory_uri() .
			'/js/myjs.js');
		wp_enqueue_script('myJS');

		wp_register_style('myCSS', get_template_directory_uri() .
			'/css/mycss.css');
		wp_enqueue_style('myCSS');

	}
}
add_action( 'wp_enqueue_scripts', 'my_scripts_styles' );

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

[Deomid]

Спасибо большое) Единственное, что так и осталось непонятным мне - как задать какую-то тему ТОЛЬКО для гоавной страницы, чтобы моя тема была лишь на главной страницк, а на всех остальный осталась Astra. Вот как выглядит page.php в папке астра

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site may use a
 * different template.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package Astra
 * @since 1.0.0
 */

get_header(); ?>

<?php if ( astra_page_layout() == 'left-sidebar' ) : ?>

	<?php get_sidebar(); ?>

<?php endif ?>

	<div id="primary" <?php astra_primary_class(); ?>>

		<?php astra_primary_content_top(); ?>

		<?php astra_content_page_loop(); ?>

		<?php astra_primary_content_bottom(); ?>

	</div><!-- #primary -->

<?php if ( astra_page_layout() == 'right-sidebar' ) : ?>

	<?php get_sidebar(); ?>

<?php endif ?>

<?php get_footer(); ?>

Ах да, мне файл front-page.php закинуть в паку Astra?
Ещё раз спасибо Вам большое.

[Орхан Гасанлы]

Deomid, давайте, разберемся с терминологией. Шаблон является составной частью темы. Нет необходимости создавать отдельную тему только из-за одной страницы, а нужно создать шаблон (что собственно говоря вы и сделали front-page.php). Шаблон нужно закинуть в тему Astra.

Однако, с технической точки зрения также возможно создать отдельную тему для отдельной страницы. А назначить эту тему только для конкретной темы можно при помощи плагина - Multiple themes

Действуйте, исходя из требований. Что касается шаблона front-page.php

<?php
/**
 *  Template Name: Главная страница
 */
?>

<?php get_header(); ?>

<!-- Ваш html код здесь -->

<?php get_footer(); ?>

Настоятельно рекомендую вам ознакомиться с кодексом ВП, там все доступно написано