WordPress самоучитель: Базовые знания для использования WordPress

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

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

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

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

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

Примеры блока Гутенберга

Основное изменение, которое Гутенберг ввел в создание контента в WordPress является то, что, вместо того, чтобы один большой кусок контента (как это было с классическим редактором), веб-страницы в настоящее время сегментированы на более мелкие части, называемые блоками.

Это может быть много разных вещей:

• Пунктах
• Заголовки
• Блок-цитаты
• Изображения и галереи
• Списках
• Встроенные носители
• Кнопки
• Таблицы

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

Почему изменения?

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

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

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

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

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

Итак, зачем создавать свой собственный блок Гутенберга?

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

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

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

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

Это легко?

С технической точки зрения важно отметить, что большинство компонентов блоков Гутенберга написаны в JavaScript. Это идет рука об руку с Мэттом Mullenweg 2015 советы, чтобы узнать язык программирования – глубоко (если вы хотите сделать это, проверьте эти полезные ресурсы).

Сдвиг в сторону JavaScript был очевиден в последние годы, например, в Калипсо. Язык программирования поставляется с тонной преимуществ и JavaScript питаниевеб-приложений, построенных на AIS (как Гутенберг) являются будущим в Интернете.

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

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

Как создать блоки для WordPress Гутенберг редактор

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

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

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

1. Подготовьте окружающую среду

Одной из первых задач создания блока Gutenberg является настройка среды разработки. Хотя это легко настроить локальную установку WordPress, для того, чтобы возиться с новым редактором вам нужны вещи, как webpack, React, ESLint, Babel, и многое другое.

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

Тем не менее, для того, чтобы использовать его, сначала необходимо установить node.js и npm. Для этого перейдите на официальный сайт node.js и загрузите правильный файл установки для вашей системы.

Как только это будет сделано, выполните и запустите установку. Готов? Отлично, ты только что выполнил первый шаг.

2. Настройка файлов Plugin с

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

Первое, что вам нужно сделать, это открыть консоль. В Windows нажмите кнопку Windows, ищите запрос командыи откройте ее. Если вы находитесь на Mac, используйте Cmd’F, а затем ищите консоль. Оба должны открыть что-то вроде этого:

Здесь, первое, что вы хотите сделать, это перейти к плагин каталог вашего местного сайта. Вы можете сделать это с командой CD. Ввод CD «имя каталога» открывает каталог, cd.. восходит к одному каталогу.

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

Оказавшись там, вы хотите запустить следующую команду:

npx создать-guten-блокировать мой блок

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

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

Это займет некоторое время, но когда он будет закончен, вы в конечном итоге с этим:

После того, как сделать с этим, следуйте советам создать guten блок и введите плагин папку (помните, CD “имя каталога”)) и введите npm start .

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

3. Активировать плагин и тест-драйв

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

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

Вы даже можете ввести его на страницу, чтобы найти это на экране:

Неплохо, правда?

4. Отодвить

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

Важные файлы для любых изменений находятся plugin.php внутри плагина каталога, а также три файла внутри src/block blocks.js называется, и editor.scss style.scss .

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

Проще всего изменить plugin.php . Здесь вы найдете плагин заголовок, который содержит всю информацию, увиденную в меню плагина в задней части.

/**
– Плагин Имя: cta-блок – CGB Гутенберг Блок Плагин
– Плагин URI: https://github.com/ahmadawais/create-guten-block/
Описание/ контроль: cta-блок – это плагин Гутенберга, созданный с помощью создания-guten-блок.
Автор: mrahmadawais, maedahbatool
Автор URI: https://AhmadAwais.com/
Версия: 1.0.0
Лицензия: GPL2
Лицензия URI: https://www.gnu.org/licenses/gpl-2.0.txt
*
– @package КГБ
*/

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

После того, как сделано и сохранены, вы также видите изменения в WordPress.

5. Зарегистрируйте свой блок Гутенберга

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

Файл по умолчанию для создания guten block очень хорошо аннотирован. Он говорит вам, какая часть несет ответственность за то, что так что вы можете сделать свои собственные изменения. registerBlockTypeявляется то, что регистрирует блок. Функции, следующие edit: и save: описывают содержание и поведение блока внутри Гутенберга и на странице соответственно. Более подробная информация здесь и здесь.

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

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

blocks.registerBlockType (‘gutenberg-examples/example-03-editable’,
название: ‘Пример: Editable’,
значок: ‘универсальный доступ-alt’,
категория: «макет»,

В частности, вы хотите изменить:

• Путь регистрации – Это относится к пути, который появляется после blocks.registerBlockType . Он должен соответствовать вашей текущей среде.
• title:– Название блока, как он появится в Гутенберге.
• icon:— значок, связанный с блоком в редакторе. Вы можете использовать дашики. Обязательно вставьте имя без dashicons- префикса. Кроме того, используйте свой собственный файл SVG.
• category:– Под какой категорией появится ваш блок. Некоторые из стандартных категорий: common , formatting , и layout widgets embed .

В моем случае, я просто изменил его на это:

blocks.registerBlockType (‘cgb/block-cta-block’,
название: ‘CTA Block’,
значок: “свидетельство”,
категория: «общие»,

После этого он появляется в редакторе так:

И вот как это выглядит на странице:

Я оставила остальную часть кода, как я его нашел.

6. Отрегулируйте укладку блока

После этого пришло время настроить отображение нового блока. Это происходит внутри editor.scss и style.scss .

Как показывают имена файлов, первый контролирует то, как выглядит ваш блок внутри редактора Гутенберга, второй вывод на переднем конце.

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

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

В моем случае я добавляю следующее в оба файла:

.wp-блок-кгб-блок-кта-блок
фон: #d6f279;
граница: 0.2rem пунктирные #292929;
маржа: 0 авто;
обивка: 1rem;
текстовая выравнивание: центр;
}

И вот результат в редакторе:

И на переднем конце:

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

7. Закончить

Хорошо, как только вы удовлетворены своим блоком, Есть еще несколько шагов. Первое, что вы хотите сделать, это вернуться к консоли и нажмите Ctrl / Cmd’C, чтобы остановить npm от мониторинга файлов.

После этого запустите следующую команду:

npm запустить построить

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

Если вы считаете, что не хотите использовать этот блок в блоке guten, вы также можете ввести npm run eject в . Однако это означает, что отныне вам придется поддерживать проект самостоятельно.

Готовы ли вы создать блок Гутенберга?

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

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

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

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

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

Вы уже создавали блок Гутенберга? Каков был ваш опыт? Любые дополнительные советы или комментарии? Препятствуйте нам знать в разделе комментария ниже!

WordPress — Полное руководство для начинающих (2020)

Последнее обновление: 23 января 2020 г., Домантас Гуделяускас

Полное руководство по WordPress и 000webhost (2020)

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

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

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

Так в чем же причина такой постоянно растущей популярности WordPress?

• WordPress — это программное обеспечение с открытым исходным кодом, что означает, что его может свободно использовать, изменять или модифицировать кто угодно.
• Хотя WordPress начинался как система ведения блогов, теперь он имеет одну из самых мощных систем управления контентом. WordPress позволяет добавлять плагины, темы и виджеты, которые могут помочь вам создать любой тип сайта, который вы хотите: бизнес-сайт, интернет-магазин или сайт членства можно легко создать с помощью WordPress.
• Его легко освоить, потому что существуют тысячи руководств и руководств по WordPress, охватывающих все аспекты этой CMS.

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

С учетом сказанного, к настоящему времени вы должны убедиться, что WordPress — правильный выбор для вашего веб-сайта или блога.Не теряя времени, давайте начнем с руководства по WordPress для 000webhost.

Мы также подготовили пошаговое видео-руководство по WordPress о том, как создать бесплатный веб-сайт WordPress на 000webhost.

Однако, если вам нужно более подробное руководство, продолжайте читать ниже.

Указатель учебных пособий по WordPress

Установка WordPress на 000webhost

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

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

1. Войдите в свое приложение 000webhost и нажмите УСТАНОВИТЬ СЕЙЧАС в разделе Создать веб-сайт WordPress .
2. Нажмите кнопку Установить , и начнется процесс установки.
3. После завершения установки нажмите кнопку Перейти на страницу конфигурации WordPress .
4. Выберите свой язык и нажмите Продолжить .
5. На следующем экране введите название вашего сайта и данные администратора. Продолжите, нажав Установить WordPress .

WordPress установлен, и вы можете продолжить создание своего веб-сайта WordPress.

Управление сайтом WordPress

Как видите, установка WordPress — несложный процесс. Особенно на 000webhost! В следующем разделе руководства по WordPress вы узнаете, как управлять веб-сайтом WordPress.

Доступ к панели управления WordPress

После завершения процесса установки вы будете перенаправлены непосредственно на панель администратора WordPress. В любое время позже вам придется использовать один из следующих URL-адресов для доступа к админке WordPress:

• http: // ваш сайт.com / wp-admin
• http://yoursite.com/wp-login.php

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

Если вы забыли пароль, вы можете сбросить его, нажав Забыли пароль? кнопка.

Навигация в панели управления WordPress

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

На главной странице администратора вы найдете несколько других разделов:

• Краткий обзор показывает, какую тему вы используете, количество сообщений и страниц, которые у вас есть, а также другие недавние действия.
• Другой раздел — это Quick Draft , который можно использовать, когда вы хотите добавить быстрое сообщение. Однако вы не получите различных функций форматирования, которые есть в разделе сообщений, но это быстрый способ создания черновика сообщения.
• Активность В поле показаны последние сообщения и комментарии.
• В поле Новости WordPress вы можете увидеть последние новости, связанные с WordPress.

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

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

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

• Общие . Здесь вы можете изменить основной URL, часовой пояс, заголовок и описание вашего сайта.
• Написание . В этом разделе вы можете настроить категорию и формат публикации по умолчанию. Хотите отправлять сообщения по электронной почте? Настройте эту функцию здесь.
• Чтение . Здесь вы можете выбрать, как будет выглядеть главная страница: будет ли на ней отображаться последняя публикация или статическая страница. Вы также можете контролировать, сколько страниц блога будет отображаться, и будут ли ваши посетители видеть полную запись или только сводку.
• Обсуждение . В этом разделе вы можете настроить параметры, связанные с комментариями. Вы можете начать с установки настроек комментариев по умолчанию.
• Медиа . В этом разделе вы можете изменить размер изображения по умолчанию и выбрать способ организации файлов.
• Постоянные ссылки . Постоянные ссылки позволяют вам контролировать структуру URL-адресов ваших сообщений.

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

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

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

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

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

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

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

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

ПРОФЕССИОНАЛЬНЫЙ СОВЕТ

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

1. Заголовок . Заголовок дает читателям возможность заглянуть в суть статьи. Независимо от того, насколько хорош основной текст статьи, если у него нет столь же заманчивого заголовка, он останется без внимания, а это последнее, что вам нужно.
2. Формат сообщения . Это основная часть сообщения, в котором вы будете говорить. Настоятельно рекомендуется отформатировать сообщение соответствующим образом, правильно используя теги h3 и h4 для максимальной видимости в поисковых системах. Кроме того, попробуйте добавить в сообщение подзаголовки и указатели, чтобы улучшить его читаемость.
3. Главное изображение . Рекомендуемое изображение или миниатюра сообщения — это типичное изображение, которое появляется рядом с вашим сообщением. Важно, чтобы вы использовали правильное изображение в своих сообщениях.Это не только привлечет читателей, но и добавит эстетической привлекательности вашему сайту.

Это все, что вам нужно знать, чтобы опубликовать свой пост.

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

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

1. Щелкните Категория .
2. Назовите категорию и добавьте Slug , который является сокращенным URL-адресом для вашей категории.При желании вы даже можете добавить иерархию в категорию и поместить ее в родительскую категорию.

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

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

Создание страницы на WordPress

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

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

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

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

сообщений WordPress против. Страницы

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

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

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

Настройка веб-сайта WordPress

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

Установка тем WordPress

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

Для управления темами WordPress выберите Внешний вид и Темы в разделе навигации на панели инструментов.

Чтобы установить новую тему, просто нажмите кнопку Добавить новую .Вы попадете в каталог бесплатных тем. Используйте поиск или фильтры, чтобы найти тему, которую хотите использовать. После того, как вы выбрали понравившуюся тему, нажмите кнопку Preview , чтобы увидеть, как она выглядит на вашем сайте. Если результат вас устраивает, нажмите кнопку Установить .

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

Это все, что нужно, чтобы изменить внешний вид веб-сайта WordPress!

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

— это расширения, которые можно установить на WordPress для расширения его функциональности и добавления новых функций на ваш сайт.

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

Чтобы добавить новый плагин, нажмите кнопку Добавить новый в разделе Плагины . Выберите из Рекомендуемые , Популярные , Рекомендуемые , Избранное или введите ключевое слово в поле поиска, чтобы найти нужный плагин. Чтобы установить плагин, нажмите Установить сейчас , а затем Активировать кнопки .

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

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

ПРОФЕССИОНАЛЬНЫЙ СОВЕТ

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

Добавление виджетов

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

Виджеты доступны на панели управления в разделе Внешний вид .

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

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

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

Обновление сайта WordPress

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

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

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

Резервное копирование сайта WordPress

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

ПРОФЕССИОНАЛЬНЫЙ СОВЕТ

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

Использование плагина WordPress

Один из лучших способов сделать резервную копию вашего сайта WordPress — использовать плагин All-In-One WP Migration, который предварительно установлен на 000webhost.

Чтобы создать резервную копию вашего WordPress, щелкните плагин All-In-One WP Migration , который отображается в меню администратора WordPress. Будут доступны опции Экспорт , Импорт и Резервное копирование . Щелкните Экспорт , чтобы перейти к экрану «Экспорт сайта», а затем нажмите кнопку « Экспорт в ».Затем вам будет предложено выбрать место для сохранения ваших недавно экспортированных файлов WordPress:

• Файл
• FTP
• DropBox
• Google Диск
• Amazon S3
• OneDrive
• Коробка

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

С этого момента вы сможете Импортировать все ваши защищенные файлы и базу данных WordPress в новый или существующий экземпляр WordPress, выполнив практически идентичные шаги. Единственное отличие состоит в том, что после успешной загрузки плагина All-In-One WP Migration на своем новом веб-сайте обязательно выберите Import вместо Export . Приложив совсем немного усилий, вы сможете увидеть все свои темы, изображения, текст, плагины, виджеты и все остальное точно так же, как и раньше.

Использование FTP и phpMyAdmin

Есть другие способы создать резервную копию вашего сайта WordPress. Один из способов безопасного и простого резервного копирования файлов — использовать FTP-клиент, например Filezilla или Cyberduck. Этот метод особенно полезен, если вы не можете получить доступ к админке WordPress.

Выполните следующие действия для резервного копирования файлов WordPress с помощью FTP:

1. Включить FTP-передача на панели 000webhost, Общие настройки .
2. Скопируйте данные аутентификации FTP (имя хоста и имя пользователя) с той же страницы настроек Общие .
3. Откройте FTP-клиент и подключитесь к серверу 000webhost, используя указанные выше данные.
4. Щелкните правой кнопкой мыши папку public_html и выберите Загрузить .

Имейте в виду, что из-за характера FTP загрузка всех файлов веб-сайта может занять некоторое время.

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

• В панели управления 000webhost щелкните значок Управление базами данных .
• Щелкните Manage -> phpMyAdmin для соответствующей базы данных.
• Вы будете перенаправлены на phpMyAdmin .
• Щелкните вкладку Экспорт .
• Нажмите Перейти .

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

Хотя резервное копирование по FTP считается более практичным и ручным способом резервного копирования вашего сайта WordPress, по сравнению с экспортом и импортом All-In-One WP Migration, это относительно простой способ дублировать вашу базу данных и файлы WordPress в другое место. . По сути, все, что вам нужно сделать, это загрузить файлы на FTP-клиент, и ваш сайт WordPress будет сохранен.

Оптимизация производительности WordPress

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

Если вы не новичок, вы знаете способ получше, чем проверять скорость своего веб-сайта в собственном браузере. Практически все современные браузеры кешируют веб-страницы; кешированные веб-сайты отображаются практически мгновенно.Вот почему рекомендуется использовать такие инструменты, как Google Pagespeed Insights или Pingdom, чтобы проверить скорость вашего сайта. Это также помогает проверить скорость веб-сайта при доступе из разных географических точек. Как уже упоминалось, рекомендуется, чтобы веб-сайт загружался менее 3 секунд; Если вы увеличиваете время, вот несколько причин, почему:

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

Использование плагинов кэширования WordPress

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

• Плагин кеширования страниц . Плагин кэширования страниц сохраняет динамически сгенерированные HTML-файлы на сервере через кеш при каждом получении запроса.Это снижает накладные расходы на выполнение запросов к базе данных и кода PHP.
• Подключаемый модуль кеширования браузера Этот подключаемый модуль снижает нагрузку на сервер, уменьшая количество запросов, получаемых на страницу. Например, если вы поместите правильные заголовки файлов в статические файлы (изображения, JavaScript, CSS и т. Д.), Браузеры могут кэшировать файлы на компьютере пользователя. Реализуя этот метод, браузер проверит, изменились ли файлы с момента последнего запроса, а если нет, он просто отобразит кешированные версии вместо того, чтобы перезагружать все с сервера.

Хотя эти плагины были созданы для хостинга WordPress Hostinger, они безупречно работают на 000webhost. Вы можете найти и управлять этими плагинами в панели управления администратора WordPress -> Плагины -> Раздел , который необходимо использовать.

ПРОФЕССИОНАЛЬНЫЙ СОВЕТ

Если вы внесли изменения в свой сайт WordPress, но по-прежнему видите старую версию страницы, возможно, плагины кеширования отображают кешированную версию вместо новой. Самое первое, что вам нужно сделать, это очистить кеш.В нашем плагине Page Cache это можно сделать, нажав кнопку Purge Cache .

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

W3 общий кэш

W3 — это именно то, что следует из названия: комплексное решение для кэширования веб-сайтов WordPress. Он предлагает минификацию CSS и JS, кеш объектов, а также возможности кеширования базы данных и страниц.

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

Вы можете включить минификацию CSS и JavaScript в разделе Общие настройки в W3 Total Cache. Чтобы включить минификацию, просто установите флажок Включить и нажмите кнопку Сохранить все настройки .

Если вам нужен больший контроль, расширенные настройки минификации можно найти в разделе Minify :

• Только объединить делает именно то, что вы думаете: он объединяет все файлы CSS, но не выполняет минификацию.
• Удаление сохраненных комментариев удаляет комментарии только из объединенных файлов.
• Удаление разрыва строки можно проверить, чтобы удалить разрывы строк, присутствующие в объединенных файлах

WP Супер кэш

Как и его вышеупомянутый соотечественник, WP Super Cache также является отличным выбором плагина для кеширования. Он также может удовлетворить все потребности современных веб-сайтов в кешировании. После установки вы можете включить кеширование, перейдя в Настройки -> WP Super Cache .Здесь вы можете щелкнуть радиокнопку Caching on , присутствующую в разделе Easy , чтобы включить кеширование или настроить любые дополнительные параметры.

Оптимизация изображений WordPress

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

1. Из Media перейдите на WP Smush .
2. Прокрутите вниз и выберите Настройки , чтобы настроить конфигурацию в соответствии с вашими потребностями. Вы можете сместить 50 изображений за раз.
3. Нажмите Обновить настройки , и все готово.
4. Нажмите кнопку Bulk smush .

Лучшие Лрактики

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

• Используйте легкую тему WordPress .Всегда используйте легкие темы WordPress, потому что большинство перегруженных тем могут замедлить работу всего сайта.
• Поддерживать обновление WordPress . WordPress часто обновляется; убедитесь, что на вашем сайте всегда установлена ​​последняя версия.
• Разделить комментарии на отдельные страницы . Получать комментарии — это всегда большое да-да! Но если у вашего сообщения слишком много комментариев, это может стать опасностью загрузки. Отличный способ сохранить эффективность — перейти в Настройки -> Обсуждение .Здесь установите флажок Разбивать комментарии на страницы .
• Удалить неиспользуемые темы и плагины . Если на вашем WordPress установлены неиспользуемые темы и плагины, удалите их. Вы же не хотите, чтобы этот мусор оставался на вашей учетной записи хостинга и замедлял работу WordPress.

Заключение

WordPress — это очень удобный и интерактивный способ разместить ваш сайт. И наш учебник по WordPress показал, насколько легко установить эту CMS на 000webhost. Одной из причин, по которой WordPress приобрел такую ​​массовую популярность, была его способность настраивать и редактировать в соответствии с потребностями непосредственно из серверной части, не нанимая каких-либо специалистов или писать одну строчку кода.Некоторые функции WordPress настолько просты для понимания, что их даже не нужно включать в это руководство 000webhost по WordPress.

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

Хотите узнать больше о WordPress? См. Руководство Hostinger по WordPress, которое охватывает WordPress от А до Я.

30 превосходных видеоуроков по WordPress

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

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

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

Разработка темы WordPress

Разработка для WordPress

См. Процесс Криса Койера (CSS-трюков) для разработки сайта WordPress в этой серии из трех частей. Также ознакомьтесь с частью 2 и части 3.

Создание шаблона WordPress

Вот серия руководств (также см. Часть 2 и часть 3) по созданию шаблона WP с использованием различных бесплатных инструментов, таких как MAMP (для разработки на локальном компьютере) и TextWrangler (текстовый редактор).

Сборник хитростей WordPress

В этом видеоуроке вы увидите множество полезных советов и рекомендаций по настройке тем WordPress.

WordPress как CMS

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

Установить WordPress локально

Узнайте, как запустить WordPress с помощью установки WAMP на локальном компьютере для разработки и тестирования.

Как изменить тему WordPress

В этом руководстве вы узнаете о некоторых тегах шаблонов тем в WordPress.

Добавьте поле Twitter в свою форму

Узнайте, как установить и настроить плагин WP Twitip ID для интеграции Twitter на ваш сайт WordPress.

Как разместить собственный заголовок в блоге WordPress

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

Создайте свой первый виджет

Из этого видео-урока вы узнаете, как создать виджет темы для WordPress.

Как создать плагин для WordPress

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

Администрация

Как настроить PrettyURL на WordPress

Узнайте все о постоянных ссылках (в том числе о том, как настроить их на своем сайте WordPress) в этом видеоуроке.

Настройка каталога участников / пользователей в WordPress

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

Забыли пароль, обновить информацию о пользователе

Это полезное руководство учит администраторов сайта, что делать, если пользователь потерял свой пароль.

Включить HTTPS

Узнайте о HTTPS, поскольку он имеет отношение к безопасности вашего сайта WordPress, из этого содержательного видеоурока.

Рекомендации по обновлению WordPress

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

Перемещение вашего блога, изменение вашего доменного имени

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

Импорт и экспорт данных WordPress

Узнайте все об экспорте и импорте данных WordPress, просмотрев этот отличный скринкаст.

Настройки администратора блога WordPress

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

Объяснение ролей пользователей WordPress

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

Начало работы с WordPress

Создание базы данных для вашей установки WordPress

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

Создание файла Sitemap с помощью подключаемого модуля Google Sitemap Generator

Улучшение результатов поисковой системы с помощью подключаемого модуля Google Sitemap — в этом руководстве показано, как установить и настроить подключаемый модуль.

Начало работы

Этот учебник предназначен для начинающих и представляет собой отличное общее введение в ведение блога и WordPress.

Установка WordPress и руководство по теме

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

Как загрузить PDF-файлы

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

Подписи к фотографиям

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

Простое редактирование страницы в WordPress

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

Как создать галерею изображений в моем сообщении в блоге?

Из этого туториала Вы узнаете, как создать сообщение галереи изображений в WordPress.

HTML и QuickTags против визуального редактора

Узнайте разницу между редактированием содержимого с помощью визуального редактора (встроенный редактор WYSIWYG в WordPress) и старого доброго HTML.

Инструменты WordPress

Использование Windows Live Writer

Настройте Windows Live Writer для WordPress, чтобы авторы могли писать сообщения в блогах в автономном режиме.

Как писать сообщения в блоге WordPress с помощью надстройки ScribeFire Firefox?

Упростите ведение блога с помощью ScribeFire, надстройки браузера Mozilla Firefox, которая позволяет обновлять сообщения на лету.

Дополнительная литература

Связанное содержание

WooCommerce Tutorial — Как настроить его на своем веб-сайте (шаг за шагом)

WooCommerce — самое популярное решение для электронной коммерции для WordPress. Он может похвастаться более чем 4 миллионами активных установок, рейтингом пользователей WordPress.org 4,6 и целой армией счастливых, лояльных владельцев цифровых магазинов.

Более того, по состоянию на июнь 2019 года WooCommerce обслуживает около 7% всех интернет-магазинов и 22% из 1 миллиона крупнейших сайтов электронной коммерции.Продажи электронной коммерции стремительно растут, поэтому, если вы хотите открыть магазин на своем веб-сайте на WordPress, переход на WooCommerce — одно из лучших решений, которые вы могли бы принять.

Остается только один вопрос: как запустить WooCommerce и запустить свой веб-сайт? Чтобы ответить на этот вопрос, мы составили обширное руководство по WordPress WooCommerce. Давайте прямо сейчас!

Можно ли использовать WooCommerce бесплатно?

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

Как установить и настроить WooCommerce (за 7 шагов)

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

Чтобы оставаться в курсе и предлагать лучший опыт, WooCommerce 3.7 и выше теперь требует как минимум WordPress 4.9 и PHP 5.6.

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

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

Плагин WooCommerce для WordPress

Для этого зайдите на свой сайт WordPress и перейдите в раздел «Плагины > Добавить новый ».Используйте строку поиска, чтобы найти «woocommerce», и нажмите Установить сейчас , когда найдете нужный плагин. Автор плагина должен быть указан как Automattic:

Установка WooCommerce

Дайте плагину время для установки. Затем нажмите кнопку Активировать :

Активация WooCommerce

На этом этапе плагин будет запущен на вашем веб-сайте!

Шаг 2. Доступ к мастеру установки

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

Первая страница мастера настройки WooCommerce должна выглядеть так:

Страница настройки магазина WooCommerce

Здесь WooCommerce предлагает вам ввести основную информацию о вашем магазине. Это включает его адрес, валюту, которую вы хотите использовать, и планируете ли вы продавать цифровые или физические продукты (или и то, и другое).

Имейте в виду, что все, что вы установили здесь (или в остальной части мастера настройки), можно изменить позже в настройках WooCommerce, если это необходимо.На данный момент следующим шагом в нашем руководстве по WooCommerce 2019 является выбор Let’s Go .

Шаг 3. Выберите платежную систему

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

Платежная страница WooCommerce

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

Рекомендуемая литература: Как предотвратить и уменьшить мошенничество с кредитными картами на 98% с помощью Stripe Radar

Используете вместо этого Square? Ознакомьтесь с нашим подробным сравнением в блоге: Stripe vs Square.

Шаг 4. Настройте параметры доставки

Затем вы увидите экран Shipping :

Страница доставки WooCommerce

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

Шаг 5. Просмотрите дополнительные надстройки

На этом этапе вы настроили все основы для своего интернет-магазина WooCommerce. На следующей странице мастера установки представлены несколько дополнительных надстроек:

Рекомендуемая страница WooCommerce

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

Шаг 6. Установите подключаемый модуль Jetpack (необязательно)

На следующем экране также предлагается дополнительное дополнение:

Страница активации WooCommerce

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

Шаг 7: Завершите процесс установки

Ваш магазин WooCommerce теперь готов к игре:

Страница готовности WooCommerce

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

Скорее всего, сейчас вы захотите начать добавлять продукты. Чтобы продолжить следовать нашему руководству по WordPress WooCommerce, выберите Create a Product now.

Добавление и управление новыми продуктами в WooCommerce

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

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

Пример нового продукта WooCommerce

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

Название и описание продукта WooCommerce

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

Добавление ключевых деталей к вашему продукту

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

Раздел данных о продукте WooCommerce

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

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

WooCommerce Варианты загрузки продукта

Затем на вкладке Запасы вы можете управлять своими запасами, указав количество продукта, состояние запасов (в наличии / нет на складе) и, если вы хотите разрешить просроченные заказы:

Вкладка инвентаря WooCommerce

Кроме того, вы можете пометить товар как проданный отдельно, то есть в одном заказе можно купить только один товар.Здесь также можно ввести артикул (идентификационный номер) продукта, если он у вас есть.

Здесь также есть ряд других полезных вкладок. В разделе Shipping вы можете указать вес, размеры и класс доставки товара. На вкладке Связанные товары вы можете добавить дополнительные и перекрестные продажи, а Атрибут позволяет описать характеристики продукта.

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

Создание атрибутов и переменных продуктов

Как видите, существует множество вариантов добавления деталей к вашим продуктам WooCommerce и их полной настройки. Давайте подробнее рассмотрим два наиболее полезных параметра в разделе Данные о продукте — атрибуты и переменные товары.

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

Продукт WooCommerce с атрибутами

Независимо от того, какой тип товаров вы продаете, атрибуты полезны для краткой передачи жизненно важных характеристик. Однако что, если вы также продаете предметы, которые доступны в нескольких вариантах? Для этого вы можете выбрать вариант Variable product :

Вкладка «Варианты WooCommerce»

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

Ваши покупатели смогут увидеть все доступные варианты на странице товара:

Продукт WooCommerce с вариациями

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

Настройка продукта Краткое описание

Под виджетом Данные о продукте вы также найдете раздел с надписью Краткое описание продукта :

Виджет краткого описания продукта WooCommerce

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

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

Вот как ваш конечный продукт может выглядеть на внешнем интерфейсе:

Образец продукта в WooCommerce

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

Управление продуктами WooCommerce

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

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

Продукты WooCommerce

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

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами WordPress!

Как настроить свой магазин WooCommerce

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

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

Заказы

Сначала на странице Orders отображается список последних покупок в вашем магазине:

Страница заказов WooCommerce

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

Купоны

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

Создание купона WooCommerce

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

Экран ограничения использования

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

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

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

Отчеты

WooCommerce также предлагает мощные встроенные функции отслеживания. На вкладке Reports вы можете просматривать диаграммы и графики ваших продаж, заказов и затрат на доставку за разные периоды времени:

Вкладка «Отчеты WooCommerce»

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

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

Настройки

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

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

Общие настройки WooCommerce

Еще одна примечательная опция — Включить налоговые ставки и расчеты . Если вы установите этот флажок, вы получите доступ к ранее скрытой вкладке Tax :

Налоговые настройки WooCommerce

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

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

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

Настройки продуктов WooCommerce

Доставка — здесь вы можете настроить зоны доставки и цены:

Настройки доставки WooCommerce

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

Вкладка Payments показывает, какие платежные системы доступны и активны в вашем магазине:

Настройки платежей WooCommerce

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

Далее, Accounts & Privacy контролирует различные аспекты взаимодействия с вашими клиентами:

Учетные записи WooCommerce и настройки конфиденциальности

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

Кроме того, у вас есть различные варианты обработки заказов клиентов. В разделах Гостевая касса и Создание учетной записи вы можете определить, смогут ли посетители размещать заказы в качестве гостей (т. Е. Без входа в учетную запись).

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

На вкладке Электронные письма вы можете настроить все, что связано с поддержкой клиентов:

Настройки электронной почты WooCommerce

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

Настройка писем WooCommerce

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

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

Наконец, на вкладке Advanced вы можете включить REST API, настроить ключи, приложения и веб-перехватчики, а также выполнить другие задачи более низкого уровня:

Расширенные настройки WooCommerce

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

Статус

Затем давайте кратко рассмотрим вкладку Status :

Вкладка статуса WooCommerce

Здесь можно найти всю вашу внутреннюю информацию, например, ваш WooCommerce / PHP / MySQL / и т. Д. версия, ограничения размера, ведение журнала и многое другое.

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

Расширения

Одним из атрибутов, которые делают WordPress самой популярной системой управления контентом (CMS) на планете, является стоящее за ней сообщество.Существуют тысячи тем и десятки тысяч плагинов, которые вы можете использовать для настройки своего веб-сайта. Более того, почти 100% из них вносятся пользователями.

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

Вкладка расширений WooCommerce

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

Выбор тем WooCommerce

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

Магазин расширений WooCommerce

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

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

Плагин Braintree для WooCommerce

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

Редактирование шаблонов WooCommerce

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

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

Затем вам нужно будет получить доступ к своему сайту с помощью клиента безопасного протокола передачи файлов (SFTP), такого как FileZilla. Найдите корневую папку своего сайта (часто называемую public_html или названную в честь вашего домена) и перейдите к wp_content / plugins / woocommerce :

Папка WooCommerce в FileZilla

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

шаблонов WooCommerce в FileZilla

На этом этапе вы можете открыть любой понравившийся шаблон и начать вносить изменения. Например, если вы хотите внести изменения в страницу «Спасибо», которая появляется после того, как клиент разместил заказ, вы можете открыть папку checkout и найти файл thankyou.php . Затем вы можете загрузить его, отредактировать или добавить элементы по своему усмотрению и повторно загрузить на свой сервер.

Хостинг WooCommerce

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

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

WooCommerce на Kinsta

Благодаря нашей масштабируемой инфраструктуре на платформе Google Cloud Platform, а также новейшим технологиям, таким как PHP 7, Nginx и MariaDB, мы можем гарантировать, что переход на Kinsta поможет увеличить ваши продажи!

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

— Калеб Ворм, Swagway.com

Сводка

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

У нас есть для вас кое-что классное! Мы потратили месяцы на составление этого руководства по оптимизации WooCommerce из 18 глав. Он включает в себя массу уроков и бесплатные инструменты для оптимизации и развития вашей компании на миллион долларов с помощью WooCommerce.

Есть ли что-то важное, что мы упустили в нашем руководстве по WooCommerce? Если да, дайте нам знать в разделе комментариев ниже!

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

Пошаговое руководство по созданию блога WordPress в 2021 году

Я до сих пор помню, как впервые наткнулся на WordPress. Я решил, что собираюсь завести блог — до этого я едва прочитал блогов, не говоря уже о том, чтобы создать свой собственный. Хотя у меня были некоторые старые школьные знания HTML и CSS, относящиеся к концу 90-х (когда я создавал веб-сайт только с блокнотом и программным обеспечением FTP), я был совершенно не в себе.

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

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

Содержание:

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

1. Получить хостинг WordPress
2. Установить WordPress и настроить параметры
3. Выберите тему WordPress для создания блога
4. Установите рекомендуемые плагины
5. Начать блог

Шаг 1. Получите хостинг WordPress

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

Каждый из них — отличный вариант для нового блога. Bluehost предлагает бюджетные планы, которые более чем способны вести новый блог.Хотя, если вы можете позволить себе немного больше каждый месяц, мы настоятельно рекомендуем хостинг для WordPress от Flywheel или WP Engine (который мы используем), поскольку они полностью управляют вашим сервером и основными обновлениями за вас. Кроме того, оба предлагают резервное копирование и сканирование безопасности, чтобы сделать ваш сайт более безопасным.

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

Шаг 2: Установите WordPress и настройте параметры

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

• Bluehost обеспечивает быструю настройку одним щелчком мыши при регистрации.Просто войдите в свою учетную запись и выберите опцию «Установить WordPress» на сайте . Оттуда вы просто следуете инструкциям на экране, чтобы выбрать доменное имя и создать данные для входа в систему администратора WordPress. Вы можете узнать больше о том, как установить WordPress с Bluehost, в нашем руководстве.
• Flywheel поставляется с предустановленным WordPress, готовым к работе. Поскольку планы хостинга Flywheel позволяют установить только один веб-сайт на каждый план хостинга, вам нужно либо добавить домен (и создать учетные записи администратора WordPress), либо перенести веб-сайт с помощью команды Flywheel (для начала.
• WP Engine — это также управляемый план хостинга WordPress, поэтому вам не нужно устанавливать WordPress. Однако вам все равно нужно будет добавить новый домен или перенести свой веб-сайт (просто войдите в систему и перейдите к Install> Site Migration , если вы хотите переместить свой веб-сайт, то перемещаете ли вы веб-сайт или запускаете новый, перейдите на Установите> Домены , чтобы указать поверх вашего домена). Если вы выбрали план Pro или выше с WP Engine, вы можете установить несколько веб-сайтов на свой план хостинга.Чтобы добавить новый сайт, наведите указатель мыши на Installs и выберите опцию Add , затем повторите процесс добавления вашего домена.
• Другие хосты: Если вы используете другой хост, нет проблем! Вы можете установить WordPress на любой хост (вам просто нужно вручную загрузить и установить WordPress).

После того, как WordPress установлен и готов, вы можете перейти по своему URL-адресу и войти в WordPress . Должна быть ссылка на ваш логин WordPress из вашей учетной записи хостинга (обычно это your-url.com / wp-login или wp-admin или что-то подобное). Используйте имя администратора или адрес электронной почты и пароль, которые вы создали при настройке информации для своей учетной записи хостинга.

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

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

Общие настройки WordPress

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

Написание настроек WordPress

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

Чтение настроек WordPress

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

Обсуждение настроек WordPress

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

Медиа Настройки WordPress

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

Постоянные ссылки Настройки WordPress

Постоянные ссылки — это то, что появляется в адресной строке браузера, когда посетитель находится на любой странице вашего сайта — это ваш URL плюс уникальный идентификатор страницы или сообщения. Например, постоянная ссылка для этой страницы — «начало работы на wordpress-blogging».

На этой странице настроек вам будет представлен список различных форматов постоянных ссылок. По умолчанию WordPress настроен на использование идентификатора сообщения, что не очень хорошо. Вместо этого мы обычно предпочитаем и рекомендуем вариант Post name , так как он прост в использовании, визуально привлекателен и дает дополнительный импульс вашему SEO (использование вашего ключевого слова в вашем ярлыке обычно хорошо).

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

Бонус: Ваш профиль

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

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

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

Шаг 3. Выберите тему WordPress для создания блога

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

По умолчанию на вашем сайте будет активна ежегодная тема WordPress. Automattic (люди, стоящие за WordPress) выпускают новый каждый год, и каждый из них ориентирован на блоггеров (последняя тема Twenty Seventeen, но Twenty Eighteen уже на подходе). Каждый год эта новая тема, как правило, более чем подходит для тех, кто только начинает работать с WordPress, чтобы создать блог.

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

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

Шикарная тема WordPress премиум-класса для стиля жизни и электронной коммерции

Chis — прекрасная и элегантная тема для блогов с полной поддержкой WooCommerce. Это означает, что легко писать на любимые темы и так же легко продавать свои товары. Аккуратно, да?

Тема WordPress для бесплатных блогов

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

Тема WordPress для блога о бесплатном каменщике Mesa

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

Total Drag & Drop Ultimate Многоцелевая тема WordPress для ведения блогов

Наконец, как мы могли не упомянуть Total? Тема Total — это полное решение для любого типа веб-сайта, особенно если вы хотите создать блог.Благодаря усовершенствованному конструктору страниц с перетаскиванием, неограниченным параметрам цвета, пользовательским шрифтам Google, встроенным портфолио и галереям, ползункам премиум-класса, форматам видео и аудио сообщений, конструктору заголовков, пользовательским виджетам и многому другому Total можно легко настроить. Создайте личный блог, управляйте корпоративным сайтом, публикуйте свои видеоблоги, делитесь рецептами и т. Д. Total ничего не может сделать!

Но это лишь некоторые из наших фаворитов, которые упростят вам создание блога. Теперь, когда вы выбрали свою тему, пора подумать о выборе плагинов!

Шаг 4: Установите рекомендуемые плагины

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

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

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

Когда вы найдете нужный плагин, нажмите ссылку «Установить сейчас». После того, как плагин будет установлен, вам будет предложено активировать новый плагин. Это оно! Плагин установлен и активирован. Настройка каждого из этих рекомендуемых плагинов должна быть довольно простой, но если у вас есть какие-либо простые вопросы, вы можете задать их в разделе комментариев ниже или посетите страницу плагина в WordPress.org, чтобы открыть тему поддержки.

Для защиты от спама попробуйте Akismet

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

Чтобы добавить социальный обмен, подумайте над AddThis

Вы хотите, чтобы люди делились вашим контентом? Поэтому, если ваша тема еще не поддерживает публикацию в социальных сетях, вам потребуется установить для этого плагин. Хороший бесплатный вариант — AddThis. Их бесплатный плагин для обмена в соцсетях добавляет опции для 200+ социальных сетей, множество стилей кнопок и множество локаций (боковая панель, заголовок, виджет, контент и т. Д.) — и все это бесплатно. Если вы хотите видеть свою аналитику или иметь более расширенные возможности совместного использования, вам понадобится премиум-аккаунт AddThis, но для большинства блоггеров достаточно плагина.

Оптимизируйте SEO с помощью Yoast

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

Добавьте Google Analytics с помощью MonsterInsights

Отличный способ узнать, как работает ваш сайт, — это отслеживать посещения вашего сайта с помощью Google Analytics.Ознакомьтесь с нашим руководством о том, как настроить Google Analytics для своего веб-сайта, но после того, как вы создали учетную запись и добавили код отслеживания на свой веб-сайт, вы можете начать мониторинг своего веб-сайта. Конечно, вы можете вручную проверять свою учетную запись Google Analytics каждый день, но WordPress, будучи гибкой CMS, предлагает множество простых в использовании плагинов, которые интегрируют вашу аналитику в вашу панель управления WordPress. Мы рекомендуем MonsterInsights, поскольку он хорошо работает с Yoast SEO — таким образом вы можете комбинировать свою стратегию SEO с мониторингом SEO для достижения гораздо лучших результатов.

Ведение резервных копий WordPress с помощью VaultPress

Всегда полезно планировать худшее, и одна из лучших безопасных ситуаций, когда вы начинаете блог с WordPress, — это регулярное резервное копирование. VaultPress — это бесплатный плагин, но для него требуется премиум-членство, чтобы вы могли создавать и поддерживать полные резервные копии сайта. Это часть премиальных планов Jetpack, которые начинаются всего с 3,50 долларов в месяц (всего 39 долларов в год), что является очень низкой ценой, чтобы быть уверенным в том, что на вашем веб-сайте есть план Б.Если вы не хотите использовать плагин для резервного копирования, не проблема. Есть несколько различных бесплатных методов, которые вы можете использовать для резервного копирования WordPress через ваш тарифный план или вручную.

Шаг 5. Начните вести блог

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

Удалить образец страницы и публикации

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

На данный момент вам не нужно создавать какие-либо новые страницы, хотя вы, возможно, захотите вернуться позже, чтобы в какой-то момент создать страницу «О себе» или «Контакты». В настоящее время мы сосредоточены на том, чтобы ваш блог работал, не требуя ничего, кроме сообщений. Итак, нажмите сообщения на боковой панели и, как и на ваших страницах, удалите образец сообщения с заголовком «Hello world!»

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

Создайте свой первый пост

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

Есть три ключевых момента, которые вам нужны, чтобы опубликовать свой первый пост (хотя у нас есть подробное руководство по публикации вашего первого поста в WordPress):

1. Создайте заголовок для вашего сообщения : Это находится в поле непосредственно под «Добавить новое сообщение.»Сделайте это ясным, лаконичным и запоминающимся. Также рекомендуется включить ключевое слово.
2. Напишите свой контент : Это происходит в основном поле текстового редактора, которое занимает большую часть экрана. Это редактор типа «что видишь, то и получаешь» (сокращенно WYSIWYG), что означает, что вы можете видеть изменения, которые вы вносите с помощью редактора, используя включенные параметры (полужирный, курсив, размеры шрифта, ссылки и т. Д. ) или вставка мультимедиа (изображений, ссылок на видео и т. д.).
3. Рекомендуемое изображение, категория и теги : Если вы хотите добавить избранное изображение, самое время сделать это.Мы также рекомендуем использовать категории (широкие группы сообщений) и теги (конкретные, нишевые дескрипторы), поскольку они облегчают читателям просмотр вашего веб-сайта позже, когда в вашем блоге будут сотни сообщений.

Обсудив эти три вопроса, нажмите кнопку Опубликовать . Вот и все — создавать контент в WordPress так просто! Хотя есть ряд вещей, которые вы можете сделать, чтобы оптимизировать и лучше представить свои сообщения, ключ к началу работы — это просто начало работы .Позже побеспокойтесь о мелком шрифте, но пока получите какой-нибудь контент!

Добавить дополнительные функции

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

Чего вы ждете? Иди, начни блог!

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

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

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

WordPress | Gatsby

Как создать сайт с данными, полученными из WordPress

Версия gatsby-source-wordpress , используемая в этом руководстве, скоро будет устаревшей и будет заменена полностью переписанной в следующей основной версии (v4 ). Причина этого в том, что мы приняли использование WPGraphQL для поддержки предварительных и инкрементных сборок, а также для того, чтобы сделать схему в целом более стабильной и согласованной.

Пожалуйста, следуйте руководству по созданию нового сайта с gatsby-source-wordpress вместо этого, поскольку этот пакет является бета-версией следующей основной версии gatsby-source-wordpress .

О чем идет речь в этом руководстве:

В этом руководстве вы установите подключаемый модуль gatsby-source-wordpress для извлечения данных блога и изображений из установки WordPress на ваш сайт Gatsby и рендеринга этих данных. Этот демонстрационный сайт Gatsby + WordPress показывает вам исходный код для примера сайта, аналогичного тому, что вы собираетесь создать в этом руководстве, хотя на нем отсутствуют классные изображения, которые вы добавите в следующей части этого руководства, Добавление изображений. на сайт WordPress.: D

А вы предпочитаете GraphQL?

Если вы предпочитаете GraphQL, есть плагин wp-graphql, который позволяет легко отображать как стандартные, так и пользовательские данные в WordPress.

Те же схемы аутентификации, которые поддерживает WP-API, поддерживаются в wp-graphql, который можно использовать с плагином gatsby-source-graphql.

Зачем читать это руководство?

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

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

Создание сайта с помощью подключаемого модуля

Создайте новый проект Gatsby и измените каталоги в новый проект, который вы только что создали:

Установите подключаемый модуль gatsby-source-wordpress .Дополнительные сведения о функциях плагина и примерах запросов GraphQL, не включенных в это руководство, см. В файле README плагина gatsby-source-wordpress .

Добавьте подключаемый модуль gatsby-source-wordpress к gatsby-config.js , используя следующий код, который вы также можете найти в исходном коде демонстрационного сайта.

Создание запросов GraphQL, извлекающих данные из WordPress

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

Выполнить:

В браузере откройте http: // localhost: 8000 , чтобы увидеть свой сайт, и откройте http: // localhost: 8000 / ___ graphql , чтобы вы могли создавать запросы GraphQL.

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

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

Отображение сообщений блога в индексе

Теперь, когда вы создали запросы GraphQL, которые извлекают нужные вам данные, вы воспользуетесь этим вторым запросом для создания списка отсортированных заголовков сообщений блога на главной странице вашего сайта. Вот как должен выглядеть компонент вашей домашней страницы в src / pages / index.js :

Сохраните эти изменения и посмотрите http: // localhost: 8000 , чтобы увидеть свою новую домашнюю страницу со списком отсортированных сообщений блога!

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

Создавать страницы для каждого сообщения в блоге и ссылаться на них

Индексная страница с заголовком сообщения и отрывком — это здорово, но вы также должны создать страницы для каждого блога сообщений и ссылки на них из файла index.js .

Для этого вам необходимо:

1. Создать страницы для каждого сообщения в блоге
2. Свяжите заголовок на странице индекса со страницей сообщения.

Если вы еще этого не сделали, пожалуйста, прочтите часть 7 основного руководства, поскольку в ней рассматриваются концепция и примеры этого процесса с использованием Markdown вместо WordPress.

Создание страниц для каждого сообщения в блоге

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

Откройте файл gatsby-node.js в корне вашего проекта (он должен быть пустым, за исключением некоторых комментариев) и добавьте следующее:

Затем остановите и перезапустите среду gatsby develop .Наблюдая за терминалом, вы должны увидеть журнал двух объектов Post в терминал:

Отлично! Как объяснялось в части 7 руководства, этот экспорт createPages является одной из «рабочих лошадок» Гэтсби и позволяет нам создавать ваши сообщения в блоге (или страницы, или пользовательские типы сообщений и т. Д.) Из вашей установки WordPress.

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

В каталоге src создайте каталог с именем templates и во вновь созданной папке templates создайте поле с именем blog-post.js . В этот новый файл вставьте следующее:

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

Ниже вы можете увидеть запрос GraphQL, вызывающий конкретную публикацию на основе $ slug .Эта переменная передается в шаблон blog-post.js , когда страница создается в gatsby-node.js . Для этого добавьте следующий код в файл gatsby-node.js :

Вам нужно будет остановить и снова запустить среду, используя gatsby develop . Когда вы это сделаете, вы не увидите изменений на странице индекса сайта, но если вы перейдете на страницу 404, например, http: // localhost: 8000 / asdf , вы должны увидеть два созданных образца сообщения и быть возможность щелкнуть по ним, чтобы перейти к образцам сообщений:

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

Ссылки на сообщения с домашней страницы

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

Снова откройте src / pages / index.js и добавьте следующее:

И все! Когда вы помещаете заголовок в компонент Link и ссылаетесь на заголовок сообщения, Гэтсби добавит магии к ссылке, предварительно загрузит ее и сделает переход между страницами невероятно быстрым:

Завершение

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

тем WordPress — шаблоны WordPress

Вы слышали это тысячу раз: WordPress — самая популярная система управления контентом (также известная как CMS) в мире. W3Techs сообщает, что 59% сайтов, использующих CMS, построены на WordPress. Он настолько успешен, что стал почти синонимом CMS!

Так что же делает WordPress предпочтительным выбором для миллионов разработчиков, дизайнеров и всех, кому действительно нужен веб-сайт?

Прежде всего, WordPress бесплатно и с открытым исходным кодом .Это не только означает, что вы получаете его бесплатно (да), но и то, что команда разработчиков со всего мира постоянно работает над его улучшением. Кроме того, доступно безумное количество плагинов, , которые интегрируются с платформой. Они позволяют вам добавлять на ваш сайт всевозможные функции — от слайдеров изображений до календарей, новостных лент, спам-фильтров и так далее. Кроме того, очень прост в использовании, : его интерфейс прост и интуитивно понятен, а в Интернете есть множество руководств по WP всех видов, которые помогут вам извлечь из него максимум пользы.

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

Да, любой . Не заблуждайтесь, думая, что WordPress предназначен только для веб-сайтов малого бизнеса, блогов и других проектов малого и среднего размера. Это очень далеко от истины! Множество сложных сайтов электронной коммерции построены на WordPress и работают довольно хорошо;)

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

И тема WordPress — это то, о чем эта страница! Кто они такие? Рад, что ты спросил. Речь идет о предварительно разработанных и предварительно созданных макетах , которые вы можете применить на своем веб-сайте. Если панель управления WordPress позволяет вам заботиться о содержимом вашего сайта (категории, подкатегории, разделы, страницы, текст и т. Д.), Тема будет определять, как сайт выглядит. Его визуальный дизайн и его взаимодействия. Какого цвета будет фон? Как будет выделяться ссылка при наведении указателя мыши? Будет ли на главной странице большой слайдер? Вот о чем тема.

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

1. Высокое качество . У нас есть не только одни из лучших дизайнеров и разработчиков, продающие свои темы на ThemeForest. Наша команда по качеству проверяет каждый из них до того, как они поступят в продажу.
2. Подходит для всех устройств . Вам не нужно, чтобы мы сообщали вам, что в настоящее время люди, скорее всего, будут посещать ваш сайт с разных устройств. Шаблоны, которые вы найдете здесь, подходят для всех размеров экрана — и вы знаете, насколько это важно.
3. Готово для электронной коммерции . В наши дни сайты электронной коммерции на базе WordPress есть повсюду в сети, и не зря! Шаблоны сайтов электронной коммерции отлично интегрируются с такими платформами, как Magento, Shopify и другие, что упрощает вам открытие интернет-магазина.
4. Творческое сообщество за работой . Envato Market является домом для крупнейшего мирового сообщества творческих людей. Наши авторы — талантливые профессионалы, безмерно увлеченные своим делом.
5. Поддержка при необходимости . Все темы поставляются с подробной документацией по их использованию. А если вам понадобится помощь с ошибками или проблемами, наши авторы будут рядом, чтобы помочь. Кроме того, справочный центр Envato всегда находится на расстоянии одного клика.

Лучшие учебники по Гутенбергу для пользователей

Вы хотите создать простой настраиваемый блок Гутенберга для своего или клиентского сайта WordPress? Как вы уже знаете, начиная с WordPress 5.0, есть совершенно новый редактор блоков WordPress под названием Gutenberg, который использует блоки для создания…

Вы все еще предпочитаете работать с классическим редактором (редактором TinyMCE)? Вы отключили редактор Гутенберга или думаете это сделать? Подожди, у меня для тебя есть вариант получше. 😇 Почему бы не использовать Гутенберга в качестве нового и…

Вам не нравится полноэкранный режим в WordPress? Не волнуйтесь; вы можете легко отключить его. Есть несколько простых способов сделать это. Как отключить режим полноэкранного редактора для редактора WordPress (через параметры) Вы…

Если вы приняли мудрое решение перенести свой сайт Wix на WordPress, посмотрите, как я очень легко воссоздал целевую страницу Wix в редакторе WordPress Gutenberg .Обязательный плагин Gutenberg имеет достаточно встроенных блоков; Я не использовал никаких дополнительных…

Как вы думаете, Гутенберг можно использовать только для написания сообщений в блогах или содержания страниц? Если да, посмотрите видео, в котором я покажу вам, как я воссоздал целевую страницу Elementor в Гутенберге. Обязательный плагин Gutenberg имеет достаточно встроенных блоков; Я…

Только что добавила изящную небольшую функцию в наше расширение для браузера Chrome, которая позволяет копировать выбранные шаблоны блоков. Что такое шаблон блока? Шаблон блока — это просто набор блоков с предопределенными атрибутами и содержимым заполнителя.Это довольно…

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

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

После огромного отклика на Библиотеку шаблонов Гутенберга, которую мы запустили на прошлой неделе.Я очень рад представить вам наше самое первое расширение для браузера Chrome. На данный момент это расширение позволяет вам просматривать библиотеку шаблонов, но следите за обновлениями …

Обновление: 21 июля 2020 года: библиотека шаблонов обновлена, чтобы упростить и упростить работу. Теперь вам необходимо установить один плагин Editor Plus, и этот плагин позволяет вам легко настраивать шаблоны и делает…