Как редактировать сайт wordpress в браузере
Обновлено: 07.07.2024
Примечание: эта страница относится к WordPress, использующему более старый или классический редактор. Если вы используете более новую версию WordPress или используете редактор блоков, обратитесь к этой странице.
Вы только что завершили 5-минутную установку WordPress или установку в один клик с вашего веб-хостинга. Итак, каков ваш следующий шаг?
Давайте проведем пошаговую экскурсию по вашему сайту WordPress и посмотрим, как работают различные функции и как настроить ваш сайт под ваши потребности. Во время первой части этого урока, пожалуйста, ничего не меняйте в настройках, если это не является частью урока. После выполнения этих шагов, вы сможите все настраивать самостоятельно.
После входа в систему вы попадете на главный экран консоли, который называется «Панель управления». Здесь начинается настройка вашего сайта.
Найдите время, чтобы взглянуть на сайт, прежде чем менять его и выяснять, как все это работает. Важно увидеть, как устроена тема WordPress Twenty Twenty и как она работает. Считайте это тест-драйвом, прежде чем начинать добавлять другие функции.
Прокрутите страницу вниз и обратите внимание на заголовки и ссылки. Это «подвал». Различные элементы на нем называются виджетами. Так же виджеты могут распологаться на боковой панели (если тема ее поддерживает). В самом низу написано: «Сайт работает на WordPress».
Пока у вас только одна запись. Она находится на странице, которая является вашей домашней или главной страницей. Если вы нажмете на заголовок записи, вы перейдете на саму запись. На первой или домашней странице вашего сайта представлены самые последние записи на сайте. Каждый заголовок записи будет ссылаться на полную версию. Некоторые дизайнеры тем создают свои отдельные страницы запесей, чтобы они выглядели иначе, чем домашняя страница.
В отдельной записи обратите внимание на макет и на то, чем отличаются элементы дизайна. Заголовок другой? Меньше, больше или другого цвета? Есть ли боковая панель?
Все эти изменения создаются из нескольких файлов, называемых шаблонами. Вы можете узнать больше о том, как они работают, в Руководстве разработчика тем. А пока давайте посмотрим, как работает остальная часть WordPress.
Теперь, когда у вас есть представление о том, как выглядит ваш сайт и как называются различные разделы макета, пора протестировать администрирование WordPress. Это похоже на знакомство с консолью вашего нового веб-сайта. Фактически, первая страница, которую вы видите после входа в систему, называется Панель инструментов, набором информации и данных о действиях на вашем сайте WordPress.
Панель инструментов содержит список последних действий, которые вы выполняли на своем сайте, и помогает находиться в курсе новой и интересной информации из многих ресурсов WordPress.
В левой части экрана находится главное меню навигации, в котором подробно описаны все административные функции, которые вы можете выполнять. Переместите указатель мыши вниз по списку, и подменю раскроются, чтобы вы могли переместить указатель мыши и кликнуть. После того, как вы выберете «родительский» раздел навигации, он откроется, чтобы отобразить параметры в этом разделе.
Пункты меню следующие:
Кликните на пункт меню Пользователи. Экран изменится, и вы увидите раздел «Все пользователи», на котором отображается список всех ваших пользователей; отсюда вы можете добавлять или изменять существующие учетные записи пользователей и авторов. В меню навигации кликните на пункт меню «Ваш профиль». Здесь вы вводите информацию о себе, как об авторе и администраторе сайта. Измените информацию при необходимости и нажмите «Обновить профиль», когда закончите.
Теперь давайте посмотрим на некоторые другие функции администратора WordPress.
ВНИМАНИЕ: Вы можете добавить любую новую рубрику в любое время, но обратите внимание на тот факт, что их можно сортировать в WordPress двумя способами: по имени (в алфавитном порядке) или по идентификационному номеру. Когда вы создаете новую рубрику, ей присваивается идентификационный номер. Это сложно изменить, поэтому, если вы не хотите, чтобы ваши рубрики были отсортированы по алфавиту, введите их в том порядке, в котором они должны отображаться на экране.
Прежде чем вы приступите к графическому оформлению своего сайта, давайте еще немного займемся администрированием, чтобы настроить его. Вы можете установить плагины, чтобы увеличить нагрузку на свой сайт, и не забудьте активировать плагин Akismet WordPress, который доступен на всех сайтах WordPress, чтобы защитить его от спама в комментариях. Когда вы введете родительские рубрики, введите свои подрубрики. В раскрывающемся меню для родительской рубрики вы можете выбрать родительский элемент для подрубрики, которую вы добавляете.
Давайте разберем несколько ваших тестовых записей по рубрикам, чтобы вы могли увидеть, как это работает. В разделе Записи > Рубрики кликните вкладку «Все записи». Вы должны увидеть все свои тестовые записи. Когда вы наводите указатель мыши на заголовок любой записи, под заголовком вы должны увидеть ссылки Изменить | Свойства | Удалить | Перейти. Нажмите «Изменить», чтобы отредактировать одну из публикаций. В правой части экрана редактирования записи вы увидите свои рубрики. Выберите одну из них, отметив поле рядом с ним. Затем выше нажмите кнопку «Обновить». Повторите это для других ваших тестовых записей. Теперь просмотрите свою страницу, кликнув на название своего сайта на панели инструментов в верхней части экрана. Вы сейчас видите рубрики, перечисленные на боковой панели? Отлично. Если там не все рубрики, это обычно означает, что в ней нет записей. Это функция WordPress по умолчанию, так что не беспокойтесь. Когда вы добавите в них новые записи, они появяться на ваших веб-страницах. Кликнув на одну из рубрик, и вы попадете на страницу именно этой рубрики. Вы должны увидеть записи, которые попали в эту рубрику. Это сгенерированная страница рубрики.
Вы сделали все необходимое для своего нового веб-сайта WordPress. Вы знаете, как создать запись, рубрику и как просмотреть информацию о своем сайте по рубрикам. Вы можете начать процесс настройки, а когда закончите, не забудьте удалить свои тестовые записи! Тогда начните писать замечательную информацию, чтобы поделиться со своей новой публикой!
Если вы знакомы с CSS, HTML и даже с PHP и MySQL, рассмотрите возможность изменения темы в соответствии с вашими потребностями или создания собственной темы.
Плагины WordPress также известны как дополнения или расширения. Это программные скрипты, которые добавляют на ваш сайт функции и события. Они охватывают весь спектр: от актуальных прогнозов погоды до простой организации ваших записей и рубрик. Плагины разрабатываются волонтерами и энтузиастами, которым нравится решать задачи и решать проблемы. Обычно их довольно просто установить через раздел плагинов администратора WordPress, просто следуйте инструкциям, предоставленным автором плагина. Помните, что это бесплатно и не обязательно. Если у вас есть какие-либо проблемы с плагинами, сначала свяжитесь с веб-сайтом автора плагина или форумом поддержки плагина, затем поищите в Интернете помощь по этому конкретному плагину, а если вы не нашли решение, посетите форумы WordPress для получения дополнительной помощи.
Если вы знакомы с PHP, HTML и, возможно, даже с MySQL, вы можете настроить WordPress для работы так, как хотите, создав свой собственный плагин.
В этой статье мы расскажем о том, как можно отредактировать и настроить главную страницу WordPress.
Что такое главная страница WordPress?
Главная страница WordPress является домашней странице вашего сайта. Это первая страница, которую видит пользователь.
Зачем редактировать главную страницу WordPress?
По умолчанию WordPress отображает на главной странице сайта записи из блога. Но это подходит не для всех типов интернет-ресурсов.
Вот пример главной страницы бизнес-сайта.
Хотели бы вы создать подобную страницу? Мы шаг за шагом расскажем, как настроить главную страницу WordPress несколькими способами.
Настройка главной страницы WordPress
Теперь повторим этот процесс, чтобы создать страницу, на которой будет выводиться список записей.
Затем перейдите в меню Настройки> Чтение и активируйте параметр « Статическая страница» в разделе « На главной странице отображать» . После этого выберите главную страницу и страницу блога.
Использование темы для редактирования главной страницы
Перейдите в меню Внешний вид> Настроить . Это действие запустит настройщик тем WordPress.
Настройщик темы включает в себя различные параметры. Их набор может отличаться в зависимости от используемой темы оформления.
Чтобы отредактировать любую часть главной страницы, нажмите на значок синего карандаша.
Чтобы удалить раздел с домашней страницы, кликните по значку с синим глазом. Вы также можете удалить разделы и добавить их обратно, используя вкладку « Разделы главной страницы» .
После внесения изменений нажмите кнопку « Опубликовать» .
Ниже показано как выглядит наша главная страница на сайте.
Использование редактора блоков (Gutenberg) для изменения главной страницы WordPress
Чтобы изменить размер текста, используйте выпадающий список параметров.
Далее мы добавим на нашу главную страницу изображение, нажав на символ «+», а затем выбрав блок изображения в разделе « Основные блоки» .
Выберите изображение из библиотеки медиафайлов или загрузить новое.
Далее мы добавили еще один блок абзаца с текстом и блок « Последние записи» . В нем отображаются анонсы записей.
Вы можете добавить столько блоков, сколько захотите. Вы также можете использовать шаблон «на полную ширину» или «без боковых панелей»:
После внесения изменений нажмите кнопку « Опубликовать» .
Ниже показано как выглядит готовая главная страница.
Использование Beaver Builder для редактирования главной страницы WordPress
В блочном редакторе Gutenberg переключитесь на шаблон пустой страницы или на шаблон без боковых панелей. Это можно сделать в разделе Документ> Атрибуты страницы> Шаблон .
В этой части руководства мы используем плагин OceanWP . Он поставляется с шаблоном Landing Page , создающим пустой холст.
После настройки шаблона страницы можно нажать кнопку Launch Beaver Builder в центре экрана, чтобы начать использовать плагин Beaver Builder.
Мы собираемся использовать для нашего сайта шаблон Agency.
Примечание . Шаблоны доступны только в платной версии плагина Beaver Builder.
Затем отредактируем заголовок главной страницы.
А также текст на кнопке под ней.
Чтобы добавить строку или модуль, нажмите на значок «+». После этого перетащите модуль на необходимую позицию. В данном случае мы добавляем на страницу новую строку.
К строке можно добавить несколько модулей. Например, модуль заголовка.
Вы можете изменить шрифт и его размер, нажав на вкладку Style для модуля.
Серые значки позволяют редактировать или удалять всю строку, а синие – редактировать или удалять отдельный модуль.
После внесения изменений сохраните результат.
Затем вы сможете сохранить или опубликовать страницу.
Ниже показано как главная страница выглядит на сайте.
Использование Divi для редактирования главной страницы в WordPress
Divi – популярный плагин с темой оформления и конструктором страниц с десятками великолепных шаблонов.
Установите и активируйте тему оформления Divi из Elegant Themes . Она включает в себя Divi Builder.
Примечание. Для использования коллекции шаблонов потребуется логин и ключ API.
Далее нажмите кнопку Use Divi Builder .
А затем кнопку Use Divi Builder , расположенную в центре экрана.
Используйте в качестве основы готовый макет. Он позволит быстро и легко настроить главную страницу.
Divi предлагает впечатляющий набор шаблонов, каждый из которых содержит несколько макетов страниц.
Мы используем для создания главной страницы макет Travel Blog. Кликните по нему.
Выберите вариант Home и нажмите кнопку Use This Layout .
Divi автоматически импортирует выбранный макет. Чтобы редактировать любую часть макета, просто нажмите на нее.
Divi использует для создания страницы систему строк (разделенных на столбцы) и модулей. В данном случае мы изменили заголовок и текст под ним.
В других модулях вы сможете навести на них курсор мыши и кликнуть по иконке Module Settings , чтобы отредактировать их.
Чтобы использовать собственные изображения на главной странице, отредактируйте настройки модуля.
Обратите внимание то, что изображение вверху установлено в качестве фона для модуля заголовка с полной шириной. Поэтому нужно изменить его в разделе Content> Background .
Затем нажмите кнопку « Сохранить черновик» или « Опубликовать» , расположенные в нижней части экрана.
Совет: Если вы не видите эти кнопки, нажмите на фиолетовую кнопку «…», чтобы открыть их.
Вот так главная страница выглядит на сайте.
Вот и все! Мы создали великолепную главную страницу в WordPress и успешно ее настроили.
Пожалуйста, оставляйте ваши отзывы по текущей теме материала. Мы очень благодарим вас за ваши комментарии, отклики, подписки, дизлайки, лайки!
Ответить на этот вопрос коротко просто невозможно. Все потому, что способов редактирования сегодня существует огромное количество. Их столько, сколько движков и конструкторов, в которых есть такие возможности.
Поэтому прежде всего вы должны знать, на каком движке работает ваш проект, либо в каком конструкторе он создан. Потому что в каждой системе свой подход к редактированию. Давайте разберем его на примере самого популярного движка – WordPress.
Изменяем сайт в cms WordPress
Во-первых, вам нужно зайти в панель управления. Когда эта тривиальная задача выполнена, слева видим меню управления, которое сразу отвечает на многие вопросы. Я считаю WordPress одной из самых простых систем. Какие пункты в панели мы видим?
Записи. Тут можно добавить новую запись, просматривать и редактировать уже опубликованные, сохранять заметки в черновики, создавать новые метки и рубрики и присваивать их своим записям. Как видите, ничего сложного.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Новые посты в WordPress добавляются с помощью удобного визуального редактора. При необходимости вы можете переключиться в режим html, в котором можете свободно вставлять код в запись, при условии владения языками html, css и javascript.
После добавления новой заметки вы увидите ее в пункте “Все записи”, где ее можно редактировать в случае необходимости.
Медиафайлы. Здесь вы можете посмотреть, какие файлы вы уже загрузили, редактировать их, а также добавлять новые. Обычно это делается уже при редактировании самой записи.
Внешний вид. Эту вкладку я подробно рассматривать не буду, так как это займет 10 страниц текста) В общем, здесь вы можете настроить меню, виджеты, изменить шаблон, фоновый рисунок и даже поковыряться в коде.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Вообще редактировать код лучше через редактор на компьютере, чем встроенными средствами движка, потому что это намного удобнее.
Плагины. Очень важный пункт. Тут вы можете смотреть, какие плагины стоят у вас в данный момент, редактировать их и удалять, а также устанавливать новые. Хочу заметить, что при установке многих плагинов в панели управления WordPress появляются новые пункты.
Пользователи. Достаточно важный пункт, если вы планируете работать над сайтом не одни. Например, наймете какого-нибудь человека, чтобы он правил ошибки в статьях. Соответственно, нужно будет создать нового пользователя, дать ему определенные права, после чего выслать этому человеку логин и пароль для входа, либо дать ему возможность зарегистрироваться самому.
Также вы можете создать пользователям с большим количеством прав, либо совсем с ограниченными правами.
Инструменты. Сюда будут добавляться различные дополнительные возможности, которые предлагает WordPress и его плагины.
Настройки. Несомненно, один из самых важных пунктов, потому что от него напрямую зависит работа сайта. Здесь вы можете настроить количество статей, которые будут отображаться на одной странице, постоянные ссылки, управлять регистрацией, настроить комментарии и т.д.
Вот мы и прошлись по всем пунктам, которые есть в WordPress. Хочу отметить, что это именно те, что доступны администратору. Если вы войдете на сайт в качестве автора, например, то увидите лишь пару возможностей, которые будут доступны.
Собственно, в других движках все может быть по-другому, но общая суть примерно такая же. Это то, что касается сайтов на движках. Конечно, я рассмотрел все эти настройки в первую очередь для новичков, потому что опытные пользователи разбираются в них очень легко. Если же вы хотите научиться чему-то более продвинутому, например, узнать, как редактировать шаблон сайта и даже создавать свой собственный, тогда вам нужен подробный обучающий курс. Например, вот этот, в котором полностью проходит процесс создания уникального шаблона.
Как редактировать сайт в конструкторе?
На этот вопрос мне ответить сложнее, потому что у каждого такого констуктора свои особенности, их все не перепробуешь в любом случае. Могу вас заверить лишь в том, что если вы разобрались, как управлять сайтом на движке, то сможете понять, как это делать в конструкторе, потому что создатели таких площадок ориентируется на простоту для клиента, хотя есть и тут исключения.
Как редактировать код сайта?
Код вы сможете изменять, только если имеете доступ к файлам на сервере. Например, FTP-доступ. Соединяемся по ftp и находим у себя на сервере папку со своим сайтом. Там уже вы сможете увидеть файлы, найти нужный и редактировать. Вообще советую вам лезть в код, только если есть хотя бы базовые знания.
В основном (в большинстве случаев), вы столкнетесь с php-файлами, которые формируют ваш сайт. Соответственно, не помешает хорошее владение этим языком программирования. Собственно, редактировать файлы можно двумя способами:
Прямо на сервере
Качать себе на компьютер, изменять и закачивать обратно
Первый способ позволяет увидеть результат сразу. Но вообще для экспериментов я крайне советую вам ставить локальный сервер.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
К счастью, доступно множество внешних плагинов WordPress, предлагающих тем, у кого меньше технических знаний, способ создавать контент и настраивать макеты, даже не касаясь серверной части WordPress.
В этом посте мы рассмотрим ряд полезных плагинов – для макета и редактирования контента – и расскажем о плюсах и минусах каждого из них. К концу у вас будет четкое представление о том, какие плагины вам подходят. Давайте начнем!
Отказ от ответственности: TechBlogSD является партнером одного или нескольких продуктов, перечисленных ниже. Если вы перейдете по ссылке и совершите покупку, мы сможем получить комиссию.
Плагины для внешнего оформления страницы
Плагины внешнего интерфейса для макета страницы дают вам полный контроль над дизайном вашего веб-сайта. Хотя вы можете использовать их для добавления и редактирования содержимого, они также позволяют добавлять элементы макета, такие как строки и столбцы, а также другие элементы содержимого, например ползунки. Давайте посмотрим на трех лидеров.
1 WPBakery (ранее известный как Visual Composer – включен в тему Total WP )
WPBakery Page Builder (ранее Визуальная Composer), вероятно, один из самых известных создателей страницы плагин для WordPress. Всего за 45 долларов вы можете добавить этот мощный плагин на свой сайт. Или вы можете рассмотреть премиальную тему, которая включает Visual Composer. Некоторые темы, такие как тема Total WordPress, включают в себя дополнительные модули и настройки элементов страницы, что дает вам еще больше возможностей для создания.
Переключение между внутренним и внешним редакторами Visual Composer очень просто – просто щелкните, чтобы изменить макеты сетки, добавить строки и столбцы, затем перетащите элементы содержимого на страницу, переставляя их по мере необходимости. У всех элементов также есть несколько вариантов и вариантов для настройки внешнего вида и функциональности вашей страницы.
Нужна помощь в начале работы с Visual Composer? Ознакомьтесь с нашим полным руководством по Visual Composer, которое проведет вас через весь процесс установки, настройки и создания страниц.
Ключевая особенность
- Более 45 элементов содержимого с возможностью перетаскивания
- Доступно более 150 сторонних надстроек
- Более 60 готовых макетов
- Плюсы: простота использования, предварительный просмотр в реальном времени, совместимость с большинством тем WordPress.
- Минусы: может потребоваться некоторая кривая обучения, часто требуются надстройки тем или плагинов для дополнительной функциональности.
2 Elementor (бесплатно)
Для тех, кто разбирается в коде, Elementor хорошо построен и имеет открытый исходный код. Так что, если вы хотите внести несколько изменений и поделиться, не стесняйтесь (хотя это довольно надежно – так что это больше, если вам нужно индивидуальное решение).
Ключевая особенность
- 23 бесплатных строительных блока
- +24 Больше профессиональных строительных блоков
- Простые в использовании предварительно отформатированные шаблоны
- Готов к переводу
- Плюсы: простота использования, шаблоны быстрого запуска, совместимость с большинством тем.
- Минусы: лучшие функции доступны в Pro (так что вы захотите обновить).
3 Редактор контента MotoPress (бесплатно)
Хотя редактор содержимого MotoPress очень прост в использовании, плагин будет работать только с вновь созданными страницами, а не с вашим существующим контентом. Вы можете узнать больше об этом плагине в нашем обзоре конструктора MotoPress.
Ключевая особенность
- Более 30 элементов содержимого с возможностью перетаскивания
- Возможность расширения за счет надстроек
- Готовые макеты
- Плюсы: очень проста в использовании, доступны предварительные просмотры в реальном времени, бесплатно.
- Минусы: не работает с существующим контентом.
4 Live Composer (бесплатно)
Чтобы включить редактор, нажмите зеленую кнопку «Активировать редактор» на странице, которая затем позволяет перетаскивать элементы на страницу. В целом, он прост в использовании, и все элементы можно полностью настроить с точки зрения стиля и функциональности.
Ключевая особенность
Плагины для редактирования контента переднего плана
1 Editus (ранее Lasso)
Editus изначально был известен как Lasso и пришёл к нам от разработчиков Aesop Story Engine (ASE). Это интерфейсный редактор, который позволяет просматривать изменения в режиме реального времени. Editus – мощный инструмент, начиная с 99 долларов за использование на трех сайтах.
Ключевая особенность
2 Интерфейсный редактор (бесплатно)
Форматировать текст легко с помощью плагина Front-End Editor.
Front-end Editor изначально разрабатывался как функциональный плагин для возможного включения в ядро WordPress. Хотя это больше не похоже на план, плагин по-прежнему доступен для использования – по последним подсчетам, было установлено более 2000 установок с рейтингом удовлетворенности 4,2 звезды.
Интерфейсный редактор прост в использовании и не требует настройки после установки. После активации пользователь с разрешениями на редактирование, посещающий любую публикацию или страницу на вашем веб-сайте, может использовать как ссылку «Изменить страницу» на панели инструментов в верхней части экрана, так и ссылку «Изменить» под содержимым, чтобы разрешить редактирование.
Ключевая особенность
3 Контент-менеджер для WordPress
Для получения дополнительных возможностей Content Manager можно объединить с другими плагинами OTW, такими как их боковая панель и менеджер виджетов или Portfolio Manager Pro.
Ключевая особенность
- 50+ шорткодов
- Внешнее и внутреннее редактирование
- Настраиваемые боковые панели
- Плюсы: легко расширяется с помощью других плагинов OTW.
- Минусы: устаревший дизайн пользовательского интерфейса.
4 Пограничный пост (бесплатно)
Ключевая особенность
5 Гутенберг (бесплатно)
Наконец, нельзя не упомянуть Гутенберга. Этот бесплатный плагин для управления контентом скоро будет встроен в ядро WordPress, так что сейчас отличное время, чтобы попробовать. По сути, Gutenberg похож на многие другие конструкторы контента и страниц. Включены блоки, которые вы можете вставить, чтобы создать нужный макет.
Ключевая особенность
Заключение
Хотя интерфейс администрирования WordPress спроектирован таким образом, чтобы его было легко использовать, многие пользователи, не обладающие техническими знаниями, по-прежнему считают его сложным. Использование плагинов, которые позволяют пользователям создавать и редактировать контент сайта из внешнего интерфейса, а не из панели управления WordPress, упрощает процесс и снижает нагрузку на тех, кто перемещается в незнакомой среде.
Мы хотели бы услышать о вашем опыте работы с плагинами для редактирования внешнего интерфейса WordPress, поэтому поделитесь своими советами и рекомендациями в разделе комментариев ниже!
Читайте также: