От автора: приветствую вас, друзья. В очередной статье на тему 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
, как и в предыдущем случае. Находим тэг Проделываем туже процедуру с редактированием style.css, что и в предыдущем случае с основной областью, только теперь редактируем строку margin: 0 0 0 580px;
Меняем в ней значение отступа с 580px до 630px. Вот теперь все нормально. Область записей стала шире и не наезжает на область sidebar
. Также бывает, что стили прописаны не только в файле style.css, но и в файле screen.css.
Некоторый шаблоны 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 и загрузить назад. На этом все, но если у вас остались какие-то вопросы, пишите в комментариях, или мне на , буду рад вам помочь.
Для чего может понадобиться поменять размер шаблона.
Как увеличить шаблон по горизонтали часть 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
)
;
}
