WordPress как изменить ширину шаблона

Часто при подборе шаблона wordpress возникает проблема – это недостаточная ширина блоков. У многих тут же возникает желание изменить ширину шаблона. Для тех, кто хорошо разбирается в html или php это не создаст особых проблем. Но для того чтобы подробно написать о том, как вносить изменения в размеры шаблона wordpress для неподготовленного человека, понадобится целая брошюра.

Самое простое – заказать, но тот, кто пытается сделать это самостоятельно, получает знания. В дальнейшем, ему не придется обращаться к специалистам по каждой мелочи. Зная «основу» сделать это вполне возможно. Перед началом, каких – либо изменений, обязательно сделайте запасную копию всех страниц вашего ресурса. В случае неточной работы, вы без проблем восстановите первоначальный вид сайта.

Шаблонов wordpress невероятное множество, все они различны и каждый меняется по-своему. Но такие основные блоки как: ширина основной страницы, шапка, левая и правая колонка, подвал имеют все. Для работы нам понадобится:

Когда все необходимое скачано, установлено и готово к работе, открываем выбранный шаблон в Mozilla Firefox и запускаем Firebug, нажав значок жука.

Панель плагина

Внизу открывается панель плагина, в которой мы будем работать. Все вносимые изменения тут же будут отображаться в верхней части монитора. На вкладке справа мы видим CSS стиль выбираемого элемента, слева html код страницы. Чтобы увеличить или уменьшить ширину шаблона, первым делом мы должны узнать текущий размер основы. Нажимаем на значок курсора нашего плагина.

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

Правим style.css

Теперь осталось сохранить эти изменения для шаблона wordpress. Обычно ширина шаблона прописывается в style.css. Входим в административную панель веб-сайта → внешний вид → редактор → style.css → строка 79, меняем значение width. Сохраняем.

(Всего посетителей: 9 445, сегодня: 1)

Сегодня о том, как изменить ширину страницы в шаблоне WordPress. Если выражаться более точно, то речь идёт о том, чтобы всю эту ширину использовать.

Дело в том, что мой любимый шаблон Twenty Eleven имеет ещё одно неудобство: при создании страниц полоса с текстом получается очень узкой, а справа и слева от неё «пропадает» куча полезного места. Сегодня справимся и с этим.

Когда Вы создаёте страницу, справа в настройках можно выбрать шаблон. Обычно там три альтернативы, и в зависимости от перевода (если Вы его вообще используете), там будет что-то вроде:

• Базовый шаблон
• Шаблон избранного (иногда может встретиться слово Showcase)
• Шаблон с боковой колонкой

Базовый шаблон

Первый шаблон – Базовый шаблон – используется по умолчанию. Я создал тестовую страницу, чтобы было легче понять, о чём я говорю. С ним страница будет выглядеть так:

Я специально наложил на изображение красные стрелки, чтобы показать: ширина белого поля составляет 1000 точек, в то время как весь текст и изображения «теснятся» на полосе шириной 584 точки. Таким образом мы можем (в идеале) расшириться на 416 точек.

Шаблон с боковой колонкой

Если выбрать Шаблон с боковой колонкой, то мы увидим следующую картину:

«Полезное» пространство не изменилось и по-прежнему составляет 584 точки, однако справа у нас появилась боковая колонка, что само по себе уже очень удобно.

Шаблон избранного

Но я предлагаю пойти дальше и выбрать Шаблон избранного (третий оставшийся вариант. Мы увидим такую картину:

За исключением небольших полей (которые надо оставить хотя бы для красоты) полезное содержимое страницы размещается на полосе шириной аж 840 точек!

Мы почти у цели!

Однако есть нюансы. Если приглядеться, то можно заметить, что:

1. У страницы потерялся заголовок. На предыдущих слайдах он был: «Страница ширины шаблонов».
2. Внизу появилась лента последних записей, которая, в общем, тут ни к чему.
3. Картинка не позволяет показать, но даже если мы пролистаем страницу вниз, то там нет формы для того, чтобы оставить комментарий

Но с этими проблемами очень легко справиться!

Меняем шаблон

Должен сразу сказать, что проблема со всеми этими полями и отступами легко решается с помощью настройки стилей средствами CSS. Легко – для того, кто знает CSS и понимает, как это всё работает. Я вот лично, не изучал, поэтому не знаю и не понимаю. Зато уже описывал, как создать свой дочерний шаблон и творить с ним что угодно, не боясь что-то испортить, поэтому предлагаю и тут пойти проторенной дорожкой.

Итак, как обычно, нам надо угадать, какой файл менять. Немного поковырявшись в скриптах сайта я понял, что за Шаблон избранного (showcase) отвечает файл showcase.php, поэтому смело копируем его из основной темы в Вашу дочернюю и начинаем редактировать.

Когда заглянете внутрь showcase.php, то обнаружите там много-много всего. Признаюсь, я смог найти кусок кода, который отвечает за вывод ленты и убрал его. Лента исчезла. А вот добавить туда код, который бы создавал форму комментариев у меня не получилось. О заголовке страницы я тогда даже не думал. Поэтому я поступил радикально, что и Вам советую.

Я взял шаблон по умолчанию (Базовый шаблон), за него отвечает файл single.php, и просто в него добавил одну строку из Шаблона избранного. Вот текст Базового шаблона, пока он был ещё базовым:

<?php
/**
* The Template for displaying all single posts.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/

get_header(); ?>

   <div id="primary">
      <div id="content" role="main">

         <?php while ( have_posts() ) : the_post(); ?>

            <nav id="nav-single">
               <h3><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
               <span><?php previous_post_link( '%link', __( '<span>&larr;</span> Previous', 'twentyeleven' ) ); ?></span>
               <span><?php next_post_link( '%link', __( 'Next <span>&rarr;</span>', 'twentyeleven' ) ); ?></span>
            </nav><!-- #nav-single -->

            <?php get_template_part( 'content-single', get_post_format() ); ?>

            <?php comments_template( '', true ); ?>

         <?php endwhile; // end of the loop. ?>

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

<?php get_footer(); ?>

Вот как он выглядит в моём исполнении:

<?php
/**
 * Template Name: Showcase Template
 * Description: A Page Template that uses the whole width of the page
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );

get_header(); ?>

   <div id="primary">
      <div id="content" role="main">

         <?php while ( have_posts() ) : the_post(); ?>

            <nav id="nav-single">
               <h3><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
               <span><?php previous_post_link( '%link', __( '<span>&larr;</span> Previous', 'twentyeleven' ) ); ?></span>
               <span><?php next_post_link( '%link', __( 'Next <span>&rarr;</span>', 'twentyeleven' ) ); ?></span>
            </nav><!-- #nav-single -->

            <?php get_template_part( 'content-single', get_post_format() ); ?>

            <?php comments_template( '', true ); ?>

         <?php endwhile; // end of the loop. ?>

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

<?php get_footer(); ?>

То, что изменилось, отмечено зелёным, а то, что добавилось – синим. Собственно, изменились только название и описание шаблона, а добавилась только строка:

wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );

И в этой строке вся соль. Она и «растягивает» Базовый шаблон на всю ширину страницы, оставляя и заголовок, и комментарии внизу.

Для тех, кого я окончательно запутал, вот алгоритм:

1. Ищем в родительской теме (в моём примере это тема Twenty Eleven, за другие не ручаюсь) файл single.php.
2. Копируете его к себе на жёсткий диск
3. Переименовывает его в showcase.php. Был single.php, стал showcase.php.
4. В полученный таким образом файл showcase.php вносите изменения (см. выше).
5. Копируете его в свою дочернюю тему.

Ну, всё, готово! Если всё сделали правильно, картинка должна получить такая:

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

Пользуйтесь на здоровье!

И напоследок…

Если совсем ничего не получается (или не совсем, а только что-то), то обращайтесь за помощью ко мне.

Понравилась статья? Поделитесь с друзьями:

Шаблоны позволяют управлять разметкой страниц. В отличие от тем, которые задают дизайн всего веб-сайта, шаблон влияет на внешний вид и образ отдельных записей и страниц (или групп записей и страниц).

В этом руководстве рассказывается, как изменить шаблон страницы и отредактировать его в некоторых темах.

Содержание

Шаблоны

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

Шаблон управляет отображением страницы. Стандартные шаблоны включают следующие:

• Шаблон по умолчанию: стандартный шаблон.
• Шаблон в полную ширину: этот шаблон показывает содержимое страницы в полную ширину экрана без боковых панелей.
• Шаблон сетки: этот шаблон отображает содержимое в разметке в виде сетки (см. этот пример из темы Dara).

Смена шаблона страницы влияет только на эту страницу, а не на весь веб-сайт.

Иерархия шаблонов

Прежде чем приступать к редактированию шаблонов, необходимо разобраться в их иерархии. Есть несколько базовых шаблонов, которые автоматически создаются при выборе темы. WordPress использует такие шаблоны для создания стилей по умолчанию для некоторых типов страниц. Например:

• Если на главной странице сайта отображаются последние записи, для создания стиля этой страницы применяется шаблон Home или Index.
• Если на главной странице сайта отображена обычная страница, для создания стиля домашней страницы применяется шаблон Front page или Page.
• Во многих темах на основе блоков есть встроенные шаблоны, например Single Post для настройки внешнего вида отдельных записей или 404 для страниц ошибки 404.
• Шаблон Archive используется для рубрик или архивов, но не применяется для страниц записей.

Если вам интересны технические аспекты настройки таких шаблонов, см. справочник по темам на WordPress.org.

Редактирование шаблонов

Редактирование шаблонов — это новая концепция, представленная в WordPress для расширения возможностей управления разметкой содержимого. В этом помогает редактор шаблонов, который в некоторых темах позволяет создавать пользовательские шаблоны и назначать их конкретным страницам и записям.

Возможно, вы уже привыкли редактировать содержимое в редакторе страниц и записей WordPress. Теперь вы можете перейти в редактор шаблонов, чтобы с помощью блоков выполнять редактирование всей разметки страниц и записей, в том числе элементов заголовка (например, названия сайта и ключевой фразы) и подвала, а также выполнять настройку отображения содержимого на страницах и в записях.

Например, если необходимо, чтобы название вашего сайта выглядело на различных страницах по-разному, можно отредактировать шаблон страницы так, как показано здесь:

Доступ к редактору шаблонов через редактор страниц или записей

Работая над страницей или записью, найдите Шаблон в настройках на правой боковой панели. Вы увидите используемый шаблон. Нажмите Редактировать, чтобы переключиться в редактор шаблона и изменить шаблон:

После выбора шаблона для редактирования откроется Редактор шаблонов. Чтобы определить, что вы редактируете шаблон, а не страницу или запись, убедитесь, что (1) вокруг области редактирования содержимого есть чёрная рамка; (2) в верхней части отображается название шаблона; (3) на боковой панели настроек отображается слово «шаблон»:

Доступ к редактору шаблонов через редактор сайта

Шаблоны также можно редактировать в редакторе сайта. Перейдите в раздел Внешний вид → Редактор на консоли. Откроется шаблон, который используется на домашней странице. Чтобы перейти к редактированию другого шаблона, щёлкните значок сайта в левом верхнем углу и выберите Шаблоны.

Выбор шаблона для редактирования

В теме есть несколько шаблонов, которые можно редактировать напрямую. Чтобы просмотреть их, щёлкните значок сайта в левом верхнем углу и выберите Шаблоны. Откроется список, в котором будут созданные вами шаблоны. Чтобы отредактировать шаблон, щёлкните его имя. Этот шаблон откроется в редакторе, где его можно будет отредактировать.

Просмотр структуры шаблона

Чтобы просмотреть все блоки в шаблоне, щёлкните Список в верхней части экрана (значок в виде трёх горизонтальных линий).

Прежде чем начать редактировать отдельные области, желательно просмотреть всю структуру шаблона. Затем нажмите любой блок в списке, чтобы изменить настройки этого блока.

Редактирование блоков шаблона

В редакторе шаблонов щёлкните любой блок, чтобы изменить содержимое или настройки блока. Возможны следующие действия:

• Редактирование элементов заголовка с помощью блока «Название сайта», блока «Ключевая фраза сайта» и блока «Логотип сайта». Перейдите на страницу Настройка заголовка, чтобы узнать больше.
• Добавление меню с помощью блока «Навигация».
• Добавление боковой панели с помощью столбцов.
• Управление внешним видом записей.
• Скрытие названий страниц или записей.
• Редактирование внешнего вида подвала.

Возможности безграничны!

Сохранение изменений

Закончив редактирование, в правом верхнем углу щёлкните Сохранить.

Здесь будет отображаться изменённый шаблон. Нажмите Сохранить ещё раз, чтобы подтвердить сохранение изменений шаблона.

Щёлкните значок сайта в левом верхнем углу, чтобы вернуться и выйти из редактора.

Сброс шаблона

Примеры использования редактора шаблонов

Существует много способов использования редактора шаблона для создания красивых пользовательских разметок. Здесь представлено несколько примеров.

Добавление пользовательского меню

Если вы хотите представить пользовательское меню только на конкретных страницах, с помощью Редактора шаблонов добавьте Блок «Навигация», как показано на видео ниже:

Добавление пользовательского подвала

Можно настроить вид вашего подвала таким образом, чтобы он отличался на разных страницах, как показано на следующем видео:

Создание нового шаблона

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

1. Чтобы создать новый шаблон, нажмите Новый на правой боковой панели в разделе «Шаблон» настроек страницы.
2. Назовите шаблон и нажмите Создать.
3. В Редакторе шаблона можно отредактировать структуру отображения страницы.
4. После этого щёлкните Обновить в правом верхнем углу, чтобы сохранить шаблон.
5. Щёлкните Назад, чтобы вернуться в редактор страницы или записи. Новый шаблон появится в списке доступных шаблонов.

Применение шаблона

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

1. Добавьте или отредактируйте страницу либо запись, к которой вы хотите применить шаблон.
2. На боковой панели Настройки найдите раздел Шаблон. Если боковая панель «Настройки» не открывается, щёлкните значок настроек рядом с кнопкой «Опубликовать» или «Обновить», чтобы открыть боковую панель.
3. Выберите шаблон, который нужно применить.

Вы можете выполнить предварительный просмотр страницы или записи с применённым шаблоном. Щёлкните опцию Предварительный просмотр в верхней части редактора и выберите Предварительный просмотр в новой вкладке.

Если вас устраивает шаблон и содержимое страницы или записи, щёлкните Опубликовать. Либо же если страница или запись уже опубликована, щёлкните Обновить, чтобы применить изменения для опубликованной страницы.

Вы хотите создать полноразмерную страницу на WordPress?

Много Темы WordPress уже поставляются со встроенным полноширинным шаблоном страницы, который вы можете использовать. Однако некоторые темы WordPress не имеют этой функции. в этом Tutoriel, мы покажем вам, как легко создать полноразмерную страницу на WordPress.

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге 

Тогда вернемся к тому, почему мы здесь.

Метод 1: использование встроенного шаблона ширины в вашей теме WordPress

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

Сначала вам нужно отредактировать страницу или создать новую, посетив » Страницы> Добавить Новая страница

В окне редактирования страницы выберите Полная ширина в качестве шаблона под флажком атрибутов страницы.

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

Если у вас нет параметра «Полная ширина — Полная ширина — шаблона» на экране редактирования страницы, это означает, что в вашей теме WordPress его нет. 

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

Метод 2: как создать шаблон страницы с полной шириной

Этот метод требует от вас редактирования файлов используемой вами темы WordPress и базовых знаний о PHP, CSS и HTML.

Кстати, мы также приглашаем вас проконсультироваться с 8 лучшие плагины WordPress для простого создания макетов 

Но прежде чем продолжить, вы должны создайте резервную копию WordPress или хотя бы резервную копию вашей текущей темы WordPress. Это поможет вам легко восстановить ваш сайт, если что-то случится. 

Во-первых, вам нужно открыть текстовый редактор, например Блокнот, и вставить следующий код в пустой файл:

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

Теперь вам нужно сохранить этот файл как » Полный width.php На вашем компьютере.

Этот код просто устанавливает имя шаблона файла и сообщает WordPress, что нужно извлечь шаблон заголовка.

Далее вам понадобится контентная часть кода. Подключитесь к своему сайту с помощью FTP-клиента (или файловый менеджер в CPanel) затем перейдите к / Wp-содержание / темы / ваш-тематический каталог / .

Затем вы должны найти файл с именем » page.php «. Это файл шаблона страницы по умолчанию для вашей темы.

Скопируйте все после функции « get_header () И вставьте его в файл Полный width.php Это вы создали на своем компьютере.

Теперь вам нужно посмотреть содержимое файла «full-width.php» и удалить эту строку кода:

<?php get_sidebar(); ?>

Эта строка просто берет боковую панель и отображает ее в вашей теме WordPress. Если удалить это, ваша тема не будет отображать боковую панель при использовании шаблона. Полная ширина.

Вы можете увидеть эту строку несколько раз в вашей теме WordPress. Если в вашей теме WordPress несколько боковые панели (области виджета нижний колонтитул также называют боковыми панелями)вы увидите каждую боковую панель, на которую ссылается один раз в коде. Вы должны решить, какие боковые панели вы хотите сохранить.

Ваш веб-сайт загружается медленно, откройте для себя Почему вы должны начать оптимизировать свой блог WordPress по изображениям

Если ваша тема не отображает боковые панели на вашей странице, вы можете не найти этот код в своем файле.

Вот как наш код 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(); ?>

Тогда вам нужно скачать файл Полный width.php »В папке с темой WordPress с помощью кнопки FTP-клиент.

Вы успешно создали и загрузили в свою тему собственный шаблон страницы с полной шириной. Следующим шагом будет использование этого шаблона для создания страницы во всю ширину.

Перейдите на панель инструментов и отредактируйте или создайте новую страницу.

На экране редактирования страницы установите флажок атрибутов страницы и щелкните раскрывающееся меню под параметром «Шаблон».

Вы сможете увидеть свою модель. Вперед, выберите его и сохраните или обновите страницу.

Теперь вы можете посетить свой веб-сайт, и вы увидите, что боковые панели исчезли, а ваша страница отображается как страница с одним столбцом. Возможно, он еще не заполнен, но теперь вы можете транслировать его по-другому.

Сделайте свой сайт популярным, открыв для себя 7 WordPress плагины для оптимизации SEO ваших изображений

Вам нужно будет использовать инструмент 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;
}

Вот как это будет выглядеть Двадцать Семнадцать.

Это все для этого урока, я надеюсь, что оно позволит вам создавать полноразмерные страницы.

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

Откройте для себя также несколько премиальных плагинов WordPress  

Вы можете использовать другие WordPress плагины чтобы придать современный вид и оптимизировать обработку вашего блога или веб-сайта.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Divi Builder

Divi Builder — это высококачественный конструктор страниц, который высоко ценится Элегантные темы. Хотя он обычно используется как часть темы Divi WordPress, Divi Builder также является автономным плагином, который вы можете использовать в других темах WordPress.

Divi Builder позволяет редактировать ваш контент, используя визуальный интерфейс во внешнем интерфейсе, а также интерфейс во внутреннем интерфейсе, хотя большинство пользователей предпочитают первый интерфейс.

В основном вместо боковых панелей это все во всплывающих окнах и плавающих кнопках. Он дает вам доступ к 316 заранее разработанным шаблонам, разбросанным по 40 различным пакетам презентаций, а также возможность сохранять ваши собственные проекты в качестве шаблонов.

Мы предлагаем вам открыть Как создать профессиональный блог

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

Вы даже можете добавить собственный CSS, поскольку его редактор CSS объединяет базовую проверку и автозаполнение. Divi Builder всегда критиковали за то, что он полагается на шорткоды, Это означает, что если вы отключите его однажды, в вашем контенте останется куча шорткодов. Хотя это немного удручает, но теперь существует меньше проблем с такими плагинами, как Shortcode Cleaner.

скачать | Демонстрация | веб-хостинг

2. Строитель

Неудивительно, что Themify Builder — это предложение команды Themify. Он интегрирует его в несколько тем WordPress, чтобы предоставить клиентам простые варианты настройки. Но вы также можете купить его как отдельный плагин и использовать с любой темой WordPress.

Подобно Divi Builder и WPBakery Page Builder, Themify Builder позволяет создавать макеты во внешнем или внутреннем интерфейсе. Еще одна хорошая вещь заключается в том, что этот плагин позволяет вам настраивать ваши отзывчивые точки останова (но только на уровне всего веб-сайта).

Откройте для себя Как установить и настроить WooCommerce для создать интернет магазин и легко продавать свою продукцию в Интернете 

Одна интересная вещь в Themify Builder заключается в том, что он по-прежнему позволяет вам использовать стандартный редактор WordPress, тогда как другие конструкторы страниц заставляют вас использовать интерфейс WordPress. конструктор страниц За все.

скачать | Демонстрация | веб-хостинг

3. Факир

Плагин Elementor WordPress, изначально запущенный в 2016 году, является одним из самых молодых конструкторов страниц в этом списке. Несмотря на поздний запуск, Elementor быстро набрал более 1 активных установок на WordPress.org, что сделало его одним из самых популярных конструкторов страниц WordPress.

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

Его интерфейс разделен на две основные части, с третьей зоной для определенных параметров. Бесплатная версия Elementor предлагает бесплатные виджеты 28. В версии Pro представлены другие виджеты 30, а в версии Pro — всего виджеты 58. Бесплатная версия включает в себя около бесплатных шаблонов 40, а версия Pro содержит сотни дополнительных шаблонов.

 скачать | Демонстрация | веб-хостинг

Другие рекомендуемые ресурсы

Узнайте о других рекомендуемых ресурсах, которые помогут вам создать и управлять своим сайтом.

• Как безопасно изменить тему WordPress
• Как настроить поставки на WooCommerce
• Премиальные плагины 10 для WordPress от Booking и Booking
• Когда и как установить WordPress в подкаталоге
• 10 WordPress плагины для улучшения скорости вашего блога

Заключение

Вот! Это все для этого урока. Если у вас есть тема WordPress, которая не предлагает полноразмерную страницу в качестве шаблона, то мы надеемся, что это руководство помогло вам устранить этот недостаток. Не стесняйся поделиться с друзьями в ваших любимых социальных сетях. 

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии.

… 

Вы хотите создать страницу полной ширины в WordPress? Многие темы WordPress уже поставляются со встроенным шаблоном страницы полной ширины, который вы можете использовать. Однако некоторые темы не имеют этой функции. В этой статье мы покажем вам, как легко создать страницу полной ширины в WordPress.

Метод 1: использование встроенного шаблона полной ширины в теме WordPress

Этот метод рекомендуется, если ваша тема уже содержит шаблон страницы полной ширины.

Сначала вам нужно отредактировать страницу или создать новую, посетив Страницы »Добавить новый стр.

На экране редактирования страницы выберите полную ширину в качестве шаблона в мета-окне атрибутов страницы.

После выбора шаблона полной ширины вам нужно сохранить свою страницу. Вы можете продолжить редактирование страницы, чтобы добавить больше контента или нажать кнопку предварительного просмотра, чтобы увидеть его в действии.

Если на экране редактирования страницы нет параметра ширины полной ширины, это означает, что ваша тема не имеет шаблона страницы ширины.

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

Метод 2: создать шаблон страницы с полной шириной вручную

Этот метод требует, чтобы вы редактировали файлы темы WordPress и имели некоторое базовое понимание PHP, CSS, и HTML. Если вы этого еще не сделали, ознакомьтесь с нашим руководством по как скопировать / вставить код в WordPress.

Прежде чем продолжить, вы должны создать Резервное копирование WordPress или, по крайней мере, резервное копирование текущей темы. Это поможет вам легко восстановить ваш сайт, если что-то пойдет не так.

Во-первых, вам нужно открыть обычный текстовый редактор, например «Блокнот», и вставить следующий код в пустой файл:

Теперь вам нужно сохранить этот файл как full-width.php на твоем компьютере.

Этот код просто определяет имя файла шаблона и просит WordPress получить шаблон заголовка.

Затем вам понадобится часть содержимого кода. Подключитесь к своему сайту, используя FTP клиент (или файловый менеджер в cPanel), а затем перейдите в / wp-content / themes / your-theme-folder /.

Теперь вам нужно найти файл с именем page.php. Это файл шаблона страницы вашей темы по умолчанию.

Скопируйте все после get_header() и вставьте его в файл full-width.php на вашем компьютере.

Теперь вам нужно посмотреть файл full-width.php и удалить эту строку кода:

Эта строка просто извлекает боковая панель и отображает его в вашей теме. При удалении этой темы ваша тема будет показывать боковую панель при использовании шаблона полной ширины.

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

Если ваша тема не отображает боковые панели на страницах, вы не можете найти этот код в своем файле.

Вот как выглядит наш код full-width.php после внесения изменений. Ваш код может выглядеть несколько иначе, в зависимости от вашей темы.

Затем вам нужно загрузить файл full-width.php в папку темы с помощью FTP-клиента.

Вы успешно создали и загрузили собственный шаблон полноразмерной страницы в свою тему. Следующий шаг — использовать этот шаблон для создания страницы полной ширины.

Перейдите в область администрирования WordPress и отредактируйте или создайте новую страницу.

На экране редактирования страницы найдите метатекст атрибутов страницы и нажмите раскрывающееся меню в разделе «Шаблон».

Вы сможете увидеть свой шаблон полной ширины. Идем дальше, выбираем его и сохраняем / обновляем страницу.

Теперь вы можете посетить свой сайт, и вы увидите, что боковые панели исчезли, а ваша страница отображается как один столбец. Возможно, она еще не полная, но теперь вы готовы ее по-другому.

Вам нужно будет использовать инструмент «Осмотр» чтобы узнать классы CSS, используемые вашей темой, для определения области содержимого.

После этого вы можете настроить его ширину до 100% с помощью CSS. Мы использовали следующий код CSS на нашем тестовом сайте:

.стр-шаблона полной ширины зоны .content {ширина: 100%; Маржа: 0px; граница: 0px; обивка: 0px; } .стр-шаблон полной ширины .Выходного {поля: 0px; }

Вот как это выглядело на нашем демо-сайте с использованием темы Twenty Sixteen.

Метод 3: создать страницу с полной шириной, используя плагин Builder

Этот метод проще и рекомендуется для всех пользователей. Это позволяет вам легко редактировать вашу страницу с полной шириной и создавать различные макеты страниц для вашего сайта.

Для этого метода вам понадобится Плагин для создания страницы WordPress, Ради этого урока мы будем использовать Beaver Builder, Это один из лучших плагинов для перетаскивания страниц и позволяет вам легко создавать макеты страниц без написания кода.

Первое, что вам нужно сделать, это установить и активировать Beaver Builder плагин. Для получения дополнительной информации см. Наше пошаговое руководство по как установить плагин WordPress.

После активации вам необходимо отредактировать существующую страницу или создать новую.

На экране редактирования страницы в разделе атрибутов страницы вам нужно выбрать шаблон полной ширины, предоставленный вашей темой WordPress.

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

После выбора шаблона страницы вам нужно нажать кнопку «Сохранить черновик», чтобы сохранить свою страницу.

Теперь вы можете использовать плагин для построения страницы, чтобы создать свой макет. Вы начнете, щелкнув вкладку построителя страниц над редактором страницы.

Это запустит интерфейс построителя страниц, где вы сможете просмотреть предварительный просмотр своей страницы в режиме просмотра страниц.

Вы можете начать, нажав кнопку «Шаблоны» вверху. Beaver Builder поставляется с несколькими готовыми к использованию и профессионально разработанными шаблонами, которые вы можете использовать в качестве отправной точки.

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

Beaver Builder макеты строятся с строками и модулями. Каждая строка может иметь несколько столбцов, и внутри каждой строки вы можете добавлять модули контента и виджеты.

Чтобы отредактировать строку или модуль в макете, вам просто нужно указать и щелкнуть по ней.

Beaver Builder откроет данные о деталях во всплывающем окне, где вы сможете отредактировать его настройки. Вы можете менять цвета, шрифты, добавлять фоновые фотографии, изменять текст и т. Д.

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

После того, как вы закончите редактирование, вы можете нажать кнопку «Готово» вверху. Это покажет вам всплывающее окно, где вам нужно нажать кнопку «Сохранить» или «Опубликовать».

Теперь вы можете посетить свою страницу, чтобы увидеть ее в действии.

Мы надеемся, что эта статья помогла вам научиться легко создавать страницу полной ширины в WordPress.

сообщение Как создать полную страницу ширины в WordPress Появившийся сначала на WPBeginner.

От автора: приветствую вас, друзья. В очередной статье на тему WordPress мы с вами рассмотрим вопрос, как изменить шаблон WordPress. Если вы еще никогда не сталкивались с необходимостью изменения шаблона WordPress, тогда обязательно прочтите данную статью, поскольку рано или поздно вам, скорее всего, придется столкнуться с вопросами настройки и редактирования шаблона WordPress.

Для начала давайте определимся с наиболее часто возникающими вопросами, с которыми сталкиваются пользователи при настройке шаблона WordPress под себя. Вот примерный их список:

И это лишь небольшой перечень проблем, с которыми вы можете столкнуться или которые вы сможете помочь решить другим, в том числе и за вознаграждение, если вы занимаетесь разработкой сайтов на заказ.

Все вопросы в списке выше можно решить двумя способами в зависимости от темы, которая используется для сайта. Начнем с самого простого варианта, который не требует знаний верстки. Этот вариант подойдет, если шаблон поддерживает редактирование из настроек.

Перейдем в раздел Внешний вид — Настроить и увидим главную страницу сайта и в левой части страницы доступные настройки сайта. Среди них могут быть и настройки оформления.

Для примера давайте попробуем изменить цветовую схему сайта. Зайдем в меню Цвета и изменим фон боковой и центральной частей сайта.

Как видим, это довольно удобно и изменить цвет шаблона WordPress достаточно просто — результат мы видим сразу же и можем его оценить.

Однако не всякая тема предлагает все необходимые нам настройки шаблона WordPress. Например, там вряд ли будут настройки, позволяющие изменить ширину шаблона на WordPress, например, даже в текущей теме нет настроек, позволяющих изменить шрифт в шаблоне и так далее. Как же быть в этом случае? Вот здесь нам и придется прибегнуть ко второму варианту и здесь уже необходимы некоторые навыки верстки.

Итак, нам потребуется редактировать чаще всего только один файл — это файл стилей style.css. Находится он в папке вашей темы. Давайте в качестве примера изменим цвет шрифта. Кстати, сделать это можно прямо из админки WordPress. Только будьте аккуратны и внимательны, чтобы случайно не «поломать» сайт. Лучше всего сделайте резервную копию темы перед тем, как что-то менять в ней. Итак, идем в меню Внешний вид — Редактор и по умолчанию у Вас должен быть открыт для редактирования файл стилей темы.

Если это не так, тогда выберите этот файл из списка справа, он называется Таблица стилей (style.css). Чаще всего цвет шрифта задается в body, поэтому найдем стили данного элемента и пропишем красный цвет для в качестве цвета шрифта.

После сохранения файла можем обновить сайт и увидеть красный цвет для основного шрифта на сайте.

Как видим, настройка шаблона WordPress под себя — достаточно несложная задача. Достаточно немного знаний CSS и вы сможете изменить шаблон WordPress и произвести необходимую настройку шаблона. По той же схеме мы можем решить и другие аналогичные задачи. На этом я с вами прощаюсь. Удачи и до новых встреч!