Рис. 15. Скриншот сайта “androngt2.esy.es” (страница установки CMS системы WordPress – Ввод дополнительных данных).

4.3.7. Программирование функциональности сайта

Итак, CMS система установлена, теперь приступим к настройке сайта. Для этого переходим по адресу: “androngt2.esy.es/admin”. Вводим данные администратора для доступа к консоли настроек CMS системы WordPress. После входа видим страницу настройки нашего сайта. На сайте пока ничего нет, кроме 1 записи, 1 комментария и 1 страницы.

31

Рис. 16. Консоль настроек CMS системы WordPress. Первым делом необходимо удалить все записи, комментарии и

страницы. После этого приступаем к установке темы. Для этого нажимаем на кнопку “выберите другую тему” и попадаем на страницу выбора темы. В WordPress уже установлены 3 темы, но они слишком красочны и не подходят для учебника. Поэтому добавим новую тему нажав кнопку “Добавить новую” Пролистав список тем вниз, приглянулась тема “Iconic One”, именно ее устанавливаем и активируем. Переходим на главную страницу сайта для того, чтобы проверить установленную тему.

32

Рис. 17. Главная страница сайта androngt2.esy.es (установленная тема

“Iconic One”).

Далее приступаем к удалению лишних виджетов таких как: свежие записи, свежие комментарии, архивы, рублики, и мета. Для этого переходим в консоль настройки сайта – Внешний вид – Виджеты. Удаляем вышеперечисленные виджеты. На этом удаление виджетов закончено.

Теперь приступим к изготовлению логотипа сайта, который располагается в шапке сайта. Воспользуемся программой Adobe Photoshop

СС. Скачаем бесплатный логотип с сайта “manual.ucoz.net/publ/18-1-0-291”.

После скачивания перейдем к редактированию логотипа. Добавим надписи: Обучение Adobe Dreamweaver CC и Бесплатные уроки. Применим к надписям некоторые эффекты для украшения логотипа. Сохраняем.

33

Рис. 18. Скриншот программы Adobe Photoshop CC (редактирование логотипа).

Теперь устанавливаем логотип в шапку сайта. Для этого переходим в консоль настройки сайта – Внешний вид – Настроить – Logo – Выбираем логотип, который создали ранее. Сохраняем и опубликовываем. Логотип загружен. Смотрим результат перейдя на главную страницу сайта.

Рис. 19. Главная страница сайта androngt2.esy.es (установлен логотип). 34

Теперь приступим к редактированию подвала (footer) сайта. Для этого переходим в консоль настройки сайта – Внешний вид – Редактор – Подвал (footer.php). Редактируем строку:

“<div class="footercopy"><?php echo get_theme_mod( 'textarea_copy', 'custom footer text left' ); ?></div>”.

Удаляем надпись “custom footer text left”. Она больше не понадобится. Должно получиться так:

“<div class="footercopy"><?php echo get_theme_mod( 'textarea_copy', '' ); ?></div>”

Тоже самое проделываем с правым текстом подвала.

Строку “Copyright” редактируем под разработчика сайта. Меняем ссылку “<a href="http://themonic.com/iconic-one/">Iconic One</a> Theme” на <a href="http://vk.com/androngt”.

К надписи “Powered by” добавляем псевдоним “Androngt™”.

Редактируем строку “<a href="http://wordpress.org">Wordpress</a>” на “</a> </div><!-- .site-info --> <div class="clear"></div>”.

Изначально было так:

“<div class="site-wordpress">

<a href="http://themonic.com/iconic-one/">Iconic One</a> Theme | Powered by <a href="http://wordpress.org">Wordpress</a>”

Теперь должно получиться так:

“<div class="site-wordpress">

<a href="http://vk.com/androngt">Страница разработчика</a>| Powered by Androngt™</a> </div><!-- .site-info --> <div class="clear"></div>”

35

Рис. 20. Код footer.php (отредактированный).

Нажимаем “Обновить файл”. На этом редактирование подвала (footer) завершено. Смотрим результат перейдя на главную страницу сайта.

Рис. 21. Главная страница сайта androngt2.esy.es (отредактированный подвал).

Основная часть сайта уже готова. Осталось наполнить сайт обучающим контентом.

36