Меню

Как изменить цвет шаблона wordpress



Как редактировать шаблон wordpress самому?

Шаблон – это одежка блога, а по одежке, как известно, встречают. С просьбой о создании уникального дизайна можно (и даже нужно!) обратиться к профессионалу, но мы прекрасно понимаем, что не у каждого есть на это средства. Да и желание их тратить тоже.

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

Ниже я на примере шаблона Xmarkup из бесплатного курса «Как сделать блог за час» приведу способы, как можно подправить оформление блога самостоятельно. Я не буду описывать более сложные элементы CSS и кода jQuery – уроки по ним можно найти самостоятельно в интернете – расскажу только базовые понятия, освоить которые под силу каждому.

Главное – не бойтесь экспериментировать!

Структура шаблона WordPress .

Описание некоторых файлов темы и возможностей их редактирования:

Файл style . css и изменение внешнего вида шаблона.

Основные селекторы CSS .

Добавление новых элементов в шаблон блога.

Изображения в шапке;

Баннера в single.php;

Замена исходных изображений.

Структура шаблона WordPress .

По запросу «темы вордпресс скачать» Гугл выдает нам тысячи вариантов сайтов. От обилия выбора разбегаются глаза – бесплатные и платные, адаптированные и нет, белые, серые, коричневые, стилизованные и современные темы. Одни нравятся, другие очень нравятся. У одних в коде заложены лишние ссылки, другие написаны на английском языке… Как уж тут выбрать =)

Количество файлов шаблонов в каждой из тем может различаться, однако существует «костяк», всегда остающийся неизменным. Откроем папку с темой Xmarkup:

Из всех этих файлов можно выделить основные элементы:

Папка Images – изображения, используемые в шаблоне.

Js – папка со скриптами.

Style . css – файл, который описывает внешний вид блога.

Screenshot – скриншот темы. Отображается в разделе «Внешний вид/Темы».

name. php – шаблоны различных элементов темы. Количество их в зависимости от фантазии создателя в разных темах может быть различным. Вот основные:

«Страница не найдена» — страница ошибки 404

Страница сайта

Наглядное изображение страницы блога и шаблонов, ее составляющих. Похоже на пазл, не правда ли?

Редактировать шаблон темы можно двумя способами:

— через админку: «Внешний вид/Редактор/…»;

скопировав на компьютер и открыв блокнотом N otepad++ (рекомендуется) .

! Внимание. Перед исправлением любых файлов шаблона не забывайте создавать его резервные копии!

Описание некоторых файлов темы и возможностей их редактирования

Header . php – один из основных файлов шаблона, задействованный практически на всех страницах блога. Он отвечает за отображение шапки блога, главного меню, дает возможность прикреплять виджеты и т.п.

Если рассмотреть код, ясно видно, что типовый хэдер состоит из нескольких разделов:

Код DOCTYPE – указывает на тип документа, необходимо для корректного отображения страницы браузерами:

Информация об языке :

Тег head >… head > содержит техническую информацию, помогающую браузеру и поисковикам:

Мета-теги кодировки, отображения на мобильных устройствах и т.д;

Мета-тег title – текст, который отображается в заголовке браузера – название блога и постов:

Мета-тег, указывающий ключевые слова и описание страницы. Часто его заменяют плагином All in one SEO pack ;

Связь с внешними документами: фавикон, rss фид, файл стилей, шаблон оформления и т.п.

link rel =»как относится документ к текущему» href =»путь к файлу»/>

Теги, подключающие внешние скрипты и их библиотеки — ;

Код, обеспечивающий работу плагинов:

Тег body > — все, что выводится на экран компьютера:

Шапка блога – вывод изображения или текста

Тег, выводящий название блога:

Главное меню блога:

Таким образом, для уникализации внешнего вида шаблона в файле header . php мы можем сделать следующее:

— настроить отображение и стиль текста или картинки в заголовке;

— изменить основное меню блога и его расположение относительно шапки блога;

— по желанию добавить картинку-кнопку или рекламный баннер.

Большая часть этих действий не требует прямого вмешательства в код шаблона – достаточно вносить изменения в админке: «Внешний вид/Настроить».

В файле шаблона WordPress footer . php задается отображение нижней части блога – так называемого «подвала».

Код, обеспечивающий работу плагинов. Аналогичный находится и в header . php . Если какой-либо плагин не действует, первым делом стоит проверить наличие этих двух кодов.

Копирайты – указание авторства, год создания блога – со ссылкой на главную страницу

Год также можно добавлять с помощью php-кода ( ). Но лучше вводить временные рамки самостоятельно, иначе блог будет «вечно молодой». Хотя это уж кому как нравится =)

Дубль главного меню :

Виджеты. Сначала идет проверка, есть ли в наличии виджет. Если есть – выводится. Пример: счетчик посещаемости Liveinternet . Добавляется: «Внешний вид/Виджеты/Код счетчика посещаемости»

Ссылка на разработчиков данного шаблона Вордпресс

По желанию, в «подвал» блога можно поместить виджеты, не влезшие в сайдбар. Для этого надо просто перенести соответствующие куски кодов из файла sidebar . php .

По умолчанию через админку в футер ставится блок с контекстной рекламой: «Внешний вид/Виджеты/Текст/Контекстная реклама»

Что можно сделать для уникализации:

— изменить стиль написания и расположения;

Универсальный элемент шаблона, выводящий главную страницу блога. Иногда носит название home . php .

При этом его функции разделяют и другие файлы: отдельные записи выводит single . php ; статичные страницы — page . php ; архивы — archive . php ; страницу ошибки — 404. php .

Основной шаблон index . php очень важен, он соединяет в единое целое шапку блога, сайдбар и футер + записи блога.

Из чего состоит основной шаблон:

Код подключения хэдера:

Вывод ленты статей блога:

В каждом посте стабильно повторяются:

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

Читайте также:  Какие цвета мечей у джедаев

— кнопка-ссылка на комментарии и кнопка «Читать», разворачивающая статью полностью

Что можно менять в файле index . php :

— формат даты и времени;

— подключать или убирать сайдбары.

Как правильно ввести дату и время:

j – день месяца цифрами – 1, 2, 3. ;

S – суффикс английского порядкового числителя ( second = 2 nd и так далее);

m — обозначение месяца цифрой с нулем впереди (02, 04, 11);

n – обозначение месяца цифрой без нуля (2, 4, 11);

y – последние цифры года (90, 14);

H – время в 24-часовом формате с нулем впереди (01, 02, …, 23, 24);

h – время в 12-часовом формате с нулем впереди (01, 02, …, 11, 12);

G – время в 24-часовом формате без нуля впереди (1, 2, … 23, 24 (;

g – время в 12-часовом формате без нуля впереди (1, 2, …, 11, 12);

I – минуты (15, 50).

Сайдбар выводит на одну или несколько (бывает до 4х) боковых колонок элементы навигации по блогу и необходимую информацию. В нем можно размещать различные виджеты.

Пример сборки сайдбара:

Форма подписки на блог;

Виджеты можно редактировать, в админке в разделе: «Внешний вид/Виджеты». Там же их можно выбрать, добавить свои собственные и расставить в необходимом порядке.

Составные части sidebar.php :

Подключение к шаблону

Возможность добавления виджетов


При желании виджеты можно прописать в файле sidebar . php вручную.

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

Имя _ файла .php”);? >

Как уникализировать сайдбар:

— добавить завлекающую картинку-ссылку на страницу захвата;

— подобрать свой набор виджетов;

— изменить местоположение колонки;

— сделать 2 и более сайдбаров;

— изменить внешний вид.

Файл single . php отвечает за отображение записей блога.

Традиционное подключение шапки блога:

Блок записи может включать в себя:

Указание даты и времени публикации

Указание автора публикации

Наличие и количество комментариев

Название записи и ее текст

Ссылки для социальных сетей

Наличие комментариев, вывод на экран, если они есть;

Окно для ввода комментария + ввод адреса и имени;

Скрипт для смайликов

Таким образом, редактируя файл single . php , мы можем сделать:

— Добавить картинку перед текстом статьи. Полезно для рекламных баннеров;

— Добавить/Изменить форму подписки;

— Добавить/изменить социальные кнопки;

— Добавить комментарии ВКонтакте;

— Сделать индивидуальное оформление для какой-либо отдельной записи.

В этом файле заложен важный шаблон ошибки 404 « Not found ». Она информирует читателя о том, что сервер не может обнаружить требуемую страницу.

Создание привлекательной страницы 404 – важный этап уникализации блога.

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

Причины открытия страницы ошибки:

— Сменился заголовок статьи, изменилась ссылка на нее;

— Посетитель набрал неправильный адрес. Например, случайно добавил точку или запятую в конце.

Вы легко можете на нее выйти, дописав какую-либо аракадабру в конце ссылки на сайт: « http ://Ваш_сайт. ru /ппым».

Вот так она выглядит по умолчанию:

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

Поэтому очень и очень желательно сделать сделать «Страница не найдена» более информативной для читателя. Убедите посетителя не покидать блог, а остаться и найти что-то интересное для себя!

Для этого на страницу 404 можно поместить:

— Несколько строчек о том, почему нет страницы;

— Предложение перейти на главную страницу;

— Предложение сообщить в службу поддержки;

— Список рубрик блога;

— Перечень всех статей блога;

— Новые сообщения блога;

— Форму поиска или предложение ей воспользоваться;

— Для пущей привлекательности добавить картинку.

Полезные php -коды:

— Ссылка на картинку:

Ваш _ сайт /images/ Название картинки « width=»x» height=»y» alt=» « >

/images/название картинки» width=»x» height=»y» alt=»«/>

Либо получаем ссылку через «Записи/Добавить новую/Добавить медиафайлы » или «Медиафайлы/Добавить новый»

a href =»ссылка»>заголовок ссылки a >

— Вывод последних 10 записей блога

php get _ archives (‘ postbypost ’, 10); ?>

— Форма поиска берется из searchform . php

3. Файл style . css и изменение внешнего вида шаблона

Теперь перейдем к style . css . В нем описаны элементы стиля CSS , применяемые к каждому из объектов шаблона. Редактируя этот файл, мы легко можем изменить внешний вид своего блога.

Подключается файл стиля в хэдере:

Там же мы по необходимости можем подключить дополнительные файлы стиля.

Структура style . css :

CSS файл любого шаблона начинается с закомментированного знаками /* текст */ описания темы:

— Страница темы (если для общественного использования);

— Родительская тема (если есть);

Затем сбрасываются все стили, присвоенные браузером. Вот начало:

И, наконец, идут стили шаблона.

! По-прежнему не забываем про резервные копии!

Как можно изменять CSS стиль шаблона:

Редактировать style . css непосредственно в админке: «Внешний вид/Редактор/ style . css »;

Скопировать на компьютер с помощью FTP -клиента ( FlieZilla ) и редактировать в блокноте Notepad ++ или Akelpad ;

Добавлять необходимые изменения в файл стиля дочерней темы.

В первых двух случаях мы вносим изменения в файлы исходной темы. Он довольно громоздкий, да и новичкам там может быть страшно ковыряться. Естественно, можно добавлять правки в конец файла стиля, увеличивая его объемы… В общем, в Вордпресс гораздо удобнее пользоваться дочерними темами. У этого способа есть два больших плюса:

— Можно не бояться наделать глупостей, ведь исходную тему мы не трогаем =)

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

К тому же, так можно изменять и другие файлы шаблона.

Давайте сделаем дочернюю тему для нашей Xmarkup :

Создаем папку с названием «Child Xmarkup»;

Читайте также:  Почему у кота усы разного цвета

С помощью Notepad ++ (или любого другого блокнота) делаем файл style . css нашей темы:

Прописываем названия дочерней и основной тем (закоментировано) и включаем стили из основной темы:

@import url (‘. /xmarkup_res/style.css’);

Все, темка готова, осталось добавить ее на сайт =)

С помощью клиента FileZilla импортируем нашу папку в папку с темами: «/httpdocs/wp-content/themes». Не забудьте после копирования обновить FTP -клиент.

Теперь можно активировать ее в админке («Внешний вид/Темы»)

(Чтобы у темы была иконка, я добавила файл screenshot . png в папку « Child Xmarkup ») При желании, к дочерней теме можно добавить больше информации – автор, описание и т.д.

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

Расширении для Google Chrome и других браузеров на его платформе — CSSViewer

С его помощью мы увидим параметры CSS любого объекта на странице блога: шрифт, фон, размеры, положение. Выделяемый объект подсвечивается пунктирной линией, в заголовке CSSViewer высвечивает класс в файле style . css :

Run Pixie, благодаря которой можно узнать код любого цвета, стоит лишь навести мышку:

Цветовая палитра. Можно воспользоваться фотошопом или просто вбить в поисковике и выбрать понравившийся сайт:

Не знаете, какую цветовую гамму выбрать для блога? Воспользуйтесь таблицами сочетания цветов!

И, наконец, самая полезная штука (думаю, все итак знают 😉 ) – сам браузер Гугл Хром! Просто щелкаем правой кнопкой мыши на любом элементе и просматриваем его исходный код.

Понравившийся дизайн на сайте конкурента? Тоже не вопрос! При желании можно просто вытащить чужой файл стиля.

Тут же в окошке с CSS стилями можно включать/отключать и править значения элементов оформления и смотреть, как изменится внешний вид. Затем копировать готовый код в дочернюю тему – и вуаля! =) Все просто и быстро – редактировать сплошное удовольствие)

Чтобы редактировать стиль, необходимо хоть немного знать основные элементы языка CSS – каскадных таблиц стилей.

Если мы заглянем в какой-нибудь из . php файлов шаблона темы, например, header . php , то увидим подобное:

er > — шапка сайта

div > — контейнер, в который мы заключаем фрагмент блога, будь то ссылка, страница или текстовое окно. Помогает структурировать документ.

Чтобы изменить вид содержимого этого блока, мы добавляем к нему атрибуты id и class .

Id – стилевой идентификатор. Это уникальное имя, одно id используется только 1 раз на странице. Может применяться для якорных ссылок: вот так

Class – назначает имя класса, одному элементу на странице можно присвоить несколько классов. Также один класс может быть присвоен нескольким элементам.

При этом, большей приоритет у атрибута id . Пример :

Текст будет черного цвета, так как идентификатор важнее.

Итак, селектор – часть CSS правила, к которому будет применен стиль. Более подробно вы сможете познакомиться со всеми ними в любом учебнике по CSS или сайте для вебмастеров.

В качестве селектора могут использоваться элементы страницы ( body , li , ul и т.д.), так и специально заданные атрибуты стиля ( id , class ) или атрибуты (ссылки и т.п.).

Рассмотрю примеры некоторых селекторов из нашего файла стиля.

Селектор идентификатора (имя + знак решетка #).

В шаблоне задан как header id = «header» >

Селектор класса (точка + имя)

Универсальный селектор «*» позволяет нам выбрать все элементы на странице (или дочерние элементы). В данном примере мы обнуляем стили браузера, убирая отступы.

Селектор элемента. Данный простой селектор убирает рамку у всех изображений. Так можно задать стиль всем элементам кода на странице: таблицам, изображениям, ссылкам, параграфам и т.п.

Селектор, состоящий из двух элементов. Также позволяет выделить все элемент нужных типов на странице. В данном случае определяет написание текста в тегах b >… b > и strong >… strong >

Также можно объединять простые селектор при помощи комбинаторов.

Выбор всех дочерних элементов внутри данного элемента. Выбираем все заголовки h 1 внутри идентификатора id =” main _ content ”

Мы можем использовать знак ‘>’, чтобы выделить непосредственные дочерние элементы у данного родительского.

Существуют также псевдо-классы, действующие в результате взаимодействия с сайтом, перед ними всегда идет двоеточие: «элемент:название_псевдо-класса». К примеру, выделение ссылки при наведении на нее курсора:

! important – позволяет повысить приоритет вводимого стиля. Например, если не хочется искать в файле стиля нужный селектор, можно просто подписать в конце документа новый стиль и добавить в конце «! important ».

color: #000 !important

Ознакомиться со всеми CSS селекторами можно в специализированной литературе.

Самые простые и, думаю, всем известные свойства:

color : #цвет; /* цвет текста */

background :#цвет; /* цвет фона */

Для цвета можно указать прозрачность

background : url (‘адрес изображения’); /* картинка на фоне */

Картинками можно замостить, или поставить одну, указать ее размеры.

width: значение; /* ширина */

height: значение; /* высота */

Могут определяться автоматически или задаваться в единицах измерения или процентах.

font-size: значение; /* размер шрифта */

font-style: значение; /* стиль текста – курсив, обычный */

font-weight: значение; /* толщина */

font-family: семейство; /* основной шрифт и альтернативные ему (если идущий первым не установлен) */

text-align: left, right, center; /* выравниваниетекста */

border: толщина стиль #цвет; /* рамка */

Также можно указать границу отдельно для сторон: снизу, сверху и т.п.

margin : top , right , left , bottom ; /* значения отступов, идут по часовой стрелке */

В зависимости от количества указанных значений:

— 4 цифры: значения отступов по часовой стрелке;

— 3 цифры: верхний, левый+правый, нижний;

— 2 цифры: верхний и нижний, левый и правый;

— 1 цифра: все отступ одинаковые.

Можно также задавать один какой-то отступ. Например: ‘ margin — top : 10 px ;’ – 10 пикселей от верхнего края.

Принимает значения: авто, в единицах измерения или в процентах. Значения отступов могут быть отрицательными.

Читайте также:  Принтер canon g3400 не печатает черным цветом

padding: top, right, bottom, left;

Работает аналогично margin . Отрицательных значений нет.

А теперь более «интересные» свойства =)

Тень (свечение) текста и объекта

text — shadow : смещение_по_вертикали смещение_по_горизонтали размытие #цвет;

— webkit — text — shadow : смещение_по_вертикали смещение_по_горизонтали размытие размер #цвет;

— moz — text — shadow : смещение_по_вертикали смещение_по_горизонтали размытие размер #цвет;

Примечание: — webkit — text — shadow , — moz — text — shadow используются для совместимости с браузерами.

Можно указывать отрицательные значения.

Также можно делать несколько теней – просто перечислить их через запятую – подробнее я покажу в случае с изображением.

Как видите, можно очень красиво оформить заголовки к постам, к примеру. Да и вообще простор для фантазии)

box — shadow : смещение_по_вертикали смещение_по_горизонтали размытие размер #цвет;

— webkit — box — shadow : смещение_по_вертикали смещение_по_горизонтали размытие размер #цвет;

— moz — box — shadow : смещение_по_вертикали смещение_по_горизонтали размытие размер #цвет;

Примечание: — webkit — box — shadow , — moz — box — shadow используются для совместимости с браузерами. Не требуются при наличии последних версий с поддержкой CSS3 .

Тень для какого-либо объекта получается аналогично тени для текста.

— Если устанавливать значение только для размытия, можно получить эффектное свечение:

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

border — radius : верхний_левый верхний_правый ниний_правый нижний_левый углы;

— webkit — border — radius : верхний_левый верхний_правый нижний_правый нижний_левый углы;

— moz — border — radius : верхний_левый верхний_правый нижний_правый нижний_левый углы;

Примечание: — webkit — border — radius , — moz — border — radius используются для совместимости с браузерами. Не требуются при наличии последних версий с поддержкой CSS 3.

Значения присваиваются по часовой стрелки, их может быть от 1 до 4. Изменяя и комбинируя, можно красиво оформить изображения:

— 1 значение: одинаково скругляются все углы

— 2 значения: попарно скругляем [верхний_левый и нижний_правый] и [верхний_правый и нижний_левый]

— 3 значения: [верхний_левый] [верхний_правый и нижний_левый] [нижний_правый]

— 4 значения: задается отдельно для каждого угла

Используя тень, скругляя углы и добавляя рамки, можно оформлять изображения без помощи сторонних редакторов

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

Выбрали цветовую гамму, установили через «Внешний вид/Настроить» фон и шапку блога.

Остальные изменения я разберу на примере виджетов сайдбара.

Что нам потребуется сделать:

Изменить фон сайдбара;

Добавить тени и скругления;

Изменить стандартные кнопки и изображения

Совет: в файле style . css не забывайте комментировать для себя выполняемые действия – будет проще редактировать впоследствии.

Нажимаем ПКМ и выбираем «Просмотр кода элемента»:

Класс top _ comm _ wid в нашей теме относится ко всем виджетам сайдбара. Уж не знаю, почему у него такое название. Если нам надо изменить исключительно форму подписки, выбираем селектор идентификатора. При этом, наше свойство замещает предустановленные общие свойства. И так в случае каждого виджета.

Меняем фон формы и заголовка, добавляем скругления и тень. Для того, чтобы видеть изменения, можно писать правила прямо в окне стиля, показанного браузером.

! Учтите, при этом изменения в самом коде не производятся!

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

Иногда может произойти такое, что какие-то элементы блога съезжают, находят друг на друга и так далее. В этом случае используем внешние и внутренние отступы margin & padding .

Если не нравятся заданные по умолчанию картинки, заменяем их в папке IMAGES родительской темы. После этого не забудьте проверить размеры!

Вот такой виджет у меня получился в итоге:

Вот часть правил CSS , которые я добавила в дочернюю тему:

Таким образом изменяем все страницы блога:

Не очень-то и сложно, не правда ли?

Добавление новых элементов в шаблон блога

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

Поменять местом главное меню и шапку сайта

Можно попробовать поднять главное меню над шапкой сайта. Для этого описание меню блога вырезаем и вставляем после тега

Вот, что у нас получится:

Добавить изображение в шапку сайта

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

Берем любую картинку. Допустим, она называется 12345. png

С помощью FeliZilla загружаем изображение в папку Images: «httpdocs/ wp content / themes / xmarkup /images»

Вид ссылок на изображения:

img src =» http ://Ваш_сайт/ images /Название картинки» width =» x « height =» y « alt =» « >

/images/название картинки» width=»x» height=»y» alt=»»/>

Либо получаем ссылку через «Записи/Добавить новую/Добавить медиафайлы » или «Медиафайлы/Добавить новый». Там же можно сразу установить ссылку на сайт партнеров.

В файле шаблона header . php до или после кода шапки сайта прописываем тег, выводящий изображение:

Пока что ему не присвоены ссылки и стили. По умолчанию картинка выводится в левом нижнем углу шапки блога, над меню.

Теперь картинку надо красиво оформить и присвоить ссылку:

Для примера, я ссылаюсь на главную страницу Яндекса.

Либо стиль можно прописать перед ссылкой на изображение, добавив теги style >… style >

Как добавить картинку перед текстом статьи.

Иногда может потребоваться, чтобы рекламный баннер шел перед заголовками статей. Для этого нам надо добавить код изображения в файл single . php перед кодом заголовка:

При желании, можно скопировать файл single . php в родительскую тему и внести в него изменения уже там.

Изменение иконок социальных сетей и любых других изображений

Чтобы изменить иконки социальных сетей, надо заменить соответствующие файлы в папке Images

Источник

Adblock
detector