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

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

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

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

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

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

• Safari
• FireFox
• Google chrome

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

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

1. Клацаем правой кнопкой мышки на шапке сайта и выбираем «Проверить объект»
2. Внизу нам открывается программный код страницы. Не бойтесь, нам будет все понятно. Ищем чуть ли не самый верхний стиль, который описывает размер шаблона. У меня этот клас называется, main-container, а строчка, которую надо найти соответственно

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

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

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

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

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

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

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

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

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

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

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

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