Как установить готовое меню на сайт


Создание меню с помощью CSS и HTML

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

Вертикальное меню

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором "navbar". Каждый элемент <li> нашего списка будет содержать по одной ссылке:


 <ul>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Новости</a></li>
 <li><a href="#">Контакты</a></li>
 <li><a href="#">О нас</a></li>
 </ul>
 

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


 #navbar {
 margin: 0;
 padding: 0;
 list-style-type: none;
 width: 100px;
 }
 

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

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


 #navbar a {
 background-color: #949494;
 color: #fff;
 padding: 5px;
 text-decoration: none;
 font-weight: bold;
 border-left: 5px solid #33ADFF;
 display: block;
 }
 #navbar li {
 border-left: 10px solid #666;
 border-bottom: 1px solid #666;
 }
 

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

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Название документа</title>
 <style>
 #navbar {
 margin: 0;
 padding: 0;
 list-style-type: none;
 width: 100px;
 }
 #navbar li {
 border-left: 10px solid #666;
 border-bottom: 1px solid #666;
 }
 #navbar a {
 background-color: #949494;
 color: #fff;
 padding: 5px;
 text-decoration: none;
 font-weight: bold;
 border-left: 5px solid #33ADFF;
 display: block;
 }
 </style>
 </head>
 
 <body>
 
 <ul>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Новости</a></li>
 <li><a href="#">Контакты</a></li>
 <li><a href="#">О нас</a></li>
 </ul>
 
 </body>
 </html>
Попробовать »

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

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:


 #navbar a:hover {
 background-color: #666;
 border-left: 5px solid #3333FF;
 }
 
Попробовать »

Горизонтальное меню

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

Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов <li> нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

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


 <ul>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Новости</a></li>
 <li><a href="#">Контакты</a></li>
 <li><a href="#">О нас</a></li>
 </ul>
 

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


 #navbar {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
 #navbar li { display: inline; }
 
Попробовать »

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:


 #navbar {
 margin: 0;
 padding: 0;
 list-style-type: none;
 border: 2px solid #0066FF;
 border-radius: 20px 5px;
 width: 550px;
 text-align: center;
 background-color: #33ADFF;
 }
 #navbar a {
 color: #fff;
 padding: 5px 10px;
 text-decoration: none;
 font-weight: bold;
 display: inline-block;
 width: 100px;
 }
 #navbar a:hover {
 border-radius: 20px 5px;
 background-color: #0066FF;
 }
 
Попробовать »

Выпадающее меню

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

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:


 <ul>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Новости</a></li>
 <li><a href="#">Контакты</a></li>
 <li><a href="#">О нас</a></li>
 </ul>
 

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


 <ul>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Новости</a></li>
 <li><a href="#">Контакты</a>
 <ul>
 <li><a href="#">Адрес</a></li>
 <li><a href="#">Телефон</a></li>
 <li><a href="#">Email</a></li>
 </ul>
 </li>
 <li><a href="#">О нас</a></li>
 </ul>
 
Попробовать »

Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент <li> список снова был преобразован в блочный элемент:


 #navbar ul { display: none; }
 #navbar li:hover ul { display: block; }
 

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


 #navbar, #navbar ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
 #navbar li { float: left; }
 #navbar ul li { float: none; }
 

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

#navbar ul {
 display: none;
 position: absolute;
 top: 100%;
 }
 #navbar li {
 float: left;
 position: relative;
 }
 #navbar { height: 30px; }
 
Попробовать »

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:


 #navbar ul {
 display: none;
 background-color: #f90;
 position: absolute;
 top: 100%;
 }
 #navbar li:hover ul { display: block; }
 #navbar, #navbar ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
 #navbar {
 height: 30px;
 background-color: #666;
 padding-left: 25px;
 min-width: 470px;
 }
 #navbar li {
 float: left;
 position: relative;
 height: 100%;
 }
 #navbar li a {
 display: block;
 padding: 6px;
 width: 100px;
 color: #fff;
 text-decoration: none;
 text-align: center;
 }
 #navbar ul li { float: none; }
 #navbar li:hover { background-color: #f90; }
 #navbar ul li:hover { background-color: #666; }
 
Попробовать »

Создайте одностраничник в WordPress менее чем за час

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

Преимущества

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

Отличное решение для небольших сайтов

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

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

Управляемый изображением

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

Лучший мобильный опыт

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

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

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

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

Создание одностраничного веб-сайта на WordPress

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

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

Настройка WordPress

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

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

Как настроить XAMPP для Windows и установить WordPress

Прежде чем пачкать руки, вы должны знать, что такое XAMMP в первую очередь. XAMPP расшифровывается как Cross-Platform (X), Apache (A), MariaDB (M), PHP (P) и Perl (P). Это бесплатное распространение программного обеспечения, которое помогает вам запускать собственные частные серверы. Он содержит серверное приложение, базу данных и язык сценариев, необходимые для успешной установки WordPress. Обычно серверы, запущенные XAMPP, используются для целей тестирования, чтобы вы могли свободно практиковать свои навыки веб-дизайна, не платя за хостинг или позволяя всем видеть игровую площадку вашего сайта.

Как установить XAMPP для Windows

А теперь давайте остановимся на теории и позвольте мне показать вам, как все это настроить. Хотя кросс-платформенная часть названия означает, что программное обеспечение также работает на компьютерах Linux и Mac, сегодня мы сосредоточимся на Windows:

  1. Перейти на сайт Apache Friends
  2. Загрузите последнюю версию, нажав кнопку, и сохраните ее на свой компьютер.
  3. Запустите установщик при загрузке
  4. На приветственном экране нажмите Далее

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

  1. Выберите папку, в которую вы хотите установить XAMPP.Это может быть любая папка, которую вы хотите, и вы также можете оставить папку по умолчанию. Просто запомните его местонахождение
  2. На следующем экране снимите флажок « Узнать больше о Bitnami для XAMPP », потому что вы установите WordPress вручную
  3. Нажмите Далее

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

  1. Оставьте отметку « Вы хотите запустить панель управления » отмеченной
  2. Нажмите Далее

Надеюсь, все прошло без проблем. Если это так, вы должны увидеть, что панель управления открыта без красного текста, показывающего ошибки. Вы также должны увидеть, что Apache и MySQL отмечены зеленым, что означает, что они запущены и работают. Чтобы проверить, нормально ли работает ваш сервер, зайдите в браузер и посетите этот URL: http: // localhost.

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

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

Как установить WordPress с помощью XAMPP

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

  1. Открыть панель управления XAMPP
  2. Нажмите кнопку Admin в разделе MySQL. Откроется новое окно с phpMyAdmin
  3. .
  4. Выберите Базы данных вкладку в верхнем левом меню
  5. Введите имя для своей базы данных, например, WordPress
  6. Нажмите Создать кнопку

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

  1. Скачать последнюю версию WordPress
  2. Перейдите в папку XAMPP (папка, в которую вы установили XAMPP из предыдущих шагов)
  3. Откройте папку и перейдите в папку htdocs
  4. Распаковать архив WordPress туда

У вас должна получиться новая папка WordPress в папке htdocs. Вы можете переименовать эту папку во что угодно. Это также будет частью адреса вашей локальной установки. Для целей этого руководства назовем его WordPress , который откроет ваш сайт с http: // localhost / wordpress. Неважно, какое имя вы используете, так что можете изменить его по своему вкусу.

  1. Откройте эту папку и найдите файл wp-config-sample.php
  2. Переименуйте его в wp-config.php
  3. Откройте файл и найдите часть с информацией о настройках MySQL (посмотрите на скриншот)
  4. Замените «database_name_here» на имя вашей базы данных, которым в моем случае является «WordPress»
  5. Замените «username_here» на «root» и оставьте «password_here» пустым
  6. Сохраните файл и закройте его

Наконец, вы готовы завершить процесс установки.Откройте браузер и перейдите по адресу http: // localhost / wordpress (или измените имя, если вы использовали другое имя для папки WordPress при извлечении). WordPress теперь запросит у вас язык, который вам нужно выбрать. После этого нажмите кнопку Продолжить . Затем введите данные имени пользователя и пароля и нажмите Установить WordPress.

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

Выбор темы

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


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

Плагины

Наиболее важными для создания одностраничных веб-сайтов являются плагины, которые вы используете.Мы собираемся установить конструктор страниц под названием SiteOrigin и расширение виджетов для этого плагина. Оба они полностью бесплатны и размещены в репозитории плагинов WordPress. Перейдите в Plugins -> Add New на панели инструментов вашего сайта WordPress и введите page builder по происхождению сайта. Плагин появится вверху списка, установите и активируйте его. Вы можете установить подключаемый модуль пакета виджетов на том же экране, введите siteorigin widgets bundle в поисковике подключаемых модулей.Убедитесь, что оба плагина активированы.

Начиная с версии 2.3 этого конструктора страниц, они добавили функцию прокрутки веб-сайта на одну страницу. Это то, что нам нужно, чтобы веб-сайт прокручивался всякий раз, когда кто-то нажимает на пункт меню с идентификатором строки в виде атрибута href (ссылка). Позже мы объясним, как это работает.

Начать строительство!

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


SiteOrigin Page Builder имеет множество предустановок, поэтому нам не нужно создавать весь дизайн с нуля. Вы увидите несколько кнопок над редактором страниц, одна из них - кнопка «Макеты», нажмите ее.


Теперь вы увидите экран со всеми видами макетов; это предустановки, которые вы можете использовать. Вы также можете импортировать и экспортировать макеты, но мы не предполагаем, что они у вас есть.Для этого примера мы выберем дизайн «Фитнес-зал». Конечно, вы можете выбрать любой дизайн, который хотите, или начать с нуля. Щелкните выбранный дизайн и нажмите кнопку «Вставить» в правом нижнем углу. Если у вас уже был контент на странице, вы можете вставить его до или после контента или полностью заменить. Для нас это не имеет значения, поскольку у нас пустая страница.


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


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


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

Настройка меню

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


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

Очень важно, чтобы вы не забыли указать хеш в URL-адресе пункта меню, это формат атрибута HTML ID.Однако не добавляйте хеш в раздел Attributes -> Row ID в настройщике, конструктор страниц SiteOrigin уже знает, что это идентификатор.

Мой результат

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

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

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

.

Окончательное руководство по созданию сайта членства в WordPress

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

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

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

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

Что вам нужно, чтобы создать сайт с членством в WordPress?

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

Для начала вам понадобятся следующие три вещи:

  1. Доменное имя.Это будет адрес вашего веб-сайта (например, wpbeginner.com).
  2. Учетная запись веб-хостинга. Здесь хранятся файлы вашего сайта.
  3. Расширение членства (оно превратит ваш обычный веб-сайт в платформу членства).

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

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

  1. Начало работы с сайтом членства
  2. Выбор плагина членства в WordPress
  3. Настройка веб-сайта членства
  4. Добавление способов оплаты
  5. Добавление уровней членства
  6. Ограничение доступа на основе тарифных планов
  7. Создание содержимого только для участников
  8. Создание страницы цен
  9. Добавление форм регистрации и входа
  10. Настройка шаблонов электронной почты
  11. Просмотр отчетов для расширения вашего сайта
  12. Расширение вашего членского сайта

Готовы? Давайте начнем.

Шаг 1. Начало работы с членским сайтом WordPress

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

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

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

Обычно доменное имя стоит около 14,99 долларов в год, веб-хостинг - около 7,99 долларов в месяц, а сертификат SSL - около 69,99 долларов в год.

Если вы только начинаете, эти начальные затраты могут быстро возрасти.

К счастью, у нас есть способ это исправить.

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

В принципе, все вышеперечисленное можно получить за 2 доллара.75 в месяц.

→ Нажмите здесь, чтобы воспользоваться этим эксклюзивным предложением Bluehost ←

Примечание: В WPBeginner мы верим в полную прозрачность. Если вы зарегистрируетесь в Bluehost, используя нашу реферальную ссылку, мы заработаем небольшую комиссию без каких-либо дополнительных затрат для вас (фактически, вы сэкономите деньги и получите бесплатный домен + сертификат SSL). Мы получили бы эту комиссию за рекомендацию практически любой услуги хостинга WordPress, но мы рекомендуем только те продукты, которые мы используем лично и которые, по нашему мнению, принесут пользу нашим читателям.

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

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

Шаг 2. Выбор подключаемого модуля для участия в WordPress

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

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

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

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

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

Другой возможный сценарий - продажа онлайн-курсов.В этом случае вам понадобится LearnDash, полноценный плагин WordPress LMS со всеми функциями управления обучением.

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

При этом давайте приступим к настройке вашего членского веб-сайта WordPress.

Шаг 3. Настройка вашего сайта для участия в WordPress

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

Первое, что вам нужно сделать, это установить и активировать плагин MemberPress. Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress.

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

Шаг 4. Добавьте способ оплаты

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

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

MemberPress поддерживает PayPal (Standard, Express и Pro), Stripe и Authorize.net из коробки. Вам необходимо выбрать способ оплаты, который вы хотите настроить, и предоставить необходимые учетные данные.

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

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

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

Шаг 5. Создание уровней членства

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

Чтобы создать уровень членства, вам необходимо перейти на страницу MemberPress »Членство и нажать кнопку« Добавить »вверху.

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

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

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

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

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

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

Шаг 6. Ограничение доступа для планов членства

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

Вы можете настроить правила, посетив страницу MemberPress »Правила и нажав кнопку« Добавить »вверху.

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

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

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

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

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

Если вы не уверены, то не устанавливайте их.

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

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

Шаг 7. Добавление содержимого только для участников

MemberPress упрощает создание контента только для членов с помощью правил.

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

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

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

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

Шаг 8. Создайте страницу цен

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

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

Вы можете настроить это, перейдя на страницу MemberPress »Группы и нажав кнопку« Добавить новый »вверху.

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

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

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

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

Чтобы просмотреть страницу с ценами, нажмите ссылку «Просмотреть группу» после ее публикации.

Перенаправить пользователей на страницу цен

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

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

После этого перейдите на страницу MemberPress »Параметры и прокрутите вниз до раздела« Несанкционированный доступ ».

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

Нажмите кнопку «Обновить параметры», чтобы сохранить настройки.

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

Шаг 9. Добавьте формы регистрации и входа пользователя

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

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

Перейдите к Внешний вид »Виджеты и добавьте виджет« Вход в систему MemberPress »на боковую панель.

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

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

Установите флажок рядом со страницей цен и нажмите кнопку «Добавить в меню».

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

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

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

Шаг 10. Настройка шаблонов электронной почты для участников

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

Просто перейдите на страницу MemberPress »Параметры и щелкните вкладку« Электронная почта ».Отсюда вы можете управлять уведомлениями по электронной почте, отправляемыми MemberPress.

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

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

Убедитесь, что вы нажали кнопку «Отправить тест», чтобы отправить себе несколько тестовых уведомлений.Это гарантирует, что MemberPress сможет отправлять уведомления по электронной почте.

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

Шаг 11. Просмотр отчетов для увеличения числа участников на сайте

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

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

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

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

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

MonsterInsights, самый популярный плагин Google Analytics для WordPress, предлагает полную интеграцию с MemberPress, которая упрощает включение расширенного отслеживания электронной торговли для MemberPress.

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

Вывод вашего членского сайта на новый уровень

MemberPress - мощный плагин для членства в WordPress.Это позволяет вам легко расширять свой членский сайт.

Он прекрасно работает с LearnDash, что позволяет легко создавать курсы и оставлять часть продажи для MemberPress.

Вы также можете использовать его вместе с BuddyPress и bbPress.

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

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

.Меню ресторана

- Система заказа еды - Резервирование столиков - Плагин

для WordPress

Описание

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

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

Меню ресторана

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

Онлайн-заказ еды на вынос / доставка еды

  • Удобный одностраничный заказ
  • Автозаполнение данных для постоянных клиентов
  • Приложение ресторана для приема заказов (Android / iOS)
  • Подтверждение заказа и время выполнения в реальном времени
  • Разные часы работы приёма и доставки
  • Множественные зоны доставки с разной минимальной стоимостью заказа / стоимостью доставки
  • Заказ на потом с плановым исполнением
  • Наличные, онлайн-платежи (премиум-функция) и другие способы оплаты
  • Поддержка подсказок (для онлайн-платежей)

Система бронирования ресторанов

  • Простая форма бронирования ресторана
  • Получение и подтверждение бронирования столиков из приложения ресторана (Android / iOS)
  • Заказ еды вперед на обед в

В систему онлайн-заказа еды также входит

  • Оповещает, когда приложение для заказа недоступно, и звонит, когда персонал ресторана не принимает заказы
  • Статистика заказов в ресторанах, аналитика веб-сайтов, тепловая карта доставки, экспорт клиентов и заказов
  • Механизм продвижения: 11 шаблонов, поддержка купонов, сегментация клиентов и таргетинг
  • Поддержка нескольких местоположений
Посмотрите, как работает наша система онлайн-заказов:

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

Для получения дополнительной информации перейдите по следующим ссылкам:

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

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

из WordPress

  1. Перейти к подключаемым модулям > Добавить новый
  2. Поиск по автору для GloriaFood
  3. Активируйте плагин на странице плагинов

Вручную

  1. Загрузите папку restaurant-system в каталог / wp-content / plugins /
  2. Активируйте плагин со страницы ваших плагинов

Как открыть счет в ресторане

  1. Найдите Меню - Заказ - Бронирование в меню WordPress
  2. Создать аккаунт в ресторане
  3. Перейдите на панель управления и настройте профиль ресторана
  4. Вставить меню еды
  5. Используйте шорткоды для публикации кнопок заказа и бронирования столиков на вашем сайте.
  6. Используйте шорткод меню, чтобы опубликовать онлайн-меню на любой странице вашего веб-сайта
  7. Вы можете начать принимать онлайн-заказы и бронировать столики!

Блоки

Этот плагин предоставляет 3 блока.

заказ-меню-резервирование / заказ-меню
Заказ
заказ-меню-резервирование / резервирование
Бронирование
заказ-меню-бронирование / меню-еда
Меню еды

FAQ

Почему ваше решение бесплатное?

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

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

Могу ли я принимать заказы без приложения ресторана?

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

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

Как распечатать заказы?

См. Полное руководство здесь.

Могу ли я настроить внешний вид виджетов?

Вы можете полностью настроить стили кнопок «См. Меню и порядок» и «Резервирование стола».

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

Обзоры

Абсолютно лучший плагин на рынке.

Самая главная функция «прием денег от клиентов» начисляется: По подписке стоимостью 29 $ в месяц !!! И это явно демо! И вы не видите этого с самого начала, но гораздо позже, в процессе тестирования и отказа от личной информации, открытия учетной записи на их сайте и т. Д. И т. Д... Можно получить другие аналогичные плагины, полностью работоспособные с почти ежемесячной оплатой, которую они просят, и владеть ими вечно, и без хлопот ... открытия учетной записи, предоставления личной информации и т.д ... Объяснить, чтобы плагин мог для работы, для этого требуется открыть учетную запись на их сайте и пройти долгий и очень утомительный процесс отправки важной личной информации, имени, местоположения, веб-сайта и т. д., и ... номера мобильного телефона! ... иначе он вообще НЕ работает, даже для базового тестирования! ... По крайней мере, с самого начала, это демо! Не говорите, что никакие комиссии, никакие расходы, никакие сборы и т. Д. Требуют и хранят много конфиденциальной личной информации, и где-то в ходе этого утомительного длительного процесса обнаруживается, что в плагине отсутствуют самые основные операции, такие как прием платежей !!! ... что вы берете слишком дорого! ...

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

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

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

Per me è il migliore in assoluto

Посмотреть все 29 отзывов

Участники и разработчики

«Меню ресторана - Система заказа еды - Резервирование столиков» - программное обеспечение с открытым исходным кодом.Следующие люди внесли свой вклад в этот плагин.

авторов

История изменений

1.0.2
  • Дата выпуска: 23 февраля 2018 г.
  • Первый выпуск
1.0.3
  • Дата выпуска: 26 марта 2018 г.
  • Улучшения локализации
1.0.4
  • Дата выпуска: 26 апреля 2018 г.
  • Разрешить передачу атрибута «class» в шорткоды для использования собственного CSS.
1.1.0
  • Дата выпуска: 11 мая 2018 г.
  • Добавлена ​​поддержка использования кнопок See Menu & Order и Table Reservations в качестве виджетов wp
  • Отображение администратора GloriaFood на том же языке, что и администратора WP
  • Добавлена ​​контекстная справка в раздел публикации
1.1.1
  • Дата выпуска: 29 мая 2018 г.
  • Исправление ошибок
1.2.0
  • Дата выпуска: 13 ноября 2018 г.
  • Проверено WordPress 5.0 совместимость
  • Исправление ошибок
1.2.1
  • Дата выпуска: 10 декабря 2018 г.
  • Обновлен URL-адрес внешнего js файла виджета заказа
1.3.0
  • Дата выпуска: 19 февраля 2019 г.
  • Добавлен шорткод для меню ресторана, так что вы можете легко опубликовать его на любой странице.
1.3.1
  • Дата выпуска: 8 марта 2019 г.
  • Добавлена ​​поддержка многосайтовых сетей WordPress
1.3,2
  • Дата выпуска: 5 апреля 2019 г.
  • Проверять токен входа в серверную часть, только если одна из страниц плагина отображается в админке
1.3.3
  • Дата выпуска: 6 мая 2019 г.
  • Проверил совместимость с WordPress 5.2
1,3,4
  • Дата выпуска: 17 сентября 2019 г.
  • Улучшенная связь с темой Wordpress для ресторана GloriaFood
1,3,5
  • Дата выпуска: 30 октября 2019 г.
  • Проверена совместимость с WordPress 5.3
1.4.0
  • Дата выпуска: 30 декабря 2019 г.
  • Добавлена ​​поддержка изображений в виджете меню
  • Добавлен функционал забытого пароля прямо в плагине
1.4.1
  • Дата выпуска: 28 июля 2020 г.
  • Добавлены кастомные блоки для Gutenberg
  • .
  • Исправлены различные мелкие ошибки
.

Как использовать Kodi: полное руководство по установке

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

Если эти сценарии описывают вашу ситуацию, у вас есть два варианта с точки зрения программного обеспечения: Plex или Kodi.Ранее мы объясняли, как настроить и использовать Plex, но в этом руководстве основное внимание будет уделено тому, как использовать его великого конкурента, Kodi.

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

Что такое Kodi и как его использовать?

Kodi лучше всего описать как приложение для домашнего кинотеатра, и при необходимости он может использоваться как игровая консоль в стиле ретро.Он начал свою жизнь еще в 2002 году как Xbox Media Player и быстро превратился в Xbox Media Center (XBMC). Окончательно он превратился в Kodi в 2014 году.

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

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

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

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

Как настроить Kodi

Kodi доступен для Windows, macOS, Linux, Android (мобильные устройства и ТВ), iOS и Raspberry Pi.

Если вы запускаете приложение на настольном компьютере или Android, вам просто нужно загрузить приложение с веб-сайта или связанного магазина приложений. Пользователи Windows также могут использовать версию Windows Store, в то время как Android может загрузить файл APK и загрузить приложение.Однако загрузка неопубликованных приложений затруднит обновление приложения, поэтому мы рекомендуем использовать метод Play Store. А вот как обновить Kodi на Amazon Fire TV Stick.

Если вы хотите установить Kodi на iOS, ситуация намного сложнее.

Kodi недоступен в Apple App Store. Вместо этого вам нужно скомпилировать приложение с помощью XCode. Для начала вам потребуется iOS 10.9 или выше, копия файла Kodi DEB, XCode 7 или выше, лицо, подписывающее приложение iOS, и Apple ID.

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

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

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

Загрузить: Kodi (бесплатно)

Первый запуск Kodi

Надеюсь, теперь вы смотрите на основной интерфейс Kodi.Но там нет ни контента, ни мастера настройки, ни намеков на то, как использовать надстройки и репозитории.

Мы собираемся объяснить все, но сначала давайте разберемся с основами.

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

Управляющий Kodi

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

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

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

  • F9 или - : Уменьшение громкости
  • F10 или + : Увеличение громкости
  • Пробел или P : воспроизведение / пауза
  • X : стоп
  • F : Быстрая перемотка вперед
  • R : перемотка назад
  • Влево стрелка : переход назад на 30 секунд
  • вправо стрелка : переход вперед на 30 секунд
  • I : отображение информации о воспроизводимом видео
  • T : Включение и выключение субтитров

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

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

Добавление мультимедиа в Kodi

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

Мы рассмотрим каждого отдельно.

Добавление видео в Kodi

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

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

Подготовка видеофайлов

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

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

Итак, если вы назначаете телешоу, поместите файлы в следующую структуру папок:

  • / Название шоу / Сезон XX / (например, Друзья / Сезон 05 )

Для сингла эпизодов, назовите каждый файл как sXXeYY , а для нескольких эпизодов назовите файл как sXXeYY-eYY .Например, S05E02 .

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

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

  • [Название фильма] (Год) (например, The Hurt Locker (2008) )

Следовательно, дерево папок должно выглядеть как Movies / The Hurt Locker (2008) .mp4 или Фильмы / The Hurt Locker (2008) / The Hurt Locker (2008).mp4 .

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

Примечание. Фильмы и телешоу следует хранить в отдельных деревьях папок.

Добавьте ваши видео

Теперь пришло время добавить ваши видео файлы в Kodi.

Для начала выберите Видео в меню в левой части рабочего стола Kodi.На следующем экране выберите Files . Наконец, нажмите Добавить видео .

Теперь вам нужно добавить источник видео. «Источник» - это слово, с которым вы часто будете сталкиваться при использовании Kodi. Это может относиться ко многим различным вещам. В этом случае это просто означает, что вам нужно выбрать папку на жестком диске, когда вы сохранили свои видеофайлы.

Вы можете дать своему источнику имя. Как правило, вы должны называть его Movies , TV Shows , Home Videos или что-то еще, аналогичное описательное.

Теперь вам нужно сообщить Kodi, какие видео находятся в исходной папке. Это позволит Kodi сканировать правильную онлайн-базу данных на предмет метаданных. Он использует TheTVDB для ТВ-метаданных и TheMovieDB для информации о фильмах.

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

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

Добавление музыки в Kodi

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

Подготовьте свои музыкальные файлы

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

Kodi использует базу данных MusicBrainz с открытым исходным кодом для маркировки музыки. База данных включает более 1,2 миллиона исполнителей, 1,8 миллиона альбомов и 17,5 миллиона песен.

К счастью, MusicBrainz предоставляет бесплатное настольное приложение, которое может автоматически пометить всю музыку от вашего имени. Вы можете бесплатно скачать его на Windows, Mac и Linux.

Если MusicBrainz не может правильно пометить вашу музыку, вы можете сделать это самостоятельно. Файловое дерево вашей музыки должно соответствовать структуре Исполнитель> Альбом> Песня .Например, Майкл Джексон> Триллер> Билли Джин .

Скачать: MusicBrainz (бесплатно)

Добавьте свою музыку

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

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

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

Теперь дайте название своей музыкальной коллекции.Если вы собираетесь импортировать несколько коллекций, выберите что-нибудь узнаваемое.

На следующем экране Kodi спросит, хотите ли вы добавить свой медиаисточник в библиотеку. Нажмите Да , и приложение начнет сканирование.

Опять же, если у вас обширная коллекция, этот процесс может занять некоторое время.

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

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

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

Добавление фотографий в Kodi

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

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

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

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

Использование надстроек Kodi и репозиториев

https://www.youtube.com/watch?v=s-vCaScj5GM

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

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

Репо (или репозиторий) - это библиотека надстроек Kodi. Сами надстройки позволяют вам получать доступ к контенту и просматривать его. Перед установкой надстройки необходимо добавить репо.

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

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

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

Официальное репозиторий Kodi содержит множество надстроек, и многим пользователям даже не нужно будет рассматривать возможность использования сторонних репозиториев.Доступные дополнения включают BBC iPlayer, Pluto TV, Crackle, SoundCloud, Arte TV, Bravo, BT Sport и Disney Channel. Самое главное, что все надстройки в официальном репо полностью легальны.

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

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

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

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

Установка сторонних репо

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

Когда вы найдете нужное репо, загрузите его ZIP-файл на свой жесткий диск.

Теперь перейдите в свое приложение Kodi и перейдите в Настройки > Система> Надстройки . Установите флажок рядом с Неизвестные источники .

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

  1. Щелкните Add-ons на главном экране Kodi.
  2. В верхнем левом углу щелкните значок коробки.
  3. Появится новый экран. Выберите Установить из файла ZIP .
  4. Используйте окно браузера, чтобы указать Kodi на ZIP-файл.
  5. Выделите ZIP-файл, который хотите установить, и нажмите OK .

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

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

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

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

Устранение неполадок Kodi

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

Чрезмерная буферизация

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

Обычно проблема связана с кешем. В частности, объем памяти, который может использовать кеш. Вы можете изменить настройки кеша, настроив файл Advanced Settings .

Откройте файл и вставьте следующий код:

  & lt; advancedsettings> & lt; кеш> & lt; buffermode> 1 & lt; / buffermode> & lt; memorysize> 20971520 & lt; / memorysize> & lt; readfactor> 8 & lt; / readfactor> & lt; / cache> & lt; / advancedsettings>  

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

Черно-белый экран при воспроизведении видео в Windows

Часто за это отвечает

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

Проблемы с задержкой звука на Android

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

Другие решения

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

  • Обновления: Всегда убедитесь, что и приложение Kodi, и любые надстройки, которые вы используете, работают с последней версией.
  • Удалить недавно установленные репозитории и надстройки: Иногда код в надстройках может мешать работе других надстроек или самого приложения Kodi.

У вас работает Kodi?

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

И если вы хотите узнать больше, посмотрите, как превратить Kodi в ваш личный Netflix и как слушать Spotify на Kodi.Также посмотрите наш список лучших VPN для Kodi и эти обязательные расширения Firefox для Kodi.

Операционная система не найдена? Вот как это исправить

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

Об авторе Дэн Прайс (Опубликовано 1376 статей)

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

Ещё от Dan Price
Подпишитесь на нашу рассылку новостей

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

Еще один шаг…!

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

.

Смотрите также

Поделиться в соц. сетях

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

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