Изменяем ширину страницы в шаблоне WordPress

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

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

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

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

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

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

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

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

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

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

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

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

Шаблон страницы избранного (showcase)За исключением небольших полей (которые надо оставить хотя бы для красоты) полезное содержимое страницы размещается на полосе шириной аж 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. Копируете его в свою дочернюю тему.

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

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

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

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

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

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

Изменяем ширину страницы в шаблоне WordPress: 25 комментариев

  1. Здравствуйте, Алексей!
    Подскажите, пожалуйста, как называется визуальный шаблон (тема) этого сайта?

  2. Попробую объяснить, как умею, т.к. не совсем разбираюсь в терминологии. Если Вы посмотрите на мою страницу http://bilet86.ru/tarifyi/ то увидите, что в правом верхнем углу есть надпись «навигация по записям», а внизу надпись «Запись опубликована автором admin. Добавьте в закладки постоянную ссылку.» Вот от них и хотелось бы избавиться. Мне, в принципе, не нужны на этом сайте никакие комментарии и обсуждения, эта страница должна быть простой — ничего лишнего, остальные — тоже. Хочу просто иметь на всех страницах ширину текста 800 пикселей. Без комментариев, а заголовки убираю при помощи другого плагина. Пробовала добавлять в дочернюю тему singl.php с Вашей волшебной строкой, но эффект не тот — текст не расширяется. Два дня не могу найти ничего в интернете, как это можно сделать. Ваша статья самая подходящая, но для получения нужного эффекта мне нужна помощь 🙂

    • Оксана, понял Вас. Попробуйте следующее. Возьмите оригинальный showcase.php, скопируйте его в дочернюю тему и удалите из него весь блок от

      < section class="recent-posts">

      до

      < !-- .recent-posts -->

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

      Напишите о результатах!

  3. Алексей, подскажите, пожалуйста — как поступить в моём случае. Проделала все действия, которые Вы описали в своей статье, получился такой же результат, как и у Вас. Попутно освоила как создавать дочернюю тему и править css (никогда раньше этим не занималась, для меня это уже подвиг :)). Но мне нужно получить другой эффект — сделать так, чтобы использовался базовый шаблон (а не шаблон избранного, т.к. мне не нужны вовсе никакие комментарии и свежие записи — т.е обычная статическая страница), но чтобы ширина текста была 800 пикселей. Заранее благодарю за ответ

    • Здравствуйте, Оксана! Горжусь Вами (серьёзно)!

      Немного не понял Вашего вопроса. Если не нужны только комментарии, их можно отключить к любой странице (снимите галочку под формой редактирования самой записи). В WordPress по умолчанию три шаблона: базовый — это просто узкая полоса текста, второй — с боковой колонкой, когда узкая полоса смещена в сторону, а сбоку идёт колонка с виджетами, и третий — шаблон избранного, который растягивается на всю ширину страницы. Я им (шаблоном избранного) никогда не пользовался, поэтому решил «пожертвовать» им, и переделал под свои нужды, а по факту просто сделал его копией базового шаблона, но сохранил строчку, которая отвечает за растягивание, После всех манипуляций остались: базовый — как есть, с боковой колонкой — как есть, избранного — копия базового со строчкой для растягивания по всей ширине.

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

      Да, и ещё. Вы можете наплодить шаблонов сколько угодно. Я позже об этом узнал. Всё руки не доходят написать. Если дружите с английским, то вот статья с официального сайта: http://codex.wordpress.org/Page_Templates там нужен раздел «Creating a Page Template». Совсем в двух словах суть такова: Вы можете создать дополнительный файл, например, oksana_templ.php, разместив его в дочерней теме, и написать там код своего шаблона, какой хотите. Проще, конечно, копировать и изменять существующие. Одно но: внутри надо дать ему уникальное имя, например, так:

      /**
      * Template Name: Oksana Template

      Тогда при редактировании (создании новой) страницы в списке шаблонов будет четвёртая альтернатива: «Oksana Template»

    • Извините за задержку. Смотрю ваш сайт, вроде всё нормально. Удалось ли решить? Скорее всего проблема где-то в CSS/

      • Все удалось решить,проблемы собственно не существовало,я ввел «тестовую информацию» в виде этого бреда как на скрине, и подумал что ошибка где то в CSS,но сайт просто понимал то что я написал как одно слово, и поэтому не переносил на следующую строку,стоило добавить пробелы,и всё нормально перенеслось!

        • Да, про пробелы я сразу, признаться, не подумал! Хорошо, когда проблемы решаются вот так!

          Успехов с сайтом, вижу он у Вас активно наполняется!

  4. Алексей, вот никогда не заморачивался, где и в каком файле править. Здесь voltest.ru пробный сайт изменил ширину всего чего надо с помощью «Исследовать Элемент» FireFox. Поиск проблемных участков в Текстовым редакторе и правки в этом же редакторе.
    С уважением, Александр Афанасьев.

  5. Если кому интересно, ковырял файл style.css
    Нашел где это исправляется.
    ищите
    .page-content
    и меняете
    max-width: ХХХ px; (где ХХХ ваша ширина поста на странице)
    значение находил экспериментальным путем, мне понравилось 800 px

      • Да это для всего сайта, так как меняется весь класс стиля. Но вдруг кому то, как и мне понадобится именно такое решение.

        • Можно продублировать в CSS все что есть в .page-content, (назвать его, например, .page-content1) и уже в .page-content1 внести все необходимые изменения. А в вашем шаблоне страницы вместо писать

  6. Блин, действительно полезная информация, самое главное что в инете давно искал кауе-то инфу о том как редактировать тему Twenty Eleven, но негде нету, в разных статьях которые находил, там вообше какие-то не те коды в php (в примерах), а тут хоть можно понять что к чему. Если можно буду очень рад если дадите сылку на то что бы подписать на расылку статей по почте, на такую тематику вот связаную с Twenty Eleven, а то явижу у вас много разных рубрик , не только про Twenty Eleven как редактировать.
    И буду благодарный если напишите пример по теме Twenty Eleven а именко как сделать постраничную навигацию в блоге, и как сделать карту сайта и выставить ее в меню как у вас …

    • Рад, что оказалось полезно. У меня тоже иногда ощущение, что я в танке (когда ищу что-нибудь).

      Про рассылку статей по почте — Вы хотите на мой блог подписаться?

      Про постраничную навигацию не понял. Карта сайта справа в сайд-баре — это стандартный виджет «Страницы».

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *