Архив метки: Сайтостроение

Как перенести сайт WordPress с HostGator на SiteGround? –

Хостинговые компании, такие как HostGator и Bluehost, были популярны раньше из-за бума блогов. Однако другие компании, такие как SiteGround, значительно выросли по сравнению с этими компаниями EIG (теперь они называются Newfold Digital). Если вы используете HostGator и срок действия плана хостинга истекает, рекомендуется поискать SiteGround. Миграция с HostGator на SiteGround бесплатна, но длительный процесс зависит от текущей настройки вашего сайта. Также узнайте, как легко перенести сайт Bluehost на SiteGround.

Почему стоит выбрать SiteGround?

У каждой компании есть свои преимущества и недостатки. SiteGround предлагает первоначальную покупку менее чем за 3 доллара, а продление стоит 17,99 долларов в месяц для самого низкого плана StartUp. Это похоже на самый дешевый план HostGator Hatchling для общего хостинга. Хотя SiteGround не предлагает бесплатный домен на 1 год, у него есть лучшие варианты:

  • Бесплатная электронная почта
  • Многоуровневое кэширование
  • Бесплатный CDN с ограниченными функциями
  • 30-дневное автоматическое онлайн-резервное копирование
  • Stagged и Git для плана GoGeek
  • Высокая оценка поддержки клиентов

Специальное предложение хостинга SiteGround

Веб-хостинг SiteGround

Получите сверхбыстрый управляемый хостинг WordPress с бесплатной электронной почтой, CDN, сверхбыстрым PHP и тремя уровнями кэширования на Google Cloud Platform.

1. Удалить сайт из Cloudflare

Как уже упоминалось, этот процесс во многом зависит от вашего регистратора домена, CDN и настройки электронной почты. Перейдите к шагу 2, если вы не используете Cloudflare или любой другой CDN, который меняет серверы имен. Если вы используете Cloudflare CDN, вам необходимо удалить свой сайт из Cloudflare и изменить DNS, указывающий на ваши серверы имен HostGator. Это связано с тем, что Cloudflare не предлагает возможности повторного сканирования DNS при смене хостинговой компании. Удаление сайта приведет к удалению ваших текущих зон DNS с IP-адресами HostGator, а затем повторное добавление сайта начнет использовать IP-адрес сервера SiteGround. Хотя вы также можете вручную редактировать записи DNS в Cloudflare, чтобы они указывали на SiteGround, удаление и повторное добавление сделают это автоматически.

  • Войдите в свою учетную запись HostGator, перейдите в раздел «Веб-сайты > Настройки сайта > Обзор» и найдите текущие данные сервера имен.

Откройте настройки сайта в HostGatorОткройте настройки сайта в HostGator

Получите серверы имен HostGatorПолучите серверы имен HostGator

Измените серверы имен на HostGatorИзмените серверы имен на HostGator

  • Перейдите в свою учетную запись Cloudflare и нажмите ссылку «Удалить этот сайт из Cloudflare», которая отображается в правом нижнем углу панели управления. Подтвердите свое действие по удалению сайта из вашей учетной записи.

Удалить сайт из CloudflareУдалить сайт из Cloudflare

Подождите некоторое время и проверьте, доступен ли он через серверы HostGator. Раньше распространение изменений DNS занимало несколько дней. Сегодня это уже не так, и вам вряд ли придется ждать несколько минут, чтобы увидеть, что ваш сайт работает через HostGator (а не через Cloudflare). Вы можете использовать любую онлайн-проверку DNS или инструмент проверки хост-сервера, чтобы убедиться, что на вашем сайте отображаются серверы имен HostGator и IP-адрес.

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

2. Добавление сайта и создание ключа миграции в SiteGround

Процесс миграции работает с плагином SiteGround Migrator, которому требуется ключ API для подключения к учетной записи хостинга SiteGround. Для создания ключа войдите в свою учетную запись хостинга SiteGround и нажмите кнопку «Новый веб-сайт» на вкладке «Веб-сайты».

Добавить новый сайт в SiteGroundДобавить новый сайт в SiteGround

  • Поскольку у вас уже есть сайт в HostGator, выберите опцию «Существующий домен», введите свое доменное имя в поле и нажмите кнопку «Продолжить».

Введите URL-адрес домена и продолжите.Введите URL-адрес домена и продолжите.

  • Выберите опцию «Перенос веб-сайта», а затем нажмите «Сверхбыстрая автоматическая миграция WordPress», которая является бесплатной опцией.

Выберите «Перенести веб-сайт» и «Бесплатная миграция».Выберите «Перенести веб-сайт» и «Бесплатная миграция».

  • Игнорируйте, если вам будет предложено купить какое-либо дополнение, например Site Scanner или CDN, и нажмите кнопку «Готово».

Игнорировать специальное предложениеИгнорировать специальное предложение

  • SiteGround создаст новый сайт в вашей учетной записи, что может занять несколько минут.

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

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

Токен миграции создан.Токен миграции создан.

Примечание: В любое время вы можете перейти в раздел «Инструменты сайта > WordPress > Migrator», чтобы получить ключ токена миграции.

3. Установите плагин SiteGround Migrator на существующий сайт.

Войдите на свой текущий сайт WordPress (который использует HostGator) и перейдите в раздел «Плагины > Добавить новый». Найдите и установите плагин SiteGround Migrator, который доступен бесплатно в репозитории WordPress.

Установите SiteGround MigratorУстановите SiteGround Migrator

4. Свяжите токен миграции в плагине

После активации плагина перейдите в меню «SG Migrator». Вставьте скопированный токен миграции и нажмите кнопку «Начать миграцию». Вы также можете указать адрес электронной почты (по желанию), чтобы получить уведомление о завершении процесса миграции.

Введите токен и адрес электронной почтыВведите токен и адрес электронной почты

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

Мониторинг хода загрузкиМониторинг хода загрузки

Если все пойдет хорошо, вы увидите сообщение «Передача данных завершена», как показано ниже. На этом экране вы не увидите временных URL-адресов или серверов имен.

Загрузка успешно завершенаЗагрузка успешно завершена

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

Сообщение о завершении миграцииСообщение о завершении миграции

5. Проверьте временный сайт и перейдите на серверы имен SiteGround.

Это может вас сбить с толку, поскольку вы добавили существующий домен, но плагин миграции все равно создал временный URL-адрес. Это связано с тем, что плагин ВСЕГДА создает временный URL-адрес, который будет доступен в течение 48 часов. Вы можете проверить сайт, используя временный URL-адрес, и убедиться, что все работает нормально.

Следующим шагом будет изменение DNS-серверов имен на IP-адреса SiteGround, чтобы ваш сайт начал работать после новой настройки. Просто зайдите к своему регистратору доменов и измените серверы имен на ns1.siteground.net и ns2.siteground.net. Это серверы имен по умолчанию для SiteGround, которые вы должны получить по электронной почте.

Изменить DNS на SiteGroundИзменить DNS на SiteGround

Откройте свой сайт во вкладке браузера и убедитесь, что все работает нормально. Как уже упоминалось, вы можете использовать инструменты проверки DNS или хостинга, чтобы убедиться, что сайт работает через настройку SiteGround.

Проверьте статус DNSПроверьте статус DNS

6. Установите SSL в SiteGround Tools.

Важным моментом является то, что SiteGround не устанавливает SSL автоматически для перенесенного сайта. Итак, перейдите в раздел «Инструменты сайта» и выберите «Безопасность > Менеджер SSL». Здесь вы можете бесплатно установить Let’s Encrypt SSL для своего сайта.

Давайте зашифруем установленный SSLДавайте зашифруем установленный SSL

После установки SSL перейдите в раздел «HTTPS Enforce» и включите на своем сайте только использование протокола HTTPS. Это необходимо, если у вас есть интернет-магазин, чтобы убедиться, что все работает только через HTTPS.

Включить принудительное использование HTTPSВключить принудительное использование HTTPS

7. Чтение сайта в Cloudflare

SiteGround предлагает встроенный бесплатный CDN с ограниченными функциями. Вы можете проверить параметры в разделе «Скорость > CDN» и решить, использовать их или нет. Если вы решили использовать Cloudflare, просто зайдите в свою учетную запись и добавьте свой сайт. Это приведет к повторному сканированию вашего DNS и добавлению записей SiteGround. Вы можете проверить и удалить, если какие-либо DNS-записи HostGator все еще отображаются в редакторе.

Хотя обычные домены будут ждать 24 часа в состоянии ожидания, чтение того же сайта займет час или два. Вам не нужно об этом беспокоиться, поскольку старые настройки будут сохранены, а трафик будет проходить через Cloudflare после утверждения домена.

Настройка DNS CloudflareНастройка DNS Cloudflare

8. Настройка электронной почты

Если вы используете стороннюю службу электронной почты со своим IP-адресом HostGator, обязательно измените его на SiteGround. По умолчанию SiteGround DNS будет иметь три записи MX для электронных писем (которые также будут добавлены в Cloudflare). Вы можете настроить и начать использовать SiteGround Webmail из раздела «Инструменты сайта».

Заключительные слова

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



2024-01-24T18:04:07
Сайтостроение

Как получить автоматические обновления для тем и плагинов Envato WordPress? –

Envato — одна из крупнейших торговых площадок для покупки цифровых товаров. Это также место для покупки премиальных тем и плагинов WordPress. Этот процесс проще: вы можете просто купить, загрузить и установить элементы на свой сайт. Однако проблема возникает, когда вы хотите обновить тему или плагин. В этой статье давайте проверим, как получать автоматические обновления для тем и плагинов WordPress, приобретенных на торговой площадке envato.

Связывание Envato и сайта WordPress

Поскольку версии WordPress и PHP постоянно обновляются, вам следует обновить свою тему и плагины для запуска защищенного сайта WordPress. Большинство авторов envato просят пользователей выполнить обновление вручную, что является болезненным процессом. Сначала вам следует удалить тему/плагин из панели администратора, загрузить последнюю версию из themeforest/codecanyon и снова загрузить ее из панели администратора (или через файловый менеджер/FTP).

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

Примечание: Этот процесс работает только для тем и плагинов WordPress, но не для других приобретенных элементов, таких как скрипты PHP.

Установка плагина Envato Market WordPress

Есть несколько способов установить плагин Envato Market на сайт WordPress.

  • Перейти на сайт envato и загрузите последнюю версию ZIP-файла плагина. Войдите в свою административную панель WordPress и перейдите в раздел «Плагины > Добавить новый плагин». Нажмите кнопку «Загрузить плагин» и загрузите zip-файл. Наконец, перейдите в раздел «Плагины» и активируйте установленный плагин.

Загрузите плагин Envato MarketЗагрузите плагин Envato Market

  • Некоторые авторы тем также предоставляют плагин Envato Market как часть загрузки продукта. Обычно вы можете найти это в разделе «Внешний вид > Установка плагинов» или в меню вашей темы на боковой панели администратора. Ниже приведен пример темы журнала Pixwell, который показывает, что плагин поставляется как часть файлов темы. В таком случае вы можете просто нажать ссылку «Установить/Активировать», чтобы добавить плагин на свой сайт.

Плагин Envato Market в теме PixwellПлагин Envato Market в теме Pixwell

После того, как вы установили плагин Envato Market, перейдите в раздел «Плагины» и обновите плагин до последней версии. Это особенно необходимо, если вы установили более старую версию из пакета темы.

Обновите плагин Envato MarketОбновите плагин Envato Market

Генерация личного токена Envato API

Следующий шаг — создать токен API в вашей учетной записи envato и связать его с плагином для получения обновлений.

  • Плагин добавит новый пункт меню на боковую панель под названием «Envato Market» (обычно это последний пункт меню). Перейдите в раздел «Envato Market > Настройки» и нажмите ссылку на первом шаге.

Настройки плагина EnvatoНастройки плагина Envato

  • Введите имя пользователя/пароль и войдите в свою учетную запись envato. Вы автоматически войдете в систему, если вы уже вошли в свою учетную запись themeforest или codecanyon.

Войдите в учетную запись EnvatoВойдите в учетную запись Envato

  • Вы попадете на страницу создания токена и введите имя для своего токена.

Укажите имя токенаУкажите имя токена

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

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

  • Скопируйте созданный токен и сохраните его локально в текстовом файле. Это важно, поскольку токен не будет виден в учетной записи envato, если он понадобится вам позже (хотя вы можете создать новый снова). Установите флажок подтверждения и нажмите «Woohoo! кнопку «Понял».

Копировать созданный токенКопировать созданный токен

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

Редактировать или удалить токен EnvatoРедактировать или удалить токен Envato

Связывание токена Envato в WordPress

Вернитесь к администратору WordPress и в раздел «Настройки» плагина Envato Market. Просто вставьте сгенерированный персональный токен в поле и нажмите кнопку «Сохранить изменения». Вы увидите сообщение об успехе: «Ваш личный токен OAuth проверен». Теперь нажмите кнопку «Проверить соединение API», расположенную рядом с кнопкой «Сохранить изменения». Вы должны увидеть то же сообщение об успешной проверке личного токена OAuth. Это означает, что токен работает нормально и плагин подключен к вашей учетной записи envato.

Токен добавлен в WordPressТокен добавлен в WordPress

Ручные и автоматические обновления

После успешной проверки токена плагин добавит вкладки «Темы» и «Плагины» и вытащит все ваши покупки из учетной записи envato. Отсюда вы можете установить любую купленную тему или плагин с сайтов themeforest и codecanyon. Плюсом является то, что вы также можете переключиться на любую другую приобретенную тему без длительного процесса загрузки и загрузки.

Для ручного обновления – В моем случае я перехожу на вкладку «Envato Market > Темы» и нажимаю ссылку «Доступно обновление», чтобы получить последнюю версию темы. Это ручной процесс, с помощью которого я могу проверить наличие обновления и установить его при необходимости. Для плагинов перейдите на вкладку «Плагины» и установите последние обновления.

Проверьте обновление темыПроверьте обновление темы

Для автоматического обновления – Если вы хотите включить автоматическое обновление, перейдите в раздел «Внешний вид > Темы» и нажмите на свою тему. Здесь вы также увидите уведомление о доступности обновления и нажмите ссылку «обновить сейчас», чтобы получить последнюю версию. Нажмите ссылку «Включить автоматические обновления», чтобы тема автоматически получала обновления от themeforest. Если у вас есть плагин, перейдите в раздел «Плагины > Установленные плагины» и включите автоматическое обновление, чтобы получать обновления с codecanyon.

Включить автоматическое обновление для темы EnvatoВключить автоматическое обновление для темы Envato

Заключительные слова

К сожалению, этот плагин недоступен в бесплатном репозитории WordPress, и вам необходимо получить его вместе с покупкой темы/плагина или загрузить/установить с сайта envato. Хотя в репозитории WordPress доступно несколько сторонних плагинов, Envato Market является официальным плагином для связи вашего сайта WordPress и учетной записи envato. Все, что вам нужно, это создать личный токен API и связать его с плагином, чтобы получать последние обновления в панели администратора.



2024-01-24T18:04:07
Сайтостроение

Как изменить типографику блоков Гутенберга в WordPress? –

Семейство шрифтов — один из важных факторов, определяющих эстетику вашего веб-сайта. Многие темы WordPress предлагают тысячи шрифтов Google, а также предоставляют возможность использовать системный стек или собственный стиль. Помимо использования семейства шрифтов для всего сайта, вам может быть интересно украсить лишь несколько текстовых элементов на вашей странице. Возможно, вы хотите изменить цвет выделения или добавить буквицу, чтобы первая буква была крупнее. В этой статье мы объясним, как изменить эти типографские настройки для блоков Гутенберга на вашем сайте WordPress.

Блоки Гутенберга

Есть два способа настроить параметры оформления отдельных блоков в WordPress:

  • Использование настроек Гутенберга по умолчанию для текстовых блоков.
  • С помощью блочного плагина.

Если вы все еще используете классический редактор или используете собственный тип сообщений, который не поддерживает Gutenberg (например, страницы продуктов WooCommerce), то настройки по умолчанию будут другими, как описано в конце этой статьи.

1. Настройки оформления для блоков Гутенберга

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

Абзац с пользовательской типографикойАбзац с пользовательской типографикой

Перейдите к сообщению или странице, где вы хотите изменить настройки оформления, и нажмите на блок абзаца. На правой боковой панели перейдите на вкладку «Блокировать», где вы можете найти параметры изменения цветов, настройки оформления и расширенный раздел.

Настройки блока абзацев в ГутенбергеНастройки блока абзаца в Гутенберге Изменение размера шрифта

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

Нажмите значок «Установить нестандартный размер», расположенный чуть выше параметра XL. Появится поле и ползунок для установки пользовательского размера шрифта для вашего абзаца. Вы можете изменить единицу измерения CSS на px, em или em, щелкнув единицу измерения px, отображаемую в поле.

Установить собственный размер шрифтаУстановка пользовательского размера шрифта. Просмотр настроек скрытой типографики.

Нажмите на три вертикальные точки (называемые «Параметры типографики»), расположенные в правом конце заголовка «Типографика». Это покажет вам все скрытые настройки для настройки внешнего вида вашего текста.

Скрытые настройки типографики для блокаСкрытые настройки типографики для блока

Нажмите ссылку «Сбросить», расположенную рядом с «Размером шрифта», чтобы изменить размер текста на значение по умолчанию (в соответствии с вашей темой). Нажмите на все параметры в разделе «Инструменты» один за другим, чтобы включить их.

Проверьте все параметры типографикиПроверьте все параметры типографики

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

Все скрытые настройки показаныОтображаются все скрытые настройки. Изменение внешнего вида шрифта.

Если вы заметили верхнюю панель инструментов блока, на ней есть варианты выделения жирным шрифтом и курсивом. Вы также можете нажать на маленькую стрелку вниз (называемую «Дополнительно») и использовать дополнительные параметры, такие как выделение, зачеркивание, надстрочный индекс, нижний индекс и т. д. Однако вы не можете установить более светлый, полужирный курсив или черный курсив на панели инструментов блока. . Просто щелкните раскрывающийся список под опцией «Внешний вид» на правой боковой панели и выберите нужный стиль шрифта.

Выберите внешний вид стиля шрифтаВыберите внешний вид стиля шрифта. Настройка других параметров.

Как и внешний вид, вы можете установить следующие параметры:

  • Интервал между буквами — введите число, чтобы увеличить или уменьшить расстояние между буквами в выбранном блоке абзаца. Вы можете использовать такие значения, как 0,5, 1 или 1,5, и проверять изменения в реальном времени.
  • Оформление: выберите «Нет», «Подчеркивание» или «Зачеркивание».

Настройте интервал между буквами, буквицу и регистр буквНастройте интервал между буквами, буквицу и регистр букв

  • Регистр букв — выберите «нет», «прописные», «строчные» или «заглавные» параметры, чтобы изменить регистр букв.
  • Буквица – наконец, включите эту кнопку, чтобы первая буква отображалась крупной. Это идея для начального абзаца ваших статей.

Примечание: После настройки абзаца вы можете в любой момент нажать ссылку «Сбросить все», чтобы удалить все настройки.

Изменение цвета текста

Есть два способа добавить цвета в блок:

  • Цвета текста и фона – выберите опцию «Текст» или «Фон», отображаемую под заголовком «Цвет» на правой боковой панели. Откроется цветовая палитра, показывающая цвета вашей темы по умолчанию. Если вы не хотите использовать цвет темы, щелкните поле над цветовой палитрой, чтобы открыть палитру цветов.

Изменить цвета текста и фонаИзменить цвета текста и фона

Когда вы выберете цвет, в поле отобразится предварительный просмотр и соответствующий цветовой код. Блок абзаца также мгновенно изменится на выбранный цвет текста. По умолчанию WordPress отображает шестнадцатеричный цветовой код. Нажмите раскрывающийся список Hex и при необходимости измените его на RGB или HSL. Эти параметры отобразят дополнительные ползунки для настройки цветовой комбинации.

Предварительный просмотр выбранного цветаПредварительный просмотр выбранного цвета и изменение кода

Аналогичным образом вы можете применить предпочитаемый цвет фона для абзаца. Если вы хотите удалить цвета, нажмите «Параметры цвета» (три вертикальные точки в конце заголовка «Цвет») и выберите параметр «Сбросить».

Сбросить параметры цвета и фонаСбросить параметры цвета и фона

Как вы можете видеть на скриншоте выше, цвет текста изменит цвет всего текста абзаца. Если вы хотите выделить только несколько слов в абзаце, выделите слова и нажмите маленькую стрелку на панели инструментов блока. Выберите опцию «Выделить», чтобы просмотреть палитру цветов. Отсюда вы можете установить цвета текста и фона, чтобы выделять только выбранные слова внутри блока абзаца.

Выделение текста и фона цветомВыделите текст и фон цветом с помощью расширенных настроек боковой панели

В разделе «Дополнительно» вы можете добавить собственные классы CSS и определить стили в разделе «Внешний вид > Настройка > Дополнительный CSS». Хотя это более технический характер, вы можете применять стили к нескольким блокам на одной странице. Узнайте больше о том, как добавить CSS на одну страницу в WordPress.

2. Использование блочных плагинов

Если параметров типографики, доступных в редакторе Gutenberg по умолчанию, недостаточно, вы можете использовать сторонний плагин блока. Например, плагин GenerateBlocks позволяет вам изменить семейство шрифтов для блока, что невозможно в Gutenberg.

Опция контейнера GenerateBlocksОпция контейнера GenerateBlocks

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

Варианты типографики спектровВарианты типографики спектров

3. Параметры типографики для классического редактора

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

Параметры оформления классического редактора TinyMCEПараметры оформления классического редактора TinyMCE

Заключительные слова

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



2023-09-27T21:32:33
Сайтостроение

Как добавить AJAX Live Search на сайт WordPress? –

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

Сайт WordPress по умолчанию против поиска AJAX

Вот как работает поиск по умолчанию в WordPress:

  • Введите запрос или ключевые слова в поле поиска и нажмите Enter.
  • Результаты поиска откроются на новой странице.
  • Щелкните нужный результат, чтобы открыть эту страницу.

Это длительный процесс, особенно когда ключевые слова имеют точное совпадение. Вот как работает живой поиск AJAX:

  • Введите запрос или ключевые слова в поле поиска.
  • Вы увидите живой результат поиска в виде раскрывающегося списка.
  • Щелкните и откройте страницу, соответствующую вашему запросу.

Целью AJAX является динамическая загрузка контента без обновления страницы. Здесь вам вообще не нужно посещать страницу результатов поиска, что может сэкономить время пользователя и увеличить концентрацию внимания.

Добавьте AJAX Live Search в WordPress

Во-первых, обязательно добавьте окно поиска в заголовок или боковую панель вашего сайта. Как правило, темы предлагают значок или поле поиска в навигации заголовка, и вы можете перейти в раздел «Внешний вид> Виджеты», чтобы добавить блок «Поиск» в область боковой панели. Помните, что если вы используете блочную тему, раздел «Виджеты» будет недоступен, и вам следует создать шаблон в разделе «Внешний вид > Редактор». Если у вас есть окно поиска на сайте, выполните следующие шаги, чтобы добавить функцию поиска в реальном времени AJAX.

Установить плагин SearchWP

  • Перейдите в раздел «Плагины > Добавить новый» в панели администратора и введите «searchwp» в поле поиска.
  • Это отфильтрует доступные плагины из репозитория WordPress и покажет плагин «SearchWP Live AJAX Search».
  • Нажмите кнопку «Установить сейчас», а затем кнопку «Активировать», чтобы начать использовать плагин на своем сайте.

Установите поисковый плагин SearchWP Live AJAXУстановите поисковый плагин SearchWP Live AJAX

Настройка плагина SearchWP

У плагина не так много опций, и после активации автоматический поиск AJAX в реальном времени. Однако перейдите в раздел «SearchWP > Live Search», чтобы изменить настройки по умолчанию.

  • Включить живой поиск – убедитесь, что этот флажок установлен, чтобы использовать функцию поиска в реальном времени AJAX.

Включить поиск AJAX в реальном времени в плагине SearchWPВключить Live AJAX-поиск в плагине SearchWP

  • Включить стиль – выберите опцию «Позиционирование и визуальное оформление», чтобы загрузить CSS из плагина. Если вы видите какие-либо проблемы со стилем CSS во внешнем интерфейсе, вы можете попробовать другие варианты, такие как «Только стиль позиционирования» или «Без стилей».
  • Позиционирование – вы можете выбрать отображение живого поиска над или под полем поиска. Рекомендуется выбрать «Под формой поиска», особенно если у вас есть опция поиска в шапке навигации или на боковой панели. Если у вас есть окно поиска в нижнем колонтитуле, вам может подойти вариант «Над формой поиска».
  • Автоматическая ширина – включите эту опцию, чтобы ширина раскрывающегося списка поиска в реальном времени совпадала с шириной формы поиска.
  • Скрыть объявления – включите это, чтобы отключить объявления плагинов.

Настройки плагина SearchWPНастройки плагина SearchWP

После выбора параметров нажмите кнопку «Сохранить настройки», чтобы применить изменения.

Тестирование живого поиска AJAX

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

Добавление поиска AJAX в WordPressДобавление поиска AJAX в WordPress

Если вы не видите совпадений в списке, нажмите клавишу ввода, чтобы открыть страницу поиска по умолчанию. WordPress откроет результаты поиска на одной из следующих страниц поиска и покажет 10 элементов в списке в соответствии со стилем вашей темы.

Вы можете изменить количество элементов, отображаемых на странице результатов, перейдя в раздел «Настройки > Написание» или введите число в поле «Страницы блога отображать не более». Однако этот выбор также повлияет на количество сообщений, отображаемых в блоге и на других страницах архива. Также можно заблокировать страницы внутреннего поиска в файле robots.txt, чтобы поисковые системы не индексировали эти страницы.

Заключительные слова

Как видите, плагин SearchWP НЕ изменит существующую функцию поиска WordPress. Он просто добавит функцию поиска в реальном времени AJAX и динамически покажет результаты. Однако пользователи по-прежнему могут посещать стандартную страницу поиска WordPress, чтобы увидеть список результатов. Обратите внимание, что некоторые коммерческие темы WordPress предлагают поиск AJAX как часть параметров темы. В этом случае используйте функцию темы вместо использования дополнительного плагина для той же цели.



2023-06-13T21:59:57
Сайтостроение

Как добавить панель инструментов веб-доступности на сайт WordPress? –

Веб-доступность — одна из упускаемых из виду областей в этом цифровом мире. Хотя в США существуют правовые законы, такие как американцы с ограниченными возможностями (ADA), не многие бизнес-сайты предлагают пользователям специальные возможности. К счастью, веб-браузеры предлагают различные функции доступности, такие как подписи, темный режим, увеличение / уменьшение и т. Д. Однако вы когда-нибудь задумывались, как добавить дополнительную панель инструментов веб-доступности, эксклюзивную на вашем веб-сайте WordPress? Это легко и бесплатно с помощью простого плагина.

Как выглядит панель инструментов веб-доступности?

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

Значок специальных возможностей во внешнем интерфейсеЗначок специальных возможностей во внешнем интерфейсе

Список специальных возможностейСписок специальных возможностей

Добавить панель инструментов веб-доступности в WordPress

  • Войдите в панель администратора WordPress и перейдите в раздел «Плагины > Добавить новый».
  • Найдите «Доступность в один клик» и найдите плагин One Click Accessibility.
  • Нажмите «Установить сейчас», а затем кнопку «Активировать», чтобы начать использовать плагин на своем сайте.

Установите плагин для специальных возможностей в один кликУстановите плагин для специальных возможностей в один клик

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

  • Кнопка «Перейти к содержимому» при использовании клавиатуры.
  • Подчеркните и удалите целевые атрибуты из всех гиперссылок.
  • Добавьте карту сайта, справку и ссылки для обратной связи.
  • Увеличьте или уменьшите размер текста.
  • Настройте фон на светлый цвет для удобства чтения.
  • Сделайте шрифт читабельным.
  • Отрегулируйте контрастность до высокой, отрицательной или используйте оттенки серого.
  • Сброс одним нажатием, чтобы отменить все изменения.

Вы можете настроить стиль и параметры, перейдя в меню «Доступность», добавленное плагином. Меню состоит из трех подразделов – «Настройки», «Панель инструментов» и «Настроить».

Меню плагина доступности в один кликМеню плагина «Доступность в один клик» 1. Настройки доступности в один клик

Перейдите в «Доступность > Настройки», где вы можете настроить некоторые глобальные параметры.

Настройки специальных возможностейНастройки специальных возможностей

  • Добавить фокус контура — включите этот параметр, чтобы добавить тонкую рамку к элементам при фокусировке с помощью клавиатуры (обычно с помощью клавиши табуляции).
  • Перейти к ссылке на содержимое / ID элемента — включите отображение ссылки «Перейти к содержимому» и убедитесь, что указан правильный идентификатор элемента для перехода при нажатии на ссылку.
  • Удалить целевой атрибут из ссылок — это удалит целевые атрибуты из html-тегов и заставит открывать ссылки в той же вкладке браузера.
  • Добавьте роли ориентира ко всем ссылкам — добавьте role=”link” ко всем исходным кодам гиперссылок.
  • Доступность по всему сайту — включите доступность, согласованную на всех страницах сайта.
  • Запомнить пользователя на — выберите диапазон от 1 часа до 1 месяца, чтобы запомнить настройки пользователя.

После изменения параметров обязательно нажмите кнопку «Сохранить изменения», чтобы применить изменения.

2. Панель специальных возможностей в один клик

Перейдите в «Специальные возможности > Панель инструментов», чтобы настроить параметры, отображаемые на значке специальных возможностей в интерфейсе вашего сайта.

Настройка панели специальных возможностейНастройка панели специальных возможностей

Настройка панели специальных возможностей (продолжение)Настройка панели специальных возможностей (продолжение)

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

Нажмите кнопку «Сохранить изменения», чтобы применить сделанные вами изменения.

3. Настройте стиль панели инструментов

Последний вариант — настроить стиль панели инструментов, перейдя в раздел «Доступность > Настроить». Это приведет вас к настройщику WordPress по умолчанию, где вы можете изменить следующее:

Настройка стилей панели специальных возможностейНастройка стилей панели специальных возможностей

  • У вас есть три варианта выбора отображаемого значка: «Один щелчок», «Инвалидная коляска» и «Специальные возможности».
  • Измените положение панели инструментов влево или вправо и отрегулируйте смещение сверху, чтобы выровнять панель инструментов на вашем сайте.
  • Измените цвет текста, фона и фокуса значка специальных возможностей и панели.

Проверьте предварительный просмотр и нажмите кнопку «Опубликовать», чтобы изменения вступили в силу.

Тестирование на вашем сайте

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

Перейти к панели инструментов «Контент и специальные возможности»Перейти к панели инструментов «Контент и специальные возможности»

Щелкните значок специальных возможностей и подтвердите, что панель инструментов отображается в соответствии с вашими настройками. Выберите каждую опцию на панели инструментов и проверьте, все ли работает с вашей темой. Помните, что некоторые параметры, такие как «Отрицательный контраст», могут работать не со всеми темами и элементами. Вы можете отключить эти параметры в разделе «Специальные возможности > Панель инструментов», если хотите удалить их с панели инструментов.

Тестовые параметры доступностиТестовые параметры доступности

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

Заключительные слова

Как уже упоминалось, в настоящее время браузеры и операционные системы предлагают большинство специальных возможностей, облегчающих жизнь людей с ограниченными возможностями. Вы можете использовать такие плагины, как One Click Accessibility, чтобы добавить панель инструментов веб-доступности на свой сайт WordPress, которую можно использовать в качестве дополнительной опции. Плагин предлагает ограниченные возможности, поскольку его можно использовать совершенно бесплатно. Если вы ведете легальный бизнес, вам доступны комплексные решения, такие как AudioEye. Ниже показано, как будет выглядеть панель инструментов от AudioEye, но вам необходимо приобрести премиум-план, который будет стоить вам не менее 49 долларов в месяц.

Панель инструментов веб-доступности от AudioEyeПанель инструментов веб-доступности от AudioEye



2023-06-11T18:22:13
Сайтостроение

Как использовать Jetpack AI Assistant для создания поста в блоге в WordPress с помощью ИИ? –

Jetpack — один из самых популярных бесплатных плагинов для WordPress с более чем 5 миллионами активных установок. Плагин имеет множество модулей, которые вы можете активировать или деактивировать в зависимости от ваших потребностей. AI Assistant — последнее дополнение к расширяющимся SEO-возможностям плагина. Удивительно, но это бесплатная функция, которую любой пользователь Jetpack может использовать, не платя ни копейки.

Функции ИИ-помощника Jetpack

AI Assistant — это не модуль в Jetpack, а блок Гутенберга, который вы можете вставить в редактор сообщений и создать контент. Экспериментальная функция работает на основе концепций генеративного ИИ, таких как Bing AI, ChatGPT или Google Bard, и делает за вас следующие вещи:

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

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

Использование Jetpack AI Assistant в WordPress

Automattic, компания, стоящая за Jetpack, имеет множество других плагинов с похожим названием, таких как Jetpack CRM, Jetpack Protect, Jetpack Boost и т. д. Помощник AI поставляется с бесплатным и популярным «Jetpack — безопасность WP, спина, скорость и рост» плагин. Поэтому убедитесь, что вы используете базовый плагин на своем сайте.

Установите плагин Jetpack в WordPressУстановите плагин Jetpack в WordPress

Создание сообщения в блоге с помощью Jetpack AI Assistant

Создайте новый пост (в редакторе Gutenberg), чтобы начать использовать AI Assistant.

  • Нажмите значок +, чтобы добавить новый блок, или просто введите / реактивный ранец в блоке абзаца, чтобы найти все блоки, связанные с Jetpack.

Добавить блок ИИ-помощникаДобавить блок ИИ-помощника

  • Выберите блок «AI Assistant (Experiment)» и вставьте его в свой пост.
  • Нажмите на опцию «Написать с помощью ИИ…», отображаемую на панели инструментов блока.
  • Вы увидите несколько вариантов, таких как «Опубликовать о…», «Информационная статья о…», «Пошаговое руководство о…» и «Мотивационная публикация о…».

Пишите с помощью Jetpack AI в редакторе GutenbergПишите с помощью Jetpack AI в редакторе Gutenberg

  • Выберите вариант, с которым вы хотите продолжить, и здесь я выберу вариант «Опубликовать о…».
  • Вы увидите, что подсказка изменится на «Написать сообщение о», введите тему в подсказке и нажмите «ОТПРАВИТЬ».

Введите приглашение в Jetpack AI AssistantВведите приглашение в Jetpack AI Assistant

  • Jetpack AI сгенерирует ответ, и вы увидите, что контент создается динамически в течение нескольких секунд.
  • Вы можете остановить ответ в промежутке или подождать, пока ИИ завершит ответ.

Пример ответа ИИ-помощника Jetpack

  • Проверьте детали и нажмите «Принять», чтобы преобразовать сгенерированный ответ ИИ в блоки.
  • Если вы недовольны ответом, просто нажмите «Попробовать еще раз…» на панели инструментов, чтобы сгенерировать новый ответ.

Примите ответ ИИ или повторите попытку.Примите ответ ИИ или повторите попытку.

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

Редактирование и продолжение статьи

Чтобы отредактировать ответ, выберите параметр «Улучшить», отображаемый в виде значка карандаша на панели инструментов. Вы можете создать резюме или сделать статью длиннее или короче.

Подведите итоги или сделайте статью длиннее и корочеПодведите итоги или сделайте статью длиннее и короче

Если вы хотите продолжить статью после принятия контента, просто нажмите «Написать с помощью ИИ…». выберите «Продолжить запись» в пунктах меню, и Jetpack AI Assistant сгенерирует ответ в продолжение предыдущего ответа.

Перевод и изменение тонов

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

Измените тон с помощью Jetpack AI AssistantИзмените тон с помощью Jetpack AI Assistant

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

Перевод контента с помощью Jetpack AI AssistantПеревод контента с помощью Jetpack AI Assistant

Другие параметры оптимизации контента

У вас есть еще несколько опций в блоке Jetpack AI Assistant для оптимизации процесса генерации контента. Создайте новый блок AI под ранее сгенерированным содержимым и нажмите «Записать с помощью AI…». Теперь вы увидите список пунктов меню с дополнительными опциями.

Другие опции AI-помощника JetpackДругие опции AI-помощника Jetpack

  • На основе предыдущего контента – в этом разделе вы можете продолжить написание, исправить орфографию/грамматику и упростить письменный контент.
  • На основе всего содержания – ниже этого раздела вы можете найти резюме и создать параметры заголовка сообщения.
  • Писать — в этом разделе будет показан тот же предыдущий набор параметров для написания сообщения в блоге.

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

Часто задаваемые вопросы о ИИ-помощнике Jetpack

1. Является ли Jetpack AI Assistant бесплатным?

Да, это бесплатная функция для всех пользователей плана Jetpack.

2. Есть ли какие-либо ограничения в формировании ответа?

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

3. Каково качество Jetpack AI Assistant?

Ответ чем-то похож на Bing AI, ChatGPT и Google Bard. Вы получите качественный ответ на общие заголовки, в то время как конкретные/недавние/фактические материалы требуют проверки с вашей стороны.

4. Будет ли Google принимать контент, созданный искусственным интеллектом?

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

5. Может ли Jetpack AI генерировать изображения?

Нет, на этом этапе вам нужно вручную вставлять изображения.

6. Могу ли я отключить Jetpack AI Assistant при использовании плагина?

Нет, опция AI Assistant — это блок, который нельзя отключить в настройках плагина. Однако вы можете скрыть блок в редакторе Гутенберга, как и любые другие неиспользуемые блоки и панели.

7. Предоставляет ли Jetpack AI Assistant ссылки на источник?

Нет, ссылки на сгенерированный контент отсутствуют.



2023-06-08T23:02:52
Сайтостроение