Wordpress шаблон на всю ширину. Как создать полную ширину страницы на WordPress. Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это
Вы должны уметь изменять размер шаблона, если хотите создать хороший сайт. По умолчанию многие темы предлагают неудобные размеры каркаса шаблона. Узкие темы – это точно так же плохо, как слишком широкие. У вас должна быть “золотая середина”, которая как раз подходит для выполнения функций на сайте. Только так содержимое вашего ресурса будет корректно отображаться, и все виджеты влезут в сайдбар. В данной статье вы узнаете какие есть способы коррекции размеров боковых колонок.
Без сайдбара сайт выглядит никудышно. Если вы хотите как-то визуально разбавить содержимое страницы, вам стоит изменить шаблон Вордпресс, добавив сайдбар определенного размера. Обычно боковые колонки в нем уже установлены по умолчанию. Но не всегда ширина сайдбара является оптимальной для того или иного проекта. Разберем методы, как изменить ширину и высоту боковой части сайта Вордпресс.
Каким должен быть размер сайдбара
Возможно вам и не понадобится ничего менять. Изменить боковую колонку следует только в том случае, если она выглядит “криво” и неестественно. Во-первых, смотрите, чтобы сайдбар имел меньшую ширину, чем основная часть страницы, содержащая контент. Боковая колонка не является ключевой частью сайта, потому на нее не должно быть обращено много внимания – максимум она может занимать 40 % от видимой части страницы. Учтите, что если у вас два сайдрбара (или несколько), их ширина не должна превышать 50 % от ширины всей страницы. Лучше использовать только одну боковую колонку – так она эффективнее.
Существует “золотое правило” дизайнеров для сайтов, где используется только один сайдбар. Это правило гласит, что если на странице только одна боковая колонка, она не должна занимать большее 38 % ширины сайта. О такой загадочной цифре говорят многие именитые веб-дизайнеры (например: Джарел Ремик).
А по поводу высоты – важно, чтобы сайдбар не торчал сверху сайта. Его размер по высоте в верхнем пределе должен быть аналогичен основной части страницы. А вот нижний предел можно изменить, чтобы базовая часть сайта была длиннее. Не нужно стараться впихнуть в сайдбар все, что есть на сайте – только основное. А если информации реально много, тогда сделайте две боковых колонки, но не нужно растягивать sidebar до подвала сайта.
Как изменить размер сайдбара вручную
Теперь поговорим о том, как самостоятельно изменить размер боковых колонок и самого каркаса шаблона без использования каких-либо дополнений. Такой метод подразумевает изменение исходного кода страницы. Именно в html-тегах и заключен параметр размера шаблона. Учтите, что изменение размеров может повлечь за собой негативные последствия, если в качестве фона вы загрузили картинку специального размера. Потому лучше изменить параметры каркаса еще на стадии верстки сайта.
Параметры сайдбара в коде находятся в виде блока. Чтобы изменить размер всего каркаса, и боковых колонок в том числе, вам понадобится влезть в код, и попеременно скорректировать цифровые параметры ширины и высоты каждого элемента. А именно:
- header – отвечает за размер шапки сайта;
- bg – это основной контент, то есть та часть страницы, на которой будут размещаться статьи (именно в этой части и находится сайдбар);
- footer – это подвал сайта, то есть его нижняя часть.
Чтобы узнать размеры определенного блока, вам необходимо нажать на пункт wrapper в “Просмотре кода страницы”. Сбоку в разделе CSS браузера вы увидите цифровые значения ширины элемента в пикселях. Чтобы изменить размер всего каркаса, вам необходимо отредактировать элемент main, а после него внести изменения и в другие элементы. Рекомендуется это делать на локальном сервере, чтобы ваш сайт не “прыгал” на глазах пользователей. И, вообще, лучше таким заниматься еще до запуска интернет-проекта.
Для изменения размера сайдбара найдите примерно такую строчку
Эта строка отвечает за параметры срединной части страницы, то есть за блок с контентом и за боковые колонки. Не трогайте строку “main” – это основная часть сайта. Вам нужно найти тег “mainnav” – это и есть боковая колонка. Все, что вам потребуется, это в CSS изменить пункт width, отвечающий за ширину – вписать другое значение размера. Можете уменьшить либо увеличить сайдбар, но не забывайте следить за приведенными выше советами по размерности, чтобы сайт отображался корректным образом.
Чтобы внесенные изменения сохранились, необходимо их производить на сервере. То есть вы изначально можете протестировать корректировки на локальном хостинге, но потом обязательно скопируйте отредактированный файл style.css, и занесите его в базы данных основного сервера. Только тогда изменения вступят в силу.
Плагин для изменения размера сайдбара
Если вы не желаете пробираться во внутренности каскадных таблиц стилей, и искать элементы, которые необходимо отредактировать, тогда можете воспользоваться плагином Visual Sidebar Editor for WordPress. Это специальный модуль, который как раз предназначен для генерации боковых колонок. Он является частью более глобального инструмента Visual Composer.
Плагин Visual Composer – это натуральный конструктор страниц для Вордпресс. С ним вы сможете с нуля создать готовый шаблон. Работает модуль с шорткодами, и очень прост в установке. Если изменение размера сайдбара – это не единственное, что вам предстоит сделать, лучше скачайте плагин Visual Composer, и в качестве дополнения добавьте Visual Sidebar Editor. Если проблема только в размере боковой части страницы, тогда модуля Visual Sidebar Editor будет достаточно.
Преимущество использования плагина для изменения сайдбара в том, что он все делает автоматически. То есть вы показываете что хотите изменить по системе Drag & Drop, а модуль самостоятельно корректирует код элемента, исходя из ваших запросов. Если же вы хотите испытать свои силы в редактуре html-тегов, то плагин предоставит вам и такую возможность. Кроме того, в нем есть специальные шорткоды для внесения дополнительных функций на сайт – более 40 расширений.
Еще один плюс использования такого плагина для редактуры страниц – это сохранение изменений, независимо от версии движка. Даже если вы обновили Вордпресс, шаблон не изменится – он контролируется модулем. Потому можете переходить на более старые версии или обновлять WordPress – вреда для размерности сайдбара это уже не принесет. Кроме того, плагин работает с удобным импортом и экспортом – то есть можно копировать сайдбары с одних сайтов и переносить их на другие. И, что самое главное, модуль работает по предельно понятному принципу – даже новичок его быстро освоит.
Если вам понравилась работа Visual Sidebar Editor, задумайтесь над установкой полного комплекта дополнения – модуля Visual Composer. Тогда вам будет легко редактировать любой элемент на страницах портала.
Часто бывает так, что понравившаяся тема имеет узкую область для записей и в ее настройках не предусмотрено изменение ширины. В этом случае, ее можно увеличить, с минимальным знанием HTML и CSS . Для примера, используем популярную, бесплатную тему Patagonia . Расширить тему можно с помощью замечательного плагина Firefox — Firebug . Сначала его надо установить, скачав отсюда . Затем включаем плагин , как показано на рисунке — Вкладка Инструменты — Веб разработка — Firebug — открыть Firebug :
После этого в нижней части экрана, необходимо, наводя курсор и кликая мышкой, выбирать различные элементы. При этом в правой части, будут выводится стили CSS
, а в области страницы, будет подсвечиваться та или иная область — основная, sidebar
, header
. Нас же сейчас интересует основная область, на которую мы попадем, когда «выйдем» на тэг К примеру, увеличим ширину
основной области с 550 пикселей, до 620-ти. Для этого надо внести изменения в строку width: 550px
файла style.css
. Если тема уже установлена, можно редактировать этот файл, прямо из админки, если нет, то надо распаковать архив с темой и внести изменения в файл с помощью редактора. В нашем случае, тема установлена, поэтому заходим в админку
— Внешний вид
— Редактор
— открываем файл style.css, находим поиском строку width: 550px и меняем значение ширины 550px на 620px. Жмем Обновить файл
. Переходим на сайт и видим, что область постов расширилась, но местами «наехала» на правую колонку. В этом случае, нам надо пропорционально сузить эту область. Для этого также воспользуемся плагином Firebug
, как и в предыдущем случае. Находим тэг