Способы заработка через Интернет Инфобизнес
Простой шаблон сайта — как изменить шапку

Простой шаблон сайта — как изменить шапку

                                                                                                                                                                                    

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

Простой шаблон сайта, замена шапки сайта

Исправить шапку сайтаВ момент создания сайта (блога) знаний не было никаких. Поэтому  был выбран очень простой шаблон сайта  WordPress, включая и шапку сайта. Вместе с тем, в шапке было две картинки:

  • верхняя картинка представляла собой простой прямоугольник, закрашенный под цвет общего шаблона;
  • нижняя картинка шапки представляла изображение часов и также была закрашена под цвет общего шаблона, так называемое «Изображение заголовка».

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

Далее немного подработав верхнюю картинку шапки сайта, столкнулся с проблемой. После того, как была установлена доработанная картинка, оказалось, что она по умолчанию установилась также и в футере (нижней части страницы сайта).

Попытался найти информацию в Интернете о том, как решить проблему, но так ничего и не нашел. Пришлось решать проблему самому методом проб и ошибок. Простой шаблон сайта оказался не таким простым.

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

Как изменить шапку сайта? Итак, по порядку. После удаления изображения заголовка, было решено наложить картинку в виде монет в шапку сайта и сделать надпись. Как это делается, отражать в этой статье не буду, это отдельная тема. Но для общего понимания процесса коротко опишу.

Перед началом замены шапки сайта, нам необходимо узнать адрес расположения картинки. Если Вы работаете в браузере Mozilla Firefox, необходимо навести на шапку (картинку) мышкой и нажать правую кнопку мыши, в диалоговом окне нажимаем «Открыть фоновое изображение».

В новом окне открывается изображение  шапки сайта. В адресной строке браузера (вверху) прописан адрес нашей шапки сайта (картинки). Адрес моей шапки выглядит так:                                                                                                                https://biz-iskun.ru/wp-content/themes/zeestyle/images/header_bg.png      копируем и сохраняем этот адрес.

Теперь мы видим, где лежит наша картинка на хостинге: папка wp-content;  папка themes; папка zeestyle; папка imagis и наконец, название картинки — header_bg.png. Это нам пригодится в будущем.

В браузере Google Chrome адрес узнается почти также. Наводим мышкой на шапку сайта, нажимаем правой кнопкой мыши, в диалоговом окне выбираем «Копировать URL картинки», также копируем и сохраняем ссылку. Бывают шаблоны, где картинки открываются более хитрым способом.

Далее открываем картинку в новом окне и можем с ней работать. Можно редактировать её в фотошопе или другом редакторе для изображений. Работа с моей шапкой сайта выполнялась в программе Pixlr (это онлайн фотошоп). Подробнее об этом читайте в статьях «Онлайн редактор Pixlr» и «Уникальные картинки для статей блога«.

После завершения работы над картинкой, её надо сохранить с тем же расширением и теми же геометрическими размерами, что и старая картинка. Для сохранения названия отредактированную картинку переименовываем (я делаю это в Total Commander) и присваиваем ей имя header_bg.png. Это имя взято из вышеприведенной ссылки (у каждого имя будет своё).

Замену картинки (шапки) сайта можно сделать либо через FTP, или напрямую на сервере, я делал напрямую. Для этого заходим на наш хостинг, открываем наш сайт, открываем папку public_html, папку wp-content, themes, zeestyle, images и находим нашу шапку (картинку) — header_bg.png.

Удаляем найденную картинку, а на её место закачиваем новую отредактированную картинку.  Обновляем и идем на сайт, тоже его обновляем и видим, что наша отредактированная шапка (картинка) установлена. Все очень просто — замена шапки сайта выполнена.

Как уже говорилось в начале статьи, моя шапка установилась не только в верхней части страницы сайта, а и в футере.

Причина была найдена и устранена. Дело в том, что мой шаблон в шапке и в футере представлен прямоугольниками, которые просто закрашены темно-синим цветом, под цвет основного шаблона. Так вот оказывается, что источником шапки и футера являлась одна и та же картинка (смотрите ссылку выше), поэтому изменение картинки шапки меняет и изображение футера.

Для решения этой проблемы надо разделить ссылки, сделать отдельно картинку для шапки и отдельно для футера. Для этого возвращаемся в админпанель нашего сайта, заходим «Внешний вид», «Редактор» и выбираем «Стили», «Таблица стилей» (style.css).

Находим footer и видим там название нашей картинки в строке  —      background: url(images/header_bg.png) no-repeat #1d4c82;                   Предварительно код «Таблицы стилей» лучше сохранить. Если допустите ошибку, всегда сможете вернуться в исходное состояние.

Мы помним, что header_bg.png это название картинки нашей шапки. Теперь в коде вместо header пишем footer (смотрите скрин),

простой шаблон сайта

остальное не трогаем. Обновляем файл, идем на сайт, обновляем и видим, что все стало на место. Отредактированная шапка на своем месте, футер имеет старую редакцию. На этом работу можно завершить. Простой шаблон сайта готов.

На всякий случай картинку футера я положил на сервер, возможно в будущем буду редактировать. Для этого была взята картинка шапки до переделки и переименована в Total Commander – вместо header_bg.png пишем footer_bg.png и закачиваем её на хостинг. Картинку закачиваем в  папку images, туда же, где находится картинка нашей шапки.

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

С уважением, Иван Кунпан.

P.S. Для правильно создания блога, правильного его продвижения, нужно всё делать в строгой последовательности. Такая последовательность показана в моей интеллект карте, которую я разработал на собственном опыте. Скачать интеллект карту можно с блога. Полезной будет и интеллект карта по написанию статей, Вы можете скачать также бесплатную книгу «Как написать статью для блога«.

Просмотров: 1220
Получайте новые статьи блога прямо себе на почту. Заполните форму, нажмите кнопку "Подписаться"
Ваше имя: *
Ваш e-mail: *
Вы можете почитать:
27 комментариев
  1. Александр:

    Если просто поменять картинку в шапке на другую, но с теми-же размерами, то в принципе способ может подойти. Но если надо к тому-же изменить, например, и размер шапки — сделать её меньше, скажем, по высоте… То тут уже без хотя бы элементарных знаний CSS не обойтись. И надо учитывать, что для каждого шаблона файл стилей свой и может кардинально отличаться от другого. Но если есть желание, то конечно всё решаемо. Удачи!

    Ответить
    • Иван:

      Да, Вы правы, все можно сделать если есть знания по CSS, но если есть хоть небольшое представление, то можно попытаться изменить размеры, цвет и т.д. Ничего сложного там нет. При этом надо соблюдать правило — перед изменениями в кодах, делать копии — всегда стараюсь так делать. Картинку в шапке проще подогнать по размеру перед установкой.
      Согласен, что не со всеми шаблонами можно так просто обращаться.

      Ответить
  2. Андрей Хвостов:

    Шапка- это лицо блога. Программой Pixlr не пользовался, посчитал что тормозится работа в онлайне. Шапку свою делал в Кореле. Сейчас фото бы для шапки вырезал в Фотошопе, так как там проще это сделать.

    Ответить
  3. Иван:

    Да Андрей, я бы с удовольствием работал в фотошопе, но надо время, чтобы освоить эту программу, а его сейчас нет. Программа Pixlr это упрощенный фотошоп, там гораздо проще разобраться. Думаю, со временем и фотошоп освою. В программе Pixlr работал впервые — мне понравилось.

    Ответить
    • Андрей Хвостов:

      Я тоже боялся Фотошопа, пока не осознал, что не надо знать много в этой программе. Достаточно знать в Фотошопе действий 5-6, чтобы нормально изменять картинки.

      Ответить
      • Иван Кунпан:

        Согласен! Так бывает с любыми программами и любыми действиями — сначала страшно начинать, а позже выясняется, что всё просто.

        Ответить
        • Андрей Хвостов:

          Рекомендую освоить эти действия, сложного в них ничего нет.

          Ответить
          • Иван Кунпан:

            Да, у меня есть несколько видео-курсов на эту тему. Страшного там ничего нет, просто надо найти время.

            Ответить
  4. Максим:

    Кстати заходя на ваш блог мое первоначальное впечатление о нем создает шапка блога, я считаю это очень важно… Спасибо за полезную информацию!

    Ответить
  5. Иван:

    Спасибо Максим! Рад, что данная информация приносит пользу.

    Ответить
  6. Анастасия:

    Очень подробная информация, но недостаток: при разрешении 1024 (и ниже) исчезают верхние кнопки. Экран просто устанавливается на светлом фоне. Верхней полосы с кнопками нет. При покупке шаблона на сайте prob2b.biz/, данная проблема не возникает.

    Ответить
    • Иван:

      Спасибо Анастасия, будет информация на будущее. Век живи, век учись.

      Ответить
  7. Василий:

    Добрый день! У меня таже проблема, что и у вас. Хочу изменить шапку блога, вставить в нее ссылку, а не знаю как сделать. Код менять научился, а вот созранить изменения не знаю как. Может подскажете? С уважением Василий.

    Ответить
  8. Иван Кунпан:

    Здравствуйте Василий! Для простой замены шапки блога ссылка не нужна, Вы просто меняете картинку и всё, или я не так понял?
    Если делать кликабельным участок в шапке, то сделать это можно, но сам я это не делал, но разобраться можно, там сложного ничего не должно быть.

    Ответить
  9. Виктор:

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

    Ответить
    • Ivan:

      Вы правы, с любым шаблонов надо поработать, а позже принять решение о его использовании.

      Ответить
  10. Виталий:

    Но ведь можно и не заморачиваться, а просто заказать на фрилансе там всё сделают как тебе хочется.

    Ответить
    • Андрей Косолапов:

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

      Ответить
      • Иван Кунпан:

        Андрей, абсолютно с Вами согласен. Именно так и рождается опыт.

        Ответить
    • Иван Кунпан:

      Виталий, на фрилансе можно всё сделать, даже статьи за Вас будут писать. Только есть два момента — нужны деньги и не факт, что Вы их потом заработаете и вернете. Второе, многие технические моменты надо самому пощупать руками и понять, как это работает. Хотя бы будет понятно, сколько платить фрилансеру и как проверить качество выполненных работ.

      Ответить
      • Виталий:

        Ну так то да, и опыт и экономия на лицо когда сам делаешь. А фриланстер это как панацея для экономии личного времени. Дал задание а сам спокойно занимаешься другими более важными делами.

        Ответить
        • Иван Кунпан:

          Если блог уже раскручен и немного пошли дела в области заработка, тогда без фриланса не обойтись, иначе сам все не успеешь. Как говорят, бизнес, со временем, надо масштабировать, то есть увеличивать объёмы продаж. Для этого надо все больше и больше работы делегировать исполнителям, а самому сосредоточиться на новых проектах.

          Ответить
  11. MichaelJep:

    Здравствуйте, на счет вкладки емаил! Скажите как изменить шаблон отсылаемого емайла?! И что в принципе там писать?

    Ответить
  12. Jarod Wetherby:

    It is truly a great and helpful piece of information. I’m glad that you just shared this helpful information with us. Please stay us informed like this. Thanks for sharing.

    Ответить
    • Ivan:

      I am glad that You like my information. Welcome to my site again.

      Ответить
  13. Марина:

    Иван, у меня, как всегда, какие-то особенные проблемы. Выбрала тему сайта, на которой не была установлена по умолчанию главная страница — на нее выходишь только через шапку сайта, нажимаешь на шапке левой кнопки мышки и можешь создавать запись. Название сайта у меня встроено как картинка в шапку сайта. Казалось по-первоначалу, можно и так. Сейчас взялась за сайт. Пытаюсь установить нужные страницы. Чувствую, отсутствие главной создает дискомфорт в пользовании сайтом. Подскажите — можно ли как-то завести главную страницу с ее функциями в верхней ленте сайта? Может как-то можно поставить под нее ссылку на шапку сайта и откроется возможность делать записи, нажимая не на шапку сайта, а на гл.стр? Извините, что пишу не бравурные комментария , а задаю вопросы. Конечно, я благодарна, что я нахожу у Вас на сайте полезный материал, практически ответы на все возникающие при настройке сайта вопросы, нахожу помощь для решения многих проблем. Спасибо Вам за вашу деятельность. С уважением, Марина.

    Ответить
    • Иван Кунпан:

      Здравствуйте Марина! Что нужно сделать? Нужно взять сейчас простую и проверенную тему (шаблон), например, 2012, 2011, 2013. И не морочить голову. Там всё корректно работает. Единственное, что там нет встроенной мобильной версии, но это легко исправите установкой плагина.
      Главная страница должна установиться по умолчанию, страницы и рубрики надо создать. А когда появится опыт, измените тему.
      Конечно, любую тему можно доделать, но для этого надо привлекать специалистов. Вопрос, а зачем? Поэтому я бы сделал по первому варианту и просто писал бы статьи и закачивал реселл комплект. По проверенному шаблону все сделаете за несколько часов.

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

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

ЛУЧШЕЕ РЕШЕНИЕ ДЛЯ НАЧИНАЮЩИХ
«Как начать зарабатывать в интернете без вложений»