Сегодня я расскажу о том, как сделать внешний вид сайта на WordPress уникальным, для чего нам понадобиться всего-навсего переделать шаблон WordPress.
Наверняка вы обращали внимание, что внешний вид многих из сайтов, встречающихся на просторах интернета, реализован с использованием бесплатных шаблонов WordPress, что никак не идет в плюс репутации ресурса.
Более того, нередко можно встретить сайты, на страницах которых размещены внешние ссылки на сторонние ресурсы, размещенные создателями бесплатных шаблонов.
Разумеется, в идеале нужно использовать платные шаблоны, но для этого необходимо вкладывать денежные средства.
Если тратить деньги на тему WordPress не хочется, если у вас молодой сайт, к примеру, а навыков в создании шаблонов у вас нет, то логичнее всего будет переделать существующий шаблон WordPress.
Итак, для того, чтобы переделать шаблон WordPress и превратить его в каком-то роде в уникальный, нам понадобиться отыскать понравившийся бесплатный шаблон.
На просторах сети интернет не составит труда найти массу бесплатных шаблонов, так что проблем на данном этапе возникнуть не должно.
Для данной статьи я подобрал шаблон, который выглядел следующим образом:
Характеристики исходного шаблона были следующие: шаблон для WordPress 3.7.1, над подвалом размещается до 3 блоков с любыми виджетами, есть логотип (PSD), который можно легко отредактировать. Форма поиска расположена на одной линии вместе с главным меню.
План действий по изменению шаблона следующий:
- изменить внешний вид шапки шаблона (header);
- изменить внешний вид подвала шаблона (footer);
- изменить содержимое сайдбара (sidebar);
- очистить файлы шаблона от ненужных внешних ссылок, в том числе закодированных;
- отладить работоспособность шаблона и вернуть все функции, доступные до смены шаблона (форма комментариев ВКонтакте, стрелка вверх, кнопки социальных сетей и т.д.).
Так выглядит краткий план действий по переделке шаблона WordPress. Теперь подробнее.
Как переделать шаблон WordPress?
Итак, переходим к более подробному рассмотрению каждого из вышеуказанных пунктов.
Для изменения внешнего вида шапки (header) шаблона нам необходимо будет в каталоге с исходной темой найти папку images, в которой в свою очередь найти файлы картинок, используемых в шапке шаблона. Сделать это не составит никакого труда, в моем случае это две следующие картинки:
Должен сказать, что случай с выбранным мной шаблоном для редактирования частный, и не обязательно внешний вид шапки должен быть составлен именно из двух картинок. Не будем на этом останавливаться, тут ничего сложного нет.
И вообще, в данной статье я рассматриваю вопрос изменения шаблона WordPress так сказать «малой кровью», то есть с минимальными переделками, чтобы было понятно новичкам. Именно по этой причине размер картинки, используемой в хэдере, оставим прежним.
Так вот, теперь если с помощью графического редактора, к примеру, Photoshop, соединить эти два изображения, то мы получим следующее:
Надеюсь ход моих мыслей понятен? Если не совсем, то поясню: нам нужно оценить размер необходимого изображения, которое мы в дальнейшем создадим сами для оригинального внешнего вида нашего сайта, ведь в моем случае именно это изображение играет определяющую роль в дизайне выбранного шаблона.
Итак, соединив изображения, определяем размер необходимого изображения, а также с помощью направляющих в Photoshop обозначаем положение на холсте характерных элементов функционала шаблона: поля, на котором располагаются кнопки меню и так далее. У меня получился следующий результат:
Теперь тем, кто имеет маломальские навыки работы в Photoshop не составит труда разделить изображение на две части, пропорциональные исходным изображениям, после чего сохранить их под именами исходных картинок шаблона в формате jpg или png. Результат моих действий ниже:
Далее закидываем данные файлы в каталог images переделываемой темы (если все действия с файлами вы производите на хостинге, то можете воспользоваться для доступа к ним FTP-клиентом, о чем написано в статье). Смотрим результат — все должно заработать как часы. Готово!
Также я заменил логотип, расположенный в шапке шаблона на свой:
При изменении шаблона я также добавил картинку в подвал своего сайта, которая выглядит следующим образом:
Сделал я это следующим образом: добавил в файл header.php шаблона еще одну конструкцию:
к уже существующим:
в результате чего получился такой фрагмент кода:
Далее с помощью 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» и выглядит следующим образом:
И вместо фразы какое-либо содержание вставить необходимую информацию, которую вы хотите отображать в футере вашего сайта. В моем случае код следующий:
Цвет фона в футере, на котором будет отображаться указанный текст, можно изменить следующим образом: так как у нас 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, вы создадите уникальный дизайн своего сайта, который будет радовать вас и конечно же посетителей, что несомненно положительно скажется на продвижении и раскрутке вашего ресурса.
На этом все, удачи вам!