Как установить логотип на WordPress – сайт

Сегодня мы узнаем, как установить логотип на WordPress – сайт

Установка логотипа

На днях потратила несколько часов на решение такой задачи. И самое смешное то, что задача-то элементарная, и я это уже делала раньше.

Логотип вставляла на сайт заказчика, и что-то заклинило! Пришлось даже обратиться за помощью к друзьям. Однако, у кого-то не было времени разобраться досконально в том, что у меня не получается, кто-то и сам этого не знает. От последних получила задание: как разберусь, написать об этом пост. Что и делаю, попутно вставляя логотип на этот блог.

Итак, задача состоит из трех элементарных действий:

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

И – самый главный пункт: сделать все это так, чтобы не нарушить работоспособности сайта!

Выполняем задачу, устанавливаем логотип:

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

    Загрузка логотипа на хостинг

    Открываете папки двойным щелчком в окне «Удаленный сайт». При этом в адресной строке Вы сразу видите, в какой папке в данный момент находитесь.

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

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

    Двойным щелчком щелкаете на названии файла слева, через несколько секунд файл появится в папке справа (если не появился, вернитесь на один уровень вверх и снова откройте эту же папку).

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

    Здесь:
    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>:

    Здесь:
    width – ширина картинки
    height – высота картинки (не обязательно должны совпадать)
    margin – отступы картинки сверху и слева от краев шапки
    float – для того, чтобы название «не убегало» ниже картинки.

 

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

P.S. Если установленный логотип Вам не понравился или разонравится потом, поменять его можно так:

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

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

TEXT.RU - 100.00%

А в завершение статьи и наших трудов развлекательный видеоролик:


Комментарии

  • Анна. пишет:

    Нина !!! Спасибо !!! Все очень понятно )))

  • Анна. пишет:

    Нина , спасибо !!! Все четко и понятно )

    • Нина пишет:

      Анна, добро пожаловать на мой блог! Надеюсь, что это посещение оказалось полезным и будет не последним.

  • Vitali пишет:

    Нина спасибо огромное за статью! Все очень понятно. Котики тоже порадовали :-)

  • Нинусь, а скажи мне зачем чтобы логотип был кликабельным? Висит себе и висит.

    • Нина пишет:

      Бывает и так, что просто висит. Но логотип – не просто картинка. По нему чаще кликают, чтобы перейти на главную страницу, чем по названию блога. А еще и в менюшке не у всех есть главная.
      Ну и по правилам юзабилити (“Правилами хорошего тона”) предусмотрено, что логотип на внутренних страницах должен быть кликабельным: лишняя возможность перейти на главную. На главной он может быть и некликабельным. Но я сделала кликабельным везде, да и все.

  • Сергей пишет:

    Спасибо за познавательную статью. Все описано очень понятно, остается только делать. Как то не задумывался о необходимости логотипа на блоге. Теперь же решил придумать и установить.

  • Olga пишет:

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

  • Спасибо за подробную и полезную информацию. Непременно поставлю у себя на сайте. У меня с этим были проблемы. Сделала как смогла, а теперь переделаю по Вашему уроку. Удачи Вам!

  • mardan пишет:

    у Вас всегда доступные и актуальные статьи! Улучшайте свой блог и рассказывайте нам, как это делается, чтобы мы применяли на практике)))

  • sem пишет:

    Спасибо за подробную и полезную информацию. подскажите пожалуйста a что нужно дописать чтобы лого было не справа а слева.

  • sem пишет:

    и какой тег нужно написать в футере чтобы это (Copyright ©. All rights reserved. )встало по середине ато надпись всегда на правой стороне.

  • sem пишет:

    Премного благодарен, спасибо за вашу помощь,
    кратко и содержательно все объяснили.

  • Эла пишет:

    Здравствуйте, Нина!
    Очень понравилось у вас, особенно видео после уроков ))
    Вы могли бы подсказать, как поменять лого из админ. панели.
    Самое смешное, я уже это сделала через Custom Logo, а сейчас не получается…
    Благодарю вас,
    С Наступающим!

  • Elena пишет:

    Нина, спасибо! Давно хотела сделать логотип на сайт.
    Вот с ссылками битыми доразбираюсь, и начну осваивать эту твою статью

  • У меня к счастью во всех шаблонах логотип предусмотрен. Боюсь я кодов.

  • Галина пишет:

    С таким подробным изложением можно без труда установить логотип на блог. Спасибо, Нина.

  • Ylga пишет:

    Нина, все настолько разжевано, что поймет любой новичок. В некоторых шаблонах логотип уже предусмотрен, но не во всех, а по Вашей схеме все можно сделать самому.

  • Нина, подскажите как сделать шапку кликабельной (на Главную)

    Вот код:

    <img src="/images/photo3.jpg” width=”960″ height=”197″ border=”0″ alt=”” />

    Что то никак не получается

  • <img src="/images/photo3.jpg” width=”960″ height=”197″ border=”0″ alt=”” />

  • код не вставляется

    • Виктория, вот здесь: http://nwa-uspech.blogspot.com/2012/08/blogger-8.html последним пунктом написано, как сделать картинку ссылкой. Хоть там и про Blogger, но в wordpress делается так же. Если что-то будет непонятно, стучитесь ко мне в скайп

      • Нина, спасибо за ответ.

        Статья не помогла, но натолкнула на нужную мысль! Так что все сделано!

        Если честно, меня порой поражает как что-то элементарное сделать не можешь :-))
        Ну знаешь же все, столько опыта уже, а бывает как заклинет и все тут! ))

        У меня к Вам просьба, Вы пишите о создании сайта, дизайне… Я за последние несколько дней в корне изменила дизайн блога. Зайдите ко мне, какое Ваше мнение как стороннего наблюдателя? Что бы Вы добавили/убрали? Блог в разработке еще… Просто интересно мнение.

        • Хорошо и то, что натолкнула…
          Зашла на Ваш блог, он мне понравился. Давать советы – дело неблагодарное: у каждого свой стиль, своё видение того, как блог должен выглядеть. У Вас есть свой стиль, двигайтесь и дальше в этом же направлении. Успехов!

  • Спасибо Нина! вообще я ОЧЕНЬ хочу классный рисованный дизайн, но стоит он как самолет! :-))
    Планы есть, к целям ползем, идет, бежим как можем! Так что все впереди.

    Успехов Вам!!!

  • Интересно было прочитать о том, как можно сделать логотип для сайта. А картинку можно найти самому в интернете? только надо разобраться с кодами, как их загружать на хостинг.
    Да, Нина, вы так во всех технических моментах хорошо разбираетесь, просто диву даешься. :razz:

    • Оля, конечно логотип можно найти в интернете, а можно сделать в каком-нибудь сервисе. Так что это не проблема. А как вставить… Вот я описала свой случай, а все шаблоны разные, так что кому-то этот способ может и не подойти. Так что, если будет нужна помощь, пишите

  • Искала в Яндексе информацию, как вставить логотип на сайт WP.. и меня вынесло сюда.. Мир тесен.

  • Евгения пишет:

    Интересная и очень нужная тема: как установить логотип на WordPress – сайт.

  • Игорь пишет:

    Не получается вставить логотип, всё делал как вы описали. :cry:

  • Игорь пишет:

    Вот строка а в шапке пусто, то есть как и было

  • Игорь пишет:

    вот скрин http:// screeny.ru/ 54c4ec684dcb4b2653050ed4

  • Игорь пишет:

    спасибо за помощь!

  • Вячеслав пишет:

    Нина, здравствуйте!

    Спасибо за полезную статью по актуальной для меня сейчас теме. Я сейчас занимаюсь небольшим обновлением дизайна у себя в теме. По Вашим советам установил логотип. Он появился в шапке, но не хочет выравниваться слева от названия и описания блога. Хотя тег float:left прописан как и у Вас :(

    Сейчас логотип просто встал сверху слева над названием. И куда я его не таскал – не хочет становиться в одну линию с заголовком…

    Помогите, пожалуйста, его туда допилить :)

    Пока оставил на блоге его сверху, до Вашего визита :)

  • Вячеслав пишет:

    Извините за беспокойство! Но проблему я решил – она была в атрибуте clear: both, который был прописан для заголовка блога. Заменил на clear: none; и все стало на место!

  • Сергей пишет:

    :sad: Хэлп, сделал все как у Вас, но вместо лого видно орнамент и слово всрередине ЛОГО. Просто ужас, незнаю что делать:((( ХЭЛП!!!!

    • Сергей, проверьте правильность пути к Вашему логотипу. Если показывается слово Лого, значит, он встал на место, но картинка не найдена по тому пути, что прописан

  • Сергей пишет:

    Здравствуйте, у меня логотип после смены шапки перестал позицианироваться, я добавил код смещения, но он только прилип к верху и все.
    Буду очень благодарен за помощь.

    • Сергей, невозможно Вам помочь, не видя кода. Почитайте комментарии, у Вячеслава была похожая проблема, возможно, его решение поможет и Вам. Если нет, тогда мне нужен код, чтобы посмотреть, что нужно сделать.

  • Сергей пишет:

    Я его пытался вставить, но он почему то не отражается? Спасибо за ответ, но уже нашел ответ на одном из сайтов, немного видоизмененнный ваш код. И все отлично встало, если будет интерес то выложу. Только объясните как вставить код.

    • Сергей, я рада, что у Вас все получилось. Думаю, что нет смысла выкладывать здесь код, потому что для разных шаблонов все равно что-то будет отличаться. Я эту статью писала, когда устанавливала логотип на старый шаблон, а когда его поменяла, то и устанавливала уже немного по-другому. А на других сайтах вообще ничего похожего нет. Так что, сколько шаблонов, столько и решений, или почти так.

  • отличное объяснение!

  • Андрей пишет:

    Здравствуйте.
    Подскажите пожалуйста, как мне сделать сайт объявлений на вордпресс. Нужно чтобы можно было настроить поддомены для регионов. (чтобы присвоить в яндексе регион). Вот нашел одну доску объявлений moskva. biglus. com с регионами, подскажите какой шаблон или плагин тут используется, нужно именно, чтобы поддомены работали как в указанном сайте. Я находил плагин для создания поддоменов, но там только для категорий, тоесть из категорий создаются поддомены, а мне так не нужно.

  • Хамит пишет:

    Нина здравствуйте! Я тоже хочу научиться вставлять логотип и фавиконку в сайт.Нашел вашу статью, очень хрошо написано. Но у меня такой вот такой вопрос Я нарисовал в Paintе логотип и не знаю как сделать его прозрачным и расширение и расширение “png” как сделать!

  • Хамит пишет:

    Нина пишу повторно первый вопрос отпал, научился как делать прозрачным логотип.Теперь стоит вопрос как убрать тот файл который я закачал (не прозрачный и без расширения ” png”. Второй вопрос при загружении файла обязательно нужно сначала как пишете проделать вот эту операцию “Загрузить картинку логотипа на хостинг.Если не знаете, как это сделать, почитайте мою статью: «Как загрузить файл на хостинг” или просто использовать FailZilla проделывая те процедуры последовательно которые вы описываете

  • Хамит пишет:

    Нина первый вопрос решается. Остался вот это вопрос -Второй вопрос: при загружении файла обязательно нужно сначала как пишете проделать вот эту операцию “Загрузить картинку логотипа на хостинг.Если не знаете, как это сделать, почитайте мою статью: «Как загрузить файл на хостинг” или просто использовать FailZilla проделывая те процедуры последовательно которые вы описываете

    • Хамит, на хостинг картинку загрузить нужно обязательно, а каким образом Вы это сделаете, уже не столь важно. Можно использовать FailZilla, можно файловый менеджер самого хостинга. Как Вам больше нравится, так и делайте

  • Хамит пишет:

    Нина спасибо большое! Я не очень то надеялся что ответишь Вообще конечно пока как в лесу

  • Хамит пишет:

    Нина здравствуй, так и у меня с новым адресом ничего не выходит. Прописал в коде (файловый менеджер
    wp config php) свой домен т.е URL сайта как мне рекомендовали из службы поддержки, но дает почему то ошибку соединения. Я вообщем решил удалить сайт и движок сайта Вордпресс и заново установить. Если знаешь как это правильно сделать сообщи пожалуйста

    • Хамит, а зачем все удалять-то? Надо разобраться, что не получается. В wp-config.php вообще нигде не пишется URL сайта или домен. Там пишется имя базы данных и пароль от нее. Эти данные Вы получили при установке вордпресса. Если не знаете их, спросите у хостера, где Вы можете их посмотреть. Я не могу в этом помочь, так как на разных хостингах все по-разному.
      Вот в этой части файла wp-config.php Вам нужно поставить свои данные:
      // ** Параметры MySQL: Эту информацию можно получить у вашего хостинг-провайдера ** //
      /** Имя базы данных для WordPress */
      define(‘DB_NAME’, ‘здесь пишете имя базы данных’);

      /** Имя пользователя MySQL */
      define(‘DB_USER’, ‘здесь пишете имя пользователя MySQL’);

      /** Пароль к базе данных MySQL */
      define(‘DB_PASSWORD’, ‘здесь пишете пароль к базе данных’);

      Сделаете это и должно заработать.

  • Хамит пишет:

    Смотри Нина вот что пишет мне служба поддержки хостинга ” На текущий момент доменное имя ipoteka-credit15.ru работоспособно, по адресу http://ipoteka-credit15.ru/ отображается сайт (Ипотека). Пожалуйста, проверьте, обновив страницу сочетанием клавиш Ctrl+F5. Это первый ответ, а ниже второй ответ.

    На данный момент Ваш сайт отображается некорректно в связи с особенностью работы CMS WordPress.
    Для решения проблемы с неверной привязкой WordPress к домену Вы можете добавить следующие строки в файл wp-config.php сайта “worpress_2″ перед строкой define(‘DB_NAME’, ‘…’): define(‘WP_HOME’, ‘http://_______’); define(‘WP_SITEURL’, ‘http://________’);”. Я все это проделал но выходит “Ошибка в соединении с установкой базы данных” .Я в поддержку отправил скрин того что сделал по рекомендации, они мне написали что вопрос передан в тех отдел. Вообще я хотел свой этот сайт удалить, там у меня всего одна страница, а потом заново сделать это будет дополнительная тренировка

    • Вообще, конечно, для меня это что-то новенькое. Никогда в жизни не добавляла таких строк в конфиг.
      Удалить сайт проще простого: в панели управления хостинга заходите в управление сайтами и удаляете ваш сайт. Потом идете в файловый менеджер, находите папку, соответствующую сайту, и ее тоже удаляете. Хотя папку удалять не обязательно, если Вам оттуда может что-то понадобиться, можно скопировать в новую, когда сделаете новый сайт. Если Вы хотите начать вообще с нуля, тогда удаляйте и базу данных, зайдя в MySQL

  • Хамит пишет:

    Нина здравствуй! С новым годом! У меня еще возник вопрос. Вы как т.е. какими способом добиваетесь прозрачности фона рисунка. Я попытался в Piante как рекомендовано в одном из сайтов стереть ластиком не нужный фон рисунка, но одних версиях как то прозрачность получается в других нет. Потом очень тяжело и неудобно стирать ластиком. Нашел одну программу, но там тоже не все не нужные участки можно стереть Если не секрет прошу поделиться своим опытом.

    • Хамит, чтобы ответить на этот вопрос, нужно понимать поточнее, что именно Вы хотите сделать. Я со всеми рисунками работаю в фотошопе. Если фон однотонный, я выделяю его инструментом “волшебная палочка”, а потом выделенное удаляю. В других случаях существуют разные приемы, в комментарии не опишешь. Нужно точнее знать задачу, чтобы описать ее решение

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

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">