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");
Результат
В результате вы увидите редактор записи, повторяющий ширину вашего блока контента на самом сайте. Таким образом, вы будете уверены, что когда вы создаете запись через консоль администратора, она будет выглядеть максимально приближенно к конечному результату.
Помните, что некоторые разрешения экрана изменят ваши настройки и, например, будут показывать только одну колонку - это будет зависеть от ширины вашего контента.
Часто бывает так, что понравившаяся тема имеет узкую область для записей и в ее настройках не предусмотрено изменение ширины. В этом случае, ее можно увеличить, с минимальным знанием HTML и CSS . Для примера, используем популярную, бесплатную тему Patagonia . Расширить тему можно с помощью замечательного плагина Firefox — Firebug . Сначала его надо установить, скачав отсюда . Затем включаем плагин , как показано на рисунке — Вкладка Инструменты — Веб разработка — Firebug — открыть Firebug :
После этого в нижней части экрана, необходимо, наводя курсор и кликая мышкой, выбирать различные элементы. При этом в правой части, будут выводится стили CSS
, а в области страницы, будет подсвечиваться та или иная область — основная, sidebar
, header
. Нас же сейчас интересует основная область, на которую мы попадем, когда «выйдем» на тэг К примеру, увеличим ширину
основной области с 550 пикселей, до 620-ти. Для этого надо внести изменения в строку width: 550px
файла style.css
. Если тема уже установлена, можно редактировать этот файл, прямо из админки, если нет, то надо распаковать архив с темой и внести изменения в файл с помощью редактора. В нашем случае, тема установлена, поэтому заходим в админку
— Внешний вид
— Редактор
— открываем файл style.css, находим поиском строку width: 550px и меняем значение ширины 550px на 620px. Жмем Обновить файл
. Переходим на сайт и видим, что область постов расширилась, но местами «наехала» на правую колонку. В этом случае, нам надо пропорционально сузить эту область. Для этого также воспользуемся плагином Firebug
, как и в предыдущем случае. Находим тэг Проделываем туже процедуру с редактированием style.css, что и в предыдущем случае с основной областью, только теперь редактируем строку margin: 0 0 0 580px;
Меняем в ней значение отступа с 580px до 630px. Вот теперь все нормально. Область записей стала шире и не наезжает на область sidebar
. Также бывает, что стили прописаны не только в файле style.css, но и в файле screen.css.
Часто при подборе шаблона wordpress возникает проблема – это недостаточная ширина блоков. У многих тут же возникает желание изменить ширину шаблона. Для тех, кто хорошо разбирается в html или php это не создаст особых проблем. Но для того чтобы подробно написать о том, как вносить изменения в размеры шаблона wordpress для неподготовленного человека, понадобится целая брошюра. Самое простое – заказать, но тот, кто пытается сделать это самостоятельно, получает знания. В дальнейшем, ему не придется обращаться к специалистам по каждой мелочи. Зная «основу» сделать это вполне возможно. Перед началом, каких – либо изменений, обязательно сделайте запасную копию всех страниц вашего ресурса. В случае неточной работы, вы без проблем восстановите первоначальный вид сайта. Шаблонов wordpress невероятное множество, все они различны и каждый меняется по-своему. Но такие основные блоки как: ширина основной страницы, шапка, левая и правая колонка, подвал имеют все. Для работы нам понадобится: Когда все необходимое скачано, установлено и готово к работе, открываем выбранный шаблон в Mozilla Firefox и запускаем Firebug, нажав значок жука. Внизу открывается панель плагина, в которой мы будем работать. Все вносимые изменения тут же будут отображаться в верхней части монитора. На вкладке справа мы видим CSS стиль выбираемого элемента, слева html код страницы. Чтобы увеличить или уменьшить ширину шаблона, первым делом мы должны узнать текущий размер основы. Нажимаем на значок курсора нашего плагина. Элементы на странице будут подсвечиваться различными цветами, и вы сможете, выделяя каждый элемент страницы, детально ознакомиться со структурой вашего сайта. Получив название, узнаете точные размеры. После того как текущая ширина будет установлена, левой кнопкой мыши нажимаем на это значение. Методом проб, создаем наиболее подходящую ширину и тестируем, ее отображение. Вы можете смело экспериментировать с любыми элементами и значениями. Текущие изменения никак не могут воздействовать на вашу страницу на сервере, они активны лишь в окне плагина (текущем кэше Мозилы). При обновлении все настройки сбрасываются. Теперь осталось сохранить эти изменения для шаблона wordpress. Обычно ширина шаблона прописывается в style.css. Входим в административную панель веб-сайта → внешний вид → редактор → style.css → строка 79, меняем значение width. Сохраняем. Вы хотите создать полноразмерную страницу на WordPress?
Тогда вернемся к тому, почему мы здесь.
Этот метод рекомендуется, если ваша тема WordPress уже снабжена полноразмерным шаблоном страницы. Если у вас его нет, обратитесь к следующему выбору и получите его.
Во-первых, вы должны отредактировать страницу или создать новую, посетив " Страницы> Добавить
Новая страница
В окне редактирования страницы выберите Полная ширина
в качестве шаблона под флажком атрибутов страницы.
После выбора модели Полная ширина
Вы должны зарегистрировать свою страницу. Вы можете продолжить настройку страницы, чтобы добавить больше контента, или нажмите кнопку предварительного просмотра, чтобы увидеть ее в действии.
Если у вас нет опции «Полная ширина» - «шаблон полной ширины» - на экране редактирования вашей страницы это означает, что ваша тема WordPress не имеет этой страницы.
Но, не волнуйтесь, мы покажем вам, как легко создать полноразмерную страницу без изменения темы WordPress.
Этот метод требует от вас редактирования файлов тем WordPress, которые вы используете, и для базового понимания PHP, CSS и HTML.
Кстати, мы также приглашаем вас проконсультироваться с
Сначала вам нужно открыть текстовый редактор, такой как «Блокнот», и вставить следующий код в пустой файл:
Этот код просто определяет имя шаблона файла и просит WordPress извлечь шаблон заголовка.
Тогда вам понадобится контентная часть кода. Подключитесь к вашему сайту с помощью FTP-клиента (или файловый менеджер в CPanel
) затем перейдите к / Wp-содержание / темы / ваш-тематический каталог /
.
Затем вы должны найти файл с именем " page.php
». Это файл шаблона страницы по умолчанию для вашей темы.
Скопируйте все после функции « get_header ()
И вставьте его в файл Полный width.php
Это вы создали на своем компьютере.
Теперь вам нужно посмотреть содержимое файла "full-width.php" и удалить эту строку кода:
Эта строка просто восстанавливает боковую панель и отображает ее в вашей теме WordPress. Удаляя это, ваша тема не будет отображать боковую панель при использовании шаблона Полная ширина
.
Вы можете видеть, что эта строка появляется несколько раз в вашей теме WordPress. Если ваша тема WordPress имеет несколько вы увидите каждую боковую панель, на которую ссылается один раз в коде. Вы должны решить, какие боковые панели вы хотите сохранить.
Ваш веб-сайт загружается медленно, откройте для себя
Если ваша тема не отображает боковые панели на вашей странице, вы можете не найти этот код в своем файле.
Вот как наш код full-width.php заботится о внесении изменений. Ваш код может немного отличаться в зависимости от вашей темы.
Тогда вам нужно скачать файл Полный width.php
В вашей папке темы WordPress с помощью .
Вы успешно создали и загрузили пользовательский шаблон страницы полной ширины для своей темы. Следующим шагом будет использование этого шаблона для создания полноразмерной страницы.
Перейдите на панель инструментов и отредактируйте или создайте новую страницу.
На экране редактирования страницы найдите флажок атрибутов страницы и щелкните раскрывающееся меню под опцией «Модель».
Вы сможете увидеть свою модель. Вперед, выберите его и сохраните или обновите страницу.
Теперь вы можете посетить свой веб-сайт, и вы увидите, что боковые панели исчезли, и ваша страница отображается как страница с одним столбцом. Возможно, он еще не заполнен, но теперь вы готовы распространить его по-другому.
Сделайте свой сайт популярным, открыв для себя
Вам нужно будет использовать инструмент Inspect, чтобы обнаружить CSS-классы, используемые вашей темой для определения области содержимого.
Затем вы можете настроить его ширину до 100%, используя CSS. Мы использовали следующий код CSS:
Вот как это будет выглядеть Двадцать Семнадцать.
Это все для этого урока, я надеюсь, что оно позволит вам создавать полноразмерные страницы.
Вышеуказанные методы бесплатны для тех, кто может себе позволить и хочет быстро создавать макеты полной или полной ширины.
Вы можете использовать другие плагины WordPress, чтобы придать современный вид и оптимизировать управление вашим блогом или веб-сайтом.
Divi Builder - это высококачественный конструктор страниц, который высоко ценится Элегантные темы
, Хотя он обычно используется как часть темы WordPress Divi, Divi Builder также является отдельным плагином, который можно использовать в других темах WordPress.
Divi Builder позволяет редактировать ваш контент, используя визуальный интерфейс на стороне интерфейса, а также интерфейс на стороне сервера, хотя большинство пользователей предпочитают первый интерфейс.
По сути, вместо боковых панелей все находится во всплывающих окнах и плавающих кнопках. Он предоставляет вам доступ к предопределенным шаблонам 316, распространяемым по различным пакетам презентаций 40, а также позволяет сохранять собственные дизайны в качестве шаблонов.
Мы предлагаем вам открыть
Одной из черт Divi всегда был контроль над стилями, которые он дает вам. На трех разных вкладках вы можете настроить различные параметры, включая адаптивные элементы управления, настраиваемый интервал и многое другое.
Вы даже можете добавить пользовательский CSS, потому что его редактор CSS объединяет базовую проверку и автозаполнение.
Одним из критиков Divi Builder всегда было то, что он основан на , Это означает, что если вы отключите его однажды, в вашем контенте останется куча шорткодов. Хотя это немного удручает, но теперь существует меньше проблем с такими плагинами, как Shortcode Cleaner.
Неудивительно, что Themify Builder - это предложение команды Themify. Он интегрирует его во многие из своих тем WordPress, чтобы предоставить клиентам простые варианты настройки. Но вы также можете купить его как отдельный плагин и использовать его с любой темой WordPress.
Как и Divi Builder и WPBakery Page Builder, Themify Builder позволяет создавать макеты в интерфейсе или бэкэнде.
Еще одна хорошая вещь - этот плагин позволяет вам настраивать ваши отзывчивые контрольные точки (но только на уровне всего сайта).
Откройте для себя создать интернет-магазин и легко продавать свои товары в интернете
Интересной особенностью Themify Builder является то, что он все еще позволяет вам использовать стандартный редактор WordPress, в то время как другие конструкторы страниц заставляют вас использовать интерфейс Page Builder для всего.
Изначально запущенный в 2016, плагин WordPress Elementor является одним из самых молодых разработчиков этого списка. Несмотря на поздний запуск, Elementor быстро накопил больше активных установок 1 000 000 на WordPress.org, что делает его одним из самых популярных конструкторов WordPress.
Если у вас есть предложения или замечания, оставьте их в нашем разделе Некоторый шаблоны WordPress довольно узкие в боковом меню, так называемом сайдбаре, или наоборот узкие в разделе статей и естественно некоторым вебмастерам необходимо расширить те или иные границы, к примеру что вмещались баннера. В этой статье я расскажу как менять размеры шапки, шаблона, раздела статей или бокового меню.
Размер шаблона вы можете захотеть поменять как в самом начале, как только установили , так и после того как написали ряд статей и у вас начали появляться первые десятки посетителей. К примеру мне понадобилось расширить шаблон после того как я захотел попробовать заработать первые пару центов на рекламе со своего труда — блога. Для этих целей была выбрана система баннерной рекламы от Google- AdSense. Но чтобы заработать хоть несчастные два цента надо учитывать два параметра: т.е. нам надо совместить первый и второй пункт, а именно сделать так чтобы баннера от Google или Яндекс помещались в выделенные для этого места, левый сайдбар и в статьях. Поскольку мой шаблон был слишком узким для этих целей, а мелкие баннера вешать не имеет смысла, потому что никто клацать не будет на них, то остается только одно — растянуть боковое меню и раздел статей. Чтобы понять на сколько нам нужно увеличить ширину того или иного элемента нам надо не прикинуть на взгляд «хватит сантиметр туда, и пол сантиметра туда», а узнать эти цифры точно, в пикселях. В этом нам поможет почти любой браузер, к примеру: Лично я буду показывать на примере Safari, а вы на любом удобном для вас браузере. Отличия должны быть только в одной кнопке. Итак, база — наш размер сайта состоит из 4-х элементов, размера самого шаблона, размера страницы, размера блока статьи и блока левого меню. Увеличивать мы будем все по очереди, не волнуйтесь, это не страшно. Для изменения ширины левого меню. В этом случае вы можете поменять как пиксели, как мы делали это в пункте 3-5, так и процентное соотношение на странице. Для этого достаточно поменять вместо пикселей параметр На этом все. Теперь мы знаем какие значения нам нужно поменять, чтобы все влазило. Дело осталось за малым, внести необходимые данные в файл стиля. После того как мы поняли цифры, и записали их где-то на листочке давай теперь поменяем их для всех, а не только для себя. Для этого: Лично я для себя выбрал первый, легкий способ, поскольку он позволяет внести изменения буквально за пару секунд. Итак, ищем значение 980. Поиск по файлу выдал только два параметра, которые мне и надо поменять. Первый, отвечает за ширину всего сайта: #page {
min-height: 100px;
clear: both;
width: 96%;
padding: 0;
padding-top: 24px;
max-width: 980px;
overflow: hidden; Второй за ширину двух элементов, списка статей, и левого меню: 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 и загрузить назад. На этом все, но если у вас остались какие-то вопросы, пишите в комментариях, или мне на , буду рад вам помочь.
Панель плагина
Правим style.css
Метод 1: использование встроенного шаблона ширины в теме WordPress
Метод 2: как создать шаблон страницы с полной шириной
Откройте для себя также несколько премиальных плагинов WordPress
Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.
1. Divi Builder
2. Строитель
3. Факир
Для чего может понадобиться поменять размер шаблона.
Как увеличить шаблон по горизонтали часть 1, понимаем цифры
1
width:
31.8
%;
Эти значения означают сколько процентов ширины можно занимать тому или иному элементу. Главное чтобы в сумме sidebar и статья занимали 100%, а не больше, иначе у вас все поплывет по странице.Как увеличить шаблон по горизонтали часть 2, меняем ширину
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
)
;
}