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

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

Наверняка вы обращали внимание, что внешний вид многих из сайтов, встречающихся на просторах интернета, реализован с использованием бесплатных шаблонов 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, вы создадите уникальный дизайн своего сайта, который будет радовать вас и конечно же посетителей, что несомненно положительно скажется на продвижении и раскрутке вашего ресурса.

На этом все, удачи вам!

Также стоит прочитать:

Как сделать красивую форму подписки Feedburner для... В данной статье вы найдете информацию о том, как создать красивую форму подписки...Feedburner для WordPress.
Как вставлять картинки в комментарии WordPress... Речь в данной статье пойдет о плагине для WordPress, который позволяет вставлять...изображения в комментарии. Разумеется, это не единственный способ выполнения...данной операции, ведь уже размещенное в интернете изображение можно вставить в...комментарий с использованием ссылки не него. Однако, для этого изображение...должно быть размещено в интернете, а какое-либо стороннее изображение, к примеру,...с жесткого диска вашего компьютера, добавить не удастся. В этом случае на помощь...придет рассматриваемый ниже плагин.
Простой способ изменить фон для WordPress сайта... Сегодняшняя статья будет наиболее интересна новичкам, которые хотят изменить или...установить фон для своего сайта на WordPress, ведь в ней я расскажу об одном быстром и...простом способе сделать фон для своего интернет-ресурса.

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock detector