Вы хотите создать страницу во всю ширину сайта WordPress? Многие темы WordPress уже имеют встроенный шаблон страницы полной ширины, который вы можете использовать. Однако некоторые темы не имеют этой функции. В этой статье мы покажем вам, как создать страницу во всю ширину сайта WordPress.
Содержание статьи
Способ 1. Использование встроенного шаблона полной ширины в теме WordPress.
Этот метод рекомендуется, если ваша тема уже содержит шаблон страницы полной ширины.
Сначала вам нужно отредактировать страницу или создать новую, посетив страницу « Добавить новую страницу».
На экране редактирования страницы выберите полную ширину в качестве шаблона в мета-окне атрибутов страницы.
После выбора шаблона полной ширины вам нужно сохранить свою страницу. Вы можете продолжить редактирование страницы, чтобы добавить больше контента или нажать кнопку предварительного просмотра, чтобы увидеть его в действии.
Если на экране редактирования страницы нет шаблона полной ширины, это означает, что ваша тема не поддерживает шаблон ширины.
Не волнуйтесь, мы покажем вам, как легко создать полноразмерную страницу без изменения темы WordPress.
Способ 2. Создание шаблона страницы с полной шириной вручную.
Этот метод требует, чтобы вы редактировали файлы темы WordPress и имели некоторое базовое понимание PHP, CSS и HTML.
Прежде чем продолжить, вы должны создать резервную копию WordPress или, по крайней мере, резервную копию текущей темы. Это поможет вам легко восстановить ваш сайт, если что-то пойдет не так.
Во-первых, вам нужно открыть обычный текстовый редактор, например «Блокнот», и вставить следующий код в пустой файл:
<?php/**Template Name: Full-Width*/get_header(); ?>Теперь вам нужно сохранить этот файл как full-width.phpна вашем компьютере.
Этот код просто определяет имя файла шаблона и просит WordPress получить шаблон заголовка.
Затем вам понадобится часть содержимого кода. Подключитесь к своему сайту с помощью FTP-клиента (или файлового менеджера в cPanel), а затем перейдите в / wp-content / themes / ваше название темы /.
Теперь вам нужно найти файл с именем page.php. Это файл шаблона страницы вашей темы по умолчанию.
Скопируйте все после get_header()строки и вставьте в файл full-width.php на свой компьютер.
Теперь вам нужно посмотреть файл full-width.php и удалить эту строку кода:
<?php get_sidebar (); ?>
Эта строка просто извлекает боковую панель и отображает ее в вашей теме. При удалении этой темы ваша тема будет показывать боковую панель при использовании шаблона полной ширины.
Вы можете видеть, что эта строка отображается несколько раз в вашей теме. Если ваша тема имеет несколько боковых панелей (области виджета нижнего колонтитула также называются боковыми), вы увидите каждую боковую панель, указанную один раз в коде. Вам нужно решить, какие боковые панели вы хотите сохранить.
Если ваша тема не отображает боковые панели на страницах, вы не можете найти этот код в своем файле.
Вот как выглядит наш код full-width.php после внесения изменений. Ваш код может выглядеть несколько иначе, в зависимости от вашей темы.
<?php/**Template Name: Full-Width*/get_header(); ?><div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php // Start the loop. while ( have_posts() ) : the_post(); // Include the page content template. get_template_part('template-parts/content','page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } // End of the loop. endwhile; ?> </main><!-- .site-main --></div><!-- .content-area --><?php get_footer(); ?>Затем вам нужно загрузить файл full-width.php в папку темы с помощью FTP-клиента.
Вы успешно создали и загрузили собственный шаблон полноразмерной страницы в свою тему. Следующий шаг — использовать этот шаблон для создания страницы полной ширины.
Перейдите в область администрирования WordPress и отредактируйте или создайте новую страницу.
На экране редактирования страницы найдите метатекст атрибутов страницы и нажмите раскрывающееся меню в разделе «Шаблон».
Вы сможете увидеть свой шаблон полной ширины. Идем дальше, выбираем его и сохраняем / обновляем страницу.
Теперь вы можете посетить свой сайт, и вы увидите, что боковые панели исчезли, а ваша страница отображается как один столбец. Возможно, она еще не полная, но теперь вы готовы редактировать ее по другому.
Для определения области содержимого вам нужно будет использовать инструмент Inspect, чтобы узнать классы CSS, используемые вашей темой.
После этого вы можете настроить его ширину до 100% с помощью CSS. Мы использовали следующий код CSS на нашем тестовом сайте:
.page-template-full-width .content-area { width:100%; margin:0px; border:0px; padding:0px;}.page-template-full-width .site {margin:0px;}
Способ 3. Создание страницы полной ширины с помощью плагина Builder
Этот метод проще и рекомендуется для всех пользователей. Это позволяет вам легко редактировать вашу страницу с полной шириной и создавать различные макеты страниц для вашего сайта.
Для этого метода вам понадобится плагин для создания страницы WordPress. Ради этого урока мы будем использовать Beaver Builder. Это один из лучших плагинов для перетаскивания страниц и позволяет легко создавать макеты страниц без написания кода.
Первое, что вам нужно сделать, это установить и активировать плагин Beaver Builder.
После активации вам необходимо отредактировать существующую страницу или создать новую.
На экране редактирования страницы в разделе атрибутов страницы вам нужно выбрать шаблон полной ширины, предоставленный вашей темой WordPress.
Если ваша тема не имеет шаблона полной ширины, вы можете создать ее, следуя инструкциям, указанным во втором методе.
После выбора шаблона страницы вам нужно нажать кнопку «Сохранить черновик», чтобы сохранить свою страницу.
Теперь вы можете использовать плагин для построения страницы, чтобы создать свой макет. Вы начнете, щелкнув вкладку построителя страниц над редактором страницы.
Это запустит интерфейс Page Builder, где вы сможете просмотреть предварительный просмотр своей страницы в режиме просмотра страниц.
Вы можете начать, нажав кнопку «Шаблоны» вверху. Beaver Builder поставляется с несколькими готовыми к использованию и профессионально разработанными шаблонами, которые вы можете использовать в качестве отправной точки.
Вы можете просто щелкнуть по шаблону, чтобы выбрать его, и построитель страницы загрузит его для вас, включая макет, изображения и контент. Вы также можете нажать на пустой шаблон, чтобы начать без готового шаблона и создать свой собственный макет.
Макеты Beaver Builder построены с использованием рядов и модулей. Каждая строка может иметь несколько столбцов, и внутри каждой строки вы можете добавлять модули контента и виджеты.
Чтобы отредактировать строку или модуль в макете, вам просто нужно указать и щелкнуть по ней.
После того, как вы закончите редактирование, вы можете нажать кнопку «Готово» вверху. Это покажет вам всплывающее окно, где вам нужно нажать кнопку «Сохранить» или «Опубликовать».
Теперь вы можете посетить свою страницу, чтобы увидеть ее в действии.
Оставить комментарий