Как включить анимацию панели задач на windows 10



Шаблон Somnium для редакционной системы WordPress

1 High school technology 2016 Встреча и презентация работ старшеклассников в CTU Somnium шаблон для редакционной системы WordPress Michal Oberreiter Gymnázium Třebíč Masarykovo nám., 9/116, Třebíč 1

2 Аннотация Эта работа посвящена разработке и обработке шаблона для редакционной системы WordPress. Основная цель — создать шаблон с комплексной системой настроек, которая позволит администратору управлять содержанием и графическим оформлением страниц. Особое внимание уделяется ясности, эффективности и простоте использования. Результатом работы является шаблон, готовый к развертыванию в коммерческой среде, например, в качестве веб-презентации человека или компании. Ключевые слова Шаблон WordPress, WordPress, редакционная система, издательская система, CMS, Somnium, PHP, Sass, отзывчивый, веб-приложение, виджеты, многоязычность. Аннотация Эта диссертация посвящена проблематике дизайна темы WordPress и ее сложных функций. Основная цель — создать тему с системой администрирования, позволяющей редактировать контент и графическое оформление. Особое внимание уделяется ясности, эффективности и простоте использования. Результатом дипломной работы должна стать тема, готовая к развертыванию в бизнес-среде в качестве личной презентации или веб-сайта компании. Ключевые слова Тема WordPress, WordPress, система управления контентом, CMS, Somnium, PHP, Sass, отзывчивый, веб-приложение, виджеты, мультиязычность. 2

3 Содержание 0 Введение CMS WordPress Краткое сравнение с другими CMS Структура WordPress Структура шаблона Концепция дизайна Описание расположения элементов на главной странице Используемый софт и сервисы Реализация Виджеты Описание виджета Общая структура Типы полей ввода виджетов Spin Widget Query Widget Слайдер Отображение сообщения Видео в качестве фона Видео с YouTube в качестве фона Система Google Mapsнастройки Ширина сайта Боковые панели Шрифты Цветовая схема Настройки постов и страниц Прочие настройки Компиляция и минификация Мультиязычность Полиланг Адаптивный веб-дизайн Внедрение выбранных внешних библиотек ScrollReveal.js Owl Carousel Активация плагина TGM Parallax.js Scssphp Редактор файлов SCSS Сброс настроек JShrink Развертывание шаблона Журнал для студентов Bell Результаты мощной темы WordPress Gymnázia Třebíč Somnium

4 5 Обсуждение Сравнение с конкурентами Sydney Customizr Заключение Глоссарий терминов Список источников изображений Список изображений и кодов Список интернет-источников Список плагинов, библиотек и фреймворков Приложения

5 0 Введение В настоящее время веб-презентации являются неотъемлемой частью нашей жизни. Они передают нам информацию, обеспечивают общение между людьми. Мы живем в мире информационных технологий, в окружении различных устройств, но создать качественную веб-презентацию непросто. Somnium пытается объединить удобство и сложность веб-управления с визуальными качествами. 5

6 0.1 Цели Целью работы является создание свободно доступного открытого исходного кода 1 (лицензия GNU GPLv3 2 ) шаблона редакционной системы WordPress, который позволил бы настраивать внешний вид и структуру веб-сайтов. Шаблон изменит свой внешний вид в зависимости от размера экрана и будет адаптивным. Использование не будет ограничено одним типом веб-сайта, шаблон будет многоцелевым. Все текстовые строки, встречающиеся как в свободном доступе на сайте, так и в административном интерфейсе, будут переведены как минимум на один язык. Сгенерированный HTML-код будет действительным, файлы CSS и JavaScript будут сжаты. Результатом работы будет шаблон, готовый к развертыванию в коммерческих и некоммерческих средах. 1 Программное обеспечение с открытым исходным кодом. 2 Больше информации здесь: 6

7 1 CMS WordPress WordPress — это свободно доступная система управления контентом с открытым исходным кодом 3 или CMS 4, используемая для управления контентом веб-сайта. Он был выпущен в 2003 году Мэттом Малленвегом и Майком Литтлом как пятая вилка b2/cafelog. 6 Распространяется под лицензией GNU GPLv2+. 7 WordPress в настоящее время является самой распространенной редакционной системой. 8 Он используется на 25% 9 всех веб-сайтов и на 58,7% 10 веб-сайтов, использующих редакционную систему. В основном он нацелен на блоггеров, небольшие новостные серверы или личные/корпоративные страницы. 11 Его большая пользовательская база и обширная документация делают его подходящим для блоггеров, 12 которые могут получить базовую страницу с предустановленным шаблоном, готовым к использованию, за считанные минуты. Однако у WordPress есть и свои недостатки. Меньшая безопасность и худшая масштабируемость являются одними из наиболее часто упоминаемых 13,14. Оба этих недостатка связаны с самой природой WordPress, то есть с возможностью настройки и универсальности. Проблема безопасности связана с количеством плагинов, доступных для этой системы управления контентом. Плагины, загруженные из неофициальных репозиториев, могут не соответствовать стандартам безопасности, поэтому они могут стать потенциальной слабостью, которую могут использовать злоумышленники. 3 Вордпресс. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно с: 4 С английского система управления контентом, переводится как система управления контентом. 5 Самостоятельное продолжение развития программы. 6 Вордпресс. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно по: 7 О GPL. WordPress [онлайн]. Дата неизвестна [цит.]. Доступно по: 8 Там же. 9 WordPress поддерживает 25% всех веб-сайтов. W3Techs [онлайн] [цит.]. Доступно по: 10 Там же. 11 Вордпресс. Википедия — бесплатная энциклопедия 12 WordPress. WordPress [онлайн]. Дата неизвестна [цит.]. Доступно с: 13 WordPress — обзор CMS, преимущества и недостатки.Какую CMS выбрать? [онлайн]. Дата неизвестна [цит.]. Доступно по адресу: 14 МЕННИНГ, Роберт. WordPress против Joomla против Drupal. Websitesetup.org [онлайн] [цит. Доступно с: 7

8 1.1 Краткое сравнение с другими CMS Основными конкурентами WordPress являются Joomla и Drupal 15 (обе с открытым исходным кодом). Они отличаются друг от друга в первую очередь целевой группой разработчиков. Все платформы основаны на PHP 16 и системе баз данных MySQL. 17 Joomla предлагает больше гибкости за счет простоты использования. Его ключевые особенности включают более простую реализацию социальных сетей, интернет-магазинов и расширенную навигацию по контенту. 18 Второй упомянутой CMS является Drupal. Он ориентирован на крупные компании, занимающиеся веб-разработкой, предоставляя им богатые возможности настройки, отличную оптимизацию и масштабируемость. Явным недостатком является сложность освоения создания в этой CMS. Структура WordPress Структура WordPress состоит из 3 основных компонентов и нескольких файлов инициализации PHP, которые обеспечивают основные функции, например, связь с базой данных, вход в систему, публикация em. Содержимое первых двух (wp-admin, wp-includes) — это в основном файлы PHP, составляющие пользовательский интерфейс, редакторы окружения и дополнительные функции. Третья папка wp-content (ключевая для этой работы) включает в себя все шаблоны, плагины и загруженные медиафайлы Структура шаблона Шаблон, или тема, или шаблон, обеспечивает в WordPress отображение всего контента, доступного посетителю (интерфейсу) и пользовательский интерфейс, специфичный для шаблона. Шаблон визуализирует сообщения, страницы и т. д. в форме, которая либо запрограммирована, либо определена пользователем. 15 Там же. 16 Подробнее здесь: 17 Подробнее здесь: 18 МЕННИНГ, Роберт. WordPress против Joomla против Drupal. Websitesetup.org [онлайн] [цит. Доступно по: 19 Там же. 20 файлов WordPress.Кодекс WordPress [онлайн]. Дата неизвестна [цит.]. Доступно с: 8

9 Изображение № 1: Схема типичного функционирования шаблона и плагинов с WordPress Описание: Пример запроса WP_Query, который возвращает данные постов или уникальных страниц. Все установленные шаблоны находятся в директории wp-content/themes, у каждого шаблона есть своя папка, в которой должно быть минимум 2 файла, а именно index.php и style.css. 21 Первый, index.php, как следует из названия, представляет собой индексную/домашнюю страницу, которая служит файлом по умолчанию для отображения содержимого сайта (если не определен другой файл, см. ниже). Обычно 22 используется для отображения постов и страниц. Второй файл — это каскадный стиль 23 style.css, в котором, помимо стилизации сайта, есть еще следующая обязательная информация: название шаблона, метка, автор, текущая версия, тип лицензии, текстовый домен, автор и URI шаблона. . Эти данные впоследствии отображаются в виде метки в пользовательском интерфейсе (Шаблоны->Обзор) разработки темы. Кодекс WordPress [онлайн] [цит.]. Доступно по: 22 Там же. 23 CSS, подробнее здесь: 24 Также можно добавить превью темы в виде изображения на этикетку, вставив файл с именем screenshot.png в директорию темы. 9

10 Название темы: Somnium Theme URI темы: Автор: Michal Oberreiter URI автора: Описание: Мощный, простой в использовании, отзывчивый, многоязычный — это Somnium. Версия: Лицензия: Стандартная общественная лицензия GNU v3 Теги: адаптивный макет, полноразмерный шаблон, готовый к переводу Текстовый домен: somnium Код №1: Образец информации о шаблоне Упомянутые выше файлы являются абсолютным минимумом для работы основного (успешно загружать) сайты. 25 В дополнение к этим двум, WordPress распознает, например, следующие файлы шаблонов в каталоге темы: 26 comments.php (вставляет раздел комментариев), front-page.php (если присутствует, используется для отображения главной страницы), single.php (отображает один пост), page.php (шаблон для уникальных страниц), archive.php (возвращает разные типы архивов), 404. php (в случае несуществующих страниц). Functions.php — это особый случай. В отличие от других, этот файл используется для вставки стилей и сценариев, регистрации боковых панелей, редактирования свойств сгенерированных изображений для предварительного просмотра, определения пользовательских функций и т. д. wp_enqueue_script(‘widgets-script’, get_template_directory_uri(). ‘/js/script.min. js’, массив(‘jquery’)); требуется get_template_directory(). ‘/includes/customizer.php’; Код №2: Пример загрузки JavaScript с адресом /js/script.min.js, к которому привязана библиотека JS jquery, и получение части шаблона с адресом /inc/customizer.php 25 Разработка темы. Кодекс WordPress [онлайн] [цит.]. Доступно по: 26 Там же. 10

11 2 Дизайн Дизайн веб-сайта является одним из ключевых этапов проекта, во время которого создается базовая компоновка элементов. Принимаются решения о концепции, 27 графическом и типографском редактировании и, прежде всего, об используемых технологиях (включение редакционной системы, библиотек языков программирования и т. д.). Концепция этого шаблона старается быть максимально понятной, современной графически обработанной и максимально репрезентативной, т.е. чтобы у посетителя сложилось положительное впечатление о представленном предмете. 2.1 Концепция Шаблон максимально динамичен, то есть исключает статические элементы. 28 Поэтому простой HTML 29 или PHP с только переменными полями нельзя было использовать для создания такого шаблона. Для достижения указанной настраиваемости необходимо было использовать одну из основных функций WordPress, а именно виджеты. 30 Виджет используется для отображения контента и функций на боковой панели. 31 Его установка не требуеттехническими знаниями и волей программиста виджетов он действительно может стать полезным инструментом, позволяющим пользователю очень быстро и эффективно управлять контентом. Виджеты не имеют ограниченного количества экземпляров, т.е. что пользователь может добавлять бесконечное количество виджетов одного типа. Другие особенности шаблона включают отзывчивость. 32,33 Это было достигнуто с помощью фреймворка Bootstrap, 34 который в данном случае определяет поведение элементов HTML, помеченных определенным классом (классом) HTML, а также предоставляет некоторые элементы для веб-страниц. И последнее, но не менее важное: многоязычие также является важной частью шаблона. 35 Было выбрано решение, сочетающее встроенную систему gettext с внешним подключаемым модулем Polylang. 27 Следует ли рассматривать страницы как полноэкранные (контент по всей ширине страницы), целевую группу и т. д. 28 Например: неизменяемые заголовки и изображения. 29 Подробнее здесь: 30 См. раздел 3.1 Виджеты. 31 виджет WordPress. Кодекс WordPress [онлайн]. Дата неизвестна. [чувство]. Доступно с: 32 Возможность веб-сайта переупорядочивать и настраивать свои части, чтобы веб-сайт было легко читать и использовать на всех устройствах. 33 Больше информации в разделе: 3.3 Адаптивный веб-дизайн. 34 Бутстрап. Bootstrap [онлайн]. Дата неизвестна [цит.]. Доступно по: 35 Подробнее в разделе: 3.2 Многоязычие. 11

12 Из-за общей сложности веб-сайта и количества используемых библиотек и технологий поддержка старых браузеров, особенно Internet Explorer 9 и более ранних версий, не реализована. Если бы такая поддержка была реализована в любом случае, пользовательский интерфейс в старых браузерах никогда не достиг бы уровня пользователей современных 36 браузеров. 2.2 Описание расположения элементов на главной странице В верхней части экрана находится фиксированная полоса с названием/логотипом сайта и навигационное меню, которое, в том числе, имеет возможность прямой ссылкив определенный раздел на главной странице без необходимости перезагрузки сайта. Под панелью находится слайдер, 37 который, хотя и минималистичный по содержанию, может понравиться посетителю своим размером (занимает весь экран окна браузера) и удивительной универсальностью (см. Слайдер). Следующий раздел контента смещен относительно страниц равномерно, чтобы не потерять фокус и ориентацию во время просмотра. Благодаря концепции виджета веб-сайта эту часть можно бесконечно расширять. Пользователь может свободно переставлять, редактировать, добавлять и удалять виджеты в этом разделе. Окончательный вид зависит только от пользователя. Последний раздел называется нижним колонтитулом. В основном используется для размещения информации о сайте, авторских правах, меню навигации, ссылок на социальные сети и дополнительных сообщений. Нижний колонтитул в этом шаблоне состоит из 3 областей для размещения любых виджетов. Графическое оформление размещения элементов на странице доступно в главе «Приложение». 2.3 Используемое программное обеспечение и сервисы Для создания шаблона я использовал следующее программное обеспечение: редактор Notepad++ 38 с плагином NppFTP 39, компилятор Koala. 40 Эти приложения и плагины находятся в свободном доступе и имеют открытый исходный код. Шаблон был разработан и протестирован на бесплатном хостинге Endora.cz. 41 Перевод шаблона осуществлялся с помощью свободно распространяемой версии Poedit Opera, Google Chrome, Mozilla Firefox, Safari, Microsoft Edge. 37 Элемент, горизонтальное смещение которого используется для установки значения или отображения содержимого. 38 Подробнее здесь: 39 Подробнее здесь: 40 Подробнее здесь: 41 Подробнее здесь: 42 Подробнее здесь: 12

13 3 Внедрение Внедрение — это основная, самая важная и самая требовательная часть создания шаблона. Он включает в себя создание статического предварительного просмотра из графического дизайна и его последующую переработку в окончательную форму. Это также этап, когда создаются все необходимыереализованы функциональные возможности и внешние библиотеки. 3.1 Виджеты Виджет или веб-виджет — это небольшое веб-приложение с ограниченной функциональностью, которое является лишь частью веб-страницы. В стандартных шаблонах 43 служит дополнением к основному содержанию страницы, которое предварительно запрограммировано или адаптировано пользователем в ограниченной степени, т.е. что пользователь не имеет полного контроля над расположением элементов. Именно поэтому главная страница этого шаблона реализована с помощью виджетов, которые благодаря своему разнообразию могут заменить любую часть сайта. Все виджеты, включенные в Somnia, были созданы мной. На следующих нескольких страницах будут описаны выбранные виджеты. Остальные виджеты можно подробно рассмотреть либо непосредственно в исходном коде, либо установив шаблон, либо опробовав его по адресу, указанному в главе Приложения. Текущее количество виджетов — 25. Количество виджетов и параметры настройки могут меняться из-за временного разрыва между созданием работы и ее оценкой. На момент написания статьи несколько других виджетов все еще находились в разработке. функция somnium_widgets_init() < register_sidebar( array() );>’имя’ => (‘Редактор разделов’,’somnium’), ‘id’ => ‘боковая панель’, add_action(‘widgets_init’, ‘somnium_widgets_init’); Код №3: Регистрация области для виджетов с названием «Редактор разделов» и с идентификатором HTML sidebar-section 43 Нативные предустановленные шаблоны. 13

14 3.1.1 Описание виджета Образец виджета служит примером для всех других виджетов. Файл PHP с виджетом обычно помещается в директорию шаблона, 44,45, но файл нужно загрузить через файл functions.php 46, где также должен находиться код 47 для регистрации области виджета. Поэтому, чтобы использовать виджеты, боковая панель должна быть зарегистрирована. Название может быть обманчивым, но созданиебоковая панель, мы получаем место для группировки и установки виджетов Общая структура Виджеты определяются в WordPress в файле wp-includes/widgets.php. Благодаря определению у программиста есть возможность использовать виджеты без необходимости вставлять целые классы (class) class example extends WP_Widget < конструкция общедоступной функции() < // Конструктор parent::struct( ‘example’, // HTML-идентификатор ( ‘Example’, ‘somnium’), // Массив имен( ‘description’ =>( ‘Description’, ‘somnium’),) ); > общедоступная функция виджета ($args, $instance) < // вывод в HTML >форма публичной функции ( $instance ) < // форма ввода >общедоступная функция update($new_instance, $old_instance) < // обработка вновь введенных данных >> функция register_example() < register_widget(‘Пример’); //регистрируем созданный виджет >add_action( ‘widgets_init’, ‘register_example’ ); Код #4: Базовая структура виджета 44 Применяется, если виджет является частью шаблона. Если он является частью плагина, он помещается в соответствующий каталог. 45 Как добавить виджеты в тему WordPress с помощью нижнего колонтитула. Советы и рекомендации HQ [онлайн] [цит. ]. Доступно из: 46 Или другой файл, загружаемый через functions.php. 47 Его можно разместить где угодно, но данный файл необходимо снова загрузить в functions.php. 14

15 плотно вставьте в шаблон. 48 Чтобы их можно было использовать, существующий класс WP_Widget должен быть расширен (PHP расширяет 49 ) с помощью пользовательского класса, который снабжает его необходимыми данными. Поэтому для правильной работы необходимы следующие части: конструктор и виджет функции, форма и обновление. Кроме того, виджет должен быть зарегистрирован и инициализирован через add_action Типы полей ввода виджета Поле ввода — это тип ввода, в который пользователь вводит необходимые данные. Поля ввода находятся в интерфейсе настройки и специфичны дляотдельные виды виджетов. Каждый виджет предлагает уникальную комбинацию полей ввода, которые, в зависимости от их настроек, будут отображать желаемый результат для посетителя страницы. Среда разработки Widgets API, в которой реализованы виджеты, в отличие от Theme Customization API 50.51, не содержит предопределенных типов полей ввода, т.е. что вам нужно создать весь код для взаимодействия с пользователем. Поля ввода для использования в виджетах можно разделить на 2 группы: общие поля (текст, число, область текста, флажок, выделение) и специализированные поля (загрузка изображения, выбор цвета, рубрики, значки, единицы измерения). Общие поля представляют собой такие поля, которые не предназначены для какой-то одной конкретной настройки и в то же время не имеют функций, выходящих за рамки HTML-кода. Специализированные поля ориентированы на определенный тип входных данных в контексте заданной настройки. Поля ввода реализованы как функции PHP, которые используют эхо для создания настроек формы. Аргументы с идентификатором, значением и именем поля всегда передаются в функцию из класса виджета, остальные аргументы различаются в зависимости от типа поля. Плагин Codestar WP Color Picker 52 jquery использовался для создания палитры цветов, а Font Awesome Icon Picker WordPress/widgets.php использовался для выбора иконок. Github.com [онлайн] [цит.]. Доступно с: 49 PHP: расширения — вручную. PHP.net [онлайн]. Дата неизвестна [цит.]. Доступно из: 50 API настройки тем. Кодекс WordPress [онлайн]. Дата неизвестна. [чувство]. Доступно из: 51 См. главу 3.2 Система настроек. 52 Подробнее здесь: 53 Подробнее здесь: 15

16 функций fieldproto($name, $this, $that, $var)< эхо’

‘.esc_attr ( $name, ‘somnium’ ).’

‘;> Код #5: Поле ввода текста Описание: Простейшая функция, предназначенная для поля ввода текста. Аргументы $this, $that, $var представляют собой идентификатор, имя и значение параметра. Рисунок № 2: Выбор значкаиз Font Awesome Изображение №3: Выбор рубрики Изображение №4: Поле для ввода числового значения с единицами измерения Изображение №5: Выбор цвета с прозрачностью 16

17 3.1.2 Виджет Spin Назначение этого виджета — показать посетителю анимированную круговую диаграмму, выражающую проценты, введенные пользователем. Например, здесь могут отображаться статистические данные о веб-сайтах или информация о продуктах. Преимуществом Spin Widget является возможность анимировать ход загрузки процентов на круговой диаграмме. Благодаря выбранному решению он также поддерживает расширенную нелинейную анимацию прогресса CSS3. Настройка виджета не требует никаких технических знаний, вводимые в интерфейс данные обрабатываются и затем отображаются в HTML. Проценты передаются непосредственно в HTML-теге p, а продолжительность анимации — в атрибуте data-spin. 54 Строку с продолжительностью анимации получает JavaScript, где она обрабатывается таким образом, что JS генерирует ключевой кадр CSS3 55 анимации по заданному шаблону, который записывает в спин-заголовок <0% 100% > Код №6: Ключевая анимация под названием spin, которая вращает элемент на 360. Изображения №6,7,8: Демонстрация проблем, возникающих при поворотах одного элемента и их решение на последнем изображении К сожалению, как вы можете видеть на изображении № 6, самой анимации недостаточно для нормального функционирования. Анимация может поворачивать полукруг в такое положение, при котором правильно отображается только передняя часть полукруга. Для правильной работы необходимо добавить дополнительные элементы, которые будут закрывать части полукругов по мере необходимости, чтобы выступающая часть не была видна. Здесь снова возникает проблема, потому что, когда вы превысите 50%, вам придется переключать элементы покрытия. 56 Эту проблему можно было бы решить относительно легко, 57 если бы этот виджет не был анимирован или если бы его анимация была линейной. По этой причине необходимо написать функцию,который будет активно проверять, прошла ли анимация более 50%. На первый взгляд, в HTML допустимы 54 пользовательских атрибута данных. 55 Анимация определяется начальным и конечным состоянием. 56 Покажи одно, спрячь другое. 57 Если значение больше 50%, то скрыть/показать один из элементов. 17

18 кажется простым, но JavaScript (или библиотека jquery) не позволяет вам вернуть свойство CSS transform со значением поворота, с которым элемент был анимирован. Вместо этого преобразование возвращает матрицу, которую необходимо преобразовать обратно в угол. вращать (xdeg) = матрица (cos (x), sin (x), -sin (x), cos (x), 0, 0); Код №7: Распределение матриц в CSS для поворота в плоскости Рисунок №9: Графическое представление матриц для поворота по осям x, y, z, где θ — угол поворота Рисунок №10: Матрица, полученная после подстановки угла на предыдущем рисунке умножается на координаты точки Рисунок № 11: Формула для расчета матрицы угла z для поворота по оси Z. Угол α в радианах 18

19 В расчете использовалась функция арктангенса, поскольку арксинус или арккосинус возвращали бы неверные значения для определенных квадрантов, поскольку эти функции принимают одни и те же значения дважды в интервале 20 3.1.3 Запрос Widget Query, английское слово для запроса, относится к основному методу извлечения информации из базы данных MySQL, которая содержит большую часть данных, введенных пользователем. Это специальный запрос, который извлекает информацию из систем баз данных. Query Widget пытается создать раздел веб-сайта для отображения сообщений, опубликованных в отдельных категориях, а также обзор всех новостей. Идея заключается в том, чтобы виджет поддерживал миниатюру изображения и описание статьи. Виджет разделен на две части, первая слева содержит субтитры, отсортированные по дате добавления. Вторая часть справа состоит из превью-изображения 58 и короткогоинформативная метка, длину которой можно выбрать непосредственно в пользовательском интерфейсе виджета. В приведенном ниже блоке кода показан самый простой способ отображения любого сообщения независимо от его порядка и категории. Somnium также реализует дополнительную фильтрацию по категориям. Если он не используется, виджет запроса будет отображать сообщения из всех категорий. $args = массив(‘post_type’ => ‘сообщение’); $query = новый WP_Query($args); в то время как ($query->have_posts()) < >$query->the_post(); эхо get_the_title(); Код #9: Описание функции WP_Query: Показать все заголовки постов, добавленных на данный момент. Переменная $args устанавливает WP_Query в соответствии с заданными параметрами. К ним относятся, например, категории. The_post инициализирует сообщения, а get_the_title печатает их заголовок. Другая не менее важная функция позволяет задать количество отображаемых постов. С его помощью можно сократить количество обращений к базе данных, тем самым предотвратив ненужную перегрузку сервера в пики интернет-трафика. В качестве графического дополнения здесь используется стрелка в виде треугольника, которая информирует посетителя о том, какой пост с заголовком имеет видимое в данный момент изображение превью. Это делается с помощью jquery, который отображает треугольник только в том случае, если подзаголовок был наведен пользователем, выбранным при создании/редактировании сообщения. 59.Наведите(). Документация по jQuery API [онлайн]. Дата неизвестна [цит.]. Доступно с: 20

Читайте также:  Как начисто переустановить windows 10 без флешки

21 Во избежание размытых изображений или, наоборот, ненужной загрузки изображений со слишком высоким разрешением, для этого виджета был специально создан новый размер изображения в functions.php. Благодаря этому, после загрузки изображения на сервер, изображение автоматически обрабатывается и создается его копия в меньшем разрешении. Слайдер Слайдер 61 является одной из основных частей современного веб-сайта. Во-первыхон формирует первое и самое важное впечатление о посещении сайта. С помощью способа и качества обработки Somnium пытается избежать недостатков стандартных слайдеров 62. Поскольку в этом шаблоне он настроен таким образом, что может занимать все окно браузера, он становится самым важным элементом на веб-сайте. 63 Уже из первоначальных замыслов было ясно, что отображения текстов со ссылками будет недостаточно, поэтому наличие других функций оказалось необходимым. К ним относятся, например: автоматическое отображение самых последних сообщений в категориях, вставка видео в качестве фона или также анимация текста слайда. В следующих нескольких подразделах я постараюсь подробно описать эти функции Отображение постов Как и в случае с Query Widget, здесь используется класс WP_Query, который возвращает пост, соответствующий введенным пользователем параметрам. С помощью интерфейса можно изменить следующие параметры: количество слов отрывка (первые слова поста); столбец, из которого отображаются вклады; сколько постов будет отображаться (в порядке убывания); цвет кнопки, заголовка и метки; текст кнопки со ссылкой; загрузить дополнительное фоновое изображение. Поскольку для некоторых сообщений может не быть установленного миниатюрного изображения, для слайдера был добавлен фон по умолчанию 64, чтобы предотвратить отображение непривлекательного белого фона. 60 Эта функция уже предопределена WordPress, в частности, был добавлен размер в пикселях. 61 Элемент управления, содержимое которого корректируется с помощью смещения по горизонтали или вертикали. 62 Непрозрачность, сходство с рекламным баннером, неработоспособность на мобильных устройствах. 63 ЛАЯ, Пип. Первые впечатления имеют значение: важность отличного визуального дизайна. ConversionXL [онлайн]. Дата неизвестна [цит.]. Доступно: 64 Цветовой переход между оттенками серого. 21

22 Видео в качестве фона На первый взгляд, это имеет смыслэтого виджета может быть неочевидным. Статический фон, несомненно, предпочтительнее во многих случаях, но при правильном использовании видеофон может донести до посетителя гораздо больше. Хотя на бумаге этот элемент может выглядеть безупречно, в реальном развертывании он может столкнуться со многими проблемами, такими как: медленное подключение к Интернету, недостаточная вычислительная мощность и FUP. 66 Первые две проблемы со временем исчезнут по мере развития инфраструктуры данных и замены устаревшего оборудования. Третья проблема FUP в настоящее время 67 в первую очередь касается сотовых (мобильных) сетей, где большинство тарифов 68,69 некоторых операторов ограничены максимум несколькими ГБ данных. 70 Понятно, что форсировать это ограничение загрузкой страниц с автозапуском видео не очень уместно. Во избежание такой ситуации было реализовано обнаружение мобильных устройств Detect Mobile Browsers 71, конкретно в версии PHP, которая решает прямо в коде PHP виджета, является ли устройство, с которого осуществляется доступ, мобильным, т.е. смартфон, планшет и т. д. Однако эта функция не применяется, только пользователь решает через интерфейс виджета об отображении как в мобильных, так и в стандартных настольных браузерах. Для достижения максимальной гибкости виджета появилась возможность встраивать видео в нескольких разных форматах и ​​источниках. В теге HTML5 video 72 можно загружать видео в форматах MP4, OGG и WebM. Из вышеперечисленного наиболее рекомендуемым является формат MP4. Изображение № 12: Флажки для отображения слайдов 65 САЛА, Симоне. Советы по дизайну с фоновым видео. Sitepoint [онлайн] [цит.]. Доступно из: 66 Политика добросовестного пользователя, добросовестное использование сети, то есть ограничение объема данных, которые человек может загружать и загружать 67 Rok Mobile Internet. Vodafone.cz [онлайн]. Дата неизвестна [цит.]. Доступно с: 69 Мобильный Интернет.T-Mobile [онлайн]. Дата неизвестна [цит.]. Доступно с: 70 Многие операторы даже не предоставляют безлимитные тарифы 71 Более подробная информация: 72 Видео в формате HTML5. w3schools.com [онлайн]. Дата неизвестна [цит.]. Доступно с: 22

23, так как он обеспечивает наилучшую кросс-браузерную совместимость. 73 Пользователь может вставить ссылки на все эти форматы, из которых браузер посетителя впоследствии выберет тот, который он поддерживает. Существует также возможность загрузить начальный кадр видео, который будет использоваться временно, пока видео не запустится. Видео Youtube в качестве фона. Как следует из названия, еще один вариант видеофона — вставить видео с сервера YouTube. Видео встраиваются с помощью HTML-тега iframe. Чтобы избежать загрузки нежелательной рекламы, видео загружаются с домена youtube-nocookie.com, который, как и youtube.com, принадлежит Google. 74 Упомянутый домен также позволяет воспроизводить видеоролики без записи данных о посетителе сайта, на который было вставлено видео. Побочным эффектом является вышеупомянутое отсутствие рекламы. От пользователя интерфейса требуется только так называемый уникальный идентификатор видео Video_ID. 75 На этом настройки видео не заканчиваются, пользователь может выбрать качество видео, 76 включить бесконечный цикл, отключить звук видео и даже удалить черные полосы, вызванные разным соотношением сторон видео. Настройки качества и лупа производятся через параметры плеера, отправленные прямо на адрес. 77 API Youtube Iframe был специально интегрирован для отключения видео. 78 Удаление черных полос, вызванных разницей в соотношении сторон видео и окна браузера, было достигнуто простым использованием CSS-класса, который в зависимости от текущих настроек прикрепляется к видео. 73 Там же. 74 Whois-запись для Youtube-NoCookie.com. DomainTools [онлайн] [цит. ]. Доступно с: 75 например, с адреса — это уникальный кодSp2LwVGsWeE 76 (360p, 480p, 720p и 1080p) 77 API YouTube IFrame Player. Разработчики Google [онлайн]. Дата неизвестна [цит.]. Доступно по адресу: 78 Справочник по API проигрывателя YouTube для встраивания iframe. Разработчики Google [онлайн]. Дата неизвестна [цит.]. Доступно с: 23

24 3.1.5 Карты Google Неотъемлемой частью корпоративного или личного веб-сайта также является информация о местонахождении объекта. В случае заинтересованности посетитель веб-сайта должен иметь возможность легко и быстро найти эту информацию. Точно так же он должен быть достаточно заметным и, по возможности, стандартизированным в службе отображения местоположения. Вышеупомянутый стандартизированный сервис для этого проекта — Google Maps. Google Maps — одна из самых популярных 79.80 на рынке, а их Maps API 81 — самая популярная 82 из доступных. Встроить Карты Google на веб-сайт можно двумя способами. Первый из них, предназначенный для более нетехнических типов, использует HTML-тег iframe, код которого можно получить непосредственно из веб-интерфейса Google Maps. Карты, полученные таким образом, не предоставляют таких возможностей настройки и их ретроредактирование практически невозможно. Основным камнем преткновения является отсутствующая опция запрета масштабирования (приближения) карты перемещением колесика мыши, что становится существенной проблемой, если карты занимают значительную часть окна браузера, т. масштабирует карту. По этим причинам в конечном итоге стал использоваться Maps API. Была выбрана версия JavaScript Maps API, полностью названная Google Maps JavaScript API. 83 Чтобы иметь возможность использовать API, пользователь должен подать заявку на получение уникального ключа к API через веб-сайт Google 84, который позволяет отображать карты. Количество доступов и квот можно контролировать через проект с ключом. 85 В настоящее время реализовано отображение одной центральной меткиоб определенной широте и долготе, масштабе карты, типе фона карты (стандартный, гибридный, спутниковый и рельеф), цвете карты и насыщенности цвета карты. 79 ХЕТМЕР, Кен. Свежий новый интерфейс Maps API для всех миллионов сайтов. Блог для разработчиков Google [онлайн] [цит ]. Доступно: 80 HINKS, Джейми. Google Maps — самое популярное в мире приложение для смартфонов. ITProPortal.com [онлайн] [цит. Доступно с: 81 Начало работы с API Карт Google. Разработчики Google [онлайн]. Дата неизвестна [цит.]. Доступно из: 82 картографических API и мэшапов. ProgrammableWeb [онлайн]. Дата неизвестна [цит.]. Доступно с: 83 Google Maps JavaScript API. Разработчики Google [онлайн]. Дата неизвестна [цит.]. Доступно с: 84 Доступно с: 85 Ограничения использования JavaScript API. Разработчики Google [онлайн]. Дата неизвестна [цит.]. Доступно с: 24

25 функция initmap() < // Объект карты с настройками var centerpos = , var map = new google.maps.map(document.getelementbyid(‘gmaps’), < >); Атрибут HTML использовался для перемещения данных о местоположении и масштабировании из PHP в JavaScript, который несет информацию в следующей форме: широта_долгота/масштаб. После передачи в JS эта строка снова разбивается на переменные и форматируется в форме, приемлемой для API Карт. center: centerpos, scrollwheel: false, maptypeid: google.maps.maptypeid.hybrid, zoom: 5 // Маркер на карте var marker = new google.maps.marker(< >); карта: карта, позиция: центрпос > Код #10: Настройки Google Maps JavaScript API Описание: Базовые настройки карты через API для отображения карты с маркером. Примечание: это не предназначено для представления кода, используемого для отображения карт в виджете. Maps API допускает целый ряд других настроек,86,87 которые часто не применимы в этом проекте. Но это не значитчто использование API было бы плохим выбором. Его реализация позволяет легко расширять виджет карты в будущем другими разработчиками, которые могут делать это на основе лицензии GNU GPLv3. 88 Возможности настроек постоянно расширяются, в будущем будет добавлена ​​поддержка нескольких маркеров на карте. 86 Там же. 87 Отображение маршрута, тепловая карта и т. д. 88 Стандартная общественная лицензия GNU v3.0. Проект GNU — Фонд свободного программного обеспечения [онлайн] [цит ]. Доступно с: 25

26 3.2 Система настроек Наряду с виджетами настройки являются самой важной частью шаблона Somnium. Разработка настроек осуществляется в рамках Theme Customization API. 89 Интерфейс настройки называется Customizer. В отличие от виджетов, настройки которых применимы только к одному конкретному экземпляру, общие настройки действуют для всей веб-страницы. Их цель — определить общий вид веб-сайта. Настройки разделены на несколько групп: общие, шрифты, посты, страницы, слайдер, цвета, футер, шапка и пользовательский код CSS. Группы предоставляют широкий спектр возможностей настройки. В следующих нескольких подразделах будут описаны выбранные настройки из некоторых групп, чтобы можно было понять, как обрабатывается вывод и последующее отображение Ширина веб-страницы Настройки также включают возможность регулировки ширины тела веб-страницы, то есть обертки. Хотя это легко реализовать с точки зрения программиста, регулируя ширину обертки, вы можете добиться совершенно другого внешнего вида веб-сайта. Стандартная ширина 1170 px, используемая многими фреймворками (например, Bootstrap 90), непригодна для некоторых целей, поскольку более 50% пользователей Интернета владеют экраном с разрешением выше 91 px, из-за чего веб-страница не занимает всю ширину экрана. По этой причине была добавлена ​​опция ширины 1380 пикселей, чтобы хотя бы частично устранить такую ​​проблему.Боковые панели Somnium предлагает возможность определять расположение боковой панели на определенных типах страниц независимо друг от друга, т.е. что на главной странице может отсутствовать боковая панель. В поиске, рубриках, архивах он может быть справа, в постах слева и на 92 странице, например, справа. Боковая панель является общей для левой и правой позиции, нет необходимости иметь разные боковые панели для разных позиций. 89 API настройки тем. Кодекс WordPress [онлайн]. Дата неизвестна. [чувство]. Доступно от: 90 CSS. Bootstrap [онлайн]. Неизвестно [цитата]. Доступно с: 91 Топ-10 разрешений экрана рабочего стола с августа 2015 г. по январь StatCounter Global Stats [онлайн]. Неизвестно [цитата]. Доступно из: 92 пользовательских страниц. 26

27 3.2.3 Шрифты Выбор правильного шрифта является одной из наиболее важных частей веб-дизайна, выбор шрифта влияет на характер и атмосферу веб-сайта. 93 Таким образом, отключение выбора шрифта существенно ограничит использование шаблона и приведет к нежелательному визуальному сходству во всех установках шаблона Somnium. Решением является реализация коллекции Google Web Fonts с открытым исходным кодом, 94 которая объединяет более 700 шрифтов. 95 Пользователь имеет возможность выбрать один из этих шрифтов с помощью плагина jquery Fontselect 96, имя которого обрабатывается после выбора и нажатия кнопки «Сохранить». Впоследствии в заголовок HTML будет вставлена ​​ссылка на шрифт, находящийся в репозитории Google. По нажатию кнопки Применить имя шрифта будет отправлено по технологии AJAX 97 обратно на сервер, где будет запущен процесс, в ходе которого будет загружен файл Sass 98,99 с переменными, где по идентификатору установки будет выбрано значение переменной, на место которого будет записано имя шрифта. После этого запустится перекомпиляция CSS, в ходе которой будет восстановлен файл CSS, который будет содержать внесенные изменения. После завершения процесса пользователю будет показано уведомление об успешном завершении в браузере.Пользователь может обновить страницу, чтобы увидеть внесенные изменения. Весь описанный выше исходный код с комментарием на английском языке доступен в репозитории GitHub 100 в файле с адресом inc/customizer.php по строкам. причины: возможное столкновение со стилем из основного CSS файла может привести к кардинальному ухудшению впечатлений посетителя (user experience), шрифт будет меняться не так часто, как цветовая схема и код CSS будут более понятными. Somnium также поддерживает возврат к шрифтам по умолчанию в два клика. Процесс почти идентичен, за исключением того, что имена извлекаются из массива и все шрифты сбрасываются одновременно. 93 МЕЛЛАС, Калеб. Типографика и почему это важно для вашего сайта. Веб-сайт [онлайн]. Дата неизвестна [цит.]. Доступно на: 94 Google Fonts [онлайн]. Неизвестно [цитата]. Доступно по: 95 Там же. 96 Подробнее здесь: 97 jquery.ajax(). Документация по jQuery API [онлайн]. Дата неизвестна [цит.]. Доступно с: 98 Подробнее здесь: 99 Препроцессор CSS. 100 Репозиторий: 27

28 3.2.4 Цветовая схема Другой неотъемлемой частью настройки веб-сайта является выбор собственных цветов цветовой схемы. В отличие от шрифтов, которые изменяются через файл Sass, цвета, хотя они и представлены в виде переменных, изменяются более прямым способом, т. е. путем создания стилей CSS, вставленных непосредственно в заголовок HTML. Использование этого пути обеспечивает совместимость со всеми типами полей ввода, встроенными в API настройки темы. Настройка цвета поддерживается в формате HEX для фона веб-страницы, выделенного заголовка, выделенного содержимого страницы, текста поверх изображения, нижнего колонтитула, текста нижнего колонтитула. Формат RGBA также поддерживается для выделенного цвета кнопки и фона заголовка. Все цвета также можно настроить вручную в разделеДополнительные настройки находятся в разделе «Внешний вид» -> «Somnium», но имейте в виду, что настройки из настройщика имеют более высокий приоритет. Настройки сообщений и страниц. Somnium также поддерживает изменение внешнего вида сообщений и страниц как глобально, так и локально. Глобальные настройки находятся в Настройщике и служат настройками по умолчанию для всех сообщений или страниц. Параметры настройки — расположение боковой панели (справа/слева/нигде) — графический стиль 101 (современный/классический) — смещение текста для классического стиля 102 (числовое значение в пикселях) — стиль макета (как крупное изображение поста/как узкое изображение страницы) — отображение метаинформации (да/нет) — контрастный слой для лучшей читаемости заголовка (да/нет) — отображение даты публикации (да/нет) — отображение навигации между постами (да/нет) — отображение блока с информацией об авторе (да/нет ) — отображать инициалы (да/нет) 101 Доступно только для поста. 102 Доступно только для публикации. 28

29 Значение по умолчанию после установки почти всегда 103 первый выбор, изменение приведет к сбросу внешнего вида всех сообщений или страниц, только если в их локальных настройках выбрано значение по умолчанию, в противном случае локальные настройки будут предпочтительнее Другие настройки В В дополнение к описанным выше настройкам Somnium позволяет изменять внешний вид и поведение слайдера, верхнего и нижнего колонтитула. Все эти части поддерживают изменение уже описанной цветовой схемы. Всего в Slider предусмотрено 3 основные настройки. Вы можете установить продолжительность слайда в миллисекундах, высоту слайдера в процентах от области просмотра. 104 Последняя настройка позволяет полностью убрать ползунок. Заголовок также предлагает 3 настройки. Первый из них активирует скрипт, который в зависимости от положения посетителя на странице выделяет в заголовочном меню пункт с вкладкой HTML 105, соответствующий разделу, в которомпосетитель находит. Другой активирует контрастный слой, выделяя в некоторых случаях трудночитаемые элементы в меню заголовка. Последняя настройка используется для выбора поведения всего заголовка. Есть возможность либо скрыть шапку при прокрутке вниз и снова показать при прокрутке вверх, либо вообще не скрывать и оставлять видимой на все время посещения страницы. В нижнем колонтитуле можно изменить текст копирайта и его год. Просто введите год создания авторского права в поле года, скрипт PHP автоматически изменит формат 106 и он будет автоматически обновлен таким образом, чтобы год окончания авторского права соответствовал текущему году. Особым типом настройки является возможность добавления собственного кода CSS, тем самым изменяя неизменяемые аспекты Somnium. Вставка вывода в заголовок HTML реализована таким образом, что вставленный сюда код перезаписывает все предыдущие стили из файлов CSS. 103 За исключением стиля макета, который по умолчанию постраничный и пост за постом. 104 Область, в которой отображается содержимое. 105 HTML-элемент. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: При вводе, например, результирующий формат будет (с текущим годом 2016) При вводе 2015 результат будет

30 3.2.7 Компиляция и минификация Шаблон Somnium включает инструменты для компиляции Sass 107 и минимизации CSS и JS. 108,109 Эти инструменты ускоряют загрузку веб-страниц за счет уменьшения размера и количества файлов. Компилятор PHP Scssphp 110 использовался для компиляции файлов Sass в стили CSS, а JShrink использовался для минимизации. 111 Управление компилятором и минификатором находится в разделе Внешний вид->Дополнительные настройки, где можно выбрать следующие типы действий: перекомпиляция CSS, перекомпиляция сжатого CSS, минификация JavaScript. Любое из этих действий приведет к потере изменений, сделанных пользователем непосредственно в данном файле. ПользовательИзменения CSS можно вносить с помощью уже упомянутого пользовательского поля кода CSS. Компиляция языка Sass включает в себя как слияние файлов Sass, так и интерпретацию синтаксиса, специфичного для Sass. 108 Минификация — это процесс удаления всех лишних символов из исходного кода без изменения функциональности. 109 Минификация (программирование). Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: См. главу Scssphp. 111 См. главу JShrink. 112 См. главу Другие настройки. 30

31 3.3 Многоязычие Поддержка нескольких языков или многоязычие является одной из основных функций этого шаблона. Возможность отображать содержимое веб-сайта на родном языке посетителя повышает 113 114 интерес к веб-сайту, доверие к нему и потенциально может увеличить продажи, если веб-сайт является интернет-магазином. 115 С распространением Интернета в странах второго и третьего мира также увеличивается доля посетителей, чей родной язык не английский. 116 Независимо от того, предназначен ли контент этого шаблона для европейских или иностранных посетителей, требования к сложности и качеству многоязычия высоки. Сам WordPress локализуется с помощью добровольных команд локализации. Есть локализация для чешского языка, но на сегодняшний день команда чешских локализаторов не смогла обновить версию перевода для полной совместимости с WordPress версии 4.4 (выпущенной 8 декабря 2015 г.), из-за чего где-то появляются непереведенные строки . Поэтому я снимаю с себя ответственность за эти недостатки. Перевод сайта состоит из двух частей: перевод статического 117 текста и собственно динамического 118 контента. Статические элементы в WordPress можно перевести с помощью встроенной системы gettext. Gettext 119 — это инструмент локализации, разработанный проектом GNU. Инструмент работает следующим образом: текстовые строки, которые необходимо перевести,локализуется с использованием текстового домена и имени функции, в которой находится домен; по заданному языку ищется файл с переводом (.mo), из которого переупорядочиваются строки. Этот файл 120 создается путем компиляции после 121 файла, который был создан приложением 122 путем загрузки всех файлов, содержащих строки, подлежащие переводу. 113 «Локализация Интернета» выбрано лучшим приложением месяца. Локализация Интернет [онлайн] [цит. ]. Доступно из: Преимущества локализации веб-сайта. Квинтэссенция [онлайн]. Дата неизвестна [цит.]. Доступно по: Там же. 116 пользователей Интернета в мире по языку. Internet World Stats [онлайн] [цит. Доступно из: Например: настройка меток, кнопок, элементов навигации. 118 сообщений, страниц. 119 получить текст. Проект GNU [онлайн]. Дата неизвестна [цит.]. Доступно из: mo Machine object. 121.по переносному объекту. 122 Например Поедит. 31

Читайте также:  Как установить pages на windows

32 К переводу динамического контента веб-сайтов CMS WordPress можно подходить несколькими способами. 123 Большинство методов связаны с использованием внешнего подключаемого модуля, который управляет переводами. Первый способ, создание нескольких установок CMS, позволяет широко управлять отдельными переводами, разделяет языковые версии, но из-за разделения увеличивает требования к управлению. 124 Другим является машинный перевод с использованием внешних сервисов, 125 который, в отличие от первого, полностью автоматизирован, но именно из-за автоматизации ему не хватает точности и носитель языка обязательно распознает, что это машинный перевод. Третий, несколько лучший способ — это машинный перевод с возможностью редактирования, но недостатком является прямая связь между оригиналом и переведенным текстом, в результате чего при малейших изменениях теряется корректировка перевода. В-четвертых, все языковые версии в одном посте — это вариант ручного перевода, при котором языковые мутации хранятся в общем посте и обрабатываются при отображении таким образом, чтозагружается только содержимое для текущего языка. Этот метод удобен для редактирования, но с другой стороны, возможная деинсталляция плагина приводит к хаосу и необходимости очистки базы данных от языковых мутаций. Последний, пятый вариант устроен таким образом, что языковые мутации в нем сохраняются как отдельные вклады, взаимосвязанные между собой. Этот метод гарантирует, что содержимое будет по-прежнему пригодно для использования после удаления, но если это решение будет развернуто на страницах с большой базой данных 126, это приведет к его размножению и, таким образом, вызовет заметное замедление. Поскольку этот шаблон не предназначен для использования с огромным количеством многоязычного контента, умножение нескольких десятков страниц не представляет проблемы. echo _(«Меня зовут %s.\n», my_name); Код #11: Пример строки ввода в строке 36 в файле name.php #: name.php:36 msgid «Меня зовут %s.\n» msgstr «Меня зовут %s.\n» Код #12 : Вывод в cs_cz.po с чешским переводом 123 Многоязычный WordPress. Кодекс WordPress [онлайн]. Дата неизвестна [цит.]. Доступно из: Пользователь управляет таким количеством установок WordPress, сколько у него языковых мутаций. 125 Например: Google Translate. 126 Например: интернет-магазин. 32

33 3.3.1 Polylang. Логичным выбором является использование одного подключаемого модуля, который выполняет сложное управление многоязычным контентом. Для этих целей был выбран плагин Polylang 127, который подходил для реализации благодаря своей обширной документации 128. Плагин распространяется под лицензией GNU GPL, Polylang не является прямой частью шаблона, пользователю предлагается установить плагин после активации шаблона, без него невозможно использовать все возможности, связанные с переводом сайта содержание, описанное в этой работе. Однако Somnium можно использовать и без плагина (т. е. в одноязычном режиме). Существенной особенностью этого плагина является возможность выбора языков для отдельных экземпляров виджетов, т.е. что три виджета с тремя разными содержимымиони могут отображаться для трех разных языков. Аналогично, некоторые виджеты могут быть общими для всех языков. Параметр языка присутствует для каждого виджета в этом шаблоне. Это позволяет пользователю управлять многоязычным контентом намного быстрее, чем создание отдельных установок WordPress. Помимо перечисленных функций, Polylang также опосредует переключение языка сайта, что реализовано в виде ненумерованного списка (HTML-тег ul), элементы которого либо содержат название языка, либо флаг, связанный с данный язык или его мутация. pll_the_languages(array(‘show_flags’=>1, ‘show_names’=>0, ‘hide_current’=>1)); Код №13: Функция Polylang для отображения переключателя языка с аргументами: показать флаги, показать название языка, скрыть текущий Указанные флаги являются частью Polylang, но их качество недостаточно для нужд этого шаблона. В дополнение к низкому качеству флаги также были стандартизированы для единого соотношения сторон, что в некоторых, хотя и маловероятных, случаях могло сбить с толку. 130 Размер переключателя языка рассчитан на флаги с разрешением не менее 60 пикселей 131 по горизонтали. 132 флага, входящие в состав плагина, имеют разрешение всего 16 11 пикселей. Решение проблемы заключается в добавлении пользовательских флагов. Полиланг [онлайн]. Дата неизвестна [цит.]. Доступно из: Документация. Полиланг [онлайн]. Дата неизвестна [цит.]. Доступно по: Там же. 130 Например, флаги Индонезии и Монако (оба имеют верхнюю красную и нижнюю белую полосу) отличаются только соотношением сторон в пикселях для экранов Apple Retina. 132 Количество пикселей по вертикали может варьироваться в зависимости от соотношения сторон флага. 33

34 в более высоком разрешении. Polylang запоминает этот вариант и позволяет загружать свои собственные флаги, поэтому просто создайте папку wp-content/polylang для загрузки флагов в формате PNG дляязыки, названные в соответствии с правилами локали, 133 т. е., например, для чешского cs_cz, для британского английского en_gb, для американского английского en_us. Чтобы пользователя не беспокоила необходимость создания папки и загрузки файлов по FTP, шаблон умеет выполнять эти действия полностью автоматически. Шаблон проверяет, активен ли плагин, если да, то переходит к следующему действию. Создаёт папку wp-content/polylang и с помощью chmod 134 меняет права на 0755, 135 потом копирует все файлы из папки темы. Весь этот процесс произойдет только один раз за все время установки шаблона и только первый раз при соблюдении всех условий. 136 Сброс возможен только путем удаления темы, редактирования базы данных или вмешательства в саму функцию. функция do_the_magic() < $src = get_template_directory().’/images/flags/’; если (!file_exists(wp_content_dir.’/polylang/’)) < mkdir(wp_content_dir.’/polylang/’, 0755, true);>$dst = WP_CONTENT_DIR.’/polylang/’; $files = glob(get_template_directory().’/images/flags/*.*’); foreach($files as $file) < $file_to_go = str_replace($src,$dst,$file); копировать($file, $file_to_go);>> Код №14: Функция do_the_magic, принцип работы которой был описан выше 133 Locale. Википедия [онлайн] [цит.]. Доступно из: chmod. Википедия, бесплатная энциклопедия [онлайн] [цит. Доступно из: Права: пользователь на чтение, запись, выполнение; прочитать группу, запустить; мир (другое) читай, беги. 136 Плагин активен, а функция еще не запущена. 34

36 3.4 Отзывчивый веб-дизайн Отзывчивость — это термин, который относится к тем свойствам веб-страницы, которые адаптируются к типу устройства, на котором они отображаются. 137 Адаптивные страницы оптимизированы для максимального удобства просмотра на различных устройствах. 138 Эта цель достигается путем стилизации HTML-документа. Основные моменты адаптивного дизайнаявляются: гибкие изображения гибкая структура Медиа-запросы 139 CSS3 К реализации можно подойти двумя способами. 140 Первый способ — создать собственный стиль, второй — использовать фреймворк. 141 Был выбран самый распространенный в этой области 142 фреймворк Bootstrap. 143 Из-за характера сети 144 наиболее полезной функцией Bootstrap является его система Grid, 145 которая позволяет использовать предопределенные классы CSS для установки ширины объектов HTML, которая изменяется в зависимости от текущей ширины области просмотра 146,147 (окна) так что контент остается читаемым и четким даже на самых маленьких устройствах. Реализация адаптивного дизайна в этом шаблоне заключается в использовании всех пунктов, упомянутых выше. Расположение виджетов настраивается в зависимости от ширины экрана. Для выбранных виджетов пользователь может выбирать между несколькими предопределенными значениями ширины, которые, в зависимости от его решения, интерпретируются как класс CSS, определенный Bootstrap, например: col-137 Адаптивный веб-дизайн. Википедия [онлайн] [цит.]. Доступно с: смартфонов, ноутбуков, нетбуков, планшетов и т. д. Правило 139. w3schools.com [онлайн]. Дата неизвестна [цит.]. Доступно из: Отзывчивый веб-дизайн CSS. w3schools.com [онлайн]. Дата неизвестна [цит.]. Доступно из: Программная среда, используемая для облегчения разработки программных проектов. 142 Бутстрап. Bootstrap [онлайн]. Дата неизвестна [цит.]. Доступно по: Там же. 144 Блокирует виджеты, сгруппированные в воображаемой сетке. 145 CSS Bootstrap. Bootstrap [онлайн]. Дата неизвестна [цит.]. Доступно из: область, в которой отображается содержимое. 147 Отзывчивый веб-дизайн — Окно просмотра. w3schools.com [онлайн]. Дата неизвестна [цит.]. Доступно с: 36

37 md Используя упомянутый пример, элемент будет отображаться с шириной 6 столбцов (или 50% 149 ) на настольных компьютерах. На небольших устройствах столбцы перегруппированы следующим образом.таким образом, что каждый из них будет иметь ширину, равную 100% родительского элемента. Это поведение можно изменить, добавив дополнительные классы CSS. 150 Изображение № 13: Использование сетки Bootstrap Изображение № 14: Пример адаптивного дизайна на блоках веб-сайта 148 Collumn (столбец); ярлык md (здесь для рабочего стола), указывающий, где будет отображаться форматирование; 6 ширина виджета в количестве столбцов (100% ширина = 12 столбцов). 149 Относительная ширина относительно ширины родительского элемента. 150 Например: col-xs-6 (для смартфонов), col-sm-6 (для планшетов) и col-lg-6 (для больших экранов настольных компьютеров). 37

38 3.5 Реализация выбранных внешних библиотек В этой главе описывается, как реализовать выбранные сторонние библиотеки ScrollReveal.js ScrollReveal.js — это библиотека 151 JavaScript с открытым исходным кодом, которая используется для отображения элементов веб-страницы, когда они 152 попадают в область просмотра. 153,154 Его функция — заинтересовать посетителя и избавить страницу от статического впечатления. 155 По сравнению с другими решениями, 156 предлагает множество настроек с очень простой конфигурацией. Простота настройки достигается за счет использования основных английских слов 157,158 в качестве команд анимации. Инструкции вставляются в HTML-атрибут data-sr.

39 3.5.2 Owl Carousel Owl Carousel — это подключаемый модуль jquery 159, содержащий набор каруселей или ползунков. 160 Sliders — адаптивные, настраиваемые, оптимизированные для сенсорных устройств и совместимые со старыми браузерами. 161 Плагин был использован при создании виджета «Карусель», способного отображать элементы, 162 автоматически прокручивая их. Внешний плагин был предпочтительнее из-за более высокой надежности и широких возможностей настройки. Описанный выше скрипт, использованный для создания слайдера, был бы совершенно неуместен, поскольку не позволяет прокручивать или отображать сразу несколько элементов. Также разработка собственногоподобное решение не рассматривалось, так как его хватило бы на отдельный проект из-за его сложности. Рисунок №15: Пример использования одной из каруселей TGM Plugin Activation TGM Plugin Activation 163 — это PHP-библиотека, позволяющая подключать, рекомендовать, запрашивать, загружать, устанавливать плагины, необходимые или рекомендуемые для правильного функционирования шаблона WordPress. Типичным вариантом использования в этом шаблоне является зависимость от плагина Polylang. Без него невозможно использовать некоторые ключевые функции, которые рекламируются. Плагин Polylang не поставляется напрямую с шаблоном, его должен установить пользователь. Вот здесь и начинается активация плагина TGM. Чтобы пользователю не пришлось устанавливать плагин вручную, после установки шаблона ему предлагается установить и активировать Polylang уведомлением. Как правило, Plutos может быть связан с шаблоном в виде ZIP-архива или может быть связан с репозиторием WordPress, откуда в противном случае подключается библиотека JavaScript. 160 Сова Карусель. Сова Карусель [онлайн]. Дата неизвестна [цит.]. Доступно по: Там же. 162 изображения с текстом или только изображения. 163 Активация плагина TGM. Активация плагина TGM [онлайн] [цит. Доступно с: 39

40 загрузок вручную или даже в любое хранилище в Интернете. 164 Затем процесс установки и активации полностью контролируется активацией подключаемого модуля TGM, проводя пользователя через отдельные этапы. Цель parallax.js — создать впечатление пространственной глубины при прокрутке страницы. Плагин используется для создания виджета Call To Action, текст и фон параллакса которого должны заинтересовать пользователя настолько, чтобы он кликнул кнопку в виджете для перехода на целевую страницу. Вставка движущегося фона увеличивает вероятность интереса (человеческий глаз имеетвероятно, так же, как и клетки глаз низших животных, которые позволяют ему обнаруживать движение. Файлы становятся запутанными, редактирование 170 становится очень требовательным. CSS по своей природе не может работать с переменными, циклами и даже не допускает вложенности. 171 Недостатки могут быть в некоторой степени устранены путем реализации препроцессора CSS. В этом проекте я решил использовать препроцессор Sass. 172 Выбранный компилятор называется scssphp. 173 Scssphp — это реализация Sass с синтаксисом SCSS, полностью совместимая с CSS. 174 Компилятор доступен в виде одного PHP-файла, что упрощает его использование. 164 Настройка TGMPA для использования с вашей темой/плагином. Активация плагина TGM [онлайн] [цит. Доступно на: Parallax.js. Гитхаб [онлайн]. Дата неизвестна [цит.]. Доступно по: Там же. 167 Параллаксная прокрутка. Википедия [онлайн] [цит.]. Доступно: 3D-моделирование глубины с использованием 2D-слоев с различной скоростью прокрутки. 169 Вашингтонский университет в Сент-Луисе. Луи. (2015, 16 июня). Датчики обнаружения движения глаза идентифицированы. ScienceDaily. Получено 16 декабря 2015 г. Почти 2000 строк кода CSS в одном файле нельзя считать ясным. 171 Вложение, организация логических блоков кода. 172 Сасс. Sass: Syntactically Awesome Style Sheets [онлайн]. Дата неизвестна [цит.]. Доступно из: Компилятор SCSS в PHP. scssphp [онлайн] [цит.]. Доступно из: Это означает, что допустимый код CSS также является допустимым кодом SCSS (ранее использовавшийся синтаксис Sass немного отличается). 40

41 Компилятор встроен в шаблон таким образом, что он позволяет пользователю перекомпилировать все SCSS в один файл CSS одним нажатием кнопки. У пользователя есть выбор из двух разных вариантов компиляцииспособ форматирования записи. Первый предлагает вложенную нотацию, которая форматирует стиль в стандартную нотацию CSS, где каждый атрибут имеет свою строку и имеет отступ в соответствии с уровнем вложенности. Второй вариант сжатия игнорирует строки и объединяет все стили в одну строку. Следовательно, такой код практически не читается человеком, 175 но на размере файла экономится несколько десятков процентов. 176 Кроме этих вариантов, существуют и другие способы форматирования компактного и развернутого, отличия от уже описанных минимальны, а потому они не реализованы в таком виде, чтобы пользователь мог их использовать по нажатию кнопки. функция recompile_action()< require_once DIR. «/inc/scss.inc.php»; $scss = новый scss(); // Установить путь по умолчанию $scss->setimportpaths(get_template_directory().»/sass»); // Загрузить файл в переменную $scssin = file_get_contents(get_template_directory(). «/sass/style.scss»); // Компиляция $cssout = $scss->compile($scssin); // Вывод в style.css file_put_contents(get_template_directory().»/style.css»,$cssout); > Код №18: Код компилятора PHP с загрузкой файла и выводом в стиле CSS 175 Файл: SASS_REFERENCE. Документация по Sass [онлайн] [цит. Доступно из: во вложенной версии размер style.css этого шаблона (v0.5.6) составлял 37 КБ, а при сжатии — только 26 КБ. Общая экономия составляет 11 КБ или 42%. 41

42 Рисунок №16: Элемент управления перекомпиляцией, расположенный в разделе Внешний вид->Somnium Editor Файлы SCSS WordPress изначально позволяет редактировать файлы HTML, CSS, PHP, TXT. 177 Он не знает, как быть с JavaScript или Sass, но тот факт, что этот функционал не поддерживается нативно, не означает, что его нельзя создать с помощью встроенных инструментов. Редактируя SCSS, пользователь получает доступ к гораздо большему количеству (часто менее важных) настроек, чем можно редактировать вНастройщик. Функция wp_editor 178 рендерит именно такой редактор, в который можно загружать данные для редактирования. В этом случае данные будут загружены из файла _variables.scss, который содержит переменные для полной настройки страницы. Как упоминалось ранее, существует больше настроек, которые часто требуют дополнительных знаний для настройки 179, чем у среднего пользователя WordPress. После загрузки пользователь может редактировать данные. Когда он решает сохранить данные, он нажимает кнопку, которая, используя AJAX 180 для технологии jquery, отправляет данные обратно на сервер, где они обрабатываются и сохраняются обратно в файл. Если все прошло хорошо, AJAX запускает обратный вызов, который 181 обновляет страницу. Преимуществом перед PHP-методами GET и POST является уверенность в том, что если страница начнет обновляться, то у пользователя уже есть данные на сервере, и нет риска потерять важные данные в случае ошибки PHP. Если AJAX по какой-то причине дает сбой, единственное, что замечает пользователь, — это сломанную кнопку, которая позволяет ему сохранить сделанные им изменения (например, в текстовом редакторе). 177 Редактирование файлов. Кодекс WordPress [онлайн]. Дата неизвестна [цит.]. Доступно из: Справочник по функциям/редактор wp. Кодекс WordPress [онлайн]. Дата неизвестна [цит.]. Доступно: Глубокое знание CSS и его поведения в HTML. 180 jquery.ajax(). Документация по jQuery API [онлайн]. Дата неизвестна [цит.]. Доступно из: Callback (компьютерное программирование). Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно с: 42

43 Сброс настроек Во всех случаях файл _variables.scss, редактирование которого было описано в предыдущем разделе, резервируется с исходными настройками, чтобы его можно было восстановить. Бэкап реализован в виде файла резервной копии _variables_failsafe.scss, из которого после нажатия кнопки воспроизводится содержимое в _variables.scss. Файл защищен ограниченными правами. Только сам пользователь имеет правофайл читать и запускать, группа и другие не имеют прав на файл JShrink JShrink — это минификатор JavaScript, написанный на PHP. 183 Как и в случае с CSS, JavaScript может быть доставлен посетителю в минимизированном виде, то есть без ненужных строк, отступов и комментариев. 184 Причина реализации в шаблоне очень проста. Если бы опытный пользователь изменил фрагмент JavaScript, ему пришлось бы сделать это либо непосредственно в предварительно минифицированном файле, либо вручную минимизировать файл после редактирования с помощью веб-службы. Оба варианта не совсем подходят, поэтому и был реализован JShrink. Одним щелчком мыши файл минимизируется, и пользователю не нужно ни о чем беспокоиться. функция minifyjs_action() < // Загружаем JShrink include_once(get_template_directory(). ‘/inc/jshrink.php’); // Получить файл $js = file_get_contents(get_template_directory(). ‘/js/script.js’); // Сократить $minifiedcode2 = \JShrink\Minifier::minify($js); // Вывод в файл file_put_contents(get_template_directory(). ‘/js/script.min.js’, $minifiedcode2); >Код №19: действительно простое использование JShrink, которое упрощает редактирование JavaScript. 182 chmod -rx (0500) 183 JShrink. Гитхаб [онлайн]. Дата неизвестна [цит.]. Доступно из: Комментарии, разделенные символом /*! и!*/ сохраняются. 43

44 3.5.7 jquery JQuery — это библиотека JavaScript, реализующая улучшенную обработку объектов, событий и анимации. 185 JQuery совместима с разными браузерами, используется и может использоваться во многих веб-системах, 186 отчасти благодаря бесконфликтному режиму. , 187 188, которые мы можем найти, например, в WordPress. Чтобы код для WordPress не нужно было переписывать в неконфликтном режиме, можно завернуть код jquery в обертку, в которой можно разместить стандартный код, ярлык $ внутри будет доступен только jquery. (функция($) <//Код, вставленный сюда, будет вести себя как jquery без режима конфликта. var x = $(‘.object’).outerheight(); >)(jquery) Код № 20: Пример использования $ в неконфликтном режиме 185 jquery. jquery [онлайн]. Дата неизвестна [цит.]. Доступно по: Там же. 187 jquery — Метод noconflict(). w3schools.com [онлайн]. Дата неизвестна [цит.]. Доступно из: Режим, в котором аббревиатура по умолчанию для объекта jquery $ заменяется словом jquery. Этот режим используется в ситуациях, когда $ используется несколькими библиотеками, чтобы избежать конфликтов. 44

45 3.6 Развертывание шаблона Шаблон Somnium еще не находится в официальном репозитории шаблонов WordPress Theme Directory на момент написания. 189 Причина в длительном процессе проверки и утверждения, который может занять до 4 месяцев, даже если обработка проходит гладко. 190 Эта ситуация вызвана длинной очередью, в которой по состоянию на март 2016 года находилось около 500 человек. Временное отсутствие в каталоге тем WordPress делает невозможным официальное распространение, что резко снижает вероятность распространения шаблона. По крайней мере, частичная альтернатива предоставляется GitHub, который, таким образом, может служить платформой распространения и системой управления версиями одновременно. Репозиторий Somnia на GitHub доступен по адресу: Zvonek Studentský magazín Gymnázia Třebíč Однако отсутствие сети распространения не означает, что шаблон нигде не развернут. На данный момент наиболее значительным использованием является веб-сайт школьного журнала Gymnázia Třebíč Zvonek. На сайте размещаются статьи и целые номера журнала «Звонек». Изображение WordPress № 17: журнал Bell Student Gymnázia Třebíč ( 189 Доступно здесь: Действительно на дату

46 вместе с Somnie обеспечивает понятную систему веб-управления, подходящую даже для неопытных пользователей с веб-администрированием. На сайте также представлены уникальные скрипты, реализующие хранилище данных OneDrive всообщения Somnium Мощная тема WordPress Шаблон также используется на официальном сайте somnium.8u.cz. Он служит презентацией возможностей и функций шаблона, здесь демонстрируются некоторые виджеты, а также имеется полная документация на английском языке. Сайт работает в двуязычном режиме (английский и чешский). Изображение #18: Мощная тема WordPress Somnium ( 46

47 4 Результаты Результатом этой работы является шаблон Somnium для редакторской системы WordPress. Шаблон адаптивный и поддерживает отображение на смартфонах, планшетах и ​​других устройствах. Пользовательский интерфейс доступен на английском и чешском языках, шаблон поддерживает перевод и на другие языки.Перевод контента сайта и переключение между языковыми версиями реализовано с помощью реализации плагина Polylang. Главная страница полностью настраиваема, пользователь может создать ее, используя некоторые из 25 виджетов, включенных в этот шаблон. Можно изменить внешний вид постов и страниц, создать анимацию, связанную с прокруткой страницы, вставить собственный код CSS. Somnium соответствует стандартам безопасности, установленным для шаблонов WordPress, и его выходные данные в формате HTML действительны. Проверено службой проверки разметки W3C, подробнее см. https://validator.w3.org/. 47

48 5 Обсуждение После нескольких месяцев интенсивной разработки Somnium достиг состояния, в котором он выполняет все ранее поставленные задачи. Однако выполнение целей не предрасполагает шаблон к совершенству, а лишь закладывает основу, на которой возможно дальнейшее построение и улучшение шаблона. Из главы 3.6 Развертывание шаблона следует, что необходимо обеспечить лучшее распространение шаблона. Вышеупомянутое расположение в каталоге тем WordPress или на GitHub является одним из решений. Отсутствие обратной связи с пользователем также является проблемой, которая логически отсутствует, если шаблон не расширен. Потому что, помимо самой разработки шаблона, я такжебудучи его активным пользователем, я смог сразу же исправить выявленные недостатки. Шаблон разработан не какой-либо командой, а только мной, поэтому некоторые функции не были реализованы в полной мере. Я пытался (и пытаюсь) создать шаблон таким образом, чтобы он был расширяемым. Выбор расширенных фреймворков и библиотек — одна из частей такой концепции. Идея состоит в том, что другие разработчики также могут присоединиться к разработке шаблона и легко сориентироваться. 5.1 Сравнение с конкурентами В этой главе основное внимание уделяется сравнению шаблона Somnia с другими шаблонами, доступными в репозитории тем WordPress. Образец, выбранный для сравнения, представляет собой популярные шаблоны с аналогичным таргетингом на Somnium Sydney. Шаблон Sydney 193 разработан athemes, 194 ориентирован на корпоративные веб-презентации, 195 который пытается предложить ряд параметров настройки. Сразу после установки и активации на странице готов демонстрационный контент, который пытается продемонстрировать некоторые преимущества этого шаблона. Неподвижная полоса вверху почти идентична таковой в Somnium, но при ближайшем рассмотрении обнаруживаются различия. Somnium, в отличие от Sydney, умеет равномерно разбивать и выделять пункты меню. 192 Компания или индивидуальная презентация, блог. 193 Сидней. Темы WordPress [онлайн]. Дата неизвестна [цит.]. Доступно по: Там же. 195 Там же. 48

Читайте также:  Как восстановить windows 10 с диска recovery

49 Область ползунка также не сильно отличается. Оба ползунка занимают все окно браузера своей высотой, оба отображают заголовок, описание и кнопку. Слайдер шаблона Sydney на удивление лишен навигации, поддерживает только 5 слайдов 196 и нет возможности встроить видео в слайдер. В основной части Сидней совсем другой. Создание главной страницы происходит через плагин Page Builder by Siteorigin. 197,198 Поставляется в шаблоненесколько виджетов, которые добавляются на главную страницу с помощью конструктора страниц. Таким образом, главная страница редактируется так же, как и другие уникальные страницы. Этот подход имеет свои преимущества и недостатки. С одной стороны, пользователь получает более понятную среду, с другой — теряет текущий превью, и, таким образом, вынужден многократно переключаться на главную страницу. Somnium решает эту проблему с помощью специальной области для виджетов, куда, среди прочего, можно вставить виджет Page Builder, который дает те же функциональные возможности, что и Sydney, но здесь с предварительным просмотром в реальном времени. Нижний колонтитул обрабатывается в Сиднее стандартно, как и во многих шаблонах WordPress, т.е. который предлагает области виджетов. Сидней предлагает широкий выбор стилей прямо в Настройщике. Здесь можно предопределить размер заголовков, шрифты. Кроме того, он также предлагает подробную документацию с видеоуроками, что не может сравниться с не очень хорошей документацией Somnia. Изображение №19: Превью шаблона Sydney 196 В бесплатной версии. Конструктор 197 страниц от SiteOrigin. Темы WordPress [онлайн]. Дата неизвестна [цит.]. Доступно: Плагин является дополнительной частью темы Somnium, но используется только как надстройка при создании постов и страниц. 49

50 5.1.2 Customizr Customizr — это шаблон WordPress с более чем активными установками. Как следует из названия, основным преимуществом этого шаблона является возможность обширной настройки в Настройщике. Шаблон не имеет определенной направленности, судя по этикетке он универсальный. После установки и отображения появится главная страница с рядом информационных полей, предлагающих пользователю настроить страницу. Фиксированный заголовок здесь выполнен немного иначе, чем в Сиднее и Сомнии. Слайдер в Customizr не играет такой важной роли, как в Somniu. Задать его высоту можно, но только в px, а не в процентах от высоты окна браузера, как в случае с Somnia. Администрация главнаясайт реализован так же, как и для Сиднея. Предварительный просмотр здесь также невозможен. Нижний колонтитул также идентичен шаблонам Sydney и Somnium. Изображение № 20: Предварительный просмотр шаблона Customizr Домен этого шаблона — среда Customizer 200, которая предоставляет широкий спектр возможностей для настройки параметров. Настройки разделены на несколько логических групп, которые освещают их функции для пользователя с очень подробными описаниями. Однако в шаблоне отсутствует полный чешский перевод, многие настройки не переведены. Customizr — это настраиваемый и очень сложный шаблон, во многих аспектах он намного превосходит Somnia. 199 Кастомизр. Темы WordPress [онлайн] [цит.]. Доступно из: Customizer — интерфейс настройки, Customizr — название шаблона. 50

51 6 Заключение Результатом работы является свободно доступный шаблон с открытым исходным кодом для редакционной системы WordPress Somnium, который распространяется под лицензией GNU GPLv3. Шаблон отзывчивый, многоцелевой, многоязычный, с широкими возможностями настройки, а его HTML-вывод действителен. По сравнению с другими свободно доступными шаблонами, Somnium выделяется своей модульной (виджетной) концепцией, которая упрощает управление сайтом. При разработке шаблона я получил много ценного опыта. Я улучшил свои навыки как в программировании, так и в написании профессиональных диссертаций. Разработка чего-то столь сложного, как шаблон WordPress, не является краткосрочным или окончательным процессом, поэтому я буду продолжать его улучшать. В ближайшие месяцы разработка будет направлена ​​на улучшение некоторых функций, добавление дополнительных виджетов, а также перевод на другие языки. В дальнейшем цель — выйти на уровень сложности и сложности коммерческих шаблонов. Проект намного превзошел мои первоначальные идеи, особенно по количеству реализованного функционала. Цель с точки зрения функциональностикачество соблюдено, осталось только проверить в долгосрочной перспективе, насколько работа, посвященная шаблону, окупится количеством скачиваний и оценок. 51

52 Глоссарий терминов AJAX Асинхронный JavaScript и XML, асинхронный JavaScript и XML, технология разработки интерактивных веб-приложений. 201 API Application Programming Interface, интерфейс для программирования приложений. В отличие от библиотеки, он напрямую не привязан к конкретному языку программирования. 202 Серверная часть веб-приложения, используемая для управления приложением. CMS Content Management System или система управления контентом. Самые популярные CMS включают WordPress, Joomla и Drupal. 203 CSS Cascading Style Sheets, каскадные стили, язык описания отображения элементов на языках HTML, XHTML и XML. Структура программного обеспечения 204 Framework, содержащая вспомогательные программы, лучшие практики и библиотеки. 205 Frontend общедоступная часть веб-приложения. Язык разметки гипертекста HTML, язык разметки для создания веб-страниц. 206 JS JavaScript — язык программирования, предназначенный для веб-разработки. 207 JQuery библиотека JavaScript. 208 Библиотека набор функций и процедур, совместно используемых программами. 209 Посетитель — это тот, кто получает доступ к веб-сайту с помощью браузера. 201 АЯКС. Википедия [онлайн] [цит.]. Доступно из: Интерфейс прикладного программирования. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно по: Там же. 204 каскадных стиля. Википедия [онлайн] [цит.]. Доступно из: Фреймворк. Википедия [онлайн] [цит.]. Доступно из: Язык гипертекстовой разметки. Википедия [онлайн] [цит.]. Доступно из: JavaScript. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: jquery. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: Библиотека (программирование). Википедия [онлайн] [цит.]. Доступно с: 52

53 PHP PHP: Препроцессор гипертекста, гипертекстпрепроцессор, язык программирования, предназначенный для разработки динамических веб-страниц. 210 Элемент управления Silder, содержимое которого регулируется с помощью смещения по горизонтали или вертикали. Элемент слайдера слайдера. Sass Syntactically Awesome Stylesheets, препроцессор CSS, язык сценариев, интерпретируемый в CSS. 211 Шаблон редакционной системы файл кода, который вместе с контентом совместно создает веб-страницу, отображаемую посетителю внешнего интерфейса. Интерфейс Theme Customizer для настройки шаблонов. Пользователь, использующий шаблон, управляет веб-сайтом. Область просмотра (веб) видимая часть веб-страницы. 212 Виджет (веб) не очень большое приложение с ограниченным функционалом, занимающее часть веб-страницы. 213 WordPress — это бесплатная редакционная издательская система с открытым исходным кодом, разработанная под лицензией GNU GPLv. Она обеспечивает быстрое и простое управление контентом веб-сайтов PHP. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: Sass (язык таблиц стилей). Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: Viewport. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: Веб-виджет. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: WordPress. Википедия [онлайн] [цит.]. Доступно из: Система управления контентом. Википедия [онлайн] [цит.]. Доступно с: 53

54 Список изображений и кодов Коды Код №11: Пример информации о шаблоне Код №12: Пример загрузки JavaScript с адресом /js/script.min.js Код №13: Регистрация области виджета с именем Редактор разделов 15 Код № 14: Базовая структура виджета. 16 Код № 15: Поле ввода текста Код № 16: Анимация ключевого кадра, называемая вращением, которое вращает элемент с помощью Код № 17: Компоновка матрицы в CSS для вращения в плоскости Код № 18: Преобразование формы матрицы в JavaScript.. 21 Код №19: Код функции WP_Query №20: НастройкиGoogle Maps JavaScript API Код № 11: Пример строки ввода в строке 36 в файле name.php Код № 12: Вывод в cs_cz.po с чешским переводом.. 34 Код № 13: Функция Polylang для отображения языка переключатель. 35 Код №14: Функция do_the_magic, принцип работы которой был описан выше.. 36 Код №21: Однократное занятие Код №16: Функция будет иметь место только при активации плагина.. 37 Код №17 : Один из многих возможных вариантов использования. 40 Код №18: Код компилятора PHP с загрузкой файла и выводом в стиле CSS. 43 Код № 19: Очень простой в использовании JShrink, который упрощает редактирование JavaScript. 45 Код #20: Пример использования $ в неконфликтующем режиме..46 Изображения 54

55 Изображение № 1: Схема типичного функционирования шаблона и плагинов с WordPress.. 11 Изображение № 2: Выбор значка в Font Awesome.. 18 Изображение № 3: Выбор рубрики. 18 Изображение № 4: Поле для ввода числового значения с единицами измерения Изображение № 5: Выбор цвета с прозрачностью.. 18 Изображения № 6, 7, 8: Демонстрация проблем, возникающих при вращении одного элемента. 19 Рисунок № 9: Графическое представление матриц для поворота по осям x, y и z, где θ — угол поворота.. 20 Рисунок № 10: Матрица, полученная после подстановки угла на предыдущий рисунок.. 20 Рисунок № 11: Формула для расчета матрицы угла z для поворота по оси Z. Угол α в радианах Рисунок № 12: Флажки для отображения слайдов Рисунок № 13: Использование сетки Bootstrap Рисунок № 14: Пример адаптивного дизайна на блоки веб-сайта.. 39 Рисунок № 15: Пример использования одной из каруселей. Изображение № 16: Управление перекомпиляцией, расположенное в меню Внешний вид->Somnium.. 44 Изображение № 17: Журнал Bell Student Třebíč.47 Изображение № 18: Somnium Powerful Тема WordPress Изображение № 19: Предварительный просмотр шаблона Sydney Изображение № 20: Предварительный просмотр шаблона Customizr. 52 Изображение № 21: Приложение Spin Widget Изображение № 22: ЗапросВиджет Изображение вложения №23: Слайдер.. Изображение вложения №24: Внешний вид поста 1/2.. Изображение вложения №25: Внешний вид поста 2/2.. Изображение вложения №26: Общий вид кастомайзера. Изображение вложения № 27: Виджет Google Maps.. Изображение вложения № 28: Виджет публикации № 2.. Изображение вложения № 29: Виджет карусели. Приложение Изображение № 30: Текстовый виджет. Приложение Изображение № 31: Post Widget. Изображение вложения №32: Виджет плитки Изображение вложения №33: Дополнительные настройки в «Внешний вид->Somnium».. Приложение 55

56 Изображение № 34: Настройки слайдера видео. Приложение Рисунок №35: Графическое оформление расположения элементов. Приложение 56

57 Список источников изображений Показанные здесь изображения были взяты из следующих источников: Изображения, для которых не указан источник или лицензия, находятся под лицензией GNU GPLv3 для работ, связанных с шаблонами WordPress. В остальных случаях применяется лицензия CC0. Рисунок № 9: Графическое представление матриц для поворота по осям x, y и z, где θ — угол поворота (стр. 21) Матрица поворота. Википедия, бесплатная энциклопедия [онлайн]. Дата неизвестна [цит.]. Доступно из: Изображение #10: Матрица, полученная после подстановки угла на предыдущем изображении, умножается на координаты точки (стр. 21) Квадратная матрица и вектор-столбец. Викисклад [онлайн]. Дата неизвестна [цит.]. Доступно по: Рисунок № 13: Использование сетки Bootstrap (стр. 42) ОБЕРРАЙТЕР, Михал. Использование сетки Bootstrap. Лицензия: CC0. Изображение № 14: Пример адаптивного дизайна блоков веб-сайта (стр. 42) PROCHÁZKA, Tomáš. Полный.png. Wikimedia Commons [онлайн] [цит.]. Лицензия: CC0. Доступно по: Изображение #15: Демонстрация использования одной из каруселей (стр. 44) WOJCIECHOWSKI, Bartosz. Сова Карусель. Owl Carousel [онлайн] [цит.]. Лицензия: Скриншот MIT. Доступно по: Фото № 17: журнал Bell Student Třebíč Gymnasium (стр. 50)ЗВОНЕК, Студенческий журнал Тржебичская гимназия. Все права защищены. Используется с разрешения редакции журнала Zvonek. 57

58 Список интернет-ресурсов.hover(). Документация по jQuery API [онлайн]. Дата неизвестна [цит.]. Доступно из: Плагины jquery для эффектов прокрутки с анимацией CSS. Нинодизайн [онлайн] [цит.]. Доступно из: О GPL. WordPress [онлайн]. Дата неизвестна [цит.]. Доступно через: AJAX. Википедия [онлайн] [цит.]. Доступно из: Интерфейс прикладного программирования. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: Преимущества локализации веб-сайта. Квинтэссенция [онлайн]. Дата неизвестна [цит.]. Доступно из: Bootstrap. Bootstrap [онлайн]. Дата неизвестна [цит.]. Доступно из: Callback (компьютерное программирование). Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: chmod. Википедия, бесплатная энциклопедия [онлайн] [цит. Доступно из: Настройка TGMPA для использования с вашей темой/плагином. Активация плагина TGM [онлайн] [цит. Доступно из: CSS Bootstrap. Bootstrap [онлайн]. Дата неизвестна [цит.]. Доступно из: Отзывчивый веб-дизайн CSS. w3schools.com [онлайн]. Дата неизвестна [цит.]. Доступно из: CSS. Bootstrap [онлайн]. Неизвестно [цитата]. Доступно из: Правило. w3schools.com [онлайн]. Дата неизвестна [цит.]. Доступно из: Customizr. Темы WordPress [онлайн] [цит.]. Доступно из: Документация. Полиланг [онлайн]. Дата неизвестна [цит.]. Доступно из: Редактирование файлов. Кодекс WordPress [онлайн]. Дата неизвестна [цит.]. Доступно из: Файл: SASS_REFERENCE. Документация по Sass [онлайн] [цит. Доступно из: Фреймворк. Википедия [онлайн] [цит.]. Доступно из: Справочник по функциям/редактор wp. Кодекс WordPress [онлайн]. Дата неизвестна [цит.]. Доступно с: 58

59 Начало работы с API Карт Google. Разработчики Google [онлайн]. Дата неизвестна [цит.]. Доступно через: gettext. Проект GNU [онлайн]. Дата неизвестна [цит.]. Доступно из: Google Fonts [онлайн]. Неизвестно [цитата]. Доступно из: Google Maps JavaScript API. Разработчики Google [онлайн]. Дата неизвестна [цит.]. Доступно от: ХИНКС, Джейми. Google Maps — самое популярное в мире приложение для смартфонов. ITProPortal.com [онлайн] [цит. Доступно у: HOETMER, Ken. Свежий новый интерфейс Maps API для всех миллионов сайтов. Блог для разработчиков Google [онлайн] [цит ]. Доступно из: Как добавить виджеты в тему WordPress с помощью нижнего колонтитула. Советы и рекомендации HQ [онлайн] [цит. ]. Доступно из: элемент HTML. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: Видео HTML5. w3schools.com [онлайн]. Дата неизвестна [цит.]. Доступно из: Язык гипертекстовой разметки. Википедия [онлайн] [цит.]. Доступно на веб-сайте: Пользователи Internet World по языку. Internet World Stats [онлайн] [цит. Доступно из: Ограничения использования JavaScript API. Разработчики Google [онлайн]. Дата неизвестна [цит.]. Доступно из: JavaScript. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: jquery — метод noconflict(). w3schools.com [онлайн]. Дата неизвестна [цит.]. Доступно из: jquery. jquery [онлайн]. Дата неизвестна [цит.]. Доступно из: jquery. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: jquery.ajax(). Документация по jQuery API [онлайн]. Дата неизвестна [цит.]. Доступно из: jsass. Хостинг проектов Google [онлайн]. Дата неизвестна [цит.]. Доступно на: JShrink. Гитхаб [онлайн]. Дата неизвестна [цит.]. Доступно из: Каскадные стили. Википедия [онлайн] [цит.]. Доступно из: Ключевые слова — scrollreveal.js. Гитхаб [онлайн]. Дата неизвестна [цит.]. Доступно с: 59

60 Библиотека (программирование). Википедия [онлайн] [цит.]. Доступно у: LAJA, Peep. Первые впечатления имеют значение: важность отличного визуального дизайна. ConversionXL [онлайн]. Дата неизвестна [цит.]. Доступно на: libsass. Гитхаб [онлайн]. Дата неизвестна [цит.].Доступно из: Locale. Википедия [онлайн] [цит.]. Доступно из: «Локализация Интернета» выбрана в качестве рекомендуемого приложения месяца. Локализация Интернет [онлайн] [цит. ]. Доступно из: Делаем WordPress многоязычным. Полиланг [онлайн]. Дата неизвестна [цит.]. Доступно из: Mapping APIs и Mashup. ProgrammableWeb [онлайн]. Дата неизвестна [цит.]. Доступно у: МЕЛЛАС, Калеб. Типографика и почему это важно для вашего сайта. Веб-сайт [онлайн]. Дата неизвестна [цит.]. Доступно у: МЕННИНГ, Роберт. WordPress против Joomla против Drupal. Websitesetup.org [онлайн] [цит. Доступно из: Minification (программирование). Википедия — бесплатная энциклопедия [онлайн] [цитировать ] Доступно из: Мобильный Интернет. T-Mobile [онлайн]. Дата неизвестна [цит.]. Доступно из: Мобильный Интернет. Vodafone.cz [онлайн]. Дата неизвестна [цит.]. Доступно из: Многоязычный WordPress. Кодекс WordPress [онлайн]. Дата неизвестна [цит.]. Доступно из: с открытым исходным кодом. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно в: Карусель совы. Сова Карусель [онлайн]. Дата неизвестна [цит.]. Доступно из: Параллаксная прокрутка. Википедия [онлайн] [цит.]. Доступно на: Parallax.js. Гитхаб [онлайн]. Дата неизвестна [цит.]. Доступно из: PHP. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: PHP: расширения — вручную. PHP.net [онлайн]. Дата неизвестна [цит.]. Доступно из: Отзывчивый веб-дизайн — Окно просмотра. w3schools.com [онлайн]. Дата неизвестна [цит.]. Доступно от: 60

61 Адаптивный веб-дизайн. Википедия [онлайн] [цит.]. Доступно в: SALA, Симона. Советы по дизайну с фоновым видео. Sitepoint [онлайн] [цит.]. Доступно из: Sass (язык таблиц стилей). Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: Sass. Sass: Syntactically Awesome Style Sheets [онлайн]. Дата неизвестна [цит.]. Доступно из: ScrollReveal. Гитхаб [онлайн]. Дата неизвестна [цит.]. Доступно через: SCSSКомпилятор на PHP. scssphp [онлайн] [цит.]. Доступно из: Сидней. Темы WordPress [онлайн]. Дата неизвестна [цит.]. Доступно из: Сидней: Как создать веб-сайт WordPress Youtube [онлайн] [цит. Доступно из: Система управления контентом. Википедия [онлайн] [цит.]. Доступно из: Активация плагина TGM. Активация плагина TGM [онлайн] [цит. Доступно в: Стандартная общественная лицензия GNU v3.0. Проект GNU — Фонд свободного программного обеспечения [онлайн] [цит ]. Доступно из: API настройки темы. Кодекс WordPress [онлайн]. Дата неизвестна. [чувство]. Доступно из: Разработка темы. Кодекс WordPress [онлайн] [цит.]. Доступно с: 10 самых популярных разрешений экрана рабочего стола с августа 2015 г. по январь StatCounter Global Stats [онлайн]. Неизвестно [цитата]. Доступно из: Viewport. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: Viewport. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно в: Вашингтонский университет в Сент-Луисе. Луи. (2015, 16 июня). Датчики обнаружения движения глаза идентифицированы. ScienceDaily. Получено 16 декабря 2015 г. из веб-виджета. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно на: Whois Record for Youtube-NoCookie.com. DomainTools [онлайн] [цит. ]. Доступно из: Файлы WordPress. Кодекс WordPress [онлайн]. Дата неизвестна [цит.]. Доступно с: 61

62 WordPress — обзор CMS, преимущества и недостатки. Какую CMS выбрать? [онлайн]. Дата неизвестна [цит.]. Доступно с: WordPress поддерживает 25% всех веб-сайтов. W3Techs [онлайн] [цит.]. Доступно из: Виджеты WordPress. Кодекс WordPress [онлайн]. Дата неизвестна. [чувство]. Доступно из: WordPress. Википедия — бесплатная энциклопедия [онлайн] [цит. Доступно из: WordPress. Википедия [онлайн] [цит.]. Доступно из: WordPress/widgets.php. Github.com [онлайн] [цит.]. Доступно из: YouTube IFrame Player API. Разработчики Google [онлайн]. Дата неизвестна [цит.]. Доступна с:Справочник по API проигрывателя YouTube для встраивания iframe. Разработчики Google [онлайн]. Дата неизвестна [цит.]. Доступно с: 62

63 Список плагинов, библиотек и фреймворков Bootstrap Автор: Twitter, Inc. Адрес: Лицензия: MIT Codestar WP Color Picker Автор: Codestar Адрес: Лицензия: GPLv2 или более поздняя версия Обнаружение мобильных браузеров Обнаружение мобильных телефонов с открытым исходным кодом Автор: Chad Smith Адрес: Лицензия: CC0 Font Awesome Автор: Dave Gandy Адрес: Лицензия — шрифт: SIL OFL 1.1, CSS: MIT Fontawesome-Iconpicker Автор: Хавьер Агилар Адрес: Лицензия: MIT Google Maps JavaScript API Автор: Google Inc. Адрес: jquery Автор: jquery Foundation Адрес: Лицензия: MIT jquery One Page Nav Plugin Автор: Тревор Дэвис Адрес: Лицензия: двойная MIT и GPL jquery.fontselect Автор: Том Мур Адрес: Лицензия: MIT 63

64 JShrink Автор: Robert Hafner Адрес: Лицензия: BSD 3-clause Owl Carousel Автор: Bartosz Wojciechowski Адрес: Лицензия: MIT Parallax.js Автор: PixelCog, Inc. Адрес: Лицензия: MIT Polylang Автор: Chouby Адрес: Лицензия: GNU GPLv2+ SCSSPHP Автор: Leaf Corcoran Адрес: Лицензия: MIT ScrollReveal.js Автор: Джулиан Ллойд Адрес: Лицензия: MIT TGM Авторы активации плагина: Томас Гриффин, Гэри Джонс, Джульетт Рейндерс Адрес Folmer: Лицензия: GNU GPLv2 Widget Image Field Автор: Walter Lopez Лицензия: GNU GPLv2-совместимый адрес: WordPress Автор: WordPress Foundation Адрес: Лицензия: GNU GPLv2 64

65 Приложения Статистика Размер кода без библиотек 310 КБ 5182 (SLOC-L) Общий размер кода 2,1 МБ (SLOC-L) Даты начала и окончания разработки Сентябрь 2015 г. разработка все еще продолжается Веб-сайт и веб-презентация GitHub Somnium Theme доступны в репозитории The Somnia доступен на GitHub по адресу: Пользовательский код шаблона Полностью функциональный исходный код доступен в репозитории GitHub. Документация Документация доступна вEnglish at: Как установить После установки CMS WordPress на хостинг-сервере 216 просто выберите прикрепленный файл и загрузите его в раздел Внешний вид->Шаблоны->Установить->Загрузить шаблон в панели управления WordPress. После загрузки вам будет предложено активировать, сделайте это. После этого шаблон будет готов к использованию. 216 Например: Endora, WebZdarma.

66 Вложение изображения Изображение № 21: Виджет Spin Изображение № 22: Виджет запроса Изображение № 23: Ползунок

67 Изображение № 24: Внешний вид сообщения 1/2 Изображение № 25: Внешний вид сообщения 2/2

Поделиться с друзьями
ОС советы