Тема Rose Garden от Ksana. Добавляем дополнительные кнопки меню.

Тема Rose Garden для женского сайта

Тема Rose Garden выполнена в стиле «Скрапбукинг» и предназначена для сайта или блога «женской» тематики.

Задача

Добавить новые кнопки в меню (на фото).

rose-garden-2

Решение

1. Заходим на хостинг. Нажимаем на “Файловый менеджер

rose-garden-3

2. Выбираем папку с нашим сайтом “juliasinicyna.ru

rose-garden-4

3. Далее, заходим в папку – “public_html

rose-garden-5

– “wp-content

rose-garden-6

– “themes

rose-garden-7

– “Rose_Garden” – это папка нашей темы.

rose-garden-8

4. Находим файл, который отвечает за вывод меню на сайте. Это файл “header.php

rose-garden-9

5. Отрываем файл  “header.php”.

Нажимаем 1 раз левой кнопкой мышки на файл  “header.php“. Вся строчка выделяется синим цветом.

В меню выбираем пункт “Файл“, далее “Редактировать“:

rose-garden-10

Открылся файл   “header.php” для редактирования:

rose-garden-11

6. Для начала выровняем кнопки меню. Что бы поместились наши дополнительные кнопки

rose-garden-12

Для этого в графическом редакторе, например, ФОТОШОП, расположим кнопки горизонтально:

Работа в фотошоп

–  Открываем файл в программе:

Кнопки находятся по адресу:

ВАШ_САЙТ/wp-content/themes/Rose_Garden/images/menu

rose-garden-13

–  В режиме “MOVE TOOL“, ставим галочку на пункте “Show Transform Controls“:

rose-garden-14

В результате вокруг изображения появится область для трансформации и перемещения картинки и двойная стрелка.

Нажмите левой кнопкой мышки начинайте вращение картинки до полного выравнивания:

rose-garden-15

Вот, что должно у Вас получиться:

rose-garden-16

Таким образом выравниваем все оставшиеся картинки.

Вот, что получилось у меня:

rose-garden-17

Продолжаем…

7. Подготовим иконки и код для размещения кнопок:

folder_moviefolder_musicfolder_pictures

Вот, что получилось у меня:

Видео Музыка Фото

Возвращаемся к нашему файлу   «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>

rose-garden-19

Далее, открываем файл “theme-options.php” и добавляем новые строчки кода для появления в Настройках темы Rose Garden новых полей для ввода ссылок для меню.

Находим этот код:

rose-garden-22

Сразу после этого блока, после закрывающего тега </p> вставляем код для новых полей:

rose-garden-23

<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>

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

rose-garden-24

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

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

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

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

 

Оцените эту статью. Чтобы мы могли делать лучший контент!

Напишите в комментариях, что вам понравилось и не понравилось!

Средняя оценка 0 / 5. Количество оценок: 0

Оценок пока нет. Поставьте оценку первым.

Похожие новости