Модификация темы WordPress: заголовок веб страницы
В Интернете существует множество бесплатных тем для блогов WordPress. И каждый может выбрать ту тему, которая пришлась ему по душе. Тем не менее, часто возникает потребность в модификации тем WordPress.
Это происходит по разным причинам. Кто-то хочет добавить элемент, связанный с его брендом и бизнесом. Кому-то тема в принципе нравится, но вот некоторые элементы дизайна хотелось бы поменять.
Кто-то просто хочет, чтобы тема была оригинальной. Ведь бесплатную тему установить может каждый, и есть вероятность, что в Интернете окажется несколько блогов с одинаковым дизайном. И посетители могут в результате не оценить блог должным образом.
Конечно, главное в блоге – это контент. С этим никто не спорит. Однако немаловажную роль играет и дизайн. Потому что тот или иной дизайн может сразу же или привлечь посетителя, или оттолкнуть его. Бывают случаи, когда посетитель уходит с блога, даже не ознакомившись с его контентом, только потому, что ему не нравится дизайн.
Модификация темы WordPress – задача непростая. Как правило, этим занимаются веб дизайнеры. Все же кое-что, некоторые простые операции, блоггер может выполнить и самостоятельно. И то, что получится в результате, будет, как говорится, дешево и сердито.
В этой статье мы поговорим о том, как можно изменить заголовок (хедер, шапку) сайта на WordPress.
В качестве примера рассмотрим распространенную тему default (Кубрик). Тема с достаточно простым дизайном, поэтому для наших целей вполне подходит. Кроме того, это самая доступная тема, так как присутствует практически на любом установленном блоге WordPress.
Как известно, файлы данной темы располагаются на хостинге в папке wp-content/themes/default.
Перед тем, как начинать работу по модификации темы, рекомендуется сделать ее копию. Проще всего скачать все файлы из папки темы к себе на компьютер, хотя можно воспользоваться и средствами бэкапа на хостинге.
Возможно, Вы модифицируете другую тему, которую еще не загрузили на свой сайт. Тогда просто оставьте копию оригинала на своем компьютере.
Теперь можно переходить к редактированию файлов темы. Это возможно делать различными способами.
Самый простой – использовать встроенный редактор, доступный из раздела «Дизайн» админ панели Вашего блога. Здесь Вы можете делать изменения, и сразу смотреть, что из этого получилось. При этом необходимо убедиться, что в папке на хостинге, содержащей данную тему, установлены соответствующие права доступа CHMOD, позволяющие производить запись в эту папку.
Недостатком является то, что каждый посетитель, который зайдет в этот момент на Ваш блог, также станет невольным свидетелем Вашего творческого процесса, что не всегда бывает желательно. В этом случае неплохо создать отдельный тестовый блог.
Если Ваш блог находится на своем домене на хостинге, и если доступно использование поддоменов, то это будет отличным решением проблемы.
Имеются и альтернативы. Можно воспользоваться редактором в админ панели Вашего хостинг аккаунта. Можно установить веб сервер (типа Denver) на Ваш компьютер, и все делать без выхода в Интернет. Можно просто редактировать файлы на компьютере, а затем закачивать их на сайт с помощью FTP клиента. Выбор за Вами.
Начнем с графического файла заголовка. Для того чтобы получить графический файл, можно просто зайти на блог и сохранить его со своего браузера, установив на него указатель мыши и нажав на правую кнопку. При этом Вы не увидите возможности сохранить картинку. Но Вы можете сохранить фон. Так и делаем.
Файл носит название kubrickheader.jpg. Собственно говоря, Вы можете просто найти его в папке default/images. Его можно просмотреть с помощью просмотрщика графических файлов, например ACDSee. При этом мы видим, что размер файла составляет 760х200 пикселов.
Самый простой способ заменить картинку хедера заключается в том, что Вы просто берете другой графический файл с теми же размерами картинки, тем же форматом, называете его так же, как исходный графический файл темы, и закачиваете его на сайт в папку default/images на место первоначального.
После этого на Вашем блоге будет отображаться новая картинка заголовка. Правда, размеры картинки, которой Вы хотите заменить хедер, могут быть и другими. Но при отображении на странице блога картинка будет сжата или растянута, как по горизонтали, так и по вертикали, чтобы в результате получились те же размеры, которые заложены в файлах темы.
Если же Ваш графический файл имеет другой формат (не jpg, а gif или png), или Вы хотите сохранить свое название, Вам придется заняться редактированием темы.
Информация о заголовке хранится в двух файлах темы – header.php и style.css.
Открываем в редакторе файл header.php, и находим в нем следующие строчки:

Как видим, тут нет ссылок на файл kubrickheader.jpg, зато есть ссылки на секции в файле style.css – header и headerimg. Теперь открываем файл style.css.

Подчеркнутая строчка вверху содержит имя и местонахождение графического файла заголовка. Данные в секции headerimg задают размеры и границы отображаемого рисунка.
Теперь, если Вы захотите, можете изменить имя файла с картинкой, или даже его расположение. И при этом будет отображаться уже тот файл, который задали Вы. Но не забудьте загрузить новый файл с картинкой на хостинг.
Размеры в принципе тоже можно менять. Но тут требуется осторожность. Поскольку размеры картинки связаны с общей планировкой дизайна страницы. Вы не хотели бы, чтобы новая картинка по своим размерам полностью выпадала из дизайна страницы в целом.
Кстати, если присмотреться повнимательнее, то можно увидеть, что размеры картинки, заданные в файле style.css, не совпадают с действительными размерами картинки в файле kubrickheader.jpg. Эта ситуация вполне допустима, и размеры отображаемой картинки на веб странице будут такими же, как и в файле стилей. Сама же картинка в данном случае несколько сожмется.
Вот то, что касается картинки заголовка и ее модификации.
Можно еще немного модифицировать внешний вид Вашего блога. Секция body файла стилей задает отображение шрифтов и фона веб страниц.

Здесь мы видим имя файла с картинкой для фона страницы, и цвет фона, который отображается в браузере в том случае, когда отключен показ графики. Все это также можно изменить, но при этом необходимо следить за тем, как внесенные изменения гармонируют с общим видом страниц сайта.
Итак, даже используя только лишь эти простые методы, Вы можете в значительной степени изменить отображение страниц Вашего блога. Надо лишь проверять, что у Вас получилось, и в любом случае иметь копию первоначальной темы.
В дальнейшем мы рассмотрим другие вопросы, связанные с модификацией тем WordPress.
Не пропустите следующий пост! Подпишитесь на RSS!
Стой! Сделай ретвит, пока не забыл!
Тэги: Wordpress • настройка wordpress • темы Wordpress
Рубрика: Wordpress
Понравился этот пост? Подпишитесь на наш канал RSS и узнайте больше!


Спасибо за интересную информацию!Для начинающих блоггеров это,мне кажется,актуальная тема.
Актуальная тема, спасибо. Взяла на заметку способы изменения хедера блога.
По поводу изменения фона страницы и шрифта хотелось бы подробнее, если можно.
Можно уточнить вот по этому пункту:
«При этом необходимо убедиться, что в папке на хостинге, содержащей данную тему, установлены соответствующие права доступа CHMOD, позволяющие производить запись в эту папку.»
Как можно узнать, какие права доступа установлены?
И каким образом можно их изменить?
@Маргарита
В ближайшее время как раз рассмотрим.
CHMOD — это права доступа к файлу или папке на хостинге. То есть: можно ли этот файл читать, можно ли в него писать, и можно ли запускать его на выполнение. И все это для 3 категорий пользователей. Т.е. права бывают личные, групповые и публичные.
Посмотреть и поменять можно либо через FTP клиент, либо через файл менеджер панели управления на хостинге (свойства файла/папки).
Спасибо за науку! Хотелось бы еще научиться закачивать свои шрифты (куда?) и поиграться с их изменением.
@ Ефим
Что касается шрифтов, то дело обстоит так. Вы, конечно, можете указать любой из возможных шрифтов на своем сайте. Но когда посетитель зайдет на него через свой браузер, то браузер попытается найти этот шрифт среди уже установленных на компе посетителя. Если его там не будет, он просто заменит его другим из имеющихся в наличии. Так что всех Ваших красот посетитель, скорее всего, не увидит.
Вы можете поиграться этим на своем компьютере, но другим от этого будет ни холодно, ни жарко.
Если Вы действительно хотите, чтобы посетители увидели на сайте именно Ваш конкретный шрифт, то загоните его в картинки через Photoshop. Конечно, это не совсем то, что Вы хотели. Но ситуация именно такова.
Допустим как изменить Кубрика мы знаем, а как поставить другую тему по-дефолту, чтобы избавиться от Кубрика?
@ badcluster
А зачем по дефолту? Все делается просто:
1. Находим новую тему и закачиваем в каталог /wp-content/themes/ на сервере
2. В админке заходим во «Внешний вид-Темы» и активируем новую тему
Это все!