Шаблон – это одежка блога, а по одежке, как известно, встречают. С просьбой о создании уникального дизайна можно (и даже нужно!) обратиться к профессионалу, но мы прекрасно понимаем, что не у каждого есть на это средства. Да и желание их тратить тоже.
Перед тем как читать статью, я предлагаю вам посетить вот этот интенсив, на котором вы сможете создать себе блог с нуля в прямом эфире, просто повторяя за ведущим. При чем вы сделаете себе блог полностью адаптированным под мобильные устройства и полностью соответствующим всем требованиям поисковых систем.
Ниже я на примере шаблона 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 можно поместить:
— Несколько строчек о том, почему нет страницы;
— Предложение перейти на главную страницу;
— Предложение сообщить в службу поддержки;
— Список рубрик блога;
— Перечень всех статей блога;
— Новые сообщения блога;
— Форму поиска или предложение ей воспользоваться;
Либо получаем ссылку через «Записи/Добавить новую/Добавить медиафайлы » или «Медиафайлы/Добавить новый»
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 ;
Добавлять необходимые изменения в файл стиля дочерней темы.
В первых двух случаях мы вносим изменения в файлы исходной темы. Он довольно громоздкий, да и новичкам там может быть страшно ковыряться. Естественно, можно добавлять правки в конец файла стиля, увеличивая его объемы… В общем, в Вордпресс гораздо удобнее пользоваться дочерними темами. У этого способа есть два больших плюса:
— Можно не бояться наделать глупостей, ведь исходную тему мы не трогаем =)
— В случае обновления родительской темы наши правки не слетят. При больших объемах изменений – очень важно!
К тому же, так можно изменять и другие файлы шаблона.
С помощью 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: семейство; /* основной шрифт и альтернативные ему (если идущий первым не установлен) */
Примечание: — webkit — box — shadow , — moz — box — shadow используются для совместимости с браузерами. Не требуются при наличии последних версий с поддержкой CSS3 .
Тень для какого-либо объекта получается аналогично тени для текста.
— Если устанавливать значение только для размытия, можно получить эффектное свечение:
Добавив всего одну строку, можно сделать аккуратный и приятный глазу вид изображений или окон.
Примечание: — 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 =» « >
Либо получаем ссылку через «Записи/Добавить новую/Добавить медиафайлы » или «Медиафайлы/Добавить новый». Там же можно сразу установить ссылку на сайт партнеров.
В файле шаблона header . php до или после кода шапки сайта прописываем тег, выводящий изображение:
Пока что ему не присвоены ссылки и стили. По умолчанию картинка выводится в левом нижнем углу шапки блога, над меню.
Теперь картинку надо красиво оформить и присвоить ссылку:
Для примера, я ссылаюсь на главную страницу Яндекса.
Либо стиль можно прописать перед ссылкой на изображение, добавив теги style >… style >
Как добавить картинку перед текстом статьи.
Иногда может потребоваться, чтобы рекламный баннер шел перед заголовками статей. Для этого нам надо добавить код изображения в файл single . php перед кодом заголовка:
При желании, можно скопировать файл single . php в родительскую тему и внести в него изменения уже там.
Изменение иконок социальных сетей и любых других изображений
Чтобы изменить иконки социальных сетей, надо заменить соответствующие файлы в папке Images
er > — шапка сайта
