Рубрики
WooCommerce

Желаете создать интернет-магазин на WordPress?


WooCommerce является гибким решением для электронной коммерции на открытом исходном коде, основанным на WordPress. Независимо от того, запускаете ли вы новый бизнес, выводите существующий магазин в онлайн или разрабатываете сайты для клиентов – вы можете быстро начать работу и построить именно такой интернет-магазин, который желаете.

Активируйте бесплатный плагин WooCommerce на новом или существующем WordPress-сайте, следуйте инструкции и настройте новый электромагазин за несколько минут при помощи:

Woo
  • Страницы товаров, корзины и оформления заказа
  • Защищённые платежи банковской картой или альтернативными методами
  • Настраиваемые опции доставки, в том числе по единой ставке и печать этикеток
  • Объединяет контент и коммерцию на вашем сайте посредством модульных блоков
  • Автоматизированный расчёт налогов
  • Интеграция с Google Analytics, MailChimp и Facebook
  • Центральная панель магазина с ключевыми метриками и прочим.

Помимо основ, WooCommerce полностью настраиваемый и расширяемый:

  • Выберите дизайн, соответствующий вашему бренду и индустрии.
  • Улучшите свой магазин при помощи бесплатных и платных расширений: добавьте функционал и интегрируйте с локальными и глобальными сервисами электронной коммерции.
  • Проверяйте и модифицируйте любую часть кода ядра плагина.
  • Применение перехватчиков и фильтров для модификации функций.
  • Разработка на REST API и перехватчиках.

Преимущество открытого исходного кода означает полное владение содержимым и данными – плюс экспертиза дружественного глобального сообщества.

WooCommerce создан для самостоятельного управления электромагазином без глубоких познаний в области веб-разработки. Также создано мобильное приложение WooCommerce (Android и iOS) для управления магазином на ходу.

WooCommerce создан и поддерживается компанией Automattic, создателями Jetpack и WordPress.com, вместе с независимыми участниками. Официальный магазин расширений находится на WooCommerce.com.

ОТ АБОНЕМЕНТОВ НА СПОРТЗАЛ ДО АРЕНДЫ ЛЮКСОВЫХ АВТОМОБИЛЕЙ.


С WooCommerce вы можете продавать как физические, так и электронные товары в любых формах и размерах, предлагать вариации товаров, составные конфигурации, мгновенные загрузки и даже продавать партнёрские товары из онлайн-маркетплейсов.

И это только стандартные функции. При помощи платных расширений можно сформировать более продвинутый WooCommerce-магазин, позволяющий осуществлять резервирование столиков, предлагать членство, принимать регулярные платежи по подписке, создавать динамические правила ценообразования, и многое другое.

Предлагайте ежемесячную подписку на напитки, предлагайте скидку на коврик для йоги для клиентов, оплативших более 10 занятий, предлагайте уникальные шкатулки для ювелирных изделий – это всё возможно с WooCommerce.

ПОЛНЫЕ НАСТРОЙКИ ОПЛАТЫ


WooCommerce снабжён комплектом инструментов, позволяющих принимать оплату посредством большинства банковских карт, альтернативных электронных методов оплаты, BACS (банковские переводы), и наличных при доставке заказа.

WooCommerce также способен интегрироваться с более чем 140 региональными шлюзами, включая такие популярные варианты как Stripe, PayPal, Square and Amazon Pay. Apple Pay и Google Pay.

Найдите наиболее подходящий сервис приёма платежей среди массы вариантов в официальном магазине.

ЛОКАЛЬНАЯ И ГЛОБАЛЬНАЯ ДОСТАВКА


Опции доставки WooCommerce крайне гибки. Настройте стандартные опции, предлагающие бесплатную доставку или единую ставку, ограничивайте доставку определёнными странами, настраивая зоны доставки, или откройте свой магазин всему миру.

Официальные расширения, связывают вас с сотнями локальных и международных перевозчиков Royal Mail, FedEx, and Australia Post и позволяют интегрироваться с системами управления заказами и аутсорс-сервисами.

Также существуют расширения, позволяющие добавлять опции перевозки и доставки и поддерживающие хитрые маркетинговые схемы, типа два-по-цене-одного, бесплатные подарки, и дополнения для товаров. Доставка WooCommerce поддерживает онлайн-калькулятор и печать этикеток.

ОФОРМЛЯЙТЕ СВОЙ МАГАЗИН ПРИ ПОМОЩИ ТЕМ И БЛОКОВ


Оформление магазина WooCommerce начинается с выбора темы. Вам доступны сотни платных и бесплатных тем, в том числе Storefront от Automattic – Она бесплатна для любого магазина и вы можете запустить её установку в процессе настройки при поддержке Помощника установки.

Storefront предлагает глубокую интеграцию с WooCommerce и имеет приоритет скорости и безотказную работу. Вы можете стилизовать Storefront на свой вкус или выбрать одну из готовых, стилизованных под конкретную индустрию, дочернюю тему Storefront.

Делайте свой сайт ещё более уникальным с WooCommerce Blocks (доступно для WooCommerce 3.6 и выше) – используйте его для вывода одного или нескольких товаров на любую страницу сайта для бесшовного комбинирования коммерции в контентом вашего ресурса.

НАСТРАИВАЙТЕ СВОЙ МАГАЗИН ПРИ ПОМОЩИ РАСШИРЕНИЙ


Самым лёгким способом расширить функционал WooCommerce-магазина – установить расширение:

  • Продавайте что угодно — Подписки, Членства, Резервирования, Комплекты товаров и прочее.
  • Сделайте свой магазин неповторимым — Дополнения для товаров, Редактор формы оформления заказа, Дополнительные изображения вариаций и прочее.
  • Настраивайте опции доставки — Таблица тарифов доставки, Отслеживание доставки, онлайн-расчёт от лучших перевозчиков и прочее.
  • Находите свою аудиторию, продавайте им в своём стиле – Google Product Feed, LiveChat, Интеграция с порталами Amazon/eBay, и прочее.
  • Drive sales – Динамические цены, Умные купоны, Google Ads и прочее.

На портале WooCommerce.com доступны сотни официальных расширений, проверенных разработчиками WooCommerce. Также их можно найти в репозитории WordPress.org и на прочих сайтах в интернете.

ВСЕГДА КОНТРОЛИРУЙТЕ СВОИ ДАННЫЕ


WooCommerce даёт вам полный контроль над электромагазином – от счётчиков запасов товаров до аккаунтов клиентов. Устанавливайте и удаляйте расширения, меняйте дизайн своего магазина и переключайтесь между доступными темами или платёжными шлюзами как считаете нужным.

В мире всё больше осознают важность защиты данных, WooCommerce даёт вам полный контроль над процессами отслеживания и хранения данных. Если вы пожелаете поделиться используемыми данными с нами, ваши данные анонимизируется и хорошо защищается. На любом этапе вы можете отказаться от всех форм отслеживания, продолжая использовать все возможности WooCommerce.

С WooCommerce ваши данные принадлежать только вам. Один из немногих рисков использования коробочной версии электромагазина – возможность прекращения работы провайдера. Данные WooCommerce-магазина доступны для экспорта, что даёт возможность в любой момент восстановить его на новом месте.

ПОЧЕМУ РАЗРАБОТЧИКИ ЛЮБЯТ WOOCOMMERCE


WooCommerce был создан разработчиками с большими планами. Построенный на REST API, он интегрируется практически с любым сервисом. Данные магазина могут быть доступны откуда угодно и когда угодно, 100% безопасно.

WooCommerce позволяет разработчикам легко создавать, модифицировать и масштабировать электромагазин, соответствующий запросам клиентов и расширять функционал при помощи расширений или индивидуальной доработки.

Неважно какого размера электромагазин вы намерены построить, WooCommerce имеет надёжный каркас, который поддерживает все форматы от базового до корпоративного – с контентом и коммерцией в одном месте.

WooCommerce проверяется специальной командой разработчиков, которые работают в разных часовых поясах для оперативного выявления и исправления допущенных ошибок в коде. Подготовлена обширная и доходчивая документация, которая обновляется с каждым выпуском. С помощью наших инструкций вы узнаете, как создать именно такой сайт, который вам необходим.

ПРИСОЕДИНЯЙТЕСЬ К НАШЕМУ РАСТУЩЕМУ СООБЩЕСТВУ


WooCommerce объединяет одну из наиболее быстро растущее сообщество электронной коммерции. Мы гордимся полезностью нашего сообщества и богатством тематических ресурсов, доступных в интернете, которые часто приводятся в качестве причин, по которым наши пользователи любят его.

Проведено более 80 Мероприятий WooCommerce в разных городах по всему миру, которые можно свободно посещать и даже участвовать в проведении. WooCommerce также регулярно присутствует на WordCamps по всему миру – и мы будем рады встретиться с вами.

Если вам интересно участие в развитии WooCommerce, с нами сотрудничают более 350 участников, и всегда найдётся место для новых. Переходите на репозиторий WooCommerce на GitHub, чтобы узнать как вы можете помочь.

В настоящее время WooCommerce полностью переведён на 24 языка, в том числе датский, китайский и персидский. Если вы хотите принять участие в локализации WooCommerce на своем языке, перейдите на веб-сайт translate.wordpress.org.

Рубрики
HTML

Что такое HTML и для чего он нужен?


HTML (HyperText Markup Language — «язык гипертекстовой разметки») — самый базовый строительный блок Веба. Он определяет содержание и структуру веб-контента. Другие технологии, помимо HTML, обычно используются для описания внешнего вида/представления (CSS) или функциональности/поведения (JavaScript) веб-страницы.

Под гипертекстом («hypertext») понимаются ссылки, которые соединяют веб-страницы друг с другом либо в пределах одного веб-сайта, либо между веб-сайтами. Ссылки являются фундаментальным аспектом Веба. Загружая контент в Интернет и связывая его со страницами, созданными другими людьми, вы становитесь активным участником Всемирной паутины.

HTML использует разметку («markup») для отображения текста, изображений и другого контента в веб-браузере. HTML-разметка включает в себя специальные «элементы», такие как , , <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video> и многие другие.</p> <p>HTML-элемент выделяется из прочего текста в документе с помощью «тегов», которые состоят из имени элемента окруженного «<» и «>». Имя элемента внутри тега не чувствительно к регистру. То есть, оно может быть написано в верхнем или нижнем регистре, или смешано. Например, тег <title> может быть записан как <Title>, <TITLE>, или любым другим способом.</p>

В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы возможно слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!

Необходимые знания:Умение работать с компьютером, наличие необходимого ПО, базовые знания о работе с файлами.
Цель:Познакомиться с языком HTML и научиться описывать некоторые его элементы.

Что такое HTML?

HTML (HyperText Markup Language — язык гипертекстовой разметки) не является языком программирования; это язык разметки, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда элементов, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определенный вид или срабатывало определенным способом. Встроенные тэги могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:

Мой кот очень сердитый

Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как «параграф», заключив её в теги элемента «параграф»  (&lt;p&gt;), например:

<p&gt;Мой кот очень сердитый</p&gt;

Примечание: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег &lt;title&gt; может быть записан как &lt;title&gt;&lt;TITLE&gt;&lt;Title&gt;&lt;TiTlE&gt;, и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.

Структура HTML элементов

Давайте рассмотрим элемент «параграф» чуть подробнее:

Основными частями элемента являются:

  1. Открывающий тег: Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри угловых скобок. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.
  2. Закрывающий тег: выглядит как и открывающий, но содержит слэш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.
  3. Содержимое: Как видно, в нашем случае содержимым является простой текст.
  4. Элемент: открывающий тег + закрывающий тег + содержимое = элемент.

Активное изучение: создание вашего первого HTML элемента

Отредактируйте строку текста ниже в поле Ввод, обернув ее тегами &lt;em&gt; и &lt;/em&gt; (вставьте &lt;em&gt; перед строкой, чтобы указать начало элемента, и &lt;/em&gt; после нее, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.

Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Reset. Если упражнение вызывает у Вас затруднения, то нажмите кнопку Show solution , чтобы увидеть правильный ответ.

Вложенные элементы

Вы также можете вкладывать элементы внутрь других элементов — это называется вложенностью. Если мы хотим подчеркнуть, что наш кот очень сердитый, мы можем заключить слово «очень» в элемент &lt;strong&gt; , который означает, что это слово крайне важно в данном контексте:

<p&gt;Мой кот <strong&gt;очень</strong&gt;  сердитый.</p&gt;

Вы так же должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем p элемент первым, затем элемент strong, затем мы закрываем элемент strong первым, затем p. Следующее не правильно:

<p&gt;Мой кот <strong&gt;очень сердитый.</p&gt;</strong&gt;

Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!

Блочные и строчные элементы

Существует две важных категории элементов в HTML, которые вам стоит знать — элементы блочного уровня и строчные элементы.

  • Элементы блочного уровня формируют видимый блок на странице — они окажутся на новой строке после любого контента, который шел до них, и любой контент после них также окажется на новой строке. Чаще всего элементами блочного уровня бывают структурные элементы страницы, представляющие собой, например, параграфы (абзацы), списки, меню навигации, подвалы, и т. п. Элементы блочного уровня не вкладываются в строчные элементы, но иногда могут вкладываться в другие элементы блочного уровня.
  • Строчные элементы — это те, которые содержатся в элементах блочного уровня и окружают только малые части содержимого документа, не целые абзацы и группировки контента. Строчные элементы не приводят к появлению новой строки в документе: они обычно встречаются внутри абзаца текста, например, элемент &lt;a&gt; (ссылка) или акцентирующие элементы вроде &lt;em&gt; или &lt;strong&gt;.

Посмотрите на следующий пример:

<em&gt;Первый</em&gt;<em&gt;второй</em&gt;<em&gt;третий</em&gt;

<p&gt;четвертый</p&gt;<p&gt;пятый</p&gt;<p&gt;шестой</p&gt;

&lt;em&gt; — это строчный элемент, так что, как вы здесь видите, первые три элемента находятся на одной строке друг с другом без пробелов между ними. С другой стороны, &lt;p&gt;— это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется CSS-оформлением по умолчанию, которое браузеры применяют к абзацам).Открыть на CodePenОткрыть на JSFiddle

Примечание: HTML5 переопределил категории элементов в HTML: смотри Категории типов содержимого элементов. Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.

Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноименными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.

Примечание: Вам могут пригодиться справочники, включающие списки блочных и строчных элементов — смотри Элементы блочного уровня и Строчные элементы.

Пустые элементы

Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент &lt;img&gt; вставляет картинку на страницу в том самом месте, где он расположен:

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;

Это выведет на вашу страницу следующее:

Примечание: Пустые элементы иногда называют void-элементы.

Атрибуты

У элементов также могут быть атрибуты, которые выглядят так:

&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>

Атрибуты содержат дополнительную информацию об элементе, которая, по вашему мнению, не должна отображаться в содержимом элемента. В данном случае атрибут class позволяет вам дать элементу идентификационное имя, которое в дальнейшем может быть использовано для обращения к элементу с информацией о стиле и прочими вещами.

Атрибут должен иметь:

  1. Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).
  2. Имя атрибута и следующий за ним знак равенства.
  3. Значение атрибута, заключенное в кавычки.

Активное изучение: Добавление атрибутов в элемент

Возьмём для примера элемент &lt;a&gt; — означает anchor (якорь) и делает текст внутри него гиперссылкой. Может иметь несколько атрибутов, вот два из них:

  • href: В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит когда вы по ней кликаете. Например, href="https://www.mozilla.org/".
  • title: Атрибут title описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведет. Например, title="The Mozilla homepage". Она появится в виде всплывающей подсказки, когда вы наведете курсор на ссылку.
  • target: Атрибут target определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, target="_blank" отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.

Измените строку текста ниже в поле Ввод так, чтобы она вела на ваш любимый вебсайт. Сначала добавьте элемент &lt;a&gt;затем атрибут href и атрибут title. Наконец, укажите атрибут target чтобы открыть ссылку на новой вкладке. Вы можете наблюдать сделанные изменения в реальном времени в поле Вывод. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута title, а при щелчке переходит по адресу в атрибуте href. Помните, что между именем элемента и каждым из атрибутов должен быть пробел.

Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Reset. Если упражнение вызывает у Вас затруднения, то нажмите кнопку Show solution чтобы увидеть правильный ответ.

Булевы атрибуты

Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо.  Такие атрибуты называются булевы и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмем атрибут <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/input#attr-disabled">disabled</a>, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.

<input type="text" disabled="disabled"&gt;

Для краткости совершенно допустимо записывать их следующим образом (мы так же для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):

<input type="text" disabled&gt;

<input type="text"&gt;

На выходе оба варианта будут выглядеть следующим образом:

Опускание кавычек вокруг значений атрибутов

Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определенных условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом href так:

<a href=https://www.mozilla.org/&gt;favorite website</a&gt;

Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:

<a href=https://www.mozilla.org/ title=The Mozilla homepage&gt;favorite website</a&gt;

В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут title это на самом деле три разных атрибута — атрибут title со значением «The» и два булевых атрибута: Mozilla и homepage. Это, очевидно, не то, что имелось ввиду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть на что похож текст title!

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

Одинарные или двойные кавычки?

В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:

<a href="http://www.example.com"&gt;A link to my example.</a&gt;

<a href='http://www.example.com'&gt;A link to my example.</a&gt;

Однако, вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!

<a href="http://www.example.com'&gt;A link to my example.</a&gt;

Если вы используете один тип кавычек в своем HTML, то вы можете поместить внутрь их кавычки другого типа не вызывая никаких проблем:

<a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.</a&gt;

Если вы хотите вставить кавычки того же типа, то вы должны использовать объекты HTML. Например, это работать не будет:

<a href='http://www.example.com' title='Isn't this fun?'&gt;A link to my example.</a&gt;

Поэтому вам нужно сделать так:

<a href='http://www.example.com' title='Isn't this fun?'&gt;A link to my example.</a&gt;

Структура HTML документа

Ниже дан пример оборачивания основных, самостоятельных HTML элементов, которые не очень полезны сами по себе. Давайте посмотрим как самостоятельные элементы объединяются для формирования всей HTML страницы:

<!DOCTYPE html&gt;
<html&gt;
  <head&gt;
    <meta charset="utf-8"&gt;
    <title&gt;My test page</title&gt;
  </head&gt;
  <body&gt;
    <p&gt;This is my page</p&gt;
  </body&gt;
</html&gt;

Вот что мы имеем:

  1. &lt;!DOCTYPE html&gt;: The doctype. Очень давно, еще когда HTML был молод (1991/2), doctypes использовались в качестве ссылок на набор правил, которым HTML страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Doctypes выглядели примерно вот так: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;Однако, в наши дни никто особо не думает о них, и doctypes стали историческим артефактом, которые должны быть включены везде, чтобы все работало правильно. &lt;!DOCTYPE html&gt; это самый короткий вид doctype, который считается действующим. На самом деле это всё, что нужно вам знать о doctypes .
  2. &lt;html&gt;&lt;/html&gt;: Элемент &lt;html&gt; содержит в себе всё содержимое на всей странице, и иногда его называют «корневой элемент». 
  3. &lt;head&gt;&lt;/head&gt;: Элемент &lt;head&gt;. Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.
  4. &lt;meta charset="utf-8"&gt;: Этот элемент устанавливает в качестве символьной кодировки для вашего документа utf-8 , который включает большинство символов из всех известных человечеству языков. По существу, теперь страница сможет отобразить любой текстовый контент, который вы сможете в неё вложить.  Нет причин не устанавливать эту кодировку, это также позволит избежать некоторых проблем позднее.
  5. &lt;title&gt;&lt;/title&gt;: Элемент &lt;title&gt;. Этот элемент устанавливает заголовок вашей страницы, который появляется во вкладке браузера, загружающей эту страницу, также это заглавие используется при описании страницы, когда вы сохраняете её в закладках или избранном.
  6. &lt;body&gt;&lt;/body&gt;: Элемент &lt;body&gt;. Он содержит весь контент, который вы хотите показывать посетителям вашей страницы — текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то ещё.

Активное изучение: Добавление элементов в ваш HTML-документ.

Если вы хотите поэкспериментировать с написанием HTML на своём компьютере, то можете:

  1. Скопировать пример HTML-страницы, расположенный выше.
  2. Создать новый файл в текстовом редакторе.
  3. Вставить код в ваш новый текстовый файл.
  4. Сохранить файл как index.html.

Примечание: Вы также можете найти этот базовый пример HTML на  MDN Learning Area Github repo.

Теперь можете открыть браузер и посмотреть, во что отрисовался код, а потом изменить его, обновить страницу и посмотреть, что получилось. Сначала страница выглядит так:

A simple HTML page that says This is my page

Для этого упражнения вы можете редактировать код локально на своём компьютере, как предлагается выше, а можете работать в редакторе , расположенном ниже. В редакторе показано только содержимое элемента &lt;body&gt;. Попробуйте сделать следующее:

  • Добавьте заголовок страницы сразу за открывающим тегом &lt;body&gt;. Текст должен находиться между открывающим тегом &lt;h1&gt; и закрывающим &lt;/h1&gt; .
  • Напишите в параграфе о чём-нибудь, что кажется вам интересным.
  • Выделите важные слова, обернув их в открывающий тег &lt;strong&gt; и закрывающий &lt;/strong&gt;
  • Добавьте ссылку на свой абзац, так как объяснено ранее в статье.
  • Добавьте изображение в свой документ под абзацем, как объяснено ранее в статье. Если сможете использовать другую картинку (со своего компьютера или из интернета) — вы большой молодец!

Если вы запутались, всегда можно запустить пример сначала кнопкой Reset. Сдаётесь — посмотрите ответ, нажав на Show solution.

Пробелы в HTML

Вы могли заметить, что в примерах кода из этой статьи много пробелов. Это вовсе не обязательно — следующие два примера эквивалентны:

<p&gt;Собаки глупы.</p&gt;

<p&gt;Собаки        
         глупы.</p&gt;

Не важно, сколько пустого места вы используете в разметке (что может включать пробелы и сдвиги строк), браузер, при анализе кода, сократит все пустое место до одного пробела. Зачем использовать много пробелов? Ответ это доступность для понимания — гораздо легче разобраться, что происходит в твоем коде, если он удобно отформатирован, а не просто собран вместе в одном большом беспорядке. В нашем коде каждый вложенный элемент сдвинут на два пробела относительно элемента, в котором он находится. Вы можете использовать любое форматирование (в частности, количество пробелов для отступа), но лучше придерживаться одного стиля.

Ссылки на сущности: Включение специальных символов в HTML

В HTML символы &lt;&gt;"' and &amp; являются специальными символами. Они часть HTML синтаксиса сами по себе, так как вам включить один из этих символов в текст, например если вы хотите использовать ампресанд или знак «меньше чем», и вам не нужно, чтобы эти знаки интерпретировалось браузером как часть разметки?

Мы должны использовать ссылки-мнемоники  — специальные коды, которые отображают спецсимволы, и могут быть использованы в точных позициях. Каждая ссылка-мнемоник начинается с ампресанда (&), и завершается точкой с запятой (;).

Буквенный символСимвольный эквивалент
<&lt;
>&gt;
«&quot;
&apos;
&&amp;

В  следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:

<p&gt;In HTML, you define a paragraph using the <p&gt; element.</p&gt;

<p&gt;In HTML, you define a paragraph using the <p&gt; element.</p&gt;

В живом выводе ниже, вы можете заметить, что первый абзац выводится неправильно, так как браузер считает, что второй элемент  &lt;p&gt; является началом нового абзаца! Второй абзац нашего кода выводится правильно, потому что мы заменили угловые скобки на ссылки-мнемоники.

Примечание: Таблица всех доступных в  HTML символов-мнемоников  в Википедии: List of XML and HTML character entity references.

HTML комментарии

В HTML, как и в большинстве языков программирования, есть возможность писать комментарии в коде. Комментарии игнорируются обозревателем и не видны пользователю, их добавляют для того, чтобы пояснить, как работает написанный код, что делают отдельные его части и т. д. Такая практика полезна, если вы возвращаетесь к коду, который давно не видели или когда хотите передать его кому-то другому.

Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры &lt;!-- и --&gt;, например:

<p&gt;I'm not inside a comment</p&gt;

<!-- <p&gt;I am!</p&gt; --&gt;

Как вы увидете ниже, первый параграф будет отображён на экране, а второй нет.

Подведение итогов

Вы дошли до конца статьи — надемся, вам понравилось путешествие по основам HTML. На этом этапе вы уже должны немного разобраться, как выглядит язык, как он работает на базовом уровне и уметь описать несколько элементов и атрибутов. Сейчас идеальное время и место, чтобы продолжить изучать HTML. В последующих статьях мы рассмотрим некоторые из вещей, которые вы уже рассмотрели, но намного подробнее, а также представим некоторые новые функции языка. Оставайтесь с нами!

Примечание: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets или CSS. CSS — это язык, который используется для стилизации веб-страниц (например изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймете, HTML и CSS созданы друг для друга.

Рубрики
WordPress

Что нового в НОВОЙ версии WordPress 5.3?


Выпуск 5.3 улучшает и расширяет, представленный в WordPress 5.0, редактор блоков новым блоком, более интуитивным взаимодействием и улучшенной доступностью. Новые функции в редакторе увеличивают свободу оформления, предоставляют дополнительные параметры макета и варианты стилей, позволяя дизайнерам полностью контролировать внешний вид сайта. В этом выпуске также представлена тема Twenty Twenty, предоставляющая пользователю большую гибкость проектирования и интеграцию с редактором блоков. Создание красивых веб-страниц и продвинутых макетов никогда не было проще.

Рубрики
Linux

Как установить IonCube в Ubuntu 18, 16 / Debian 9


IonCube — это библиотека для кодирования и декодирования PHP-кода. Как правило используется для защиты кода от не лицензионного использования. Приложения, зависящие в своей работе от этой библиотеки, при ее отсутствии, могут оказаться неработоспособными.

Рубрики
WooCommerce

Как сделать минимальную сумму заказа в корзине WooCommerce?


Часто владельцем магазинов под управлением WordPress + WooCommerce приходится сталкиваться с задачей ограничения возможности заказа определенной минимальной суммой. И если товары в корзине магазина не достигают этого порога, то заказ осуществить не получится — пользователь увидеть уведомление.

Рубрики
Разное (Без рубрики)

Как ускорить загрузку сайта на WordPress?


Установили на сайт метрику и чат jivosite и скорость загрузки увеличилась с 3 сек до 8 (*в мобильной версии ).
К сожалению чаты и метрика нам жизненно необходимы, но и загрузка долгая мешает жить.
Как можно решить проблему скорости загрузки?

https://toster.ru/q/669745#answer_1460876

Я делаю по-другому — оборачиваю код в скролл-ивент + задержка в 1 секунду. То есть, сайт загрузился быстро, и как только пользователь начал скроллить хоть чуть-чуть — секундный таймаут и загрузка дополнительных ресурсов. Гугл доволен, пользователи вообще не замечают задержки:

var fired = false;

window.addEventListener('scroll', () => {
    if (fired === false) {
        fired = true;
        
        setTimeout(() => {
            // Здесь все эти тормознутые трекеры, чаты и прочая ересь,
            // без которой жить не может отдел маркетинга, и которые
            // дико бесят разработчиков, когда тот же маркетинг приходит
            // с вопросом "почему сайт медленно грузится, нам гугл сказал"
        }, 1000)
    }
});
Рубрики
Веб-разработка

Как создается модель DOM?


Перед тем как вывести страницу на экран, браузер создает модели DOM и CSSOM. Поэтому мы должны предоставить браузеру кратчайший путь к HTML и CSS

  • Байты → символы → разметка → узлы → объектная модель.
  • Браузер преобразует HTML-разметку в объектную модель документа (DOM), а CSS-разметку — в объектную модель таблицы стилей (CSSOM).
  • Модели DOM и CSSOM не зависят друг от друга.
  • Инструменты разработчика в Chrome позволяют записать и проанализировать этапы создания DOM и CSSOM.

Модель DOM

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

Возьмем самую простую веб-станицу с текстом без форматирования и одним изображением и посмотрим, как она обрабатывается в браузере.

  1. Преобразование. Браузер преобразует байты из HTML-файла, размещенного на диске или в сети, в символы, основываясь на приведенной в файле кодировке (например, UTF-8).
  2. Разметка. На основании стандарта W3C HTML5 браузер выделяет среди символов теги в угловых скобках, такие как , и другие. У каждого тега есть свое значение и свой набор правил.
  3. Создание объектов. С помощью HTML-тегов браузер выделяет в документе объекты с определенными свойствами.
  4. Формирование DOM. Объекты образуют древовидную структуру, повторяющую иерархию HTML-файла, в котором одни теги помещаются в другие. Так, объект p помещается под body, а объект body, в свою очередь, под html, и так далее.

В результате образуется объектная модель документа (DOM), с помощью которой браузер продолжает обрабатывать страницу.

Все эти действия (преобразование байтов в символы, определение разметки, создание объектов и формирование DOM) браузер должен выполнять каждый раз при обработке HTML-разметки. Этот процесс занимает некоторое время, особенно при обработке большого количества тегов.

Время, затрачиваемое на создание DOM, можно отслеживать с помощью функции Timeline в инструментах разработчика. На скриншоте выше видно, что для преобразования нашего HTML-кода в DOM браузеру понадобилось 5 мс. Конечно же, чем больше кода содержит страница, тем дольше длится обработка, что может вызывать проблемы — например, при создании плавной анимации. Но об этом вы узнаете из следующих разделов руководства.

Итак, наша модель DOM готова. Но для того чтобы вывести страницу на экран, одной структуры объектов недостаточно. Браузер также должен определить, как эти объекты выглядят. Поэтому рассмотрим следующий этап — формирование объектной модели таблицы стилей (CSSOM).

Модель CSSOM

При формировании DOM браузер обнаружил в документе ссылку на таблицу стилей (style.css). Поскольку она необходима для визуализации страницы, браузер мгновенно отправляет на сервер запрос и получает в ответ следующий код:

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

Конечно, стили можно обозначать прямо в разметке. Однако поместив их в CSS-файл, мы разделяем задачи и позволяем дизайнерам работать над CSS, пока разработчики сосредоточены на HTML.

Чтобы обработать данные из CSS-файла, браузер должен выполнить те же самые действия, что и с HTML-документом:

Байты из CSS-файла преобразуются в символы, символы — в теги, а теги — в объекты, которые образуют модель CSSOM:

Почему CSSOM имеет древовидную структуру? Сначала браузер присваивает объекту правила, характерные для его родительского элемента, а затем — характерные только для него. Таким образом получается каскадный набор стилей.

Чтобы понять это правило, взгляните на схему выше. На ней видно, что любой текст, заключенный в тег spanвнутри тега body, будет иметь размер 16 пикселей и будет выделен красным цветом. Правило, определяющее размер шрифта, перенесено в объект span из body. При этом текст, помещенный в тег span внутри параграфа p, подчиняется другому правилу и не отображается на странице.

Обратите внимание, что схема отражает модель CSSOM не полностью. На ней представлены только правила, замещающие стили по умолчанию, которые применяются браузерами при отсутствии CSS-файла и соответствующей HTML-разметки. См. стили Internet Explorer. Именно значения по умолчанию отображаются на вкладке Computed (По умолчанию) в инструментах разработчика.

Хотите узнать, сколько времени заняла обработка CSS-файла? Воспользуйтесь инструментами разработчика: запишите события загрузки на вкладке Timeline (Временная шкала) и найдите событие под названием Recalculate Style (Перерасчет стиля). В нем отображается время создания CSSOM и обработки стилей по умолчанию.

Обработка нашей незамысловатой таблицы стилей заняла 0,6 мс и коснулась 8 объектов. Но почему при создании CSSOM браузер обрабатывал объекты, содержащиеся в другой модели — DOM? Об этом и пойдет речь в следующей главе. Из нее вы узнаете о модели визуализации, которая образуется из моделей DOM и CSSOM.

Рубрики
Разное (Без рубрики)

Что нового в WordPress 5.1?


Состояние здоровья сайта

С фокусом на безопасность и скорость, этот выпуск представляет первые возможности отслеживания состояния здоровья сайта. WordPress будет показывать уведомления администраторам сайтов, чьи сервера используют старые версии PHP (это язык программирования, на котором написан WordPress).

При установке новых плагинов WordPress будет проверять совместимость плагина с версией PHP вашего сайта, и предотвратит установку при несовместимости.

Производительность редактора

Предложенный в WordPress 5.0 редактор блоков продолжает улучшаться. В частности, значительно была улучшена его производительность. Редактор будет быстрее запускаться и набирать текст в нём будет более гладко. В дальнейших выпусках производительность будет и далее улучшаться.

Радость разработчикам

Метаданные для сайтов сети

В выпуске 5.1 была добавлена новая таблица базы данных для хранения метаданных о сайтах сети, она хранит данные относящиеся к сайтам в контексте мультисайтовой/сетевой установки WordPress.

Cron API

Cron API был обновлен новыми функциями возвращающими данные на выходе, а также включает новые фильтры для изменения хранилища cron. Другие изменения меняют поведение запуска cron на серверах с FastCGI и PHP-FPM версии 7.0.16 и выше.

Новые процессы сборки JS

WordPress 5.1 предоставляет новую возможность сборки JavaScript, продолжая реорганизацию кода, начатую в выпуске 5.0.

Другие улучшения для разработчиков

Разные улучшения включают обновления значений для константы WP_DEBUG_LOG, новой константы файла конфигурации для набора тестов, новые хуки для действий плагинов, фильтры короткого замыкания для wp_unique_post_slug(), WP_User_Query и count_users(), новую функцию human_readable_duration, улучшенную санитизацию метабокса таксономий, ограниченную поддержку LIKE для мета ключей при использовании WP_Meta_Query, новое уведомление «делается не так» при регистрации конечных точек вхождения REST API, и многое ещё!

Оставить классику

Предпочитаете остаться со старым, добрым классическим редактором? Без проблем! Поддержка плагина Classic Editor останется в WordPress до 2021 года включительно.

Плагин Classic Editor оставляет старый вариант редактора WordPress и экрана редактирования записи. Он позволяет использовать расширяющие его плагины, добавлять поля метаданных в старом стиле или иные вещи, зависимые от старого редактора. Для его установки зайдите на страницу плагинов и нажмите на кнопку “Установить” рядом с “Classic Editor”. После установки нажмите “Активировать”. Всё!

Заметка для пользователей вспомогательных технологий: Если у вас возникнут сложности в использовании редактора блоков, мы рекомендуем продолжать использовать классический редактор.

Рубрики
Разное (Без рубрики)

Что такое домен .tech?


Домен.tech помогает создать современный бренд с прицелом на будущее. Если ваша деятельность связана с технологиями, доменное имя представляет собой важнейший элемент. И все же не обязательно быть профессионалом в сфере технологий, чтобы использовать домен .tech. Даже если вы только начинаете заниматься технологиями, домен .tech может помочь вызвать к вам доверие и укрепить ваш авторитет. Этот домен является оптимальным вариантом для пользователей и организаций, включая:

  • специалистов в области ИТ;
  • веб-разработчиков;
  • разработчиков программного обеспечения;
  • менеджеров по управлению проектами;
  • дизайнеров пользовательского интерфейса.

Отношения компаний с технологиями часто переходят от любви к ненависти и обратно. Технологии нужны компаниям для работы, но они не обладают достаточными навыками, чтобы справиться с проблемами. Домен .tech — это превосходная вывеска, которая сообщит всем, куда нужно обращаться за технической поддержкой. Веб-разработчики, аналитики безопасности, системные администраторы, исследовательские фирмы и технологические блогеры также могут зарегистрировать .tech, чтобы получить веб-адрес, подчеркивающий их преимущества.

Займите свое место на передовом рубеже.

Веб-сайт, размещенный на домене .tech, — это не место, где можно почитать отзывы о пишущих машинках или черно-белых телевизорах. Домен .tech всецело посвящается последним достижениям на рынке. Это доменное имя позволяет людям сразу же понять, что они смотрят на что-то новое.

Неважно, будет ли это приложение для смартфонов, бытовая техника или что-то невиданное ранее, покажите миру, что вы разработали новейшую крайне необходимую вещь, за которой в скором времени будут охотиться люди, и что существует только одно место, где они могут ее найти. Зарегистрируйте .tech и приступите к формированию ожидания того, что у вас есть.

Давайте поговорим о технологии.

Если вы читаете блоги, то знаете, что обсуждений, посвященных технологиям, хватает с избытком. Поэтому если вы готовитесь к запуску посвященного технологиям блога, верным шагом станет регистрация .tech и формирование ожидания информации, которую вы предоставляете. От бытовой электроники до авиации и техники — людям все мало и мало технологий, а вы можете стать основным источником последней информации.

Позвольте людям ознакомиться с .tech

Сильно ли связана работа вашей организации с удивительными технологиями? Вы можете приобрести .tech, чтобы создать пространство, посвященное технологической стороне вашей деятельности. Например, гуманитарная деятельность может позволить людям увидеть, каким образом они помогают развивающимся общинам в области коммуникаций или сельскохозяйственных технологий. А если в вашем интернет-магазине продается одежда или аксессуары, усовершенствованные вами для конкретного применения, домен .tech может позволить людям понять, почему это лучший выбор.

Не отставайте от технологий.

Всем известно, что в сфере технологий работают люди с высоким интеллектом. Это люди, которые ставят себе за цель оставаться на передовых позициях, — и будьте уверены, что они знают о доменах .tech. Это значит, что вы можете соревноваться с некоторыми мыслителями, поскольку изобретаете способ использования обширных возможностей доменов .tech. Как только вам в голову придет творческая идея (а это случится скоро), зарегистрируйтесь на .tech, чтобы завоевать свое место в технологическом сообществе.

Рубрики
Плагины

Как включить режим обслуживания (сайт в разработке) в WordPress?


Плагин WP Maintenance Mode

Добавьте страницу обслуживания на ваш блог, что даст посетителям знать, что ваш блог находится на обслуживании, или добавить страницу скорого открытия нового сайта. Пользователи с правами администратора получат полный доступ к блогу, включая фронт-энд.

Активируйте плагин и ваш блог будет работать в режиме обслуживания. Только зарегистрированные пользователи с достаточными правами смогут видеть содержимое сайта. Вы можете использовать дату с таймером обратного отсчета для информирования посетителей или настроить своё уведомление.

Так же работает с мультисайтовыми установками WordPress (каждый блог из сети имеет свои настройки обслуживания).

ОСОБЕННОСТИ

  • Полностью настраиваемый (смена цветов, текстов, фоновых изображений);
  • Форма подписки (экспорт email’ов в .csv файл);
  • Счётчик времени (обратного отсчёта);
  • Контактная форма (получение писем от посетителей);
  • Страница скорого открытия;
  • Шаблоны «посадочной страница» (landing page);
  • Поддержка WordPress multisite;
  • Адаптивный дизайн;
  • Иконки социальных медиа;
  • Работает с совершенно любой темой WordPress;
  • Настройки SEO;
  • Исключение URL адресов из режима обслуживания;
  • Функциональность бота для сбора адресов email эффективным и дружественным способом.
  • Поддержка GDPR
Рубрики
Разное (Без рубрики)

Как сделать preloader для карусели (слайдера) Slick?


Недавно столкнулся с проблемой ранней загрузки картинок слайдера до инициализации  плагина карусели «Slick«. Дело в том, что библиотека jQuery и скрипты плагина и его инициализации происходят в нижней части страницы. Следовательно, сформированный HTML-код беспрепятственно отрисовывается при рендере страницы и лишь после этого происходит инициализация и подхватывается функционал плагина, изображения слайдера выстраиваются в ряд и все выглядит прекрасно…

Но на долю секунды посетитель сайта видит не приятную картину — изображения слайдера отображаются друг под другом. Данную проблему описывал один из пользователей на форуме вопросов и ответов «Тостер»:

Для показа слайдов/банеров использую slick slider. Проблема в том, что при загрузке страницы возникает секундное появление всех картинок слайдер в столбик, и только после их полной загрузке формируется слайдер. Выглядит очень неопрятно. Как вы обычно делаете preloader для слайдера, который сначала формируется, а только потом отображает картинки?

Есть много вариантов решения данной задачи:

  • грузить в верхней части скрипты и стараться инициализировать плагин после разметки HTML слайдера,
  • воспользоваться сторонним плагином, например, imagesLoaded и до полной загрузки страницы и инициализации всех плагинов отображать тот самый preloader (прелоадер), как правило в виде анимации.

Но есть , пожалуй, самый простой способ, который гарантированно позволит не отображать ничего лишнего до момента пока плагин карусели не проинициализирует тот или иной селектор. И воспользуемся мы только одним методом библиотеки  jQuery — removeClass()

На примере CMS WordPress это будет выглядеть следующим образом:


wp_add_inline_script( 'slick', "jQuery(document).ready(function(){
  $('#front-slider').slick({
    dots: true,
    infinite: true,
    arrows: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    focusOnSelect: true,
    lazyLoad: 'ondemand',
  });

  $('#front-slider .slide').removeClass( 'd-none' );
});" );

Давайте немного разберем этот снипет. Первая строчка — это функция «WordPress», которая добавляет наш скрипт после зависимого скрипта, который мы указали первым аргументом, далее, вторым аргументом, идет JS-функция инициализации нашего слайдера в определенном селекторе «#front-slider». А вот предпоследняя строчка эта и есть наш трюк! С помощью метода библиотеки jQuery — «removeClass()» мы удаляем CSS-класс из нашего слайдера, который , как можно догадаться, скрывал его, то есть имел свойство и значение display: none;.

Этот способ гарантирует что слайдер не отобразится до тех пор, пока не проинициализируется.
Любителям чистого JavaScript посвящается этот снипет:

<script>
function myFunction() {
   var element = document.getElementById("myDIV");
   element.classList.remove("mystyle");
}
</script>

JS-функция достаточно проста. Мы «кладем» в переменную element нужный селектор, а затем следующим действием, обратившись к свойству classList, методом remove удаляем класс, у которого было значение свойства display: none;. Вот и вся магия 🙂

Рубрики
Плагины

Как получать статистику посещений сайта на WordPress?


Комплексный плагин для ведения статистики посетителей вашего WordPress, посетите наш веб-сайт, чтобы узнать последние новости и свежую информацию.

Ведите статистику для вашего сайта WordPress независимо от каких-либо внешних сервисов и собирайте данные, когда необходимо сохранить конфиденциальность ваших посетителей.

Статистика отображаемая в виде графиков, которую всегда можно посмотреть через интерфейс администратора WordPress.

Этот продукт включает данные GeoLite2 от MaxMind, которые доступны на https://www.maxmind.com.

ОСОБЕННОСТИ

  • Пользователи онлайн, посещения, посетители и статистика страниц
  • Search Engines, see search queries and redirects from popular search engines like Google, Bing, DuckDuckGo, Yahoo, Yandex and Baidu
  • Overview and detail pages for all kinds of data, including; browser versions, country stats, hits, exclusions, referrers, searches, search words and visitors
  • Местоположение GeoIP по странам
  • Поддержка хеширования IP адресов в базе данных для защиты конфиденциальности ваших пользователей
  • Интерактивная карта местоположения посетителей
  • E-mail отчёты статистики
  • Установите уровень доступа для просмотра и управляйте ролями на основе ролей WordPress.
  • Exclude users from statistics collection based on various criteria, including; user roles, common robots, IP subnets, page URL, login page, RSS pages, admin pages, Country, number of visits per day, hostname
  • Запись статистики с исключениями
  • Автоматическое обновление базы данных GeoIP
  • Автоматическое удаление наиболее старых данных в БД
  • Экспорт данных в файлы форматов XML, CSV или TSV
  • Виджет для предоставления информации всем пользователям
  • Шорткоды для самых разных типов данных в виджетах страниц/записей.
  • Виджеты консоли для раздела администратора
  • Всеобъемлющее руководство Администратора

Инструкция по установке

  1. Загрузите директорию wp-statistics в /wp-content/plugins/
  2. Активируйте плагин на странице «Плагины» в панели управления WordPress.
  3. Убедитесь, что в вашей копии WordPress корректно установлены Дата и Время.
  4. Перейдите на страницу настроек плагина и измените необходимые настройки (обратите внимание, что при первом входе это также загрузит базу данных GeoIP).