Логотип в шапці теми wordpress

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

Спочатку, в шапці всіх шаблонів Wordpress виводиться назва сайту текстовим полем у вигляді посилання з коротким описом. Реалізується в файлі header.php за допомогою скрипта php

Щоб змінити шапку сайту і впровадити логотип у вигляді картинки з посиланням, то код доведеться істотно змінити. Деякі сайтобудівники намагаються реалізувати це за допомогою функції usemap і при цьому змінити файл стилів css. Приблизно такий скрипт намагаються впихнути в тему Wordpress

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

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

Більше нам цей код не знадобиться і його можна видалити. Замість нього ми присвоїли другий клас і додали свої настройки стилю

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

Але існує одна маленька проблема, ми втрачаємо мінливість посилання при наведенні на неї курсора. У стандартному шаблоні назву сайту змінює колір при наведенні на нього курсора. Як змусити логотип поміняти колір, якщо курсор наведений на картинку? Щоб домогтися подібного ефекту, створюються дві картинки з різним забарвленням і різними назвою, а в файл header.php прописується наступний скрипт

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

Схожі: скрипт php

Програма PayMoney для прийому платежів на сайті

Готовий інформер курсів валют на сайт в Казахстані

Скрипт інформера курсів валют для Казахстану

Скрипт перевірки ІІН на власному сайті