Логотип в шапке темы Wordpress

Примеры скриптов для Wordpress на PHP

Не редко бесплатные темы для сайтов Wordpress не устраивают пользователя по различным показателям. Как правило, в теме используются увесистые картинки, которые существенно усложняют загрузку сайта и самой весомой картинкой является шапка темы. У начинающего не всегда получается изменить шапку по той причине, что именно в ней выводятся некоторые данные и логотип сайта. Простой пример поможет изменить не только шапку шаблона Wordpress, но и установить логотип.

Изначально, в шапке всех шаблонов Wordpress выводится название сайта текстовым полем в виде ссылки с коротким описанием. Реализуется в файле header.php при помощи скрипта php

<div class="header-title"><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></div>
<div class="header-description"><?php bloginfo('description'); ?></div>

Чтоб изменить шапку сайта и внедрить логотип в виде картинки с ссылкой, то код придется существенно изменить. Некоторые сайтостроители пытаются реализовать это с помощью функции usemap и при этом изменить файл стилей css. Примерно такой скрипт пытаются впихнуть в тему Wordpress

<img src="images/header.jpg" usemap="header" border="0">
<map name="header">
<area href="<?php echo get_settings('home'); ?>" shape="rect" coords="0,0,400,80">
</map>

Довольно не практичный способ заставить логотип работать в виде ссылки в шапке шаблона. Целесообразнее будет использовать следующий скрипт php, который выведет логотип в виде ссылки. Этот скрипт необходимо вписать в то место, где прописан был первый пример скрипта, в файле header.php

<a href="/"title="На главную страницу сайта"><img src="http://lagran.kz/wp/wp-content/themes/ArLagran/images/logo.gif" alt="На главную страницу сайта" border="0"></a>

В нашем случае при помощи этого скрипта выводится на страницу сайта логотип. Чтоб вставить этот логотип в шапку сайта, придется изменить файл стилей style.css. В этом файле прописан div class для header-title. В нашем случае этот класс прописан следующим образом

.header-title {font-family: Forte MT; color:#181818; 
font-size:26px; padding:35px 0 0 368px;
text-align:left;
font-weight: bold;
}

Больше нам этот код не понадобится и его можно удалить. Вместо него мы присвоили другой класс и добавили свои настройки стиля

.logogran {
 padding:32px 0 0 40px;
}

Далее, если наш скрипт заключить в div стиль logogran, то логотип в виде ссылки на главною страницу сайта появится в нужном месте шапки шаблона Wordperss.

<div class="logogran">
<a href="/"title="На главную страницу сайта">
<img src="http://lagran.kz/wp/wp-content/themes/ArLagran/images/logo.gif" alt="На главную страницу сайта" border="0"></a>
</div>

Но существует одна маленькая проблема, мы теряем изменчивость ссылки при наведении на нее курсора. В стандартном шаблоне название сайта меняет цвет при наведении на него курсора. Как заставить логотип поменять цвет, если курсор наведен на картинку? Чтоб добиться подобного эффекта, создаются две картинки с разной расцветкой и разным названием, а в файл header.php прописывается следующий скрипт

На главную страницу сайта На главную страницу сайта

<div class="logogran">
<a href="/" title="На главную страницу сайта"><img alt="На главную страницу сайта" 
src="http://lagran.kz/wp/wp-content/themes/ArLagran/images/logo.gif" 
onMouseOut=" this.src='http://lagran.kz/wp/wp-content/themes/ArLagran/images/logo.gif' " 
onMouseOver=" this.src='http://lagran.kz/wp/wp-content/themes/ArLagran/images/logoa.gif' " 
width="300px" /></a>
</div>

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

На главную страницу сайта На главную страницу сайта



Комментариев 3 в теме “Логотип в шапке темы Wordpress”

  1. Нурболат написал:

    Огромное спасибо автору статьи, описание помогло сделать логотип, а то через панель не получалось. ОГРОМНОЕ СПАСИБО !!! :)

  2. Arkanzas написал:

    Спасибо! Статья очень выручила. Все коротко и доступно.

  3. Андрей написал:

    Класс! Спасибо, помогло! Оказывается в моём случае надо было обернуть код в div

Оставьте свой комментарий

Навигатор по сайту
Яндекс.Метрика Подпишись на новости с сайта
Работа в сети
Работа в интернете
Платежные системы
Социальные сети
Приколы интернета
Социальные сети
Электронная почта
Поисковые ресурсы
Уроки начинающему
Связь
Казахтелеком
Мобильная связь
Новости связи
Провайдеры и хостинг
Монополия Мегалайн
Интернет от Билайн
Скорость интернета
Хостинг для сайтов
Компьютеры
Защита компьютера
Компьютерные новинки
Современные флешки
Беспроводной wi-fi
Диски DVD
Энергия
Экономим энергию
Аккумуляторы и батарейки
Бытовая техника
Новинки техники
Роботы в быту
Выбираем телевизор
Обсуждаем утюги
Стиральная машина
Все о фотоаппарате
Встречаем холодильник
Видеонаблюдение
GPS навигация
Программы
Полезные программы
Программы microsoft
Скрипт php для сайтов
Высокие технологии
Информационные технологии
Нанотехнологии
Высокие технологии
Познавательно
Государство и общество
Обсуждаем чиновников
Частное мнение
Налоги и платежи
Правила дорожного движения
Авторские права
Разное
Инструмент для ремонта
Советы по ремонту