Как переделать шаблон WordPress?

Всем привет!

Сегодня я расскажу о том, как сделать внешний вид блога на WordPress уникальным, для чего нам понадобиться всего-навсего переделать шаблон WordPress.

Ищете заработок в Интернете? Пройдите обучение!

БЕСПЛАТНЫЙ 10-ДНЕВНЫЙ ОНЛАЙН КУРС «СПЕЦИАЛИСТ ПО ИНТЕРНЕТ-РЕКЛАМЕ»

Наверняка вы обращали внимание, что внешний вид многих из сайтов и блогов, встречающихся на просторах интернета, реализован с использованием бесплатных шаблонов WordPress, что никак не идет в плюс репутации ресурса. Более того, нередко можно встретить сайты/блоги, на страницах которых размещены внешние ссылки на сторонние ресурсы, размещенные создателями бесплатных шаблонов. Разумеется, в идеале нужно использовать платные шаблоны, но для этого необходимо вкладывать денежные средства. Если тратить деньги на тему WordPress не хочется, если у вас молодой блог, к примеру, а навыков в создании шаблонов у вас нет, то логичнее всего будет переделать существующий шаблон WordPress.

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

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

Как переделать шаблон WordPress?

Характеристики исходного шаблона были следующие: шаблон для WordPress 3.7.1, над подвалом размещается до 3 блоков с любыми виджетами, есть логотип (PSD), который можно легко отредактировать. Форма поиска расположена на одной линии вместе с главным меню.

План действий по изменению шаблона следующий:

  • изменить внешний вид шапки шаблона (header);
  • изменить внешний вид подвала шаблона (footer);
  • изменить содержимое сайдбара (sidebar);
  • очистить файлы шаблона от ненужных внешних ссылок, в том числе закодированных;
  • отладить работоспособность шаблона и вернуть все функции, доступные до смены шаблона (форма комментариев ВКонтакте, стрелка вверх, кнопки социальных сетей и т.д.).

Так выглядит краткий план действий по переделке шаблона WordPress. Теперь подробнее.

Как переделать шаблон WordPress?

Итак, переходим к более подробному рассмотрению каждого из вышеуказанных пунктов.

Для изменения внешнего вида шапки (header) шаблона нам необходимо будет в каталоге с исходной темой найти папку images, в которой в свою очередь найти файлы картинок, используемых в шапке шаблона. Сделать это не составит никакого труда, в моем случае это две следующие картинки:

Как переделать шаблон WordPress?

Как переделать шаблон WordPress?

Должен сказать, что случай с выбранным мной шаблоном для редактирования частный, и не обязательно внешний вид шапки должен быть составлен именно из двух картинок. Не будем на этом останавливаться, тут ничего сложного нет. И вообще, в данной статье я рассматриваю вопрос изменения шаблона WordPress так сказать «малой кровью», то есть с минимальными переделками, чтобы было понятно новичкам. Именно по этой причине размер картинки, используемой в хэдере, оставим прежним.

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

Как переделать шаблон WordPress?

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

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

Как переделать шаблон WordPress?

Теперь тем, кто имеет маломальские навыки работы в Photoshop не составит труда разделить изображение на две части, пропорциональные исходным изображениям, после чего сохранить их под именами исходных картинок шаблона в формате jpg или png. Результат моих действий ниже:

Как переделать шаблон WordPress?

Как переделать шаблон WordPress?

Далее закидываем данные файлы в каталог images переделываемой темы (если все действия с файлами вы производите на хостинге, то можете воспользоваться для доступа к ним FTP-клиентом, о чем написано в статье). Смотрим результат — все должно заработать как часы. Готово!

Также я заменил логотип, расположенный в шапке шаблона на свой:

Как переделать шаблон WordPress?

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

Как переделать шаблон WordPress?

Сделал я это следующим образом: добавил в файл header.php шаблона еще одну конструкцию:

1
<div id="wrapper-bg3">

к уже существующим:

1
<div id="wrapper-bg"><div id="wrapper-bg2">

в результате чего получился такой фрагмент кода:

1
<div id="wrapper-bg"><div id="wrapper-bg2"><div id="wrapper-bg3">

Далее с помощью css я подключил к данному добавленному контейнеру изображение, для чего в файл style.css добавил следующее:

1
2
3
#wrapper-bg3 {
background: url("images/wrapper-bg3.jpg") no-repeat scroll center bottom transparent;
}

С помощью аргумента bottom в данном коде я прилепил картинку футера своего шаблона к самому низу.

Чтобы изменить текст в футере, нужно проделать следующее: в файле footer.php найти код (контейнер div), который в наиболее распространенном случае имеет id=»footer» и выглядит следующим образом:

1
<div id="footer">какое-либо содержание</div>

И вместо фразы какое-либо содержание вставить необходимую информацию, которую вы хотите отображать в футере вашего сайта/блога. В моем случае код следующий:

1
<div id="footer">&copy; 2013 <a href="<?php bloginfo('home'); ?>"><strong><?php bloginfo('name'); ?></strong></a> - Все права защищены. Использование материалов сайта без согласия автора и размещения индексируемой ссылки на сайт expromtom.ru запрещено.</div>

Цвет фона в футере, на котором будет отображаться указанный текст, можно изменить следующим образом: так как у нас id вышеуказанного контейнера div носит название footer, то в файле css-стилей style.css нужно найти строки, отвечающие за назначение стилей для него (привожу пример из своего шаблона):

1
2
3
4
5
6
7
8
9
#footer {
background: none repeat scroll 0 0 #2E4263;
color: #FFFFFF;
font-size: 12px;
margin: 0 auto;
padding: 10px 10px 0;
text-align: center;
width: 950px;
}

И прописать нужный код палитры цветов в поле background.

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

Изменить содержимое сайдбара довольно просто: нужно всего лишь в разделе Внешний видВиджеты админ-панели WordPress подключить или отключить соответствующие виджеты, а также настроить их. Тут все на ваше усмотрение, ничего сложного нет. Добавлю лишь то, что порядок отображения рубрик в сайдбаре можно поменять с помошью специального плагина, о чем в моем блоге есть статья.

Про то, как из шаблона удалить ненужные внешние ссылки (в том числе закодированные) я писал в этой статье, ознакомьтесь с данной информацией, так как при изменении какого-либо из бесплатных шаблонов WordPress значимость данной процедуры в дальнейшей судьбе развития вашего ресурса переоценить сложно.

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

Проделав все вышеуказанные процедуры по переделке шаблона WordPress, вы создадите уникальный дизайн своего сайта/блога, который будет радовать вас и конечно же посетителей, что несомненно положительно скажется на продвижении и раскрутке вашего ресурса.

На этом все, как вам моя статья? Жду ответа в комментариях.

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

До скорых встреч. С уважением, Владимир Денисов!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *