Розробка WordPress теми сайту ШАДР - Портфоліо chomovva

Проект по верстці і розробці WordPress теми для сайту Навчального центру «Школа архітектурного та дизайнерського розвитку».

Навчальний центр «ШАДР» був створений на базі відділу міжнародних проектів ПДТУ за сприянням італо-українського центру «Альпіна».

Чим я займався в проекті

  • розробка структури головної сторінки;
  • html-верстка;
  • розробка WordPress теми;
  • технічне обслуговування сайту.

Подальшим наповненням і супровідом сайту займаються фахівці УЦ «Шадра».

Адреса сайту: https://shadr.pstu.edu/

Детальніше про проект верстки

Макет сайту адаптивен, використовується модульна сітка Bootstrap 3.

Проект верстки виконаний на Gulp.js. Стилі написані на препроцесорів SASS (синтаксис SCSS), html-код на препроцесорів PUG (Jade).

Більш детальніше про Gulp.js проект, який я використовую: Стартовий шаблон.

Головна сторінка виконана у вигляді Лендінга. На сторінці використовується паралакс-ефект і анімація блоків при прокручуванні.

Бібліотеки та фреймворки, які я використовував в проекті:

  • Bootstrap 3 – самий популярнай фреймворк HTML, CSS і JS для розробки адаптивних мобільних проектів в Інтернеті;
  • LazyLoad.js – jQuery плагін для додавання “ледачого” завантаження зображень;
  • jQuery – популярні JavaScript фреймворк;
  • baguetteBox.js – простий і легкий у використанні скрипт лайтбоксу, написаний на чистому JavaScript;
  • Parallax.js – дуже простий ефект прокрутки паралакса, реалізований як плагін jQuery;
  • WOW.js – анімація елементів при прокручуванні сторінки, WOW.js дозволяє відкласти запуск анімації елементів до моменту їх відображення на екрані при прокручуванні сторінки;
  • Animate.css – бібліотека css-анімації для сайту, підтримує більше 70 ефектів.

Опис WordPress теми

Всі блоки головної сторінки редагуються через Customizer API WordPress.

Тема підтримує багатомовність за допомогою плагіна PolyLang. Весь статичний текст, який вводиться за допомогою Customizer API, можна перекласти в адмінці: Languages > Strings translations.

За зразоком дизайну головної сторінки були створені шаблони окремих сторінок:

  • front-page.php – головна;
  • index.php – шаблон архіву, категорії;
  • single.php – запис блогу;
  • page.php – постійна сторінка;
  • 404.php – шаблон сторінки помилки 404;
  • page-subpages-media.php – окремий шаблон постійної сторінки зі списком дочірніх сторінок. Список відформатований у вигляді Media object Bootstrap 3.
голос
Рейтинг статті
Підписатися
Сповістити про
guest
0 Коментарі
Вбудовані Відгуки
Переглянути всі коментарі
0
Ми любимо ваші думки, будь ласка, прокоментуйте.x
()
x