Тема 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>

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

На этом урок заканчиваю Надеюсь он был для Вас полезен.

Вот ссылка на сайт, с которым Я работал: Юлия — Мои заметки о жизни

До новых встреч!

С уважением, Роман Синицын.