Тема Rose Garden для женского сайта
Тема Rose Garden выполнена в стиле «Скрапбукинг» и предназначена для сайта или блога «женской» тематики.
Задача
Добавить новые кнопки в меню (на фото).
Решение
1. Заходим на хостинг. Нажимаем на «Файловый менеджер»
2. Выбираем папку с нашим сайтом «juliasinicyna.ru»
3. Далее, заходим в папку — «public_html»
— «wp-content»
— «themes»
— «Rose_Garden» — это папка нашей темы.
4. Находим файл, который отвечает за вывод меню на сайте. Это файл «header.php»
5. Отрываем файл «header.php».
Нажимаем 1 раз левой кнопкой мышки на файл «header.php«. Вся строчка выделяется синим цветом.
В меню выбираем пункт «Файл«, далее «Редактировать«:
Открылся файл «header.php» для редактирования:
6. Для начала выровняем кнопки меню. Что бы поместились наши дополнительные кнопки
Для этого в графическом редакторе, например, ФОТОШОП, расположим кнопки горизонтально:
Работа в фотошоп
— Открываем файл в программе:
Кнопки находятся по адресу:
ВАШ_САЙТ/wp-content/themes/Rose_Garden/images/menu
— В режиме «MOVE TOOL«, ставим галочку на пункте «Show Transform Controls«:
В результате вокруг изображения появится область для трансформации и перемещения картинки и двойная стрелка.
Нажмите левой кнопкой мышки начинайте вращение картинки до полного выравнивания:
Вот, что должно у Вас получиться:
Таким образом выравниваем все оставшиеся картинки.
Вот, что получилось у меня:
Продолжаем…
7. Подготовим иконки и код для размещения кнопок:
Вот, что получилось у меня:
![]() |
![]() |
![]() |
Видео | Музыка | Фото |
Возвращаемся к нашему файлу «header.php» и начинаем его редактировать:
— Вставляем блок меню с кнопками
<table width=»270″ height=»75″ border=»0″ align=»right» cellpadding=»0″ cellspacing=»0″ style=»margin-top:-12px; margin-right:100px;»>
<tr>
<td width=»60″ height=»60″ align=»center»>
<a class=»» href=»<?php echo get_theme_mod(‘video’); ?>» title=»Видео»>
<img src=»http://juliasinicyna.ru/wp-content/themes/Rose_Garden/images/menu/folder_movie.png» width=»60″ height=»60″ />
</a>
</td>
<td width=»60″ height=»60″ align=»center»>
<a class=»» href=»<?php echo get_theme_mod(‘audio’); ?>» title=»Музыка»>
<img src=»http://juliasinicyna.ru/wp-content/themes/Rose_Garden/images/menu/folder_music.png» width=»60″ height=»60″ />
</a>
</td>
<td width=»60″ height=»60″ align=»center»>
<a class=»» href=»<?php echo get_theme_mod(‘pictures’); ?>» title=»Фотогалерея»>
<img src=»http://juliasinicyna.ru/wp-content/themes/Rose_Garden/images/menu/folder_pictures.png» width=»60″ height=»60″ />
</a>
</td>
</tr>
<tr>
<td align=»center»>Видео</td>
<td align=»center»>Музыка</td>
<td align=»center»>Фото</td>
</tr>
</table>
Далее, открываем файл «theme-options.php» и добавляем новые строчки кода для появления в Настройках темы Rose Garden новых полей для ввода ссылок для меню.
Находим этот код:
Сразу после этого блока, после закрывающего тега </p> вставляем код для новых полей:
<p><?php _e(«‘Видео'»); ?><br />
<input type=»text» name=»<?php echo $settings; ?>
» value=»<?php echo get_theme_mod(‘video’); ?>» size=»35″ />
</p>
<p><?php _e(«‘Музыка'»); ?><br />
<input type=»text» name=»<?php echo $settings; ?>
» value=»<?php echo get_theme_mod(‘audio’); ?>» size=»35″ />
</p>
<p><?php _e(«‘Фотогалерея'»); ?><br />
<input type=»text» name=»<?php echo $settings; ?>[pictures]» value=»<?php echo get_theme_mod(‘pictures’); ?>» size=»35″ />
</p>
В административной части сайта в настройках шаблона появились новые поля для вставки полного пути до нужной страницы.
На этом урок заканчиваю Надеюсь он был для Вас полезен.
Вот ссылка на сайт, с которым Я работал: Юлия — Мои заметки о жизни
До новых встреч!
С уважением, Роман Синицын.
Обратите внимание на мой миникурс о создании аватара