Останнє оновлення: 25/10/14
Днями витратила кілька годин на вирішення такого завдання. І найсмішніше те, що завдання-то елементарна, і я це вже робила раніше.
Логотип вставляла на сайт замовника, і щось заклинило! Довелося навіть звернутися за допомогою до друзів. Однак, у кого-то не було часу розібратися досконально в тому, що у мене не виходить, хтось і сам цього не знає. Від останніх отримала завдання: як розберуся, написати про це пост. Що і роблю, попутно вставляючи логотип на цей блог.
Отже, завдання складається з трьох елементарних дій:
- Завантажити картинку з логотипом на хостинг.
- Поставити цю картинку в шапку сайту і зробити її клікабельно.
- Розташувати логотип так, як потрібно.
І - найголовніший пункт: зробити все це так, щоб не порушити працездатності сайту!
Виконуємо завдання, встановлюємо логотип:
- Завантажити картинку логотипу на хостінг.Еслі не знаєте, як це зробити, почитайте мою статтю: « Як завантажити файл на хостинг ». Зараз Ви будете завантажувати файл не в корінь сайту, а в папку images Вашої теми. Для цього на хостингу Вам потрібно послідовно відкрити папки:
public_html → wp-content → themes → папка з Вашої темою → imagesОб'ясню, як це зробити в файловому менеджері Filezilla.
Відкриваєте папки подвійним клацанням в вікні «Віддалений сайт». При цьому в адресному рядку Ви відразу бачите, в якій папці в даний момент знаходитеся.
У лівій частині вікна Filezilla під заголовком «Локальний сайт» показується вміст Вашого комп'ютера. Знайдіть папку, в якій знаходиться файл логотипу.
Тепер у Вас один навпроти одного знаходяться вміст папок: зліва - звідки Ви будете завантажувати логотип, праворуч - куди завантажувати.
Подвійним клацанням клацаєте на назві файлу зліва, через кілька секунд файл з'явиться в папці справа (якщо не з'явився, поверніться на один рівень вгору і знову відкрийте цю ж папку).
- Поставити логотип в шапку сайту і зробити його клікабельним.Чтоби це зробити, нам потрібно написати код, який відповідає за вставку картинки на сайт і вставити його в файл, який відповідає за зображення шапки сайта.Код цей я наводжу нижче:
<A href = "Url Вашого сайту"> <img title = "logo" alt = "logo" src = "/ адреса папки, в якій знаходиться картинка / logo.png" /> </ a>
тут:
Url Вашого сайту - адреса Вашого сайту,
адреса папки, в якій знаходиться картинка - його Ви можете скопіювати в адресному рядку під заголовком «Віддалений сайт» (див. скріншот),
logo.png - назва файлу з логотипом (розширення .png і прозорий фон картинки - обов'язкові для логотипу).За шапку сайту відповідає файл header.php, туди і будемо вставляти цей код.
Пам'ятайте !!! Завжди, перш ніж щось міняти в файлах сайту, робіть їх копію до себе на комп'ютер, інакше можете так змінити, що сайт взагалі не працюватиме.
Створіть на комп'ютері тимчасову еталонну папку і туди скачайте header.php.
Створіть ще одну папку - робочу, в яку будете зберігати змінені файли.
Редагувати файли можна по-різному. Правильніше за все: завантажити файл на комп'ютер (в робочу папку), відредагувати його в якому-небудь текстовому редакторі (наприклад, Notepad ++ ), Зберегти в ту ж робочу папку і звідти знову закачати на хостинг. - Завантажити файл з хостингу
У Filezilla тепер треба зробити зворотну операцію: завантажити файл з хостингу. Файл header.php знаходиться в папці з Вашої темою, цю папку Вам і треба відкрити в правій частині.
Оскільки після попереднього кроку Ви перебуваєте в папці images, Вам треба повернутися на один крок вгору. Для цього подвійним клацанням клікніть на зображенні папки з двома точками поруч (вона стоїть у списку першої) в нижній правій частині.
Зліва відкриваєте еталонну папку.
Знаходьте справа файл header.php і подвійним клацанням копіюєте його в еталонну папку, а потім те ж саме проробляти, розкривши зліва робочу папку.
Тепер працюєте в робочій папці на комп'ютері. Виділяєте файл, натискаєте праву кнопку миші і в контекстному меню вибираєте «Edit with Notepad ++» (або відкриваєте файл в іншому текстовому редакторі) .Вставлять наш код потрібно після тега <body. А ось куди вставити - в цьому і полягала моя проблема. Файл header.php на сайті замовника мав дуже складну структуру з безліччю розгалужень. А, зізнаюся, в знанні php я - якщо не повний нуль, то пішла від нього дуже недалеко. Я вставила код логотипу в найбільш логічний місце, з моєї точки зору: поруч з назвою сайту. Зберегла, закачала на сервер, оновила сайт - нічого! Дивлюся вихідний код сторінки - вставленого коду немає! Повертаюся, перевіряю код, помилки не бачу. Щось міняю, повторюю весь процес - безрезультатно! Переношу код в інше місце - ніякого ефекту! Провозившись досить довго, звертаюся в чат групи Дмитра Матора , У якого я рік тому почала навчання фрілансерства, а з співгрупниками ми до сих пір допомагаємо один одному. У процесі листування продовжувала переставляти код, тому що в правильності його я не сумнівалася. І ось, після чергової перестановки, логотип на сайті з'явився. Але ... він був неклікабелен. Мало того, неклікабельним було і назва сайту. Причому, оскільки сайт не мій, я не звернула уваги, чи було воно клікабельним ізначально.Напомінаю, що я зараз, описуючи цю задачу, вставляю логотип на свій блог. Так ось, на моєму блозі логотип з'явився відразу. І, головне, він - клікабелен, назва блогу - теж.А вставила я код майже відразу після після тега <body>, а точніше трохи нижче, в блоці header (відразу слідом за тегом <div id = "header">, який відкриває цей блок).
На сайті замовника, в кінці кінців, вставила код так само - ближче до тегу <body>, ще до всіх операторів php і їх розгалужень. І все вийшло! І логотип, і назву сайту - все клікабельно, як і годиться.
Але без позиціонування логотип може встати не так, як Вам би хотілося.
- спозиционировать логотип
Я додала такі стилі в код після title = "logo" перед> </a>:style = "width: 70px; height: 70px; margin: 10px; float: left;"
тут:
width - ширина картинки
height - висота картинки (не обов'язково повинні збігатися)
margin - відступи картинки зверху і зліва від країв шапки
float - для того, щоб назва «не тікав» нижче картинки.
Ось ми і виконали завдання. Як встав логотип на моєму блозі, Ви можете подивитися і відразу ж перевірити кликабельность і логотипу, і назви сайту. Сподіваюся, Ви знаєте, як це перевірити, не натискаючи на картинку або текст. Зазвичай при наведенні на клікабельним об'єкт покажчик миші перетворюється в руку, а внизу зліва показується адреса, куди веде посилання. В даному випадку буде видно адресу сайту.
PS Якщо встановлений логотип Вам не сподобався або разонравится потім, поміняти його можна так:
- Створити файл логотипу з тим же ім'ям, що і на хостингу.
- Завантажити його на хостинг в ту ж папку images. Підтвердити, що Ви хочете замінити файл.
- Оновити сайт. Іноді новий логотип з'явиться на сайті не відразу. Можливо, доведеться чистити кеш браузера.
Сьогодні ми з Вами вирішували завдання, як встановити логотип на WordPress-сайт, і благополучно її вирішили.
А на завершення статті і наших праць розважальний відеоролик: