Сегодня мы узнаем, как установить логотип на WordPress – сайт
На днях потратила несколько часов на решение такой задачи. И самое смешное то, что задача-то элементарная, и я это уже делала раньше.
Логотип вставляла на сайт заказчика, и что-то заклинило! Пришлось даже обратиться за помощью к друзьям. Однако, у кого-то не было времени разобраться досконально в том, что у меня не получается, кто-то и сам этого не знает. От последних получила задание: как разберусь, написать об этом пост. Что и делаю, попутно вставляя логотип на этот блог.
Итак, задача состоит из трех элементарных действий:
- Загрузить картинку с логотипом на хостинг.
- Поставить эту картинку в шапку сайта и сделать ее кликабельной.
- Расположить логотип так, как нужно.
И – самый главный пункт: сделать все это так, чтобы не нарушить работоспособности сайта!
Выполняем задачу, устанавливаем логотип:
- Загрузить картинку логотипа на хостинг.Если не знаете, как это сделать, почитайте мою статью: «Как загрузить файл на хостинг». Сейчас Вы будете загружать файл не в корень сайта, а в папку images Вашей темы. Для этого на хостинге Вам нужно последовательно открыть папки:
public_html → wp-content → themes → папка с Вашей темой→ imagesОбъясню, как это сделать в файловом менеджере Filezilla.
Открываете папки двойным щелчком в окне «Удаленный сайт». При этом в адресной строке Вы сразу видите, в какой папке в данный момент находитесь.
В левой части окна Filezilla под заголовком «Локальный сайт» показывается содержимое Вашего компьютера. Найдите папку, в которой находится файл логотипа.
Теперь у Вас друг напротив друга находятся содержимое папок: слева – откуда Вы будете загружать логотип, справа – куда загружать.
Двойным щелчком щелкаете на названии файла слева, через несколько секунд файл появится в папке справа (если не появился, вернитесь на один уровень вверх и снова откройте эту же папку).
- Поставить логотип в шапку сайта и сделать его кликабельным.Чтобы это сделать, нам нужно написать код, отвечающий за вставку картинки на сайт и вставить его в файл, отвечающий за изображение шапки сайта.Код этот я привожу ниже:
1<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>:1style="width:70px; height:70px; margin:10px; float:left;"Здесь:
width – ширина картинки
height – высота картинки (не обязательно должны совпадать)
margin – отступы картинки сверху и слева от краев шапки
float – для того, чтобы название «не убегало» ниже картинки.
Вот мы и выполнили задачу. Как встал логотип на моем блоге, Вы можете посмотреть и сразу же проверить кликабельность и логотипа, и названия сайта. Надеюсь, Вы знаете, как это проверить, не нажимая на картинку или текст. Обычно при наведении на кликабельный объект указатель мыши превращается в руку, а внизу слева показывается адрес, куда ведет ссылка. В данном случае должен показываться адрес сайта.
P.S. Если установленный логотип Вам не понравился или разонравится потом, поменять его можно так:
- Создать файл логотипа с тем же именем, что и на хостинге.
- Загрузить его на хостинг в ту же папку images. Подтвердить, что Вы хотите заменить файл.
- Обновить сайт. Иногда новый логотип появится на сайте не сразу. Возможно, придется чистить кэш браузера.
Сегодня мы с Вами решали задачу, как установить логотип на WordPress-сайт, и благополучно ее решили.
А в завершение статьи и наших трудов развлекательный видеоролик:
Комментарии
Нина !!! Спасибо !!! Все очень понятно )))
Нина , спасибо !!! Все четко и понятно )
Анна, добро пожаловать на мой блог! Надеюсь, что это посещение оказалось полезным и будет не последним.
Нина спасибо огромное за статью! Все очень понятно. Котики тоже порадовали
Виталий, я рада, что порадовала Вас: и статьей, и котиками
Нинусь, а скажи мне зачем чтобы логотип был кликабельным? Висит себе и висит.
Бывает и так, что просто висит. Но логотип – не просто картинка. По нему чаще кликают, чтобы перейти на главную страницу, чем по названию блога. А еще и в менюшке не у всех есть главная.
Ну и по правилам юзабилити (“Правилами хорошего тона”) предусмотрено, что логотип на внутренних страницах должен быть кликабельным: лишняя возможность перейти на главную. На главной он может быть и некликабельным. Но я сделала кликабельным везде, да и все.
Спасибо за познавательную статью. Все описано очень понятно, остается только делать. Как то не задумывался о необходимости логотипа на блоге. Теперь же решил придумать и установить.
Желаю успеха, Сергей! Думаю, трудностей не возникнет
Давно собираюсь установить себе логотип в шапке сайта. Теперь, следуя таким подробным рекомендациям, обязательно его установлю. Спасибо.
Конечно, Ольга, и не надо долго собираться
Спасибо за подробную и полезную информацию. Непременно поставлю у себя на сайте. У меня с этим были проблемы. Сделала как смогла, а теперь переделаю по Вашему уроку. Удачи Вам!
И Вам удачи, Тамара! Надеюсь, все получится и проблем не возникнет. А если что, пишите, вместе разберемся.
у Вас всегда доступные и актуальные статьи! Улучшайте свой блог и рассказывайте нам, как это делается, чтобы мы применяли на практике)))
Спасибо за отзыв! Я так и стараюсь делать: улучшать свой блог и рассказывать об этом своим читателям
Спасибо за подробную и полезную информацию. подскажите пожалуйста a что нужно дописать чтобы лого было не справа а слева.
Надо вместо float:left написать float:right
Но вообще-то принято, чтобы логотип был слева, в крайнем случае по центру
и какой тег нужно написать в футере чтобы это (Copyright ©. All rights reserved. )встало по середине ато надпись всегда на правой стороне.
Всю эту запись в футере заключите в тег center. Но посмотрите сначала, не находится ли она у Вас в правом виджете футера
Премного благодарен, спасибо за вашу помощь,
кратко и содержательно все объяснили.
Пожалуйста. Приходите еще
Здравствуйте, Нина!
Очень понравилось у вас, особенно видео после уроков ))
Вы могли бы подсказать, как поменять лого из админ. панели.
Самое смешное, я уже это сделала через Custom Logo, а сейчас не получается…
Благодарю вас,
С Наступающим!
Эла, смотрите Внешний вид (или Дизайн) – Настройки или, скорее, Опции, это должно быть там.
Нина, спасибо! Давно хотела сделать логотип на сайт.
Вот с ссылками битыми доразбираюсь, и начну осваивать эту твою статью
Да, разобраться с битыми ссылками – это тоже важно!
У меня к счастью во всех шаблонах логотип предусмотрен. Боюсь я кодов.
Во многих темах логотип предусмотрен. Но встречаются всякие случаи, когда логотип надо заменить, а простой сменой картинки это сделать не удается
С таким подробным изложением можно без труда установить логотип на блог. Спасибо, Нина.
Нина, все настолько разжевано, что поймет любой новичок. В некоторых шаблонах логотип уже предусмотрен, но не во всех, а по Вашей схеме все можно сделать самому.
Нина, подскажите как сделать шапку кликабельной (на Главную)
Вот код:
<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 делается так же. Если что-то будет непонятно, стучитесь ко мне в скайп
Нина, спасибо за ответ.
Статья не помогла, но натолкнула на нужную мысль! Так что все сделано!
Если честно, меня порой поражает как что-то элементарное сделать не можешь :-))
Ну знаешь же все, столько опыта уже, а бывает как заклинет и все тут! ))
У меня к Вам просьба, Вы пишите о создании сайта, дизайне… Я за последние несколько дней в корне изменила дизайн блога. Зайдите ко мне, какое Ваше мнение как стороннего наблюдателя? Что бы Вы добавили/убрали? Блог в разработке еще… Просто интересно мнение.
Хорошо и то, что натолкнула…
Зашла на Ваш блог, он мне понравился. Давать советы – дело неблагодарное: у каждого свой стиль, своё видение того, как блог должен выглядеть. У Вас есть свой стиль, двигайтесь и дальше в этом же направлении. Успехов!
Спасибо Нина! вообще я ОЧЕНЬ хочу классный рисованный дизайн, но стоит он как самолет! :-))
Планы есть, к целям ползем, идет, бежим как можем! Так что все впереди.
Успехов Вам!!!
Интересно было прочитать о том, как можно сделать логотип для сайта. А картинку можно найти самому в интернете? только надо разобраться с кодами, как их загружать на хостинг.
Да, Нина, вы так во всех технических моментах хорошо разбираетесь, просто диву даешься.
Оля, конечно логотип можно найти в интернете, а можно сделать в каком-нибудь сервисе. Так что это не проблема. А как вставить… Вот я описала свой случай, а все шаблоны разные, так что кому-то этот способ может и не подойти. Так что, если будет нужна помощь, пишите
Искала в Яндексе информацию, как вставить логотип на сайт WP.. и меня вынесло сюда.. Мир тесен.
Это радует
Если будут вопросы, обращайтесь
Это говорит о том, что Ваша статья .. в ТОПе..
Потому и говорю, что это радует
Интересная и очень нужная тема: как установить логотип на WordPress – сайт.
Не получается вставить логотип, всё делал как вы описали.
Игорь, напишите подробнее, что именно не получается.
Вот строка а в шапке пусто, то есть как и было
Строка Ваша потерялась
вот скрин http:// screeny.ru/ 54c4ec684dcb4b2653050ed4
спасибо за помощь!
Нина, здравствуйте!
Спасибо за полезную статью по актуальной для меня сейчас теме. Я сейчас занимаюсь небольшим обновлением дизайна у себя в теме. По Вашим советам установил логотип. Он появился в шапке, но не хочет выравниваться слева от названия и описания блога. Хотя тег float:left прописан как и у Вас
Сейчас логотип просто встал сверху слева над названием. И куда я его не таскал – не хочет становиться в одну линию с заголовком…
Помогите, пожалуйста, его туда допилить
Пока оставил на блоге его сверху, до Вашего визита
Извините за беспокойство! Но проблему я решил – она была в атрибуте clear: both, который был прописан для заголовка блога. Заменил на clear: none; и все стало на место!
Отлично, Вячеслав! Пока я добралась до комментариев, Вы уже сами справились
Успехов Вам в дальнейшем обновлении дизайна!
В любом случае спасибо за отличное руководство!
Сергей, проверьте правильность пути к Вашему логотипу. Если показывается слово Лого, значит, он встал на место, но картинка не найдена по тому пути, что прописан
Здравствуйте, у меня логотип после смены шапки перестал позицианироваться, я добавил код смещения, но он только прилип к верху и все.
Буду очень благодарен за помощь.
Сергей, невозможно Вам помочь, не видя кода. Почитайте комментарии, у Вячеслава была похожая проблема, возможно, его решение поможет и Вам. Если нет, тогда мне нужен код, чтобы посмотреть, что нужно сделать.
Я его пытался вставить, но он почему то не отражается? Спасибо за ответ, но уже нашел ответ на одном из сайтов, немного видоизмененнный ваш код. И все отлично встало, если будет интерес то выложу. Только объясните как вставить код.
Сергей, я рада, что у Вас все получилось. Думаю, что нет смысла выкладывать здесь код, потому что для разных шаблонов все равно что-то будет отличаться. Я эту статью писала, когда устанавливала логотип на старый шаблон, а когда его поменяла, то и устанавливала уже немного по-другому. А на других сайтах вообще ничего похожего нет. Так что, сколько шаблонов, столько и решений, или почти так.
отличное объяснение!
Здравствуйте.
Подскажите пожалуйста, как мне сделать сайт объявлений на вордпресс. Нужно чтобы можно было настроить поддомены для регионов. (чтобы присвоить в яндексе регион). Вот нашел одну доску объявлений 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 как рекомендовано в одном из сайтов стереть ластиком не нужный фон рисунка, но одних версиях как то прозрачность получается в других нет. Потом очень тяжело и неудобно стирать ластиком. Нашел одну программу, но там тоже не все не нужные участки можно стереть Если не секрет прошу поделиться своим опытом.
Хамит, чтобы ответить на этот вопрос, нужно понимать поточнее, что именно Вы хотите сделать. Я со всеми рисунками работаю в фотошопе. Если фон однотонный, я выделяю его инструментом “волшебная палочка”, а потом выделенное удаляю. В других случаях существуют разные приемы, в комментарии не опишешь. Нужно точнее знать задачу, чтобы описать ее решение