Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Joomla 3 Профессиональный сайт за Один день

Статьи для сайтов!!!
Главная Изучаем WordPress Редактируем тему 2 О плагинах...


Шапка блога, верхнее меню и фон

Шапка блога
Верхнее меню и поиск
Фон страницы
Добавляем пункт главная страница в верхнее меню


Продолжаем изучение CMS WordPress по курсу Е.Попова «WordPress профессиональный блог за один день».

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

Поэтому будем работать с файлом header.php и с таблицей стилей, то есть с файлом style.css.

 

Шапка блога

Начнём с шапки сайта. Её нужно поменять, то есть сейчас нас интересует уже имеющееся в шапке изображение с попугаем и с надписью «Буддизм Ещё один сайт на ВордПресс».

Редактируем хедер. Меняем шапку и фон блога

Открываем файл header.php. В нём шапку сайта легко найти по идентификатору и по закомментированным строкам:

Файл header.php. Редактируем хедер

Удаляем фрагмент кода, заключённый в рамку. Таким образом мы избавимся от изображения попугая и надписи «Буддизм Ещё один сайт на ВордПресс», то есть мы полностью очистили содержимое шапки.

Файл header.php. Шапка блога

Теперь переходим в таблицу сnилей - файл style.css, где ищем стиль, который отвечает за оформление шапки, то есть идентификатор header. Далее добавляем в его стилевое оформление рамку/границу, чтобы наглядно увидеть шапку.

Файл style.css. Шапка блога

Границы шапки видимы...

Wordpress редактируем шапку

Теперь нужно сделать свою шапку. Для этого я оформил в редакторе Adobe Photoshop изображение шириной 1000px, которое скопировал в папу images нашей темы Division-Wordpress.

После этого я изменил код, отвечающий за стилевое оформление хедера/шапки блога.

Wordpress. Файл style.css. Шапка блога

В итоге у меня получилась следующая шапка. См. иллюстрацию ниже...

Wordpress редактируем шапку

Верхнее меню и поиск

Теперь можно заняться верхним меню и панелью поиска. Их также легко найти в файле header.php. Этот блок так и называется верхнее меню и поиск...

WordPress. Файл header.php. Верхнее меню

Оформление этому блоку придаёт стиль, имеющий идентификатор top. Ищем его в файле style.css. И редактируем под свой дизайн...

WordPress. Файл style.css. Верхнее меню

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

После этого я отредактировал саму форму поиска, у каждого из элементов которой: у слова ПОИСК, у поля поиска и у кнопки ИСКАТЬ, есть свой идентификатор, определяющей стилевое оформление.

В итоге у меня получился вот такой хедер. См. иллюстрацию ниже...

Wordpress редактируем верхнее меню

Фон страницы

Изменить фон страницы также очень просто: в файле style.css ищем стилевое оформление для тега <body>:

WordPress. Файл style.css. Меняем фон

И задаём своё оформление: нужный Вам фоновый цвет страницы. Я выбрал чёрный цвет.

Существует неплохой сайт http://patterns.ava7.com/, где много различных фоновых шаблонов, как по цвету, так и фигурных.

А вот, что получилось у меня с моим чёрным фоном. См. иллюстрацию ниже...

WordPress. Меняем фон блога

Добавляем пункт главная страница в верхнее меню

Для того, чтобы добавить пункт Главная в верхнее меню, обратимся вновь к файлу header.php.

Нас интересует блок, отвечающий за вывод навигационного меню статичных страниц, который обозначен идентификатором pagemenu.

А конкретно, нам нужна функция wp_list_pages.

WordPress. Добавляем пункт главная страница в верхнее меню

Чтобы понять, как работает функция wp_list_pages, обратимся к исходному коду страницы (исходный код страницы можно посмотреть, используя комбинацию клавиш Ctrl + U):

WordPress. Верхнее меню - исходный код

Итак, что мы здесь видим? Функция wp_list_pages выводит нумерованный список статичных страниц. В каждом пункте списка есть название страницы и ссылка. Кроме этого, каждому пункту списка присваивается класс с номером-идентификатором страницы: class="page_item page-item-".

Индивидуальный класс class="page_item page-item- current_page_item" присваивается текущей странице, то есть той, на которой находится в данный момент пользователь. Благодаря этому классу название текущей страницы в верхнем меню выделено в нашем случае красным цветом.

Таким образом, чтобы добавить в верхнее меню пункт Главная со ссылкой, ведущей на главную страницу, нужно в файле header.php перед выполнением функции wp_list_pages добавить следующий код:

WordPress. Добавляем пункт главная страница в верхнее меню

То есть ещё один пункт списка со ссылкой на главную страницу, где фрагмент кода:

<?php if(is_home()) {echo 'current_page_item';}?>

отвечает за вывад класса 'current_page_item', то есть за выделение пункта меню Главная, если пользователь находится на главной станице блога.

Само условие:

<?php if(is_home()) { ?>

было взято из тега <title> файла header.php, где прописаны условия, при которых меняется заголовок страниц.

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

WordPress. Добавили пункт главная страница в верхнее меню

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

Редактируем тему Редактируем тему 2 О плагинах...
WordPress
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru