Здравствуйте уважаемые друзья! Как правило, новички выбирают простой шаблон сайта, но рано или поздно возникает необходимость изменить шапку. Вопрос простой, но многие новички не знают, как изменить шапку сайта WordPress. Данная статья отвечает на этот вопрос.
Простой шаблон сайта, замена шапки сайта
В момент создания сайта (блога) знаний не было никаких. Поэтому был выбран очень простой шаблон сайта WordPress, включая и шапку сайта. Вместе с тем, в шапке было две картинки:
- верхняя картинка представляла собой простой прямоугольник, закрашенный под цвет общего шаблона;
- нижняя картинка шапки представляла изображение часов и также была закрашена под цвет общего шаблона, так называемое «Изображение заголовка».
На днях решил поэкспериментировать с шапкой своего сайта, убрать нагромождение двух картинок, сделать замену шапки сайта. Для этого надо было просто убрать нижнюю картинку – ничего сложного.
Далее немного подработав верхнюю картинку шапки сайта, столкнулся с проблемой. После того, как была установлена доработанная картинка, оказалось, что она по умолчанию установилась также и в футере (нижней части страницы сайта).
Попытался найти информацию в Интернете о том, как решить проблему, но так ничего и не нашел. Пришлось решать проблему самому методом проб и ошибок. Простой шаблон сайта оказался не таким простым.
Как изменить шапку сайта? Итак, по порядку. После удаления изображения заголовка, было решено наложить картинку в виде монет в шапку сайта и сделать надпись. Как это делается, отражать в этой статье не буду, это отдельная тема. Но для общего понимания процесса коротко опишу.
Перед началом замены шапки сайта, нам необходимо узнать адрес расположения картинки. Если Вы работаете в браузере Mozilla Firefox, необходимо навести на шапку (картинку) мышкой и нажать правую кнопку мыши, в диалоговом окне нажимаем «Открыть фоновое изображение».
В новом окне открывается изображение шапки сайта. В адресной строке браузера (вверху) прописан адрес нашей шапки сайта (картинки). Адрес моей шапки выглядит так: копируем и сохраняем этот адрес.
Теперь мы видим, где лежит наша картинка на хостинге: папка wp-content; папка themes; папка zeestyle; папка imagis и наконец, название картинки — header_bg.png. Это нам пригодится в будущем.
В браузере Google Chrome адрес узнается почти также. Наводим мышкой на шапку сайта, нажимаем правой кнопкой мыши, в диалоговом окне выбираем «Копировать URL картинки», также копируем и сохраняем ссылку. Бывают шаблоны, где картинки открываются более хитрым способом.
Далее открываем картинку в новом окне и можем с ней работать. Можно редактировать её в фотошопе или другом редакторе для изображений. Работа с моей шапкой сайта выполнялась в программе 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. Для правильно создания блога, правильного его продвижения, нужно всё делать в строгой последовательности. Такая последовательность показана в моей интеллект карте, которую я разработал на собственном опыте. . Полезной будет и , Вы можете скачать также бесплатную книгу «Как написать статью для блога».
Получайте новые статьи блога прямо себе на почту. Заполните форму, нажмите кнопку "Подписаться"
Начинаем серию уроков по редактированию шаблона Joomla 2.5. В этом уроке мы рассмотрим
Необходимо сразу сказать, что этот процесс на разных шаблонах разных разработчиков будет проходить по своему. Поэтому постараюсь рассказать сам принцип поиска местонахождения позиции хейдера, логотипа и правки CSS. Как всегда рекомендую все манипуляции с сайтом делать на локальном сервере Денвер (Denwer) Чтобы не заморачиваться давайте возьмем шаблон, установленный на этом сайте.
Для начала необходимо определить в какой позиции модуля находится наш header и какие еще в шапке сайта есть позиции. Для определения позиций модулей в шаблоне Joomla 2.5 после нашего сайта набираем ?tp=1 . То есть это будет выглядеть так: http://ваш_сайт/?tp=1 .
Обновляем страницу (F5) и… ничего не видим. Значит в административной части сайта отключен показ позиций сайта. Идем в админку, заходим в настройки
и включаем показ позиций как показано на фото внизу. Не забываем сохранится.
Обновляем еще раз страницу. Все. Позиции модулей появились. Видим, что их несколько: headerbar, logo, counter, banner. При этом видим, что условные размеры позиций подсвечиваются (counter, banner), а вот headerbar, logo нет.
Чисто логически понимаем, что позиция модуля headerbar отвечает за шапку сайта, а позиция logo за логотип.
Мое личное убеждение, что всегда надо проверить простые пути решения проблемы, а если не получилось, то тогда и лезть вглубь. Самое простое это зайти в настройки самого шаблона Joomla 2.5 и посмотреть, какие настройки там есть. В любом случае, как при установке просто шаблона на Joomla 2.5 , или после установки шаблона Joomla 2.5 из быстрого старта «QuickStart» первым делом необходимо заходить в настройки шаблона и разбираться с его возможностями по настройке. При этом даже нет необходимость русифицировать Joomla 2.5 так как сам шаблон все равно не будет переведен на русский язык.
Многие разработчики шаблона в его настройках дают возможность редактирования шапки (Header) , а также Footer (футер) сайта и многих других примочек. Однако среди множества настроек в этом шаблоне легкого пути не нашлось.
И так, зная позицию шапки, как headerbar идем в «Расширения – Менеджер модулей» и в выпадающем меню «Выбор позиции» ищем позицию headerbar. Ее там нет и это правильно, потому что самой шапки в шаблоне нет. Есть только логотип. Наиболее правильный и быстрый способ вывода header на сайте это в «Менеджере модулей» жмем кнопку «Создать».
И в выборе типа модуля выбираем «HTML код». С его помощью мы сможем не только вывести часть Html кода, но и разместить картинку нашей шапки.
Однако, что бы выводить header в позицию модуля его необходимо предварительно подготовить, а для этого нам надо знать ширину и длину позиции модуля. Вспоминаем классный плагин Firebug для Firefox и начинаем его использовать. С помощью этого расширения исследуем позицию headerbar и видим
что за его позиционирование отвечает файл layout.css и его высота составляет 110 пикселов. Кстати вы можете изменить ширину до нужных вам размеров в этом файле CSS. Теперь необходимо определиться с длиной нашей шапки. В большинстве шаблонов ширина его задается в настройках. Заходим в наш шаблон и в настойках видим что длина нашего шаблона составляет 1100 пикселов. Вот теперь мы можем подготовить нашу шапку с необходимыми параметрами с помощью программы для редактирования графики (допустим Adobe Photoshop). Я не буду рассказывать как это делается. Этому посвящены целые сайты.
Подготовленный файл с шапкой забрасываем в папку «images – stories» сайта, но не шаблона. Теперь размещаем его с помощью модуля «HTML код». Заголовок скрываем. Выбираем позицию headerbar и сохраняемся.
Кстати так можно сделать, что бы на разных страницах сайта отображался различный header. Готовим несколько шапок, переносим их в вышеуказанную папку и размешаем с помощью нескольких модулей «HTML код» с выводом на определенных пунктах меню.
С хейдером разобрались. Отредактируем теперь логотип. Зная позицию модуля, а именно logo проверяем ее. Заходим в «Расширения – Менеджер модулей» и в выпадающем меню «Менеджер позиции» ищем позицию logo. Есть такая и в ней даже указан путь к картинке с именем logo.png. Но отключив ее, изменений на сайте мы не видим. Значит, эта картинка используется только при накатывании просто шаблона на уже установленную Joomla 2.5. Но при установке шаблона Joomla 2.5 из быстрого старта «QuickStart» как у нас используется картинка из другой папки. И естественно из шаблона.
Поэтому начинаем искать другой путь. Опять же с помощью плагина Firebug для Firefox исследуем логотип шаблона и видим,
что за его позиционирование отвечает тот же файл layout.css и чтобы увидеть, где он находится (путь к файлу) открываем его в новой вкладке. С помощью программы Notepad++ открываем и ищем строку 259.
Тут мы можем экспериментировать с шириной, длиной логотипа. Не забываем сохранятся, и обновлять страницу сайта, чтобы посмотреть результат. Еще одно огромное преимущество Notepad++ это то, что можно всегда вернуться к исходному состоянию файла, но только если вы не закрыли окно Notepad++. К исходному состоянию возвращаемся при помощи кнопки «Отмена».
Ну а для изменения дизайна логотипа нам потребуется Adobe Photoshop и элементарные знания данной программы.
Таким образом мы рассмотрели с вами как отредактировать (поменять) шапку (Header) в шаблоне Joomla 2.5.
Удачи Вам в ваших начинаниях.
Скачивается с бесплатных ресурсов. При всем многообразии вариантов полной оригинальности в дизайне сайта ждать не приходится. По истечении времени, развития сайта, приобретения опыта и навыков у молодого блогера естественным является желание что-то изменить в дизайне сайта, хотя бы поменять шапку (header) и, тем самым, придать оригинальность своему творению. В интернете достаточно разрозненной информации по описанию методов, инструкций смены шапки. Каждая из них предназначена для определенных вариантов тем сайта, функционал которых и механизм отражения, а значит, открытия для редактирования основных элементов дизайна различны. Обычно это и вызывает затруднения у новичков при сталкивании с конкретным вариантом темы. В настоящем материале попробуем систематизировать, дать краткое описание хотя бы основных методов замены шапки сайта . Кроме того, приведем примеры механизмов замены и редактирования шапки в виде существующих видео уроков.
Открытие картинки шапки
Копирование картинки посредством открытия меню с кнопкой«Копировать изображение» при нажатии правой кнопки мыши (рисунок 1).
Рисунок 1. Открытие картинки кнопкой "Копировать изображение"
В этом случае картинку шапки можно копировать прямо с сайта и сохранять в любых программах для редактирования.
Открытие картинки в браузере Mozilla Firefox. Такой метод применяется, когда настройки темы не позволяют напрямую копировать изображение шапки в браузере Opera (рисунок 2). В открывающемся окне мы не находим кнопки «Копировать изображение».
Рисунок 2. Настройки темы не позволяют копировать по кнопке "Копировать изображение"
В этом случае копируем URL сайта и вставляем в браузер Mozilla Firefox (рисунок 3).
Рисунок 3. Открытие картинки в браузере Mozilla Firefox
Открываем окно и нажимаем кнопку «Открыть фоновое изображение». Открывается (рисунок 4) header.jpg (изображение “JPEG” 962х289 пикселов). Правой кнопкой мыши открываем окно и в нем нажимаем кнопку «Копировать изображение».
Рисунок 4. Копирование картинки из браузера Mozilla Firefox
Открытие картинки из папки «Темы», сохраненной на жестком диске компьютера. Разархивируем сохраненную на нашем компьютере архивную папку с текущей темой (рисунок 5).
Рисунок 5. Архивная папка с текущей темой
Открываем разархивированную папку с текущей темой (рисунок 6).
Рисунок 6. Разархивированная папка с текущей темой
Находим папку с изображениями images, открываем ее, находим отдельное изображение шапки header (рисунок 7) и копируем его.
Рисунок 7. Изображение шапки header
Открытие картинки в браузере через скопированный URL адрес самой шапки. Этот метод можно использовать, если настройки темы позволяют скопировать адрес изображения (рисунок 8). Скопированный URL помещаем в поисковую строку браузера, открываем изображение и производим его редактирование.
Рисунок 8. Открытие картинки в браузере через скопированный URL адрес самой шапки
Открытие картинки на хостинге по коду элемента , находимому в окне, открывающемуся по кнопке «Проинспектировать элемент». Если настройки темы не позволяют напрямую скопировать адрес изображения, нажимаем на кнопку «Проинспектировать элемент» (рисунок 9)..for sale 1/images/header.ipg”).
Рисунок 9. Открытие адреса картинки шапки
Теперь заходим в файловый менеджер посредством Total Commander или FTR-менеджераFileZilla . В открывшейся файловой структуре нашего сайта находим наш сайт, каталог /wp-content/themes/ wp-content/themes/business.for sale 1/images/header.ipg и картинку шапки header.ipg (рисунок 10).
Рисунок 10. Картинка шапки header.ipg в файловом менеджере
Правой кнопкой мыши нажимаем на строку header.ipg.В открывшемся окне можем картинку для редактирования скопировать в буфер обмена, а можем нажать на кнопку «Просмотр/Правка» и картинка откроется в новом окне (рисунок 11). Щелкаем правой кнопкой мыши по открывшейся картинке, в открывшемся окне нажимаем строку «Открыть с помощью», выбираем программу для редактирования нашей шапки и открываем ее в выбранной программе.
Рисунок 11. Просмотр и открытие картинки по адресу в файловом менеджере
Редактирование картинки
В программе Adobe Photoshop;
В программе Microsoft Office.
В программе Xheader;
Процессы редактирования изображений в вышеназванных программах являются вопросами отдельных публикаций и уроков, кроме того, применительно к редактированию картинок шапки, они достаточно подробно рассмотрены в прилагаемых видеороликах.
Варианты замены тем
Первый вариант – самый простой метод, когда прямо в консоли темы присутствует кнопка «Заголовок». В этом случае заходим в админ панель -> консоль –> темы –> заголовок –>обзор –> загрузить файл –> сохранить изменения.По кнопке «Обзор» выбираем отредактированную и сохраненную на жестком диске нашего компьютера картинку, загружаем и сохраняем изменения.
Второй вариант – тема, в консоли которой отсутствует прямая кнопка «Заголовок». Тогда может быть также несколько методов:
Находим кнопку «Заголовок» через редактор тем : админ панель -> консоль –>внешний вид –> редактор –> заголовок. В нем меняемHTML код картинки на отредактированный (рисунок 12).
Рисунок 12. Замена картинки через кнопку "Заголовок" в редакторе тем
В админ панели находим «Список стилей» по пути: админ панель -> консоль –>внешний вид –> редактор –> список стилей. Находим в редакторе header и меняем на отредактированный HTML код (рисунок 13).
Рисунок 13. Замена HTML кода картинки в редакторе через список стилей
Открываем файловый менеджер посредством Total Commander или FTR-менеджера FileZilla. В открывшейся файловой структуре нашего сайта находим каталог /wp-content/themes/наименование нашей темы/images/header.ipg (рисунок 10). Нашу отредактированную картинку,сохраненную на жестком диске под тем же именем, что и header на хостинге, просто заливаем с заменой существующей.
Разархивируем сохраненную на жестком диске нашу текущую тему , находим картинку-шапку (header), редактируем ее или делаем новую и сохраняем новую в той же папке. Затем архивируем папку с темой в формате ZIP и заливаем ее на хостинг вместо существующей текущей темы по механизму предыдущего варианта.
Замена шапки сайта WP, когда прямо в консоли темы присутствует кнопка «Заголовок» ичерез файловый менеджер, открываемый посредством Total Commander или FTR-менеджера FileZilla; редактирование имеющейся и создание новой картинки в программе Adobe Photoshop
Видео урок Вячеслава Федоткина
Замена шапки сайта с объяснением процесса замены файла шапки через FTR
Замена шапки блога WordPressпо адресу URL шапки или с использованием «просмотра кода элемента»
На этой странице я покажу пример изменения шапки в стандартном шаблоне на uCoz, раскроем принцип действий. Рекомендую посмотреть видеоурок о том, как изменить шапку. Он размещен в нижней части статьи. Новичку, который не знает CSS и боится ориентироваться в коде, будет не просто, будьте внимательны.
Инструкция
Итак, вот мой сайт со стандартным шаблоном, как изменить шапку?
Чтобы узнать ссылку фона шапки на моем сайте uCoz, нужно покапаться в исходном коде. В браузере Google Chrome, например, есть функция, которая позволяет проверить выбранный элемент (во вспомогательном меню может быть написано «Проверить элемент» или «Проинспектировать элемент»). В других браузерах есть подобные функции, есть не глобальные отличия в названиях и интерфейсе.
Мне нужно найти изображение шапки, поэтому я ищу ссылку во вкладке «styles» справа. Выбранный мной элемент не содержал изображений в стилях, но вот его родитель (справа я выбрал элемент уровнем выше).
Открываю в новой вкладке браузера, сохраняю, чтобы изменить в Photoshop (используйте любой удобный для Вас графический редактор).
2. Создать файл изображения новой шапки или изменить существующий.
Отредактировал шапку, взял для примера шапку Minecraft. Эта игра сегодня очень популярна, много сайтов создано на uCoz..ru/publ/14-1-0-1423).
3. Загрузить файл изображения шапки на сайт
Свое изображение сохраняю в файл «shapka.jpg» и загружаю в корневой каталог файлового менеджера (Панель управления – Файловый менеджер).
4. Открыть таблицу стилей сайта
Панель управления – Управление дизайном – Таблица стилей (CSS)
Т.к. я загрузил файл «shapka.jpg» в корневой каталог, я просто заменяю ссылку на «/shapka.jpg». Нажимаю «Сохранить».
Смотрим результат.
Видео урок по замене шапки на uCoz
Обещанный видео урок. В этом уроке наглядно показан принцип замены изображений в CSS-стилях на uCoz. Этот урок набрал наибольшее количество просмотров на YouTube и наибольшее количество положительных отзывов. Лично мне не понравилось то, что автор вносит очень мелкие изменения в шапке, по мне изменения в примере – это уже интрига, это интересно, но такое изменение - разочарование. Тем не менее, урок очень понятный.
Шапкой называется верхняя часть страницы сайта, на которой обычно размещают название компании, логотип и другую важную информацию (контакты, время работы, слоган и т.д.).
Изменить шапку Вашего сайта в «Нубексе» очень легко: для этого зайдите в админку, в меню управления (слева) выберите раздел «Оформление» , а в нем — пункт «Шапка страницы» .
Перед Вами появится список доступных шапок. Положитесь на свой художественный вкус и выбирайте: в Вашем распоряжении несколько десятков готовых шаблонов. Для выбора шапки просто кликните на понравившийся вариант: система автоматически сохранит изменения, и шапка на сайте отобразится в новом дизайне.
Также Вы можете выбрать пустую шапку (без фона) , если хотите сконцентрировать внимание пользователей на логотипе и текстовой информации.
Как сделать собственную шапку сайта
Если ни один из готовых шаблонов Вам не подошел, можно создать шапку самостоятельно. Для этого найдите в списке пункт «Собственная шапка» и нажмите кнопку «Редактировать» .
В первую очередь нужно загрузить на сайт изображение, которое Вы хотите использовать в качестве шапки. Для этого нажмите кнопку «Загрузить» , выберите на своем компьютере нужный файл и нажмите «Открыть» .
Обратите внимание: допустимые форматы файла для загрузки — jpeg, jpg, gif, png, ico ; максимальный размер — 10 Мб ; в высоту изображение должно иметь не меньше 90 пикселей . Верхней границы для высоты шапки нет, но не стоит грузить слишком большие изображения. Иначе шапка займет большую часть экрана, не оставив места для информации самих страниц. Как правило, высоты в 250-300 пикселей достаточно для размещения логотипа, слогана, адреса и контактных данных.
После загрузки изображения настройте выравнивание шапки : по центру, слева или справа. Особенно это важно, когда ширина загруженного изображения сильно превышает ширину колонки (940 пикселей) . В этом случае от выравнивания будет зависеть, какие части картинки отобразятся в шапке, а какие — нет.
Если ширина изображения, наоборот, меньше ширины колонки , особое внимание следует обратить на галочку «Показывать шапку с повторениями» . На скриншоте ниже показано, как активность этой галочки влияет на отображение шапки на сайте.