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

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

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

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

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

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