Наша совместная команда Banwar.org

Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

Як встановити логотип на Wordpress-сайт

  1. Виконуємо завдання, встановлюємо логотип:

Останнє оновлення: 25/10/14

Останнє оновлення: 25/10/14

Днями витратила кілька годин на вирішення такого завдання. І найсмішніше те, що завдання-то елементарна, і я це вже робила раніше.

Логотип вставляла на сайт замовника, і щось заклинило! Довелося навіть звернутися за допомогою до друзів. Однак, у кого-то не було часу розібратися досконально в тому, що у мене не виходить, хтось і сам цього не знає. Від останніх отримала завдання: як розберуся, написати про це пост. Що і роблю, попутно вставляючи логотип на цей блог.

Отже, завдання складається з трьох елементарних дій:

  1. Завантажити картинку з логотипом на хостинг.
  2. Поставити цю картинку в шапку сайту і зробити її клікабельно.
  3. Розташувати логотип так, як потрібно.

І - найголовніший пункт: зробити все це так, щоб не порушити працездатності сайту!

Виконуємо завдання, встановлюємо логотип:

  1. Завантажити картинку логотипу на хостінг.Еслі не знаєте, як це зробити, почитайте мою статтю: « Як завантажити файл на хостинг ». Зараз Ви будете завантажувати файл не в корінь сайту, а в папку images Вашої теми. Для цього на хостингу Вам потрібно послідовно відкрити папки:
    public_html → wp-content → themes → папка з Вашої темою → imagesОб'ясню, як це зробити в файловому менеджері Filezilla.

    Відкриваєте папки подвійним клацанням в вікні «Віддалений сайт». При цьому в адресному рядку Ви відразу бачите, в якій папці в даний момент знаходитеся.

    У лівій частині вікна Filezilla під заголовком «Локальний сайт» показується вміст Вашого комп'ютера. Знайдіть папку, в якій знаходиться файл логотипу.

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

    Подвійним клацанням клацаєте на назві файлу зліва, через кілька секунд файл з'явиться в папці справа (якщо не з'явився, поверніться на один рівень вгору і знову відкрийте цю ж папку).

  2. Поставити логотип в шапку сайту і зробити його клікабельним.Чтоби це зробити, нам потрібно написати код, який відповідає за вставку картинки на сайт і вставити його в файл, який відповідає за зображення шапки сайта.Код цей я наводжу нижче:

    <A href = "Url Вашого сайту"> <img title = "logo" alt = "logo" src = "/ адреса папки, в якій знаходиться картинка / logo.png" /> </ a>

    тут:
    Url Вашого сайту - адреса Вашого сайту,
    адреса папки, в якій знаходиться картинка - його Ви можете скопіювати в адресному рядку під заголовком «Віддалений сайт» (див. скріншот),
    logo.png - назва файлу з логотипом (розширення .png і прозорий фон картинки - обов'язкові для логотипу).

    За шапку сайту відповідає файл header.php, туди і будемо вставляти цей код.


    Пам'ятайте !!! Завжди, перш ніж щось міняти в файлах сайту, робіть їх копію до себе на комп'ютер, інакше можете так змінити, що сайт взагалі не працюватиме.
    Створіть на комп'ютері тимчасову еталонну папку і туди скачайте header.php.
    Створіть ще одну папку - робочу, в яку будете зберігати змінені файли.
    Редагувати файли можна по-різному. Правильніше за все: завантажити файл на комп'ютер (в робочу папку), відредагувати його в якому-небудь текстовому редакторі (наприклад, Notepad ++ ), Зберегти в ту ж робочу папку і звідти знову закачати на хостинг.

  3. Завантажити файл з хостингу
    У Filezilla тепер треба зробити зворотну операцію: завантажити файл з хостингу. Файл header.php знаходиться в папці з Вашої темою, цю папку Вам і треба відкрити в правій частині.
    Оскільки після попереднього кроку Ви перебуваєте в папці images, Вам треба повернутися на один крок вгору. Для цього подвійним клацанням клікніть на зображенні папки з двома точками поруч (вона стоїть у списку першої) в нижній правій частині.
    Зліва відкриваєте еталонну папку.
    Знаходьте справа файл header.php і подвійним клацанням копіюєте його в еталонну папку, а потім те ж саме проробляти, розкривши зліва робочу папку.
    Тепер працюєте в робочій папці на комп'ютері. Виділяєте файл, натискаєте праву кнопку миші і в контекстному меню вибираєте «Edit with Notepad ++» (або відкриваєте файл в іншому текстовому редакторі) .Вставлять наш код потрібно після тега <body. А ось куди вставити - в цьому і полягала моя проблема. Файл header.php на сайті замовника мав дуже складну структуру з безліччю розгалужень. А, зізнаюся, в знанні php я - якщо не повний нуль, то пішла від нього дуже недалеко. Я вставила код логотипу в найбільш логічний місце, з моєї точки зору: поруч з назвою сайту. Зберегла, закачала на сервер, оновила сайт - нічого! Дивлюся вихідний код сторінки - вставленого коду немає! Повертаюся, перевіряю код, помилки не бачу. Щось міняю, повторюю весь процес - безрезультатно! Переношу код в інше місце - ніякого ефекту! Провозившись досить довго, звертаюся в чат групи Дмитра Матора , У якого я рік тому почала навчання фрілансерства, а з співгрупниками ми до сих пір допомагаємо один одному. У процесі листування продовжувала переставляти код, тому що в правильності його я не сумнівалася. І ось, після чергової перестановки, логотип на сайті з'явився. Але ... він був неклікабелен. Мало того, неклікабельним було і назва сайту. Причому, оскільки сайт не мій, я не звернула уваги, чи було воно клікабельним ізначально.Напомінаю, що я зараз, описуючи цю задачу, вставляю логотип на свій блог. Так ось, на моєму блозі логотип з'явився відразу. І, головне, він - клікабелен, назва блогу - теж.

    А вставила я код майже відразу після після тега <body>, а точніше трохи нижче, в блоці header (відразу слідом за тегом <div id = "header">, який відкриває цей блок).

    На сайті замовника, в кінці кінців, вставила код так само - ближче до тегу <body>, ще до всіх операторів php і їх розгалужень. І все вийшло! І логотип, і назву сайту - все клікабельно, як і годиться.

    Але без позиціонування логотип може встати не так, як Вам би хотілося.

  4. спозиционировать логотип
    Я додала такі стилі в код після title = "logo" перед> </a>:

    style = "width: 70px; height: 70px; margin: 10px; float: left;"

    тут:
    width - ширина картинки
    height - висота картинки (не обов'язково повинні збігатися)
    margin - відступи картинки зверху і зліва від країв шапки
    float - для того, щоб назва «не тікав» нижче картинки.

Ось ми і виконали завдання. Як встав логотип на моєму блозі, Ви можете подивитися і відразу ж перевірити кликабельность і логотипу, і назви сайту. Сподіваюся, Ви знаєте, як це перевірити, не натискаючи на картинку або текст. Зазвичай при наведенні на клікабельним об'єкт покажчик миші перетворюється в руку, а внизу зліва показується адреса, куди веде посилання. В даному випадку буде видно адресу сайту.

PS Якщо встановлений логотип Вам не сподобався або разонравится потім, поміняти його можна так:

  • Створити файл логотипу з тим же ім'ям, що і на хостингу.
  • Завантажити його на хостинг в ту ж папку images. Підтвердити, що Ви хочете замінити файл.
  • Оновити сайт. Іноді новий логотип з'явиться на сайті не відразу. Можливо, доведеться чистити кеш браузера.

Сьогодні ми з Вами вирішували завдання, як встановити логотип на WordPress-сайт, і благополучно її вирішили.

А на завершення статті і наших праць розважальний відеоролик:


Це теж цікаво:

Новости

Banwar.org
Наша совместная команда Banwar.org. Сайт казино "Пари Матч" теперь доступен для всех желающих, жаждущих волнения и азартных приключений.