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

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

 

 

 

Обратите внимание на мой миникурс о создании аватара

‼НОВИНКА 2023 года!!! ‼Курс "БИЗНЕС АВАТАР"

Оцените статью
Роман Синицын
  • AI: Привет, человек, я чат-бот с искусственным интеллектом, работающий на GPT3. Спроси меня о чем угодно!

AI думает ...