Содержание

Шаг 2. Наполнение и редактирование сайта. — Google Sites

Вы можете добавлять и изменять текст, загружать изображения и видео, создавать новые страницы, а также изменять шаблон и тему сайта.
   Добавление текста, фотографий и видео:
  1. Войдите в свой аккаунт на странице sites.google.com.
  2. Откройте свой сайт (https://sites.google.com/site/imya/, где imya – название вашего сайта). Если в верхней части экрана не отображается значок карандаша, нажмите на ссылку Войти в нижней части страницы.
  3. Перейдите на страницу сайта, которую нужно изменить.
  4. Нажмите на значок карандаша  и следуйте приведенным ниже инструкциям.
  Действие Инструкции
Редактирование текста Вы можете добавлять и редактировать текст, изменять шрифт, его размер, стиль и цвет, создавать списки и делать многое другое.
Добавление изображения Нажмите Вставка > Изображение.
Добавление видео Нажмите Вставка > YouTube
(ваше видео должно быть загружено на YouTube).
Добавление документа, презентации, календаря или таблицы Нажмите Вставка > Диск и выберите тип файла.
   

     5. Нажмите Сохранить.

   Вы можете создать главную или обычную страницу сайта, страницу объявлений и т. д.
  1. Войдите в свой аккаунт на странице sites.google.com.
  2. Откройте свой сайт (https://sites.google.com/site/imya/, где imya – название вашего сайта). Если в верхней части экрана не отображается значок карандаша , нажмите на ссылку Войти в нижней части страницы.
  3. Нажмите на значок «Создать страницу» .
  4. Выберите шаблон (т. е. тип) страницы.
   
Настройка сайта

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

  1. Войдите в свой аккаунт на странице sites.google.com.
  2. Откройте свой сайт (https://sites.google.com/site/imya/, где imya – название вашего сайта). Если в верхней части экрана не отображается значок карандаша , нажмите на ссылку Войти в нижней части страницы.
  3. Нажмите Ещё > Управление сайтом.
  4. Внесите нужные изменения.
  5. Нажмите Сохранить.

             !!!!Если вы решите изменить шаблон, содержание сайта будет удалено, а все внесенные изменения будут отменены.!!!!!



Редактирование контента Стартового сайта (старая версия) – Центр поддержки

Вы можете изменить содержание Стартового сайта, чтобы он отражал ваш бренд и показывал все преимущества магазина. В этом помогут настраиваемые блоки и обложка сайта — их можно использовать все или выбрать те, которые вам подходят. Разделы, которые вам не нужны, можно скрыть. Чтобы изменить контент Стартового сайта, перейдите на Панель управления Эквида → Сайт и нажмите кнопку

Редактировать сайт.

Адрес сайта

Кликните на самый первый блок в боковом меню, чтобы изменить адрес сайта и задать название магазина. Если у вас нет собственного домена, вы можете подключить свой Стартовый сайт к бесплатному поддомену на company.site. Впишите выбранный адрес сайта в поле Бесплатный адрес:

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

В этом разделе также можно вписать название магазина. Покупатели увидят его на странице магазина, в счетах и уведомлениях.

Вступление и обложка

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

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

 

Дизайн магазина

В панели управления Эквида перейдите на страницу Сайт и нажмите Редактировать сайт

. Здесь вы можете настроить дизайн магазина, чтобы он соответствовал имиджу вашего бренда.

Подробно о том, как изменить дизайн читайте в статье Дизайн Стартового сайта.

История

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

Напишите текст в поле Описание секции. Если вы хотите назвать этот блок по-своему, кликните Изменить название секции и впишите свой вариант.

Чтобы скрыть блок, в поле Показывать секцию поставьте переключатель на ВЫКЛ.

Отзывы клиентов

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

Чтобы собирать и отвечать на отзывы, можно использовать приложения HelpfulCrowd и Stamped.io.

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

Чтобы добавить следующий отзыв, нажмите Добавить ещё.

Изображение, которое вы выберете, будет адаптировано под размер 96х96 пикселей. Минимальный размер фото для Стартового сайта — 96×96 пикселей (для Ретины — 192×192). Поддерживаемые форматы — JPEG, PNG, GIF.

При необходимости скройте блок, отключив опцию

Показывать секцию.

О магазине

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

В поле Описание секции впишите текст, добавьте свое Имя и Подпись под именем, загрузите Фотографию.

Изображение, которое вы выберете, будет адаптировано под размер 144×144 пикселей. Минимальный размер фото для Стартового сайта — 144×144 пикселей (для Ретины — 288×288 пикселей). Форматы: JPEG, PNG, GIF.

Если вы не хотите показывать этот блок, отключите опцию Показывать секцию.

Физический адрес и часы работы

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

Название блока легко поменять, нажав кнопку Изменить название секции.

Введите Заголовок раздела с адресом и укажите свой адрес в поле Физический адрес — Гугл автоматически отметит ваше местоположение на Карте. Ваши клиенты смогут самостоятельно проложить маршрут к вашему магазину или пункту выдачи товара при нажатии на кнопку Проложить маршрут.

Заполните раздел с графиком работы, чтобы покупатели знали, как вы работаете в будние и выходные дни.

Если точки продаж нет, скройте этот блок, отключив опцию Показывать секцию.

Контактная информация

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

Напишите Номер телефона магазина, Адрес электронной почты и Адрес сайта в соответствующие поля.

В разделе Аккаунты в соцсетях разместите ссылки на страницы в соцсетях. Чтобы добавить больше соцсетей и мессенджеров, например, WhatsApp, Пинтерест, Телеграм и другие, кликните Добавить ещё. Затем выберите нужные мессенджеры или соцсети и вставьте ссылку в поле ввода.

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

Показывать секцию.

Читайте также

Дизайн Стартового сайта
Продвижение Стартового сайта

Как редактировать сайт на wordpress

Площадки на WordPress очень просто редактировать – это одна из главных причин, почему лучше разместить сайт именно на этом движке. В нем сможет разобраться каждый. Даже тот, кто раньше и не сталкивался с сайтостроением. Это не uCoz со всеми его премудростями ручного написания кода. В Wordress система управления сайтом полностью автоматизирована. Вам не придется беспокоиться, что вы не знаете, какой прописать код. Редактировать страницы вручную не понадобится!

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

Вы узнаете о всех “премудростях” редактирования страниц сайта на этом движке и быстро поймете, что этому даже можно и не учить – все очень просто. Итак, поехали!

Редактор страниц WordPress – как пользоваться

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

Ядро WordPress – это нечто уникальное, простое и неповторимое. Если вы разместите свой сайт именно на этом движке, то к коду вам практически не придется притрагиваться. А все потому, что у этой CMS-системы есть свой редактор страниц. Система управления сайтом сводится к управлению всеми процессами через обыкновенное меню, с каким справиться и юноша 12 лет, и даже 70-летний старик (если постараться).

У WordPress есть своя панель управления. Среди вебмастеров ее именуют “админкой”. Чтобы начать редактировать сайт и изменить структуру страниц, вам необходимо пройти в эту панель управления. Находится она чуть выше шапки сайта. Для входа стоит ввести логин и пароль, причем администраторские, не то не сможете вносить изменения на сайт.

Если вам необходим редактор страниц, тогда зайдите в соответственный раздел “Страницы”. Там вы увидите полный список всех доступных, уже опубликованных и личных страниц. Чтобы начать редактировать содержимое, вам необходимо нажать на один из доступных заголовков – вы перейдете во вкладку управления содержимым страницы. Внутри редактор очень похож на программу Word. Только у него еще есть всяческие дополнительные функции и кнопки. И все эти кнопки объясняются, потому вам будет просто изменять сайт и содержимое страниц.

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

Запуск редактора WordPress с определенной страницы

Это очень продуманный движок. Он рассчитан на новичков и малоопытных в сайтостроении людей, так что вы точно с ним справитесь. Необязательно, чтобы система управления сайтом открывалась именно так, как было описано в предыдущих абзацах. Вы можете сначала зайти на необходимую страницу, либо просто просматривать содержимое ресурса, и если возникнет желание что-нибудь изменить, нажмете в верхнем правом углу кнопку “Редактировать страницу”.

Учтите, что такая кнопка появится только в том случае, если вы уже авторизованы на движке. В ином случае сайт будет видеть вас как простого пользователя и не предоставит права доступа для редактирования. После нажатия на кнопку “Редактировать страницу” вы попадете в аналогичный раздел, как если бы сделали это через “админку”.

Быстрое изменение свойств страницы

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

После нажатия вы перейдете в режим быстрой редактуры страницы. Вы не сможете изменить ее содержимое, то есть текст, картинки и записи на ней, но сумеете откорректировать некоторые свойства. Например:

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

После проведенных изменений не забудьте их сохранить. Система управления не сохраняет изменения автоматически, из-за чего у многих вебмастеров случается депрессия, особенно после написания статьи в редакторе Вордпресс. Так что как только добавите новые свойства, нажмите на кнопку “Обновить”.

Как удалить страницу

В начале, еще перед публикацией своего проекта на Вордпресс, многое приходится менять. И это хорошо, что вы пытаетесь сделать содержимое своего ресурса лучше. Порой для этого приходится удалять лишние страницы. Ведь чем меньше указано разделов в меню навигации для пользователя, тем удобнее пользоваться сайтом. Так что лучше не размещайте у себя в меню больше 5-10 страниц – это навредит статистике отказов проекта. А если уже разместили, то сделайте подразделы, либо удалите ненужные страницы. Как раз процесс их удаления мы и разберем.

Чтобы удалить страницу, необходимо точно так же зайти в административную панель, введя свой логин и пароль. Далее зайдите в меню “Страницы” и нажмите на необходимый заголовок. Потом возле пункта “Опубликовать” или “Обновить” вы увидите кнопку “Удалить”. Либо не заходите в редактор содержимого, а лишь наведите курсор на заголовок страницы в списке и откроются дополнительные кнопки, в том числе и пункт “Удалить”. Нажмите на него и страница переместиться в “Корзину”. Если она снова понадобится, вы сможете ее восстановить.

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

Как установить пароль на страницу

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

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

Редактирование страниц сайта: самостоятельная работа с контентом

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

Все тексты на сайте должны иметь 100% уникальность. Это сильно влияет на выход в ТОП поисковых систем Яндекс и Google. Есть много бесплатных сервисов для проверки уникальности текста, например, text.ru, content-watch.ru, etxt.ru.

Также обращайте внимание на стилистику текста и орфографию, проверяйте опечатки и пунктуацию.

Использование типографа

Смысл типографики заключается в том, чтобы отбросить все стили из MS Word, а также выставить правильные кавычки и тире, что значительно улучшает читабельность контента. Пример написание текста с типографом и без него:

Без типографа: «МИРАНДА BEAUTY» — это магазин материалов для ногтей и волос.
С типографом: «МИРАНДА BEAUTY» — это магазин материалов для ногтей и волос.

Используйте сайт typograf.ru. Для работы с ним необходимо поместить текст в поле для ввода и нажать «Типографировать». Ниже под кнопкой будет находиться готовый текст. Его можно либо выделить и скопировать в HTML-формате и вставить в код (без редактора). Либо скопировать текст под кнопкой и вставить в визуальный редактор на сайте через Блокнот. Он необходим для сбрасывания выделения символов.

Оформление контента

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

  • <h3>, <h4>, <h5>, … — оформление заголовков и подзаголовков. Просто поставьте знак перед и после фразы: <h2>Заголовок</h2>;
  • <hr> — разделительные полосы. Красиво и ненавязчиво смотрятся под заголовками или цитатами;
  • <li>, <ol> — маркированные и нумерованные списки. Используйте при перечислении;
  • Оформите цитаты курсивом или фоном.

Не забывайте выравнивать изображения с текстом или ставить их на 100% ширины. Но не стоит перенасыщать контент изображениями и подзаголовками. Всегда смотрите на материал со стороны:как бы вы сами восприняли контент на странице?

Названия изображений

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

Не оставляйте названия типа «IMG_6078.jpg». Вы сможете легко ориентироваться в своих изображениях, а поисковые системы используют эту информацию для выдачи в поиске. Чтобы Google и Яндекс легко смогли определить картинку, используйте ALT и TITLE:

  • Alt — это текст, который появляется на месте изображения, которое не отобразилось.
  • Title — описание файла, которое появляется при наведении курсора.

Задайте их в теге <img>.
Пишите лаконичные названия к файлам, достаточно 1-3 слов.

Сжатие изображений

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

Оптимальный размер изображения для сайта считается до 1000px, как по ширине, так и по высоте. Уменьшить картинку можно с помощью Adobe Photoshop.

Для сжатия изображений существует масса онлайн-сервисов. Мы используем программу tinypng.com. Изображения добавляются методом перетаскивания и можно отправлять сразу несколько картинок.

Последний, но очень важный совет: Перед просмотром всех изменений на сайте всегда чистите кэш браузера. Для этого пользуйтесь горячими клавишами «Ctrl + Shift + Del» и наслаждайтесь обновленным, красивым контентом.

Основы редактирования сайта—ArcGIS Hub | Документация

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

В этом разделе вы узнаете, как сделать следующее:

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

Открытие сайта в режиме редактирования

Чтобы начать, откройте сайт в режиме редактирования. Подробнее об открытии страницы в режиме редактирования см. в Открыть страницу в режиме редактирования.

Из окна браузера

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

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

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

Из ArcGIS Hub

Если глобальная навигация отключена для сайта, вы можете открыть сайт из ArcGIS Hub:

  1. Войдите в ArcGIS Hub на hub.arcgis.com.
  2. На странице Обзор щелкните Управлять в Cайты или Инициативы.
  3. Щелкните на названии сайта или инициативы, чтобы открыть редактор сайта.

Из ArcGIS Online

Чтобы открыть сайт в режиме редактирования из ArcGIS Online, выполните следующие действия:

  1. Войдите в ArcGIS Online.
  2. Найдите сайт или сайт инициативы элемента Hub Site Application в разделе Ресурсы.
  3. Щелкните элемент, чтобы открыть Информацию об элементе и щелкните Настроить приложение.

Сохранение изменений

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

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

Операции на боковой панели и панель навигации редактирования

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

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

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

Создание компоновки сайта

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

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

Чтобы познакомиться с редактированием компоновки сайта, выполните эти три шага и добавьте новую карточку строки:

  1. Щёлкните Компоновка на боковой панели.
  2. Перетащите карточку Строка с боковой панели на компоновку и расположите строку там, где вы хотите.

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

  3. Перетащите карточку, например текстовую карточку, из боковой панели в новую строку и расположите карточку там, где вы хотите.
    Подсказка:
    Чтобы переместить карточку в строку, удерживайте курсор над верхним правым углом карточки и используйте кнопку размещения , чтобы переместить карточку. Также вы можете использовать стрелки вправо и влево у карточки, чтобы изменить ее размер.
  4. Дополнительно, чтобы переместить строку, удерживайте курсор над верхним правым углом строки и используйте кнопку размещения , чтобы переместить строку.

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

  5. Щелкните Сохранить.
  6. Чтобы удалить карточку или строку, щелкните ее кнопку удаления .

Настройки сайта

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

Подсказка:

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

Более подробно см. Настройка параметров сайта

Заголовки, нижние колонтитулы и глобальная навигация

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

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

На небольших устройствах, таких как мобильный телефон, заголовок сворачивается в ниспадающее меню, и элементы глобальной навигации (включая опцию ArcGIS Hub Premium добавления инициативы в избранное) доступны на боковой панели, так что посетители могут перемещаться по сайту независимо от размера экрана.

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

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

  • Логотип
  • Цвет фона заголовка и текста
  • Иконки социальных сетей, чтобы связать посетителей с платформами социальных сетей
  • Ссылки меню на страницы и дополнительные ресурсы для создания навигации сайта

Для получения дополнительной информации см. Бренд сайта с заголовком и опциями темы и Настройка глобальной навигации и ссылок меню.

Цвета и шрифты

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

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

Сначала поместите курсор над правым верхним углом строки и щелкните кнопку настроек для изменения следующих возможностей.

  • Выберите широкую или квадратную компоновку — Широкая раскрывает строки через всю компоновку. Квадратная отображает ресурсы с зафиксированной шириной в строке.
    Подсказка:

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

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

    Убедитесь, что цветовой контраст между цветом текста строки и цветом фона удовлетворяет критерию доступности 4.5:1 для обычного текста и 3:1 для крупного текста или символа. Существует много вебсайтов, где вы можете проверить цветовойконтраст, например WebAIM.

  • Задать фоновое изображение — Вы можете дополнительно установить изображение в качестве фона для строки, загрузив изображение или вставив ссылку на размещенный файл изображения.
    Подсказка:

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

Более подробно о форматировании строк см. в Добавление текста и изображений и Создание темы.

Страницы

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

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

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

Для подробной информации о страницах см. Добавление страниц на ваш сайт.


Отзыв по этому разделу?

Редактировать сайт MODX Revolution

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

Для добавления новой страницы, навести курсор на значок «Новый документ»

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

Переходим на следующую страничку:

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

Поисковые системы, в частности Google, лояльно относятся к страницам сайтов, содержащих метатег «description», что означает описание страницы. Посему, если планируется продвижение сайта, то рекомендуется заполнить и это поле, которое должно содержать около 160 символов с пробелами.

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

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

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

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

Доступны и другие иконки для редактирования, в частности: отменить редактирование, повторить редактирование, отступы, маркированный список, нумерованный список, подчеркивание и другие. При наведении на иконку появляется всплывающая подсказка.

Следует иметь в виду, что напрямую скопировать и вставить в этом поле система не всегда позволяет (зависит от браузера), для вставки скопированного текста следует воспользоваться сочетаниями клавиш: ctrl + с или ctrl + insert – копировать, ctrl + v или shift + insert – вставить.

Для «превращения» какой-либо фразы или слова в заголовок, следует воспользоваться кнопкой «Абзац».

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

Редактирование статей сайта

Ввод и форматирование текста

Для форматирования текста статьи или документа используются кнопки в панеле редактора. При наведении мышкой на отдельную кнопку всплывает подсказка о предназначении кнопки:

Форматирование можно применять до набора текста: например, нажать на кнопку «Курсив» и начать печатать текст — отобразится наклонный текст. Для отмены печати курсивом, кнопку «Курсив» нужно нажать ещё раз.
Также форматировать можно уже введённый или вставленный из других источников текст. Для этого нужно выделить текст мышкой (или удерживая клавишу Shift+стрелочки), и затем нажать на кнопку желаемого форматирования.

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

 Для ввода специальных символов используется кнопка «Вставить спец.символ»

В документ можно добавить ссылку на веб-страницу, или на файл, загруженный на сайт, а также на статью, размещённую на сайте. Для этого используют кнопку «Вставить/изменить ссылку». Если нужно удалить уже существующую ссылку, — то соседнюю кнопку «Удалить ссылку»:

При нажатии на «Вставить/изменить ссылку» открывается окно добавления ссылки

В поле «Ссылка» (№1 на рисунке) вставляется ссылка на внешнюю веб страницу в формате http://<адрес страницы>. В поле «Текст» вводится текст, который будет отображаться в документе, и по нажатию на который будет осуществляться переход по указанной ссылке. Для окончания оформления ссылки нажмите «Вставить» и ссылка отобразиться в тексте документа.

Чтобы добавить ссылку на статью или новость, размещённую на сайте, нужно раскрыть раздел «Контент» (№2). В открывшемся списке выбрать мышкой нужную статью, ссылка на неё пропишется в поле «Ссылка», в поле «Текст» нужно указать текст для ссылки, и нажать «Вставить» — ссылка попадёт в документ:

 

Чтобы добавить ссылку на файл, загруженный на сайт, нужно нажать на кнопку «Обзор» в окне добавления ссылки (№3). В открышемся окне выбрать файл и нажать «Вставить». Если файл нужно предварительно загрузить с компьютера, то см.инструкцию по загрузке файлов и картинок в разделе «Загрузка и вставка картинок» (ниже по тексту инструкции).

 

Вставка готового текста

Когда в документ нужно вставить готовый текст, созданный в другом текстовом редакторе или скопированный с веб-страницы, то для вставки текста в документ используйте кнопку «Вставить» (или сочетание клавиш на клавиатуре Ctrl-v)

 

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

 

В случае когда очистка форматирования не помогает и текст остаётся сильно искажённым, лучший путь — это вставить один только текст и оформить его заново в редакторе документа. Используйте иконку «Вставить как обычный текст». Откроектся окно, в которое нужно будет вставить скопированный текст, при этом всё форматирование текста будет утрачено:

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

 

Текст можно очистить от лишнего форматирования или нежелательных html-тэгов вручную. Для этого применяют «Редактор исходного кода». Также, если есть исходный код html-документа, то этот код вставляется в документ в режиме «редактора исходного кода». В этом случае вся разметка и стили, прописанные в коде, будут применены к документу при переключении в обычный режим просмотра:

Когда html-код документа копируется с веб-страницы или других сторонних источников, в нём могут содержаться лишние или пустые html-тэги. Для очищения пустых тэгов и оптимизации html-кода используется кнопка «Очистить HTML код». Для этого нужно выделить текст и нажать на кнопку.

 

 

Загрузка и вставка картинок

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

Откроется окно «Менеджера изображений»

Если файл с изображением требуется сначала загрузить с компьютера, то в «Браузере файлов» (№1 на рисунке) выберите папку, где будет храниться файл.
Или же создайте новую папку для своих картинок (для создания новой папки щёлкните на иконку №2)

Когда папка выбрана, нажмите иконку «Загрузить» (№3) >> откроется окно загружки изображений, в которое можно мышкой перетащить файлы с компьютера или нажать на «Обзор» и найти файлы картинок в нужной папке на компьютере:

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

Для этого щёлкните мышкой в «Браузере файлов» (№1) по файлу, который требуется вставить >> ссылка на него появится в поле «Ссылка» (№4). Если вы выбрали нужный файл, но в поле ссылка осталось упоминание о другом файле или поле пустое, то нажмите на иконку «Вставка» (№5), и поле обновится.
Теперь нажмите кнопку «Вставить» (№6) внизу окна, и картинка появится в документе.

Размер вставленной картинки можно пропорционально изменить, потянув за верхний правый или нижний правый угол (или за другие маркеры в разных направлениях):

 

Загрузка и вставка файлов

Для вставки файлов в документ используется иконка «Вставить/изменить файл»

Откроется окно «Менеджер файлов». Загрузка и вставка файлов происходит по той же схеме, что и работа с файлами изображений (см.раздел выше «Загрузка и вставка картинок» ). Дополнительно в окне «Менеджера файлов» есть поле «Цель», в котором можно выбрать способ открытия файла при переходе на него из текста статьи — файл может открываться в этом же окне («Открыть в текущем окне/фрейме»), или в новом окне («Открыть в новом окне»)

 

 

Полное редактирование сайта — узнайте о темах на основе блоков

Полное редактирование сайта изменит то, как все используют темы,
— и то, как мы их создаем.

Что такое полное редактирование сайта?

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

WordPress 5.8 планируется включить раннюю версию полного бокового редактирования с новыми блоками и новый режим редактирования шаблона .

Режим редактирования шаблона

Шаблоны

— это дизайны для полных страниц, включая верхний и нижний колонтитулы.

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

Выберите или создайте шаблоны прямо из раздела нового шаблона в редакторе блоков:

Новые блоки участка

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

Новый файл конфигурации темы для разработчиков

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

10 мая
Gutenberg 10.6 будет включать версию 1.0 формата theme.json.
Experiment-theme.json будет переименован в theme.json.
Пожалуйста, дайте мне немного времени, чтобы обновить пример темы и уроки 000
Официальная документация для theme.json была обновлена, , но вам нужно использовать Gutenberg 10.6 RC 1 для ее тестирования.

15 апреля
У нас вперед! Прочтите, какие полные функции редактирования сайта будут включены в WordPress 5.8, здесь.

7 апреля
Обновлены следующие уроки:
Создание блочных тем WordPress
Упражнение: шаблоны и части шаблонов

25 марта
Друзья! Поскольку Gutenberg версии 10.3 имеет несколько больших изменений, включая theme.json и выравнивание блоков, мне потребуется некоторое время, чтобы обновить все примеры кода и уроки.
Я обновлю это сообщение о статусе, когда курсы снова станут актуальными (начало апреля).

Блоки полного редактирования сайта — Полное редактирование сайта

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

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

Обновлено 18 апреля 2021 г. — Гутенберг, версия 10.4

Доступные блоки

Заголовочные блоки:

Почтовые блоки:

Блокировок комментариев:


Название сайта

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

Настройки боковой панели: Типографика, цвета.

Настройки панели инструментов: Тег HTML можно изменить между уровнями заголовка h2-H6 и абзацем.
Выровнять по левому, правому и центру. Полная ширина и широкая ширина.

Наценка:

    

Выход:

  

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

Слоган сайта

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

Настройки боковой панели: Типографика, цвета.

Настройки панели инструментов: Выравнивание по левому, правому и центру.

Наценка:

    

Выход:

  

Еще один сайт на WordPress

Логотип сайта

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

Варианты стиля: По умолчанию или с округлением.

Настройки боковой панели: Ширина изображения.

Настройки панели инструментов: Выравнивание по левому, правому и центру. Заменить изображение.

Наценка:

    

Выход:

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

Заголовок сообщения

С помощью блока заголовка сообщения вы можете отображать и редактировать текст заголовка.

Настройки боковой панели: Типографика, цвета. Настройки ссылки.

С помощью настроек ссылки вы можете сделать заголовок ссылкой, добавить rel и выбрать, открывать ли ссылку в новом окне:

Настройки панели инструментов: Тег HTML можно изменять между уровнями заголовка h2-H6.
Выровнять по левому, правому и центру.Полная ширина и широкая ширина.

Наценка:

    
    

Выход:

  

Привет, мир!

Автор записи

Блок автора сообщения — это один из блоков, который имеет дополнительные настройки. Возможные варианты:

  • Выберите автора из раскрывающегося списка.
  • Показать или скрыть аватар пользователя. -Невозможно выбрать положение аватара.
  • Выберите один из следующих размеров аватара: 24 × 24, 48 × 48, 96 × 96 пикселей.
  • Показать или скрыть биографию — Невозможно редактировать биографию внутри блока. Контент загружается из пользовательских настроек.
  • Изменить цвет текста и цвет фона. -Невозможно выбрать градиент.
  • Выровнять текст по левому краю, по центру или по правому краю.

Когда выделен текст, он также может быть выделен жирным шрифтом и / или курсивом, и может быть применено зачеркивание.

Дата публикации

С блоком даты публикации вы можете:

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

В этом блоке есть окно справки с инструкциями по использованию средства выбора даты.

Опубликовать Рекомендуемое изображение

Выберите, загрузите и отобразите избранное изображение, назначенное для публикации или страницы.

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

Настройки боковой панели: Настройки ссылки: Ссылка на публикацию.

Настройки панели инструментов: Выравнивание по левому, правому и центру. Полная ширина и широкая ширина.

Наценка:

  

  

Выход:

(Примеры размеров. Обратите внимание, что упаковывающий тег p является частью вывода по умолчанию.)

  

Содержание сообщения

Настройки панели инструментов: Полная и широкая ширина.

Наценка:

    

Выход:

  

Добро пожаловать в WordPress. Это ваше первое сообщение. Отредактируйте или удалите его, а затем пишите!

Отрывок из сообщения

Блок отрывка сообщения позволяет вам создать отрывок.

  • Выберите длину отрывка.
  • Когда текст отрывка выделен, вы можете выделить его жирным шрифтом и / или курсивом.
  • Выровняйте текст по левому краю, по центру или по правому краю.
  • Блок поддерживает следующие встроенные настройки:
    • Встроенный код
    • Встроенное изображение
    • Зачеркнутый
    • Подстрочный индекс
    • Надстрочный индекс
    • Цвет текста
  • Добавьте ссылки.
  • Включите ссылку «Подробнее». Вы можете отредактировать текст ссылки и выбрать отображение ссылки справа от содержимого отрывка или в новой строке.

Публикация тегов

В своей первой базовой версии блок отображает теги постов.В приведенном ниже тикете вы можете прочитать о запланированных функциях.
https://github.com/WordPress/gutenberg/pull/20418

Настройки панели инструментов: Выравнивание по левому, правому и центру.

Настройки боковой панели: Типографика, цвета.

Наценка:

    

Выход:

   образец  |  тест  

Категории сообщений — Иерархические термины сообщений

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

Настройки боковой панели: Типографика, цвета.

Настройки панели инструментов: Выравнивание по левому, правому и центру.

Наценка:

    

Выход:

    

Ссылки навигации по сообщениям -следующее и предыдущее сообщение

Навигационные ссылки для отдельных сообщений представляют собой один блок, но имеют два варианта:
Следующее сообщение и предыдущее сообщение.

Настройки боковой панели: Преобразовать в вариант (следующий или предыдущий), отобразить заголовок как ссылку.

Настройки панели инструментов: Выравнивание по левому, правому и центру. Жирный, курсив.

Наценка:

  
  

Выход:

  

В этом блоке отображается несколько комментариев.
Он выводит комментарии, используя функцию comments_template () на лицевой стороне. См. Https://developer.wordpress.org/reference/functions/comments_template/

.

Настройки боковой панели: Типографика, цвета.

Настройки панели инструментов: Выравнивание по левому, правому и центру. Полная ширина и широкая ширина.

Наценка:

    

В этом блоке отображается один комментарий. При размещении блока необходимо вручную ввести идентификатор комментария.

Наценка:

  

Настройки боковой панели: Типографика, цвета.

Настройки панели инструментов: Выравнивание по левому, правому и центру.

Наценка:

    

Выход:

   1   

Использует comment_form () на лицевой стороне, см. Https: // developer.wordpress.org/reference/functions/comment_form/

Настройки боковой панели: Типографика, цвета.

Настройки панели инструментов: Выравнивание по левому, правому и центру.

Наценка:

    

Заголовок архива

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

Настройки боковой панели: Типографика, цвета.

Настройки панели инструментов: Тег HTML можно изменить между уровнями заголовка h2-H6 и абзацем.Выровнять по левому, правому и центру. Полная ширина и широкая ширина.

Наценка:

    

Описание срока

Отображение описания категорий, тегов и пользовательских таксономий при просмотре архива.

Настройки боковой панели: Типографика, цвета.

Настройки панели инструментов: Выравнивание по левому, правому и центру. Полная ширина и широкая ширина.

Наценка:

    

Запрос, цикл и разбиение на страницы запросов

Этот новый блок WordPress для полного редактирования сайта поддерживает готовые макеты и фильтры содержимого.Он все еще находится на начальной стадии и может быть переименован в редакторе, чтобы упростить использование.
Вместо того, чтобы выбирать «запрос» в модуле вставки блоков, вы сможете выбирать между различными макетами, в которых отображаются последние сообщения.
Разработчики смогут создавать собственные запросы для различных типов сообщений, прикрепленных сообщений, для каждой категории и т. Д.

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

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

Разбиение на страницы запроса выводит ссылки на следующую и предыдущую страницы.

Самая простая разметка:

  
 

  

Пример с содержимым внутри цикла:

  






  

Варианты списков сообщений

Блок запроса теперь имеет четыре готовых варианта блока, в которых цикл содержит различные макеты для представления списков сообщений:

  • Название и дата
  • Название и выдержка
  • Название, дата и выдержка
  • Изображение, дата и название
Настройки панели инструментов запроса

Выберите вид списка (вертикальный) или вид сетки.

  • Настройки дисплея:
    • Элементов на странице: выберите количество элементов, отображаемых на странице.
    • Смещение: следует ли использовать смещение или начинать список сообщений с первого сообщения.
    • Количество страниц
Настройки боковой панели запроса
  • Выберите тип сообщения: по умолчанию вы можете выбирать между сообщениями и страницами.
  • Сортировать по:
    • От новых к старым
    • от новых до новейших
    • от А до Я
    • Z на
  • Прилепленных постов:
    • Включить
    • Исключить
    • Отображать только прикрепленные сообщения

Если выбран вид сетки, вы можете выбрать количество отображаемых столбцов.

Фильтры

Отфильтруйте контент, указав категорию или тег или выбрав автора.

Часть шаблона

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

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

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

Вход / выход

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

Настройки боковой панели: Отображать логин как форму, перенаправлять на текущий URL.

Внешний вид анкеты зависит от вашей темы:

Наценка:

  

  

Пример выхода из системы:

    

Что такое полное редактирование сайта и что это значит для будущего WordPress? — WordPress Таверна

Блочная тема Twenty Twenty-One в редакторе сайта.

Как я сказал на прошлой неделе, 2021 будет годом редактора сайта . Состояние слова Мэтта Мулленвега подтверждает это. Планирование выпуска WordPress 5.7 сосредоточено на этом. Чтобы добраться до этой точки, пришлось пройти долгий путь, а потом это будет гораздо более долгое приключение.Окончательные перспективы работы, начатой ​​почти четыре года назад, близки.

Проект Гутенберга никогда не был только о редактировании контента. К концу 2016 года программное обеспечение WordPress устаревает. Оно должно было обслуживать современную аудиторию, которая может быть менее технически подкована, чем существующая база пользователей платформы. Он должен был привлечь молодое поколение разработчиков, которые смотрели на более зеленую траву программного обеспечения с тяжелым JavaScript. Он должен был предлагать возможности на уровне современных веб-приложений.У WordPress было много полей, которые нужно было проверить или признать несоответствие.

Единственное, что действительно удерживало платформу на плаву, — это ее обширная и разнообразная экосистема сторонних разработчиков.

Один из самых популярных типов плагинов? Конструкторы страниц. Такие, как Elementor, запущенный в начале 2016 года, восполняли пробелы в опыте, которых не хватало WordPress. Хотя это свидетельствовало о расширяемости платформы для таких сторонних проектов, было также ошибкой то, что базовая платформа не могла предложить лучший опыт как пользователям, так и разработчикам из коробки.Слишком много авторов тем были вынуждены поддерживать сторонних разработчиков, чтобы оставаться актуальными. Они все больше и больше сосредотачивались на совместимости с плагинами, чем просто на проектировании.

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

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

Это медленная работа. Но, это многообещающая работа.

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

.

«Гутенберг» — это кодовое название совершенно новой парадигмы в создании и публикации сайтов WordPress, которая направлена ​​на революцию всего опыта публикации, как Гутенберг сделал печатное слово.

В проекте четыре фазы:

  1. Упрощенное редактирование
  2. Настройка
  3. Сотрудничество
  4. Многоязычный

Пользователи WordPress, которые не тестировали плагин Gutenberg, испытали только Фазу 1 проекта.Запуск редактора блоков в WordPress 5.0 и продолжение его работы заложили основу для следующих этапов. Базовая блочная система — это то, что будет подпитывать WordPress следующее десятилетие или дольше.

Сегодня мы твердо находимся в разгаре Фазы 2. И вот здесь все станет интересным.

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

Выбор шаблона в редакторе сайта с использованием блочной темы Bosco.

Фаза 2 Gutenberg, начавшаяся в конце 2018 года, обещала принести блоки за пределами содержания поста.Во введении к этому следующему шагу Мел Чойс-Дван обрисовал три основных направления:

  • Быть за пределами post_content .
  • Сосредоточьтесь на индивидуальной настройке.
  • Обновление тем, виджетов и меню.

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

Полное редактирование сайта — это сочетание концепций. Это одна часть перехода от традиции, а другая часть — полная перестройка того, как пользователи и разработчики проектируют интерфейсную часть сайтов WordPress.

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

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

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

WordPress 5.7 и выше будет посвящен редактору сайта и темам на основе блоков. Редактор сайта — это визуальное представление шаблонов блоков, которые разработчики тем предлагают пользователям. Шаблоны бесконечно настраиваются пользователем из администратора WordPress. Хотя разработчики будут создавать собственные конфигурации и устанавливать значения по умолчанию, право решать, как будет выглядеть внешний интерфейс сайта, в конечном итоге будет находиться в руках пользователя.

С момента запуска Фазы 1 редактор блоков был предметом любви и ненависти.Ожидайте, что редактор сайта будет не менее неоднозначным.

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

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

Режим редактирования шаблонов, скорее всего, появится в Gutenberg 9.6.

Это не новая концепция. Джозефа Хаден, руководившая выпуском WordPress 5.6, коснулась этого ранее в этом году. «Я думаю, что одна из проблем, которую мы пытаемся решить с помощью Gutenberg, всегда заключалась в более последовательном редактировании элементов интерфейса WordPress», — сказала она.«Ни одному пользователю не нужно изучать пять различных рабочих процессов, чтобы убедиться, что их страница выглядит так, как они себе представляли, когда она была опубликована».

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

Что все это означает для будущего?

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

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

Если возможно, авторы тем должны посещать два раза в месяц встречи по тематическим блокам. Если время не позволяет посещать занятия, вам следует хотя бы читать и участвовать в блоге Make Themes.

Также важно проверять проекты, такие как тема Q, или следить за репозиторием Theme Experiments.

Тематический эксперимент в стиле Carrd от редактора сайта.

Для конечных пользователей весь этот проект посвящен вам. Ваш отзыв имеет решающее значение. Если вы еще не тестируете свой сайт с помощью плагина Gutenberg, вам следует это сделать. Иногда это на недели или месяцы опережает то, что вы получаете с одним только WordPress. Попробуйте такую ​​тему FSE, как Block-Based Bosco. Рассмотрите возможность присоединения к программе FSE Outreach Program. Вы можете протестировать и оставить отзыв о предстоящих функциях.

FSE обещает серьезные изменения в 2021 году.Многие из этих изменений искоренят старые методы управления вашими веб-сайтами WordPress. Эти методы будут заменены одним из крупнейших капитальных ремонтов платформы в ее истории. Пора готовиться.

Новый год будет интересным.

Нравится:

Нравится Загрузка …

Эволюция WordPress на пути к полнофункциональному редактированию

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

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

Варианты трех кнопок в модуле вставки блоков WordPress

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

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

Итак, это означает, что у нас есть блоков , вариантов блоков , повторно используемых блоков и шаблонов блоков . Это отличный инструмент для создания макетов прямо в редакторе!

Но вы, возможно, слышали, что у WordPress есть планы на блоки, которые выходят на за пределы редактора сообщений. Они прямо нацелены на глобальные элементы — меню, заголовки, нижние колонтитулы и т. Д. — в попытке установить возможности редактирования всего сайта (FSE) прямо в WordPress.

Мэтт Малленвег представляет тему Twenty Twenty-One и ее бета-версии возможностей редактирования всего сайта.

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

Это действительно так, и вы можете проверить это сейчас. Убедитесь, что вы используете WordPress 5.6+, затем установите экспериментальную тему TT1 Blocks и плагин Gutenberg.

Взломав тему, на самом деле это два шаблона PHP — получите это — файлы HTML, используемые для шаблонов блоков и частей шаблона блоков .

Способ разделения шаблонов блока и частей шаблона блока точно отражает общий текущий подход к отделению шаблонов от частей шаблона.

Я лично иду ва-банк в этом направлении.Я даже зашел так далеко, что сказал (глядя через плечо на Криса), что CSS-Tricks тоже идет ва-банк. В прошлом году мы перешли на блоки, и это усилило нашу любовь к написанию таких же сообщений в блогах, как этот. (Честно говоря, в прошлом я, вероятно, написал бы что-то подобное с помощью редактора кода, а затем перенес бы его на WordPress с помощью классического редактора. В то время для меня это был лучший опыт написания.)

В тему блоков TT1 добавлен «Редактор сайта», который опирается на шаблоны блоков темы и части шаблонов блоков.

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

Но в то же время это верно для ныне печально известного совета Мэтта Мулленвега разработчикам WordPress в 2015 году: Изучите JavaScript глубоко.

Я был (и до сих пор очень) в восторге от блоков. Полноценное редактирование сайта меня немного пугает, но это в основном потому, что оно выводит концепцию блоков за пределы редактора, и я только сейчас начинаю понимать их.

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

А пока вот несколько способов оставаться в курсе:

  • Make WordPress Design — В справочнике FSE указан как один из текущих приоритетов команды с обзором проекта. Последний раз он обновлялся в мае 2020 года, поэтому я не уверен, насколько актуальна эта информация и поддерживается ли эта страница.
  • Как протестировать FSE — Инструкции по настройке сайта FSE локально и участию в тестировании.
  • Репозиторий тем TT1 — узнайте, о чем сообщается, и статусе этих проблем. Это место, за которым стоит следить за развитием темы.
  • Репозиторий подключаемого модуля Gutenberg — Сообщалось о проблемах с подключаемым модулем. Это место, за которым стоит следить за развитием блоков.
  • Репозиторий экспериментов тем — ознакомьтесь с другими темами, которые экспериментируют с блоками и FSE.
  • # fse-answers — Сборник ответов на кучу вопросов о FSE.
  • # fse-outreach-эксперимент — Slack-канал для обсуждения FSE.

Что такое полнофункциональное редактирование Гутенберга (и как получить к нему доступ сегодня)

Full-Site Editing (FSE) представляет собой огромное изменение в способах разработки и разработки веб-сайтов пользователями WordPress. Как член сообщества WordPress вы, вероятно, захотите получить практический опыт работы с ним. Однако, когда был выпущен WordPress 5.6, , а не , включали эту долгожданную функцию.

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

В этой статье мы познакомим вас с FSE, прежде чем он будет внедрен в ядро ​​WordPress. Мы покажем вам, как его настроить и использовать для редактирования каждой части вашего веб-сайта WordPress, включая базовый шаблон. Давайте начнем!

Что такое полноценное редактирование Гутенберга (и почему оно важно)?

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

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

Предстоящая функция редактирования всего сайта (FSE) направлена ​​на предоставление единого интерфейса, в который вы можете добавлять как глобальные элементы, так и элементы страницы.Это откроет путь для создания целых веб-сайтов с использованием только блоков Гутенберга. Готовясь к этому сдвигу, разработчики Gutenberg были заняты созданием библиотеки строительных блоков сайта, включая заголовок сайта, заголовок сообщения, комментарии и контент сообщения.

Когда он был запущен в 2017 году, Гутенберг получил неоднозначную реакцию сообщества WordPress. Несмотря на этот непростой старт, редактор блоков с тех пор доказал, что имеет ряд существенных преимуществ перед классическим редактором.

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

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

Как получить доступ к полному редактированию сайта в WordPress 5.6 (за 3 простых шага)

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

Шаг 1. Подготовьте промежуточную среду и установите подключаемый модуль Gutenberg

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

Вместо этого вы можете создать безопасную среду тестирования, в которой сможете опробовать его. Если у вас еще нет песочницы, вы можете создать локальный сайт WordPress, используя XAMPP, Local by Flywheel или другую платформу.

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

Хотя FSE еще не готова к использованию, бета-версия этого редактора была включена в WordPress 5.6. Если вы еще не обновились до WordPress 5.6, вам нужно сделать это сейчас. Это должно дать вам наиболее стабильную и надежную работу с FSE.

Мы также рекомендуем использовать PHP 7.3 или выше. Если вы не уверены, какая версия PHP работает на вашем сайте WordPress, вы обычно можете найти эту информацию в инструменте WordPress Site Health в разделе Информация> Сервер .

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

Шаг 2. Установите экспериментальные темы WordPress

Эксперименты с темами WordPress — это набор проектов, каждый из которых исследует аспект создания блочных тем и шаблонов. В этой коллекции вы найдете тему TT1 Blocks, которая представляет собой экспериментальную блочную версию Twenty Twenty-One.Тема TT1 Blocks — это ключ к разблокировке полнофункционального редактора перед его официальным выпуском.

Для начала перейдите на страницу WordPress Theme Experiments на GitHub и нажмите зеленую кнопку Code . Затем вы можете выбрать Download Zip :

После загрузки этой папки разархивируйте ее. Внутри вы должны увидеть tt1-blocks . Теперь вы можете создать новую zip-папку, содержащую только tt1-blocks . Этот процесс может отличаться в зависимости от вашей операционной системы, но вам нужно поискать вариант сжатия файла.

Следующим шагом будет загрузка этого файла .zip в WordPress. На панели администратора выберите Внешний вид> Темы. Затем вы можете нажать Добавить новую> Загрузить тему> Выбрать файл и выбрать zip-архив tt1-blocks . Затем нажмите «Установить сейчас».

После загрузки этой папки выберите Внешний вид> Темы в меню WordPress. Теперь этот экран должен включать тему TT1 Blocks :

Чтобы активировать эту тему, наведите на нее курсор и выберите Активировать. Новая опция Site Editor (бета) теперь должна появиться в меню боковой панели панели инструментов WordPress.

Если этот параметр не отображается, возможно, вам нужно включить редактирование всего сайта вручную. В левом меню перейдите к Gutenberg> Experiments . Теперь вы можете выбрать Полное редактирование сайта> Сохранить. После внесения этого изменения у вас должен быть доступ к меню Site Editor .

Шаг 3. Настройте свой сайт с помощью FSE

До сих пор пользователи WordPress испытывали только Фазу 1 проекта Gutenberg.Пришло время получить практический опыт работы с Фазой 2, пройдя тест-драйв FSE.

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

В этом новом редакторе легко редактировать веб-страницу. Просто перейдите на страницу или сообщение, которое вы хотите обновить, а затем выберите Изменить сайт на панели инструментов . Откроется страница для редактирования в новом режиме FSE WordPress:

Теперь вы можете редактировать любой элемент на экране, щелкнув по нему.Когда вы выбираете элемент, информация об этом элементе будет отображаться в нижней части экрана. Вы также можете добавить новые глобальные элементы и элементы страницы, нажав кнопку «плюс» (+).

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

Будущее полнофункционального редактирования в WordPress

Изучая FSE, имейте в виду, что основная команда разработчиков WordPress активно ищет отзывы об этой новой функции.Если у вас возникнут какие-либо проблемы, вы можете сообщить о них в репозиториях Gutenberg или тематических экспериментов GitHub.

Вы также можете рассмотреть возможность присоединения к программе FSE Outreach Program. Эта программа дает пользователям WordPress возможность общаться с командой разработчиков FSE.

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

Если вы хотите быть в курсе событий FSE Outreach, информация из этой программы будет размещена в блоге Make WordPress Test Blog с помощью тега # fse-outreach-program. Вы также можете присоединиться к каналу Slack # fse-outreach-эксперимент, чтобы получать больше обновлений.

Заключение

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

В этом посте мы показали вам, как получить доступ к бета-версии полной версии редактора сайта:

  1. Подготовьте среду разработки и установите подключаемый модуль Gutenberg.
  2. Установите экспериментальные темы WordPress.
  3. Настройте свой сайт с помощью FSE.

У вас есть вопросы о новой функции редактирования полного сайта WordPress? Дайте нам знать в комментариях ниже!

Ранний взгляд на полное редактирование сайта в WordPress

Вот экзистенциальный вопрос для веб-разработчиков: насколько должно быть разделение между системой управления контентом (CMS) веб-сайта и его дизайном?

Для многих существующих DIY-сервисов (Wix, Squarespace и т. Д.), практически каждый аспект веб-сайта можно редактировать визуально. Будь то контент, дизайн или макет, вы можете настроить их по своему усмотрению. И для этого вам не нужно понимать код.

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

Это скоро изменится. Полное редактирование сайта (FSE) позволит использовать редактор блоков Gutenberg для редактирования всего сайта — темы и всего.

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

Настройка полного редактирования сайта в WordPress

На момент написания этой статьи полное редактирование сайта не было включено в ядро ​​WordPress. Это бета-функция, доступная через плагин Gutenberg. Итак, я возьму плагин и сначала активирую его.

Тогда нужно найти совместимую тему.Q — первая тема WordPress, поддерживающая FSE, и она послужит основой для этого эксперимента. Установив и активировав бесплатную тему, теперь мы можем посмотреть, что она делает.

Еще одно замечание: я делаю все это на локальной установке WordPress. Когда дело доходит до полного редактирования сайта, нужно многое протестировать и исправить. Следовательно, он еще не готов к производственной среде. Протестируйте соответственно!

Первоначальные наблюдения

После активации темы Q в WordPress есть несколько заметных отличий.На задней панели теперь есть пункт Site Editor в меню. А при просмотре внешнего интерфейса при входе в систему на панели администратора отображается ссылка Edit Site . Да, и еще есть предупреждение о том, что полное редактирование сайта является экспериментальным (мы просто проигнорируем это).

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

Заглядывать в редактор сайта

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

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

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

Что действительно приятно, так это то, что у вас есть возможность изолировать только те части шаблона, которые вы хотите редактировать. Если я вытащу заголовок из Theme> Template Parts , это все, что я увижу в редакторе блоков. Но если я предпочитаю редактировать его в контексте всей темы, я могу просто остаться на этой начальной странице редактора сайта.

Создание новых шаблонов

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

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

Например, если вы хотите создать шаблон, который будет использоваться на вашей домашней странице, его ярлык должен называться front page . Хотите настроить таргетинг на страницу «О нас» ( yoursite.com/about-us/ )? Шаблон с ярлыком page-about-us сделает свое дело.

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

Использование частей шаблона

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

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

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

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

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

Вопросы для будущего тем WordPress

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

Тем не менее, возникают некоторые вопросы:

На кого ориентировано полное редактирование сайта?

Одним из главных аргументов в пользу редактора блоков Гутенберга была необходимость поддерживать актуальность. У конкурентов на рынке DIY более визуальный подход к созданию сайтов, и WordPress отстал.

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

Что это значит для веб-дизайнеров?

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

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

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

Как полное редактирование сайта повлияет на рынок коммерческих тем?

На это будет интересно смотреть.Прямо сейчас кажется, что очень мало тем было настроено для Гутенберга. Они по-прежнему полагаются на сторонние плагины компоновщика страниц для расширенных макетов. А некоторые продукты, такие как Divi и Beaver Builder, уже имеют собственные полные возможности редактирования сайтов.

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

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

Более цельный WordPress

Большая часть экосистемы WordPress разрознена. Возьмите тему из здесь , плагин из там там и там ) и попытайтесь объединить все вместе.Это часть его привлекательности и работает на удивление хорошо.

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

Любите вы или ненавидите, но полное редактирование сайта — это шаг к унификации процесса проектирования. С его помощью все можно создать в одном месте в едином пользовательском интерфейсе. Это более удобный интерфейс, который должен принести пользу многим пользователям.

WordPress Full Site Editing и Gutenberg 7.7

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

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

Как протестировать полноценное редактирование сайта WordPress и новые функции Gutenberg сегодня

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

  • Установите плагин WordPress Beta — это позволяет загружать и устанавливать последние «WordPress Nightly Builds». В ночных сборниках нет тонны, что вам понадобится, но при тестировании будущих версий WordPress я всегда считаю, что это лучше всего.
  • Установите подключаемый модуль Gutenberg — Несмотря на то, что на вашем сайте есть Gutenberg, этот подключаемый модуль имеет последние стабильные функции, которые находятся в разработке, в том числе «Эксперименты.Это необходимо, чтобы протестировать новые возможности полного редактирования сайта.
  • Получить блочных тем — В настоящее время вы не можете протестировать полное редактирование сайта без темы, которая его поддерживает. В настоящее время в разработке находятся два. Оба находятся на Github: Audacious и Parisienne.

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

После установки:

  1. Зайдите в «Панель управления> Обновления» и обновитесь до последней ночной сборки WordPress.
  2. Перейдите в пункт меню Гутенберга и нажмите «Эксперименты». На этом новом экране включите Полное редактирование сайта и Образец полных шаблонов редактирования сайта.
  3. Затем перейдите в «Внешний вид» и включите тему «Парижанка» или «Смелая».

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

После того, как вы все это настроите, рассмотрите немного со мной в этом видео:

В полноэкранном режиме драма не нужна

Единственная особенность ожидающего обновления Гутенберга, которая привлекла наибольшее (негативное) внимание, была добавлена ​​в последнюю минуту: полноэкранный режим является новым режимом по умолчанию.

Никто, кроме соучредителя WordPress Майка Литтла, был очень расстроен этим изменением:

Серьезно @photomatt? После общения и планирования на грани катастрофы, которым изначально был Гутенберг; это в последнюю минуту, одностороннее, серьезное решение об изменении пользовательского интерфейса навязывается пользователям и команде?
Полноэкранный режим включен по умолчанию в редакторе https: // t.co / NFy82QXcpI

— Майк Литтл (@ mikelittlezed1) 9 марта 2020 г.

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

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

Обновления Гутенберга, заслуживающие внимания, около

Стоит отметить несколько моментов в разработках самого Гутенберга:

Улучшенный пользовательский интерфейс

Если вы установите плагин Gutenberg сегодня с WordPress.org, вы заметите некоторые очень четкие новые улучшения пользовательского интерфейса. Это соответствует изменениям в пользовательском интерфейсе администратора, которые мы заметили с выпуском WordPress 5.3.

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

Градиент API

В современном веб-дизайне часто используются градиенты. На сегодняшний день не было простого способа реализовать градиенты в Gutenberg без знания пользовательского CSS. Новый API градиентов меняет это. Наличие интерфейса по умолчанию для создания градиентов помогает Гутенбергу быть лучшим и современным инструментом дизайна.

Шаблоны блоков

Мне давно понравился ранний плагин Gutenberg под названием «Шаблоны блоков Гутенберга.«Это дает пользователям возможность искать в библиотеке — по сути — шаблоны блоков и перетаскивать их в редактор. Он использует интеллектуальные имена классов, чтобы привнести мощность дизайна в ваши макеты Gutenberg.

Именно это и делают для Гутенберга блочные шаблоны. Такие люди, как Мишель Шульп и Крис Форд, не зря говорили на различных WordCamp-ах об «атомном дизайне». Эти шаблоны блоков подобны атомам, группам блоков, которые вместе составляют единый компонент. Шаблоны блоков откроют множество новых возможностей для пользователей, а также для авторов плагинов и тем.

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

Следующие версии Gutenberg в ядре WordPress проложат путь к полному редактированию сайта. Но в настоящее время это возможно только с поддерживающими его темами. Темы, поддерживающие полное редактирование сайта, называются «блочными темами».

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

Эти шаблоны могут быть предварительно определены темой программно.

Из экспериментальной документации по блочной теме

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

Чего не хватает, так это того, как я мог бы редактировать эти части «согласованно». Мне кажется, что в какой-то момент этот опыт логически переместится в настройщик или в какой-то интерфейс редактирования.

Однако, копаясь в проблемах Github, я наткнулся на эту ветку и эту концепцию от Шона Эндрюса:

Концепция пользовательского интерфейса для полного редактирования сайта от Шона Эндрюса

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

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

Заключительные впечатления и разветвления

В целом, Гутенберг как редактор страниц и сообщений действительно вырос. Мы приветствуем новые улучшения.

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

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

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

Кроме того, авторы плагинов будут часто использовать части шаблонов.