Наверное, каждый, кто использует для оформления своего блога готовые шаблоны, не раз задумывался: «А здесь надо бы цвет сменить… там передвинуть… это переделать…»
Шаблон – это одежка блога, а по одежке, как известно, встречают. С просьбой о создании уникального дизайна можно (и даже нужно!) обратиться к профессионалу, но мы прекрасно понимаем, что не у каждого есть на это средства. Да и желание их тратить тоже.
Перед тем как читать статью, я предлагаю вам посетить вот этот интенсив, на котором вы сможете создать себе блог с нуля в прямом эфире, просто повторяя за ведущим. При чем вы сделаете себе блог полностью адаптированным под мобильные устройства и полностью соответствующим всем требованиям поисковых систем.
Ниже я на примере шаблона Xmarkup из бесплатного курса «Как сделать блог за час» приведу способы, как можно подправить оформление блога самостоятельно. Я не буду описывать более сложные элементы CSS и кода jQuery – уроки по ним можно найти самостоятельно в интернете – расскажу только базовые понятия, освоить которые под силу каждому.
Главное – не бойтесь экспериментировать!
Содержание:
-
Структура шаблона WordPress.
-
Описание некоторых файлов темы и возможностей их редактирования:
-
header.php;
-
footer.php;
-
index.php;
-
sidebar.php
-
single.php;
-
404.php.
-
-
Файл style.css и изменение внешнего вида шаблона.
-
Структура файла;
-
Дочерние темы;
-
Полезные элементы;
-
Основные селекторы CSS.
-
-
Добавление новых элементов в шаблон блога.
-
Изображения в шапке;
-
Баннера в single.php;
-
Замена исходных изображений.
-
-
Структура шаблона WordPress.
По запросу «темы вордпресс скачать» Гугл выдает нам тысячи вариантов сайтов. От обилия выбора разбегаются глаза – бесплатные и платные, адаптированные и нет, белые, серые, коричневые, стилизованные и современные темы. Одни нравятся, другие очень нравятся. У одних в коде заложены лишние ссылки, другие написаны на английском языке… Как уж тут выбрать =)
Количество файлов шаблонов в каждой из тем может различаться, однако существует «костяк», всегда остающийся неизменным. Откроем папку с темой Xmarkup:
Из всех этих файлов можно выделить основные элементы:
Папка Images – изображения, используемые в шаблоне.
Js – папка со скриптами.
Style.css – файл, который описывает внешний вид блога.
Screenshot – скриншот темы. Отображается в разделе «Внешний вид/Темы».
name.php – шаблоны различных элементов темы. Количество их в зависимости от фантазии создателя в разных темах может быть различным. Вот основные:
|
index.php |
Главная страница |
|
single.php |
Страница одной записи блога |
|
archive.php |
Страница архива записей блога |
|
searchform.php |
Форма поиска |
|
search.php |
Результаты поиска |
|
404.php |
«Страница не найдена» — страница ошибки 404 |
|
comments.php |
Комментарии |
|
footer.php |
Подвал сайта |
|
header.php |
Шапка сайта |
|
sidebar.php |
Сайдбар |
|
page.php |
Страница сайта |
Наглядное изображение страницы блога и шаблонов, ее составляющих. Похоже на пазл, не правда ли?
Редактировать шаблон темы можно двумя способами:
— через админку: «Внешний вид/Редактор/…»;
— скопировав на компьютер и открыв блокнотом Notepad++ (рекомендуется).
! Внимание. Перед исправлением любых файлов шаблона не забывайте создавать его резервные копии!
-
Описание некоторых файлов темы и возможностей их редактирования
HEADER.PHP
Header.php – один из основных файлов шаблона, задействованный практически на всех страницах блога. Он отвечает за отображение шапки блога, главного меню, дает возможность прикреплять виджеты и т.п.
Если рассмотреть код, ясно видно, что типовый хэдер состоит из нескольких разделов:
-
Код DOCTYPE – указывает на тип документа, необходимо для корректного отображения страницы браузерами:
<!DOCTYPE HTML>
-
Информация об языке:
<html lang="en">
-
Тег <head>…</head> содержит техническую информацию, помогающую браузеру и поисковикам:
-
Мета-теги кодировки, отображения на мобильных устройствах и т.д;
-
Мета-тег title – текст, который отображается в заголовке браузера – название блога и постов:
-
-
-
Мета-тег, указывающий ключевые слова и описание страницы. Часто его заменяют плагином All in one SEO pack;
-
Связь с внешними документами: фавикон, rss фид, файл стилей, шаблон оформления и т.п.
-
<link rel="как относится документ к текущему" href="путь к файлу" />
-
-
Теги, подключающие внешние скрипты и их библиотеки — <script> …</script>;
-
Код, обеспечивающий работу плагинов:
-
<?php wp_head (); ?>
-
Тег <body> — все, что выводится на экран компьютера:
<body <?php body_class (); ?>>
-
-
Шапка блога – вывод изображения или текста
-
Тег, выводящий название блога:
-
-
Главное меню блога:
-
Таким образом, для уникализации внешнего вида шаблона в файле header.php мы можем сделать следующее:
— установить фон;
— настроить отображение и стиль текста или картинки в заголовке;
— изменить основное меню блога и его расположение относительно шапки блога;
— по желанию добавить картинку-кнопку или рекламный баннер.
Большая часть этих действий не требует прямого вмешательства в код шаблона – достаточно вносить изменения в админке: «Внешний вид/Настроить».
FOOTER.PHP
В файле шаблона WordPress footer.php задается отображение нижней части блога – так называемого «подвала».
Составные части:
-
Код, обеспечивающий работу плагинов. Аналогичный находится и в header.php. Если какой-либо плагин не действует, первым делом стоит проверить наличие этих двух кодов.
<?php wp_footer ( ); ?>
-
Кнопка «Вверх!»
-
Копирайты – указание авторства, год создания блога – со ссылкой на главную страницу
Год также можно добавлять с помощью php-кода (<?php the_time ('Y'); ?>). Но лучше вводить временные рамки самостоятельно, иначе блог будет «вечно молодой». Хотя это уж кому как нравится =)
-
Дубль главного меню:
<nav id=”footer_menu”>
<?php wp_nav_menu ( array ( ‘theme_location’ => ‘header-menu-top’,’container’ => ‘’ ) ); ?>
</nav>
-
Виджеты. Сначала идет проверка, есть ли в наличии виджет. Если есть – выводится. Пример: счетчик посещаемости Liveinternet. Добавляется: «Внешний вид/Виджеты/Код счетчика посещаемости»
<div id="liveinternet">
<?php if ( is_active_sidebar ( 'fa-widget-area' ) ) : ?>
<?php dynamic_sidebar ( 'fa-widget-area' ); ?>
<?php endif; ?>
</div>
-
Ссылка на разработчиков данного шаблона Вордпресс
<figure id="develop">
<a href="https://www.xmarkup.ru">XMARKUP</a>
</figure>
По желанию, в «подвал» блога можно поместить виджеты, не влезшие в сайдбар. Для этого надо просто перенести соответствующие куски кодов из файла sidebar.php.
По умолчанию через админку в футер ставится блок с контекстной рекламой: «Внешний вид/Виджеты/Текст/Контекстная реклама»
Что можно сделать для уникализации:
— изменить стиль написания и расположения;
— добавить виджеты.
INDEX.PHP
Универсальный элемент шаблона, выводящий главную страницу блога. Иногда носит название home.php.
При этом его функции разделяют и другие файлы: отдельные записи выводит single.php; статичные страницы — page.php; архивы — archive.php; страницу ошибки — 404.php.
Основной шаблон index.php очень важен, он соединяет в единое целое шапку блога, сайдбар и футер + записи блога.
Из чего состоит основной шаблон:
-
Код подключения хэдера:
get_header ();?>
-
Вывод ленты статей блога:
<?php if (have_posts ( )); ?>
<?php while (have_posts ()):the_post (); ?>
В каждом посте стабильно повторяются:
— описание сообщения: дата и время, автор, рубрика, наличие комментариев. При этом, заголовок является ссылкой на сообщение.
— кнопка-ссылка на комментарии и кнопка «Читать», разворачивающая статью полностью
-
Подключается сайдбар:
<?php get_sidebar (); ?>
-
Подключается футер:
<?php get_footer ();?>
Что можно менять в файле index.php:
— оформление поста;
— формат даты и времени;
— подключать или убирать сайдбары.
! Полезная информация.
Как правильно ввести дату и время:
j – день месяца цифрами – 1, 2, 3...;
S – суффикс английского порядкового числителя (second = 2nd и так далее);
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).
SIDEBAR.PHP
Сайдбар выводит на одну или несколько (бывает до 4х) боковых колонок элементы навигации по блогу и необходимую информацию. В нем можно размещать различные виджеты.
Пример сборки сайдбара:
-
Строка поиска;
-
Форма подписки на блог;
-
Рубрики;
-
Топ комментаторов;
-
Архивы;
-
Рекламные баннеры.
Виджеты можно редактировать, в админке в разделе: «Внешний вид/Виджеты». Там же их можно выбрать, добавить свои собственные и расставить в необходимом порядке.
Составные части sidebar.php:
-
Подключение к шаблону
<aside id=”side_bar”>
-
Возможность добавления виджетов
При желании виджеты можно прописать в файле sidebar.php вручную.
Если сайдбаров несколько, то для каждого из них создается отдельный файл .php. Подключаться к шаблону они будут с помощью следующего кода:
<?php include (TEMPLATEPATH. “/Имя_файла.php”);? >
Как уникализировать сайдбар:
— добавить завлекающую картинку-ссылку на страницу захвата;
— подобрать свой набор виджетов;
— изменить местоположение колонки;
— сделать 2 и более сайдбаров;
— изменить внешний вид.
SINGLE.PHP
Файл single.php отвечает за отображение записей блога.
Он состоит:
-
Традиционное подключение шапки блога:
get_header (); ?>
-
Содержимое поста
Блок записи может включать в себя:
-
-
Микроразметка schema.org
-
Указание даты и времени публикации
-
-
-
Указание автора публикации
-
-
-
Указание рубрики
-
-
-
Наличие и количество комментариев
-
Название записи и ее текст
-
-
-
Форма подписки;
-
Ссылки для социальных сетей
-
-
Блок комментариев
-
Наличие комментариев, вывод на экран, если они есть;
-
Окно для ввода комментария + ввод адреса и имени;
-
Скрипт для смайликов
-
Таким образом, редактируя файл single.php, мы можем сделать:
— Добавить картинку перед текстом статьи. Полезно для рекламных баннеров;
— Добавить/Изменить форму подписки;
— Добавить/изменить социальные кнопки;
— Добавить комментарии ВКонтакте;
— Сделать индивидуальное оформление для какой-либо отдельной записи.
404.PHP
В этом файле заложен важный шаблон ошибки 404 «Not found». Она информирует читателя о том, что сервер не может обнаружить требуемую страницу.
Создание привлекательной страницы 404 – важный этап уникализации блога.
! Замечание. В результатах поиска страница ошибки не выдается.
Причины открытия страницы ошибки:
— Удаление записи;
— Сменился заголовок статьи, изменилась ссылка на нее;
— Посетитель набрал неправильный адрес. Например, случайно добавил точку или запятую в конце.
Вы легко можете на нее выйти, дописав какую-либо аракадабру в конце ссылки на сайт: «http://Ваш_сайт.ru/ппым».
Вот так она выглядит по умолчанию:
Как видите, простейшая примитивная надпись. Признайтесь, ушли бы вы с блога, выйдя на подобное? То-то же.
Поэтому очень и очень желательно сделать сделать «Страница не найдена» более информативной для читателя. Убедите посетителя не покидать блог, а остаться и найти что-то интересное для себя!
Для этого на страницу 404 можно поместить:
— Несколько строчек о том, почему нет страницы;
— Предложение перейти на главную страницу;
— Предложение сообщить в службу поддержки;
— Список рубрик блога;
— Перечень всех статей блога;
— Новые сообщения блога;
— Форму поиска или предложение ей воспользоваться;
— Для пущей привлекательности добавить картинку.
Полезные php-коды:
— Ссылка на картинку:
<img src="http://Ваш_сайт/images/Названиекартинки«width=»x"height="y"alt=" «>
<img src=»<?php bloginfo ('template_directory'); ?>/images/название картинки" width="x" height="y" alt="« />
Либо получаем ссылку через «Записи/Добавить новую/Добавить медиафайлы» или «Медиафайлы/Добавить новый»
— Ссылка:
<ahref=»ссылка">заголовок ссылки</a>
<?php echo get_settings (‘home’); ?> — ссылканадомашнююстраницу
— Вывод последних 10 записей блога
<?php get_archives (‘postbypost’, 10); ?>
— Страницыблога
<?php wp_list_pages (‘title_li=’); ?>
— Рубрикиблога
<?php wp_list_cats (‘sort_column=name’); ?>
— Форма поиска берется из searchform.php
<form method="get" class="searchform" action="<?php bloginfo ('url'); ?>/">
<input type="text" placeholder="Поиск" name="s" class="s">
<input type="submit" value="«>
</form>
3. Файл style.css и изменение внешнего вида шаблона
Теперь перейдем к style.css. В нем описаны элементы стиля CSS, применяемые к каждому из объектов шаблона. Редактируя этот файл, мы легко можем изменить внешний вид своего блога.
Подключается файл стиля в хэдере:
<link rel=»stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" media="screen" />
Там же мы по необходимости можем подключить дополнительные файлы стиля.
Структура 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, то увидим подобное:
<header> — шапка сайта
<div> — контейнер, в который мы заключаем фрагмент блога, будь то ссылка, страница или текстовое окно. Помогает структурировать документ.
Чтобы изменить вид содержимого этого блока, мы добавляем к нему атрибуты id и class.
Id – стилевой идентификатор. Это уникальное имя, одно id используется только 1 раз на странице. Может применяться для якорных ссылок: <a href="#id">вот так</a>
Class – назначает имя класса, одному элементу на странице можно присвоить несколько классов. Также один класс может быть присвоен нескольким элементам.
При этом, большей приоритет у атрибута id. Пример:
<div id=”one” class=”two”>Пример</div>
#one { color: #000; } /* черныйцвет */
.two { color: #fff; } /* белыйцвет */
Текст будет черного цвета, так как идентификатор важнее.
Итак, селектор – часть CSS правила, к которому будет применен стиль. Более подробно вы сможете познакомиться со всеми ними в любом учебнике по CSS или сайте для вебмастеров.
В качестве селектора могут использоваться элементы страницы (body, li, ul и т.д.), так и специально заданные атрибуты стиля (id, class) или атрибуты (ссылки и т.п.).
Рассмотрю примеры некоторых селекторов из нашего файла стиля.
-
Селектор идентификатора (имя + знак решетка #).
В шаблоне задан как <header id=«header»>
-
Селектор класса (точка + имя)
<div class="wrapper"> — выбираем все элементы внутри контейнера div и присваиваем им этот класс.
-
Универсальный селектор «*» позволяет нам выбрать все элементы на странице (или дочерние элементы). В данном примере мы обнуляем стили браузера, убирая отступы.
-
Селектор элемента. Данный простой селектор убирает рамку у всех изображений. Так можно задать стиль всем элементам кода на странице: таблицам, изображениям, ссылкам, параграфам и т.п.
-
Селектор, состоящий из двух элементов. Также позволяет выделить все элемент нужных типов на странице. В данном случае определяет написание текста в тегах <b>…</b> и <strong>…</strong>
Также можно объединять простые селектор при помощи комбинаторов.
-
Выбор всех дочерних элементов внутри данного элемента. Выбираем все заголовки h1 внутри идентификатора 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: 10px;’ – 10 пикселей от верхнего края.
Принимает значения: авто, в единицах измерения или в процентах. Значения отступов могут быть отрицательными.
-
Внутренний отступ
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 используются для совместимости с браузерами. Не требуются при наличии последних версий с поддержкой CSS3.
Значения присваиваются по часовой стрелки, их может быть от 1 до 4. Изменяя и комбинируя, можно красиво оформить изображения:
— 1 значение: одинаково скругляются все углы
— 2 значения: попарно скругляем [верхний_левый и нижний_правый] и [верхний_правый и нижний_левый]
— 3 значения: [верхний_левый] [верхний_правый и нижний_левый] [нижний_правый]
— 4 значения: задается отдельно для каждого угла
Используя тень, скругляя углы и добавляя рамки, можно оформлять изображения без помощи сторонних редакторов
Что ж, теперь давайте попробуем применить полученные знания на практике.
Выбрали цветовую гамму, установили через «Внешний вид/Настроить» фон и шапку блога.
Остальные изменения я разберу на примере виджетов сайдбара.
Что нам потребуется сделать:
-
Изменить фон сайдбара;
-
Добавить тени и скругления;
-
Изменить стандартные кнопки и изображения
Совет: в файле style.css не забывайте комментировать для себя выполняемые действия – будет проще редактировать впоследствии.
Нажимаем ПКМ и выбираем «Просмотр кода элемента»:
Класс top_comm_wid в нашей теме относится ко всем виджетам сайдбара. Уж не знаю, почему у него такое название. Если нам надо изменить исключительно форму подписки, выбираем селектор идентификатора. При этом, наше свойство замещает предустановленные общие свойства. И так в случае каждого виджета.
Меняем фон формы и заголовка, добавляем скругления и тень. Для того, чтобы видеть изменения, можно писать правила прямо в окне стиля, показанного браузером.
! Учтите, при этом изменения в самом коде не производятся!
Если полученные результат нас устраивает, копируем свойства вместе с селектором и вставляем в файл стиля нашей дочерней темы.
Иногда может произойти такое, что какие-то элементы блога съезжают, находят друг на друга и так далее. В этом случае используем внешние и внутренние отступы margin & padding.
Если не нравятся заданные по умолчанию картинки, заменяем их в папке IMAGES родительской темы. После этого не забудьте проверить размеры!
Вот такой виджет у меня получился в итоге:
Вот часть правил CSS, которые я добавила в дочернюю тему:
Таким образом изменяем все страницы блога:
Не очень-то и сложно, не правда ли?
-
Добавление новых элементов в шаблон блога
Что ж, мы научились уникализировать шаблон. Теперь я расскажу о том, как добавлять новые элементы в шаблон блога. Например, рекламный баннер.
-
Поменять местом главное меню и шапку сайта
Можно попробовать поднять главное меню над шапкой сайта. Для этого описание меню блога вырезаем и вставляем после тега <header id="header">
Вот, что у нас получится:
-
Добавить изображение в шапку сайта
Также помимо основного изображения может понадобиться добавить в шапку сайта еще одно изображение. К примеру, рекламный баннер или какую-либо кнопку (на те же конкурсы).
-
Берем любую картинку. Допустим, она называется 12345.png
-
С помощью FeliZilla загружаем изображение в папку Images: «httpdocs/wp— content/themes/xmarkup/images»
Вид ссылок на изображения:
<imgsrc="http://Ваш_сайт/images/Название картинки"width="x«height=»y«alt=» «>
<img src=»<?php bloginfo ('template_directory'); ?>/images/название картинки" width="x" height="y" alt="" />
Либо получаем ссылку через «Записи/Добавить новую/Добавить медиафайлы» или «Медиафайлы/Добавить новый». Там же можно сразу установить ссылку на сайт партнеров.
-
В файле шаблона header.php до или после кода шапки сайта прописываем тег, выводящий изображение:
Пока что ему не присвоены ссылки и стили. По умолчанию картинка выводится в левом нижнем углу шапки блога, над меню.
Теперь картинку надо красиво оформить и присвоить ссылку:
Для примера, я ссылаюсь на главную страницу Яндекса.
С помощью тега <div class=”primer”> ссылаемся на стилевой класс в файле style.css. Параметры стиля прописываем вручную:
Либо стиль можно прописать перед ссылкой на изображение, добавив теги <style>…</style>
-
Как добавить картинку перед текстом статьи.
Иногда может потребоваться, чтобы рекламный баннер шел перед заголовками статей. Для этого нам надо добавить код изображения в файл single.php перед кодом заголовка:
При желании, можно скопировать файл single.php в родительскую тему и внести в него изменения уже там.
Вот результат:
-
Изменение иконок социальных сетей и любых других изображений
Чтобы изменить иконки социальных сетей, надо заменить соответствующие файлы в папке Images
На это все. До новых встреч, друзья!
Автор статьи:
Анастасия Калашникова
В бесплатном курсе "Как создать блог за час" не работает кнопка <купить шаблон> Александр дайте пожалуйста рабочую ссылку на приобретение адаптивного шаблона xmarkup
Все работает !!! С помощью какого браузера у вас она открывается ?
Товара с таким ID не существует.
Вы приобрели в итоге шаблон? где его купить можно?
О, моя статья =)
Настя молодец , все расписала почти до мелочей, заходил на твой блог мне понравился, сама делала ??
Спасибо,код по большей части xmarkup, остальное — сама
Все нужное доходчиво и просто! Спасибо!
Настя, статья супер. Лично для меня она очень полезная, особенно то, как менять форму подписки, для меня это любимейшая тема и вопрос.) Большое тебе спасибо! Классные ежики. [:-))]
Статья хорошая и полезная! Но к сожалению на свой вопрос ответа я не нашел. А вопрос такой: "Как валидно удалить или исправить Н1 из шапки ", ведь Н1 всегда один или это не правда!?
Пропишите в шапке условие через if...else, чтобы в h1 выводилось только на главной, а на других, например, в span
Как славно! Всё расписано по шагам и разложено по полочкам! Спасибо огромное! Я как раз изучаю сейчас курс "Как создать блог за час" и уже приближаюсь к уроку на тему, как уникализировать свой шаблон WordPress. Там же много всяких технических подробностей, запомнить сразу всё трудно, конспектировать замаешься. А тут всё как на блюдечке! Спасибо ещё раз, Анастасия!
Здравствуйте, Александр! Большое спасибо за интересную статью! Конечно, в жизни есть свои нюансы. Например, уже несколько дней бьюсь над, казалось бы, простой задачей: изменить дизайн адаптивной темы.
В админке WordPress есть бесплатная тема Frontier — она респонсивная. У меня блог о фотографии и нужно, чтобы размер картинок менялся в зависимости от разрешения монитора пользователя. Плагин ставить не хочу — не удобно.
Тема Frontier отлично изменяет размеры изображений. Но не могу решить 2 задачи:
1) Сделать так, чтобы на всех страницах было 2 колонки, а в "Постах" — одна колонка на всю ширину 100%, т.е. без Сайдбара.
2) Увеличить на страницах Посты ширину Conten до 1440px, чтобы можно было размещать фотографии в максимальном размере 1400px.
Проблема в том, что изначально Frontier предлагает много пользовательских настроек. Из-за этого код HTML очень сложный. Во вторых, в ней нет файла Single... 🙁
Может глянете?
Спасибо заранее!
Спасибо за потрясающую и интересную статью!
Здравствуйте. Я новичок в создании сайтов, никак не могу найти ответ на вопрос — можно ли в готовом шаблоне WP, в каждой странице задавать собственный стиль, к примеру, фон. На одной странице один, а на другой — второй?
Здравствуйте, Александр и автор статьи — Анастасия! Отличная статья-пособие для начинающих! Всё тщательно проштудировал, но ответа на свой вопрос так и не нашел. У меня такая проблема на сайте WP: при нажатии на пункт меню, вернее при наведение на него мышки цвет пункта меняется, но при нажатии не фиксируется. То есть на пункт меню нажал, перешел по нему на другую страницу, а в меню не видно где я нахожусь. Как зафиксировать пункт меню. Я понимаю что за это отвечает html, но что и где в нем нужно прописать не пойму. Если не сложно вышлите код.
Доброго времени суток, очень понравилась ваша статья. Повторил для себя CSS лишний раз. Но вот ответа на свой вопрос так и не нашёл. Думаю ответ будет также интересен тем, кто редактирует WordPress.
Дело в том, что файлы на FTP либо непосредственно в админке WordPress c расширением .php. А необходимый редактируемый элемент виден в Firebug или в режиме девелопера в Safari на Mac OS X, как HTML. Например, мне нужно отредактировать текст ссылки и текст абзаца <p>...</p>, но ни в php в режиме редакторе в админке, ни в в FTP никаких HTML сроду не видно. Где лежат эти файлы ? вот в чём вопрос? Спасибо!!
Просто о сложном. Впрочем, как и всегда. Александр, статьи с вашего блога хоть каждую в закладки добавляй! Я такую концентрацию полезной информации в одном месте давно не видела. Спасибо!
Очень полезная статья, но сложно вот так сразу разобраться и применить в жизнь. Добавила в закладки.
А почему бы не сделать содержание активным? Чтобы нажать и перейти в нужное место статьи.
Ух, именно эта статья в свое время меня сподвигла на подвиг, ) я начал изучать вопросы редактирования шаблона очень углубленно, в итоге сейчас делаю бесплатный видео курс по уникализации шаблона. Александру спасибо за то что подтолкнул в нужном направлении. первый видеоурок уже готов 😉
Спасибо за информацию!
А как сделать чтобы кликая по шапке выходить на главную?
Вот этого я не могу понять!
Спасибо за такую подробную статью. То, что мне сейчас нужно.!
Здравствуйте!
У меня установлен на главной странице слайдер с меняющимися фотографиями и ссылками на статьи, но они уже устарели и я хочу поменять, а найти в шаблоне никак не могу — в каком разделе вставлены эти фото и ссылки (мне их помогли вставить в слайдер, но нет связи с этим человеком)? Не могли бы мне подсказать? Заранее очень благодарю!
Приветствую всех! Ребята помогите. У меня такая проблемка. Не могу выровнить страничку в вордпрессе в css стилях прописываю в конце код а обновить его немогу кодекс не позволяет. как быть!? Помогите пожалуйста.
Здравствуйте! вы мне можете помочь! Мне нужно создать 2 сайта — личный и компании. Свяжитесь со мной пожалуйста!
Дизайн сайта просто ужасен. Конечно, можно меня забанить, но проблему дизайна это не решит 🙂
Подскажите, пожалуйста, где купить адаптивный шаблон XmarkUp? Начала смотреть курс как создать блог за час.Застряла на 7 уроке. Не могу найти ссылку на покупку шаблона.
подскажите, пожалуйста, почему у Вас на главной картинке на мерседесе логотип БМВ???)))
Cпасибо за очень интересную и познавательную статью.