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

Ищешь заработок в Интернете? Записывайся на бесплатный онлайн курс «СПЕЦИАЛИСТ ПО ИНТЕРНЕТ-РЕКЛАМЕ» и получи удаленную профессию рекламщика в Яндекс Директ за 10 дней!

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

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

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

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

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

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

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

Красивая форма подписки feedburner для WordPress... Всем привет! Сегодня поменял внешний вид формы подписки на обновления моего...блога, реализованной через такой сервис Google, как feedburner. Именно по этой...причине в данной статье я расскажу о создании красивой формы подписки feedburner...для WordPress.
Картинки в комментариях. Плагин Comment Images... Здравствуйте, читатели моего блога! Речь в данной статье пойдет о плагине для...WordPress, который позволяет вставлять изображения в комментарии. Разумеется,...это не единственный способ выполнения данной операции, ведь уже размещенное в...интернете изображение можно вставить в комментарий с использованием ссылки не...него. Однако, для этого изображение должно быть размещено в интернете, а...какое-либо стороннее изображение, к примеру, с жесткого диска вашего компьютера,...добавить не удастся. В этом случае на помощь приходит плагин.
Галерея изображений стандартными средствами WordPr... Всем привет! В сегодняшней статье я хочу затронуть вопрос создания простой...галереи изображений для WordPress стандартными средствами данной CMS.
Простой способ изменить фон для WordPress сайта!... Всем привет! Сегодняшняя статья будет наиболее интересна новичкам, которые...хотят изменить или установить фон для своего сайта/блога на WordPress, ведь в...ней я расскажу об одном быстром и простом способе сделать фон для своего...интернет-ресурса.
Всплывающие картинки в WordPress без плагина... Всем привет! Про то, как сделать всплывающие картинки в WordPress я уже писал в...одной из своих статей, но там речь шла о...применении специального плагина. Логично будет рассмотреть способ получения...аналогичного результата без установки дополнительных плагинов. Именно об этом мы...и поговорим в рамках сегодняшней статьи.

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

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

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