Делаю сайт на Wordpress, тема Astra.
1. Я создала дочернюю тему Astra Child
2. В папке Astra Child у меня есть файлы:
style.css
header.php
custom-header.php
functions.php
и папка с калькулятором для вставки в шорт-код.
Мне нужно сделать шапку сайта с верхним меню на всю ширину экрана.
У меня почему-то footer и header по размеру контейнера, хотя по размеру контейнера должен быть только контент внутри, а не сам элемент.
functions.php
<?php
/**
* Astra Child Theme functions and definitions
*
* @package Astra Child
* @since 10.1
*/
/**
* Define Constants
*/
define('CHILD_THEME_ASTRA_CHILD_VERSION', '10.1');
/**
* Enqueue styles and scripts
*/
function astra_child_enqueue_styles() {
// Подключаем стили родительской темы
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
// Подключаем основной style.css дочерней темы
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
// Подключаем стили калькулятора
wp_enqueue_style('calculator-style', get_stylesheet_directory_uri() . '/calculator/style.css', array(), '1.0');
// Подключаем скрипт калькулятора
wp_enqueue_script('calculator-script', get_stylesheet_directory_uri() . '/calculator/main.js', array('jquery'), '1.0', true);
// Локализуем URL для AJAX-запроса к gold_price.php
wp_localize_script('calculator-script', 'calculatorAjax', array(
'ajax_url' => get_stylesheet_directory_uri() . '/calculator/gold_price.php'
));
}
add_action('wp_enqueue_scripts', 'astra_child_enqueue_styles');
function gold_calculator_shortcode() {
ob_start();
?>
<div class="calculator-container">
<div class="input-group">
<label for="weight">Вес золота (граммы):</label>
<input type="number" id="weight" step="0.01" min="0" placeholder="Введите вес">
</div>
<div class="input-group">
<label for="purity">Проба золота:</label>
<select id="purity">
<option value="0.375">375</option>
<option value="0.500">500</option>
<option value="0.585" selected>585</option>
<option value="0.750">750</option>
<option value="0.958">958</option>
<option value="0.999">999</option>
</select>
</div>
<div class="input-group">
<label>Цена за грамм в ЦБ (руб.):</label>
<span id="price-per-gram">7500</span> </div>
<button onclick="calculatePrice()">Рассчитать →</button>
<div class="result" id="result">Итоговая стоимость: 0 руб.</div>
</div>
<?php
return ob_get_clean();
}
add_shortcode('gold_calculator', 'gold_calculator_shortcode');
?>
header.php
<?php
/**
* The header for Astra Theme.
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package Astra
* @since 1.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
?><!DOCTYPE html>
<?php astra_html_before(); ?>
<html <?php language_attributes(); ?>>
<head>
<?php astra_head_top(); ?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php
if ( apply_filters( 'astra_header_profile_gmpg_link', true ) ) {
?>
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php
}
?>
<?php wp_head(); ?>
<?php astra_head_bottom(); ?>
</head>
<body <?php astra_schema_body(); ?> <?php body_class(); ?>>
<?php astra_body_top(); ?>
<?php wp_body_open(); ?>
<a
class="skip-link screen-reader-text"
href="#content"
title="<?php echo esc_attr( astra_default_strings( 'string-header-skip-link', false ) ); ?>">
<?php echo esc_html( astra_default_strings( 'string-header-skip-link', false ) ); ?>
</a>
<div
<?php
echo wp_kses_post(
astra_attr(
'site',
array(
'id' => 'page',
'class' => 'hfeed site',
)
)
);
?>
>
<?php get_template_part( 'custom-header' ); ?>
<div id="content" class="site-content">
<div class="ast-container">
<?php astra_content_top(); ?>
custom-header.php
<header id="masthead" class="site-header">
<div class="container__header">
<div class="site-branding">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/logo.png" alt="Логотип">
</a>
</div>
<nav id="site-navigation" class="main-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>
</div>
</header>
Прикладываю скрин, на котором видно, что вся область шапки в контейнере.
А нужно, чтобы область шапки была на всю ширину...
Как это сделать? Такое чувство, что тема Astra перебивает мои настройки.
