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

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

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

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

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

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

Сделайте свой сайт популярным, открыв для себя

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

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

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

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

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

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

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

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

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

1. Divi Builder

Divi Builder - это высококачественный конструктор страниц, который высоко ценится Элегантные темы , Хотя он обычно используется как часть темы WordPress Divi, 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 позволяет создавать макеты в интерфейсе или бэкэнде. Еще одна хорошая вещь - этот плагин позволяет вам настраивать ваши отзывчивые контрольные точки (но только на уровне всего сайта).

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

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

3. Факир

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

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

Часто бывает так, что понравившаяся тема имеет узкую область для записей и в ее настройках не предусмотрено изменение ширины. В этом случае, ее можно увеличить, с минимальным знанием HTML и CSS . Для примера, используем популярную, бесплатную тему Patagonia . Расширить тему можно с помощью замечательного плагина Firefox — Firebug . Сначала его надо установить, скачав отсюда . Затем включаем плагин , как показано на рисунке — Вкладка Инструменты — Веб разработка — Firebug — открыть Firebug :

После этого в нижней части экрана, необходимо, наводя курсор и кликая мышкой, выбирать различные элементы. При этом в правой части, будут выводится стили CSS , а в области страницы, будет подсвечиваться та или иная область — основная, sidebar , header . Нас же сейчас интересует основная область, на которую мы попадем, когда «выйдем» на тэг

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

К примеру, увеличим ширину основной области с 550 пикселей, до 620-ти. Для этого надо внести изменения в строку width: 550px файла style.css . Если тема уже установлена, можно редактировать этот файл, прямо из админки, если нет, то надо распаковать архив с темой и внести изменения в файл с помощью редактора. В нашем случае, тема установлена, поэтому заходим в админку — Внешний вид — Редактор — открываем файл style.css, находим поиском строку width: 550px и меняем значение ширины 550px на 620px. Жмем Обновить файл .

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

>. В файле style.css , видим, что ширина sidebar задана не явно с помощью свойства width , а с помощью margin: 0 0 0 580px;

Проделываем туже процедуру с редактированием style.css, что и в предыдущем случае с основной областью, только теперь редактируем строку margin: 0 0 0 580px; Меняем в ней значение отступа с 580px до 630px. Вот теперь все нормально. Область записей стала шире и не наезжает на область sidebar . Также бывает, что стили прописаны не только в файле style.css, но и в файле screen.css.

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

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

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

Проблема

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

Решение

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

Затем вам нужно будет открыть ваш файл functions.php и добавить внизу файла следующий код:

Function fb_change_mce_buttons($initArray) { $initArray["width"] = "650px"; return $initArray; } add_filter("tiny_mce_before_init", "fb_change_mce_buttons");

Результат

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

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

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

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

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

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

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

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

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

  • Safari
  • FireFox
  • Google chrome

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

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

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

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

1 width: 31.8 %;

Эти значения означают сколько процентов ширины можно занимать тому или иному элементу. Главное чтобы в сумме 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;

#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 ) ; }

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 и загрузить назад.

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

Похожие статьи