Website on CMS - WordPress. Test-version

1. Сайт на Wordpress
HTML/CSS/JS

2. Тематика та вимоги
Тема мого сайту: сайт-візитка для українського виробника взуття «КРОК»
Вимоги:
 CMS – WordPress
 Адаптивна версія сайту
 Функція пошуку по словах
 Можливість надсилання
листа з сайту
(тестова версія сайту)

3. Кілька слів про WordPress…
WordPress — це проста у встановленні та використанні
система керування вмістом з відкритим кодом, яка широко
використовується для створення веб-сайтів.
Сфера застосування — від блогів до складних веб-сайтів.
Вбудована система тем і плаґінів в поєднанні з вдалою
архітектурою дозволяє конструювати на основі WordPress
практично будь-які веб-проекти.
Написана на мові програмування PHP з використанням бази
даних MySQL. Сирцевий код поширюється на умовах
ліцензії GNU General Public License.

4. На сайті використовується тема BrickYard
Встановлені плагіни для
покращення роботи
Основні з них:
- Contact Form 7
- CSS & JavaScript Toolbox
- Shortcodes Ultimate
- Simple Share Buttons Adder
- SyntaxHighlighter Evolved

5. Основна інформація розміщена
у вигляді сторінок,
а також у віджетах

6. WordPress дає можливість редагувати обрану тему
на свій смак ( змінювати фонове зображення,
задавати основні кольори теми,
розміщувати віджети та меню)
В редакторі можна змінювати код кожної
сторінки та описувати всі CSS-файли

7. «Медіа бібліотека» - місце, де можна завантажувати зображення, відео та
файли різноманітного розширення

8. Демонстрація
основних функцій сайту

9. ПОШУК
На сайті присутня стаття, яка містить слово «КРОК»
У вікно пошуку вводимо слово «крок»
та натискаємо «Enter”
Отримуємо результат

10. Надсилання листа
Контактну форму створюємо
за допомогою плагіна Contact Form 7
Задаємо її форму
та шаблон.

11. Вводимо повідомлення для користувача,
які допомагатимуть йому у певних ситуаціях
Вставляємо shortcode на сторінку «Надсилання листа»

12. Заповнюємо контактну форму
Підтвердження надсилання
Повідомлення збереглося в
папці userdata/temp/email,
оскільки сайт знаходиться
на локальному сервері

13. JavaScript
На сайт добавлено декілька тестових елементів на JS, які в подальшому
будуть видозмінюватися під основну тематику сайту
Щоб ефективно працювати з CSS та JS файлами, на CMS встановлений
плагін CSS & Javascript Toolbox

14. Слайд-шоу
Елемент на JS. Без оновлення сторінки змінює зображення в певній області.
JS-код елемента:

15. Інші тестові JS елементи
Клікнувши мишкою, зображення рухається праворуч
JS – код:

16. Анімація зображення
Клікнувши мишкою на зображенні, м’яч летить вниз
та кілька разів відбивається від поверхні
JS код:

17. Анімований текст
В текстовому вікні можемо ввести довільний текст та, натиснувши кнопку «Запустити
анімований друк», побачити як він буде друкуватись.
JS-код:

18. ДЯКУЮ ЗА УВАГУ !