WordPress увеличить ширину шаблон, или растянуть боковое меню и раздел статей

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

Для чего может понадобиться поменять размер шаблона.

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

  1. Чтобы кто-то кликнул на рекламу надо чтобы баннера, которые выдаст система находились на определенных местах. В интернете пишут что это левые слайдер, туда размещаем квадратный баннер,  и три раза внутри статьи. На самом верху, в центре, после какого-то заголовка, и в самом конце. Такое расположение будет идеально чтобы люди кликали на баннера. Конечно есть еще и другие варианты, к примеру на картинках, но мы их, в рамках этой статьи не рассматриваем.
  2. Google выдает баннера определенных размеров.

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

Как увеличить шаблон по горизонтали часть 1, понимаем цифры

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

  • Safari
  • FireFox
  • Google chrome

Лично я буду показывать на примере Safari, а вы на любом удобном для вас браузере. Отличия должны быть только в одной кнопке.

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

  1. Клацаем правой кнопкой мышки на шапке сайта и выбираем «Проверить объект» Проверить обьект Safari WordPress шаблон
  2. Внизу нам открывается программный код страницы. Не бойтесь, нам будет все понятно. Ищем чуть ли не самый верхний стиль, который описывает размер шаблона. У меня этот клас называется, main-container, а строчка, которую надо найти соответственно
    1
    
    <div class="main-container"></div>
  3. С лева браузер нам показывает что ширина 980 пикселей. Давайте поменяем это значение скажем на 1180 пикселей. Просто удалите значение 980 и напишите 1080 как обычный текст. После того как вы внесете изменения они сразу вступят в силу. На данном этапе не бойтесь ошибаться, потому что эти изменения работают только до перезагрузки странницы и видны только вам. Если вы нажмете «обновить страницу» то все вернется как и было.WordPress ширина шаблона основная
  4. После увеличения сами границы блога стали больше, но весь контент кучкуется по центру. Чтобы это исправить давайте поменяем еще один стиль который держит границы и не дает «расплыться» двум элементам, списку статей и левому меню, по своим местам. Находим строчку
    1
    
    <div id="page" class="home-page"></div>

    и нажимаем на нее

  5. Как и в первом случае меняем значение 980 на 1080 пикселей
  6. В моем случае после этого изменения все стало на свои места. Границы сами расширились. Но если у вас не так, или вы хотите что-то еще уменьшить то нам надо будет править строки:
1
<div class="article"></div>

Для изменения ширины раздела со статьями или размера собственно самой статьи.

1
<aside class="sidebar c-4-12"></div>

Для изменения ширины левого меню.

В этом случае вы можете поменять как пиксели, как мы делали это в пункте 3-5, так и процентное соотношение на странице. Для этого достаточно поменять вместо пикселей параметр

1
width: 31.8%;

Wordpress изменение соотношений ширины шаблонаЭти значения означают сколько процентов ширины можно занимать тому или иному элементу. Главное чтобы в сумме sidebar и статья занимали 100%, а не больше, иначе у вас все поплывет по странице.

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

Как увеличить шаблон по горизонтали часть 2, меняем ширину

После того как мы поняли цифры, и записали их где-то на листочке давай теперь поменяем их для всех, а не только для себя. Для этого:

  1. Зайдите по FTP на сайт
  2. Найдите и скопируйте к себе на компьютер файл /wp-content/themes/Ваша тема/style.css
  3. Сделайте резервную копию этого файла, т.е. скопируйте его к себе в папку документы. Чтобы на компьютере было две копии файла, один над которым мы будем работать, второй который мы не будем трогать. Второй служит на случай если мы что-то поменяем не так и забудем что.
  4. Открывайте файл в удобном редакторе. Теперь перед нами стоит довольно простая задача поменять, старые значения на новые. Существует два способа, первый легкий второй тяжелый. Первый — поиском находим старое значение и пишем вместо него новое. Второй способ — ищем название стилей, внутри стилей ищем ширину и меняем значение.

Лично я для себя выбрал первый, легкий способ, поскольку он позволяет внести изменения буквально за пару секунд. Итак, ищем значение 980. Поиск по файлу выдал только два параметра, которые мне и надо поменять.

Первый, отвечает за ширину всего сайта:

1
2
3
4
5
6
7
8
#page {
min-height: 100px;
clear: both;
width: 96%;
padding: 0;
padding-top: 24px;
max-width: 980px;
overflow: hidden;

Второй за ширину двух элементов, списка статей, и левого меню:

1
2
3
4
5
6
7
8
9
10
11
.main-container {
width: 980px;
margin: 0 auto;
overflow: hidden;
padding: 0;
background: #fff;
position: relative;
-webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17);
-moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17);
box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17);
}

Все что нам осталось это поменять значения 980 на 1080 и загрузить назад.

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

загрузка...
10 комментариев
    • Andrey

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

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