От автора: приветствую вас, друзья. В очередной статье на тему WordPress мы с вами рассмотрим вопрос, как изменить шаблон WordPress. Если вы еще никогда не сталкивались с необходимостью изменения шаблона WordPress, тогда обязательно прочтите данную статью, поскольку рано или поздно вам, скорее всего, придется столкнуться с вопросами настройки и редактирования шаблона WordPress.
Для начала давайте определимся с наиболее часто возникающими вопросами, с которыми сталкиваются пользователи при настройке шаблона WordPress под себя. Вот примерный их список:
как редактировать шаблон WordPress
изменить ширину шаблона на WordPress
как изменить размер шаблона WordPress
как изменить цвет шаблона WordPress
как изменить шрифт в шаблоне WordPress
И это лишь небольшой перечень проблем, с которыми вы можете столкнуться или которые вы сможете помочь решить другим, в том числе и за вознаграждение, если вы занимаетесь разработкой сайтов на заказ.
Все вопросы в списке выше можно решить двумя способами в зависимости от темы, которая используется для сайта. Начнем с самого простого варианта, который не требует знаний верстки. Этот вариант подойдет, если шаблон поддерживает редактирование из настроек.
Перейдем в раздел Внешний вид — Настроить и увидим главную страницу сайта и в левой части страницы доступные настройки сайта. Среди них могут быть и настройки оформления.
Для примера давайте попробуем изменить цветовую схему сайта. Зайдем в меню Цвета и изменим фон боковой и центральной частей сайта.
Как видим, это довольно удобно и изменить цвет шаблона WordPress достаточно просто — результат мы видим сразу же и можем его оценить.
Однако не всякая тема предлагает все необходимые нам настройки шаблона WordPress. Например, там вряд ли будут настройки, позволяющие изменить ширину шаблона на WordPress, например, даже в текущей теме нет настроек, позволяющих изменить шрифт в шаблоне и так далее. Как же быть в этом случае? Вот здесь нам и придется прибегнуть ко второму варианту и здесь уже необходимы некоторые навыки верстки.
Итак, нам потребуется редактировать чаще всего только один файл — это файл стилей style.css. Находится он в папке вашей темы. Давайте в качестве примера изменим цвет шрифта. Кстати, сделать это можно прямо из админки WordPress. Только будьте аккуратны и внимательны, чтобы случайно не «поломать» сайт. Лучше всего сделайте резервную копию темы перед тем, как что-то менять в ней. Итак, идем в меню Внешний вид — Редактор и по умолчанию у Вас должен быть открыт для редактирования файл стилей темы.
Если это не так, тогда выберите этот файл из списка справа, он называется Таблица стилей (style.css). Чаще всего цвет шрифта задается в body, поэтому найдем стили данного элемента и пропишем красный цвет для в качестве цвета шрифта.
После сохранения файла можем обновить сайт и увидеть красный цвет для основного шрифта на сайте.
Как видим, настройка шаблона WordPress под себя — достаточно несложная задача. Достаточно немного знаний CSS и вы сможете изменить шаблон WordPress и произвести необходимую настройку шаблона. По той же схеме мы можем решить и другие аналогичные задачи. На этом я с вами прощаюсь. Удачи и до новых встреч!
Часто бывает так, что понравившаяся тема имеет узкую область для записей и в ее настройках не предусмотрено изменение ширины. В этом случае, ее можно увеличить, с минимальным знанием HTML и CSS . Для примера, используем популярную, бесплатную тему Patagonia . Расширить тему можно с помощью замечательного плагина Firefox — Firebug . Сначала его надо установить, скачав отсюда . Затем включаем плагин , как показано на рисунке — Вкладка Инструменты — Веб разработка — Firebug — открыть Firebug :
После этого в нижней части экрана, необходимо, наводя курсор и кликая мышкой, выбирать различные элементы. При этом в правой части, будут выводится стили CSS
, а в области страницы, будет подсвечиваться та или иная область — основная, sidebar
, header
. Нас же сейчас интересует основная область, на которую мы попадем, когда «выйдем» на тэг К примеру, увеличим ширину
основной области с 550 пикселей, до 620-ти. Для этого надо внести изменения в строку width: 550px
файла style.css
. Если тема уже установлена, можно редактировать этот файл, прямо из админки, если нет, то надо распаковать архив с темой и внести изменения в файл с помощью редактора. В нашем случае, тема установлена, поэтому заходим в админку
— Внешний вид
— Редактор
— открываем файл style.css, находим поиском строку width: 550px и меняем значение ширины 550px на 620px. Жмем Обновить файл
. Переходим на сайт и видим, что область постов расширилась, но местами «наехала» на правую колонку. В этом случае, нам надо пропорционально сузить эту область. Для этого также воспользуемся плагином Firebug
, как и в предыдущем случае. Находим тэг Для изменения ширины левого меню. В этом случае вы можете поменять как пиксели, как мы делали это в пункте 3-5, так и процентное соотношение на странице. Для этого достаточно поменять вместо пикселей параметр Эти значения означают сколько процентов ширины можно занимать тому или иному элементу. Главное чтобы в сумме sidebar и статья занимали 100%, а не больше, иначе у вас все поплывет по странице. На этом все. Теперь мы знаем какие значения нам нужно поменять, чтобы все влазило. Дело осталось за малым, внести необходимые данные в файл стиля. После того как мы поняли цифры, и записали их где-то на листочке давай теперь поменяем их для всех, а не только для себя. Для этого: Лично я для себя выбрал первый, легкий способ, поскольку он позволяет внести изменения буквально за пару секунд. Итак, ищем значение 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 и загрузить назад. На этом все, но если у вас остались какие-то вопросы, пишите в комментариях, или мне на , буду рад вам помочь.
1
width:
31.8
%;
Как увеличить шаблон по горизонтали часть 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
)
;
}