Как загрузить html файл на сайт

Обновлено: 21.11.2024

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

Как веб-разработчик, мы должны знать, что HTML поддерживает загрузку файлов с помощью JavaScript. В HTML5 File API добавляется в DOM. Используя это, мы можем прочитать FileList и File Object внутри него. Это позволяет решить несколько вариантов использования файлов, т. е. загружать их локально или отправлять по сети на сервер для обработки и т. д.

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

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

Исходный код демонстрации находится в моем репозитории Github. ✋ Не стесняйтесь следовать, поскольку я обновляю код примерами. Пожалуйста, поставьте ⭐, если вы найдете это полезным.

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

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

При успешной загрузке File API позволяет прочитать объект File с помощью простого кода JavaScript. Чтобы прочитать объект File, нам нужно прослушать событие изменения загрузчика файла.

Сначала получите экземпляр загрузчика файлов по идентификатору,

Затем добавьте прослушиватель событий изменения для чтения файлового объекта после завершения загрузки. Мы получаем информацию о загруженном файле из свойства event.target.files.

Просмотрите вывод в консоли браузера. Обратите внимание на массив FileList с объектом File, содержащим все метаданные о загруженном файле.

Вот вам CodePen с тем же примером для дальнейшего изучения

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

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

Вот ссылка на CodePen, чтобы изучить загрузку нескольких файлов.

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

Вот результат загрузки одного файла

Используйте CodePen для дальнейшего изучения

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

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

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

Используйте CodePen, чтобы изучить атрибут accept,

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

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

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

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

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

Лучше информировать пользователей о ходе загрузки файла. Теперь мы знаем о FileReader и событии для чтения и загрузки файла.

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

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

Можем ли мы загрузить весь каталог? Что ж, это возможно, но с некоторыми ограничениями. Существует нестандартный атрибут (по крайней мере, на момент написания этой статьи), называемый webkitdirectory, который позволяет нам загрузить весь каталог.

Хотя изначально webkitdirectory реализовано только для браузеров на основе WebKit, его также можно использовать в Microsoft Edge, а также в Firefox 50 и более поздних версиях. Однако, несмотря на то, что он имеет относительно широкую поддержку, он все же не является стандартным и не должен использоваться, если у вас нет альтернативы.

Вы можете указать этот атрибут как,

Это позволит вам выбрать папку (или каталог),

Пользователь должен подтвердить загрузку каталога,

Как только пользователь нажмет кнопку "Загрузить", начнется загрузка. Здесь следует отметить один важный момент. Массив FileList будет содержать информацию обо всех файлах в загруженном каталоге в виде плоской структуры. Но ключевой момент в том, что для каждого из объектов File атрибут webkitRelativePath будет иметь путь к каталогу.

Например, рассмотрим главный каталог и другие папки и файлы в нем,

Теперь объекты File будут иметь webkitRelativePath, заполненный как,

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

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

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

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

Добавьте обработчик события перетаскивания, чтобы показать эффект от копирования,

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

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

Существует специальный метод URL.createObjectURL() для создания уникального URL-адреса из файла. Вы также можете освободить его с помощью метода URL.revokeObjectURL().

Методы DOM URL.createObjectURL() и URL.revokeObjectURL() позволяют создавать простые строки URL, которые можно использовать для ссылки на любые данные, на которые можно ссылаться с помощью объекта DOM File, включая локальные файлы на компьютер пользователя.

Простое использование URL-адреса объекта:

Я искренне в это верю,

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

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

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

Вы можете написать @me в Твиттере (@tapasadhikary) с комментариями или подписаться на меня.

Вы нашли эту статью полезной?

Поддержите Tapas Adhikary, став спонсором. Любая сумма приветствуется!

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

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

Обзор

Если вы создали простую веб-страницу (см. пример в разделе Основы HTML), вы, вероятно, захотите разместить ее в Интернете на веб-сервере. В этой статье мы обсудим, как это сделать, используя различные доступные варианты, такие как клиенты SFTP, RSync и GitHub.

Существует несколько клиентов SFTP. Наша демонстрация охватывает FileZilla, поскольку она бесплатна и доступна для Windows, macOS и Linux.Чтобы установить FileZilla, перейдите на страницу загрузок FileZilla, нажмите большую кнопку «Загрузить», затем выполните установку из установочного файла обычным способом.

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

Откройте приложение FileZilla; вы должны увидеть что-то вроде этого:

Вход

Мы только что открыли учетную запись и получили от них следующую информацию:

Примечание. В зависимости от вашего хостинг-провайдера большую часть времени вы будете видеть страницу, на которой написано что-то вроде "Этот веб-сайт размещен на [Услуге хостинга]". когда вы впервые заходите на свой веб-адрес.

Чтобы подключить SFTP-клиент к удаленному серверу, выполните следующие действия:

  1. Выберите Файл > Диспетчер сайтов в главном меню.
  2. В окне Диспетчер сайтов нажмите кнопку Новый сайт, затем введите название сайта как demozilla в отведенном месте.
  3. Укажите SFTP-сервер, указанный вашим хостом, в поле Хост:.
  4. В раскрывающемся списке Тип входа: выберите Обычный, затем введите предоставленные имя пользователя и пароль в соответствующие поля.
  5. Укажите правильный порт и другую информацию.

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

Теперь нажмите Подключить, чтобы подключиться к SFTP-серверу.

Примечание. Убедитесь, что ваш хостинг-провайдер предлагает SFTP-подключение (Secure FTP) к вашему хостинг-пространству. FTP по своей природе небезопасен, и вам не следует его использовать.

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

Давайте посмотрим, что вы видите:

  • В центре левой панели вы видите свои локальные файлы. Перейдите в каталог, в котором хранится ваш веб-сайт (например, mdn ).
  • В центре правой панели вы видите удаленные файлы. Мы вошли в наш удаленный корневой каталог FTP (в данном случае users/demozilla )
  • Пока вы можете игнорировать нижнюю и верхнюю панели. Соответственно, это журнал сообщений, показывающий состояние соединения между вашим компьютером и SFTP-сервером, а также живой журнал каждого взаимодействия между вашим SFTP-клиентом и сервером.

Загрузка на сервер

В нашем примере инструкции для хоста говорили нам: "Чтобы опубликовать в Интернете, поместите свои файлы в каталог Public/htdocs". Вам нужно перейти в указанный каталог на правой панели. Этот каталог фактически является корневым каталогом вашего веб-сайта, куда будут помещены файл index.html и другие ресурсы.

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

Они действительно онлайн?

И наш сайт работает!

R-синхронизация

Rsync – это инструмент для синхронизации файлов между локальными и удаленными системами, который обычно доступен в большинстве систем на базе Unix (например, в macOS и Linux), но существуют и версии для Windows.

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

  • -options — это тире, за которым следует одна или несколько букв, например, -v для подробных сообщений об ошибках и -b для создания резервных копий. Вы можете увидеть полный список на справочной странице rsync (ищите «Сводка параметров»).
  • ИСТОЧНИК — это путь к локальному файлу или каталогу, из которого вы хотите скопировать файлы.
  • user@ — это учетные данные пользователя на удаленном сервере, на который вы хотите скопировать файлы.
  • x.x.x.x — это IP-адрес удаленного сервера.
  • DESTINATION – это путь к папке, в которую вы хотите скопировать каталог или файлы на удаленном сервере.

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

Конечно, рекомендуется использовать безопасное соединение, например FTP. В случае Rsync вы указываете данные SSH, чтобы установить соединение через SSH, используя параметр -e. Например:

Более подробные сведения о том, что необходимо, см. в разделе Как копировать файлы с помощью Rsync через SSH.

Инструменты Rsync с графическим интерфейсом

Для Rsync доступны инструменты с графическим интерфейсом (для тех, кому неудобно пользоваться командной строкой). Одним из таких инструментов является Acrosync, который доступен для Windows и macOS.

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

GitHub

GitHub позволяет публиковать веб-сайты через страницы GitHub (gh-pages).

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

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

Другие способы загрузки файлов

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

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

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

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

1. Выберите надежную хостинговую компанию

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

Вот несколько факторов, которые следует учитывать при выборе хостинг-провайдера:

  1. Прямая поддержка . У хорошего хостинга должна быть команда специалистов, которые могут помочь вам в любое время. Нет ничего хуже, чем столкнуться с некоторыми проблемами и ждать ответа несколько дней.
  2. Управляйте пространством веб-хостинга. Чем меньше у вас контроля над учетной записью хостинга, тем выше вероятность того, что вы столкнетесь с проблемами, когда ваш сайт разрастется.
  3. Пространство для роста. Прежде чем выбрать веб-хостинг, убедитесь, что он предлагает масштабируемые решения, обеспечивающие большую мощность (например, виртуальные частные серверы или облачный хостинг).
  4. Гарантия возврата денег. Никто не любит плохие инвестиции, поэтому обязательно ознакомьтесь с политикой возврата. Это даст вам время, чтобы все протестировать, прежде чем переходить на услугу хостинга.

2. Выберите способ загрузки веб-сайта

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

Диспетчер файлов

Файловый менеджер – это браузерный инструмент со всеми ключевыми функциями для работы с файлами и каталогами вашего веб-сайта. Если у вас есть учетная запись Hostinger, войдите в hPanel и найдите «Диспетчер файлов» в разделе «Файлы».

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

Протокол передачи файлов (FTP)

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

Для пользователей Hostinger все необходимые учетные данные для доступа к вашему FTP-клиенту находятся в учетных записях FTP в разделе «Файлы».

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

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

Автоматический импортер веб-сайтов

Для пользователей Hostinger вы можете найти функцию импорта веб-сайта в hPanel. Вы можете использовать эту функцию для извлечения архива веб-сайта в каталог public_html. Инструмент поддерживает . zip , .tar и .tar.gz, а максимальный размер загрузки – 256 МБ.

Плагины переноса WordPress

Если вы планируете использовать WordPress, существует несколько способов загрузки вашего веб-сайта в CMS. Одним из самых простых способов является использование плагина миграции WordPress, такого как All in One WP Migration. После установки и активации плагина остальные шаги не требуют пояснений.

Ограничение размера загрузки зависит от вашего хостинг-провайдера. Узнайте, как увеличить размер загружаемого файла.

3. Загрузите файл своего веб-сайта

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

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

Использование диспетчера файлов

  1. Войдите в hPanel Hostinger и перейдите в Диспетчер файлов.
  2. После того, как вы окажетесь в каталоге public_html, выберите значок "Загрузить файлы" в правом верхнем меню.
  3. Выберите файл архива веб-сайта на своем компьютере и загрузите его на наш сервер.
  4. Щелкните правой кнопкой мыши загруженный файл и извлеките файлы из архива в папку public_html.

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

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

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

4. Переместите файлы веб-сайта в основной корневой каталог

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

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

5. Импорт вашей базы данных

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

  1. Создайте новую базу данных MySQL и пользователя .
  2. Доступ к вновь созданной базе данных через phpMyAdmin.
  3. Используйте раздел «Импорт», чтобы загрузить файл резервной копии вашей базы данных.
  4. Обновите сведения о подключении к базе данных MySQL (имя базы данных, хост, пользователь, пароль) в ее файлах конфигурации.

Пропустите эту часть, если не используете базу данных.

6. Проверьте, работает ли веб-сайт

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

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

Имейте в виду, что для полного распространения изменений DNS по всему миру может потребоваться до 48 часов. Таким образом, если вы только что указали свой домен на серверы имен веб-узла, вам может потребоваться некоторое время подождать.

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

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

Заключение

Поздравляем, теперь ваш сайт доступен в Интернете!

Подводя итог, вот шаги для загрузки вашего веб-сайта на веб-сервер:

  1. Выберите подходящего хостинг-провайдера.
  2. Выберите инструмент и способ загрузки веб-сайта.
  3. Загрузите файлы своего веб-сайта.
  4. Переместите файлы веб-сайта в основную корневую папку.
  5. Импортируйте свою базу данных.
  6. Проверьте, работает ли ваш веб-сайт во всем мире.

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

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

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

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

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

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

Что такое файл HTML?

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

Код HTML на веб-страницах вашего сайта отвечает за правильное форматирование текста и изображений вашего контента.

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

Что такое шаблон HTML?

Итак, вы знаете, что HTML — это код, отвечающий за создание структуры отдельных веб-страниц в Интернете.

Но что такое HTML-шаблон?

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

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

Важно помнить, что шаблоны HTML отличаются от тем WordPress:

  • Темы WordPress: даже если вы вставляете текст и изображения в темы WordPress, они отвечают за внешний вид всего вашего веб-сайта. Многие изменения элементов в теме вашего сайта являются глобальными, то есть они применяются ко всему сайту.
  • Шаблоны HTML: это отдельные zip-файлы, которые вы загружаете на свой веб-сайт по отдельности. Они влияют только на внешний вид отдельной веб-страницы на вашем веб-сайте. Другими словами, изменения, которые вы вносите в один загруженный HTML-шаблон, повлияют только на эту веб-страницу.

К сожалению, многие люди не понимают различий между темами и HTML-шаблонами и используют термины "тема" и "шаблон" как синонимы.

Зачем вам нужно загружать HTML-файл в WordPress

Есть несколько конкретных причин, по которым вы можете захотеть загрузить HTML-файл в WordPress:

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

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

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

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

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

    Дело в том, что для использования Google Search Console вам необходимо подтвердить свой веб-сайт WordPress. И так уж получилось, что один из лучших способов сделать это — загрузить проверочный HTML-файл Google.

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

    1.Метод: как загрузить HTML-файл в WordPress через панель управления WordPress

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

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

    Чтобы загрузить HTML-файл через публикацию или страницу, вставьте блок «Файл» в редакторе Gutenberg. Затем нажмите Загрузить, чтобы загрузить HTML-файл.

    Загрузить HTML-файл в Гутенберге

    Вот как это выглядит, если вы отключили Гутенберг и используете классический редактор. Просто нажмите «Добавить медиа», а затем «Загрузить», чтобы загрузить HTML-файл.

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

    Загрузить файл HTML в классическом редакторе

    Вы можете пропустить загрузку HTML-файла в публикацию или страницу в WordPress и загрузить его непосредственно в свою медиатеку. Нажмите «Медиатека» на панели инструментов WordPress, затем «Добавить новый» и выберите HTML-файл из того места, где он был сохранен (например, на вашем компьютере, жестком диске или внешнем хранилище).

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

    Недопустимый тип файла

    2. Метод: как загрузить файл HTML в WordPress с помощью FTP-клиента

    Загрузка HTML-файлов через панель управления WordPress — самый простой способ. Однако для больших шаблонов, состоящих из нескольких файлов, лучше всего использовать FTP-клиент, например FileZilla.

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

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

    Затем откройте FTP-клиент.

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

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

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

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

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

    Если вы используете хостинг Kinsta, сначала войдите в свою учетную запись MyKinsta и нажмите «Сайты» на панели инструментов, а затем «Информация», чтобы получить необходимые учетные данные.

    Получите данные SFPT в MYKinsta

    Когда вы это сделаете, вы должны увидеть свои учетные данные в разделе SFTP/SSH. Вам потребуется ваше имя пользователя, пароль и порт.

    Детали SFTP

    Вот информация, которую вам нужно ввести в FileZilla:

    Вот как это будет выглядеть в верхней части экрана FileZilla:

    Вход в FileZilla

    После того, как вы ввели свои учетные данные, нажмите Quickconnect.

    Теперь пришло время загрузить файл HTML с вашего компьютера в WordPress. Начните с перехода в корневую папку вашего веб-сайта (которая содержит папку wp-content, файл wp-config.php и т. д.) справа.

    Затем перейдите на левую сторону и найдите сохраненный HTML-файл. Когда вы найдете его, щелкните его правой кнопкой мыши и выберите «Загрузить», чтобы добавить его на свой веб-сайт. Чтобы просмотреть все скрытые файлы в Filezilla, следуйте этому краткому руководству.

    HTML-файл загружен

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

    3. Метод: как загрузить файл HTML в WordPress с помощью cPanel

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

    Устали от проблем с WordPress и медленного хоста? Мы обеспечиваем поддержку мирового класса от экспертов WordPress, доступных 24/7 и невероятно быстрых серверов. Ознакомьтесь с нашими планами

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

    Файловый менеджер в cPanel

    Когда вы находитесь в файловом менеджере, у вас есть два варианта:

      1. Создать новую папку: создайте новую папку в корневой папке вашего сайта, чтобы загрузить в нее HTML-файл.
      2. Прямая загрузка в корневую папку: вместо создания новой папки загрузите HTML-код непосредственно в WordPress. Если вы хотите сделать это именно так, разархивируйте HTML-файл в том месте, где он был сохранен, измените папку index.html на что-то новое, а затем повторно заархивируйте файл, чтобы продолжить загрузку в WordPress. Если вы этого не сделаете, шаблон HTML переопределит главную страницу вашего сайта.

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

      Kinsta не использует cPanel. Вместо этого у Kinsta есть собственная настраиваемая панель управления хостингом MyKinsta.

      Создайте новую папку и загрузите HTML-файл в WordPress

      Сначала перейдите в корневую папку вашего веб-сайта (которая содержит папку wp-content, файл wp-config.php и т. д.). Затем нажмите «Новая папка».

      Назовите новую папку и нажмите «Создать новую папку».

      Создание новой папки в cPanel

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

      Кнопка загрузки

      После этого вы увидите сжатый HTML-файл в папке.

      Заархивированный HTML-файл

      Теперь вам нужно разархивировать файл HTML, щелкнув правой кнопкой мыши и выбрав Извлечь.

      Извлечь файл HTML

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

      Извлеченные файлы HTML

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

      Если вы столкнулись с ошибкой 404, не волнуйтесь. Это распространенная ошибка WordPress, и ее легко устранить.

      Если ваш сервер не поддерживает перенаправление и файл index.php не перенаправляется при загрузке URL-адреса в браузере, вы увидите ошибку 404 после загрузки файлов HTML.< /p>

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

      Этот код перенаправит ваш файл index.php и загрузит его в браузере.

      Обзор

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

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

      Экономьте время, деньги и повышайте эффективность сайта с помощью:

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

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

      Отобранные статьи по теме

      Блог

      Как отложить синтаксический анализ JavaScript в WordPress (4 метода)

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

      Блог

      Как создать QR-код (бесплатный и платный варианты)

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

      Подпишитесь на нашу рассылку

      Получите премиум-контент на отмеченной наградами платформе хостинга WordPress

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

      Войдите на MyKinsta или ознакомьтесь с демо-аккаунтом

      © Kinsta Inc., 2022. Все права защищены. Kinsta® и WordPress® являются зарегистрированными товарными знаками. Юридическая информация.

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

      В этом посте мы покажем вам, как добавить HTML-файлы и страницы на ваш сайт WordPress.

      Что такое файл HTML?

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

      Ниже приведен пример содержимого HTML-файла.

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

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

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

      Зачем загружать файлы HTML в WordPress

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

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

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

      Вы не хотите перестраивать страницы с нуля.

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

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

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

      Или вы можете воссоздать контент с нуля и написать HTML самостоятельно. После завершения загрузите свой HTML-файл в WordPress, и вуаля! Теперь в вашем распоряжении новая настроенная страница или функция.

      Подтвердить свой веб-сайт проще с помощью таких сервисов, как Google Search Console.

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

      Готовы начать загрузку? Прочтите пошаговое руководство по загрузке HTML-файлов в WordPress.

      Как загрузить файл HTML в WordPress

      1. Перейдите к панели администратора.
      2. Нажмите "Страницы" на левой боковой панели.
      3. Выберите существующую страницу или создайте новую.
      4. Нажмите "Добавить блокировку".
      5. Добавить блок "Файл".
      6. Выберите HTML-файл.

      1. Перейдите на панель администратора.

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

      2. Нажмите «Страницы» на левой боковой панели.

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

      3. Выберите существующую страницу или создайте новую.

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

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

      4. Нажмите "Добавить блокировку".

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

      5. Добавьте блок «Файл».

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

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

      6. Выберите файл HTML.

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

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

      Как исправить ошибку «Тип файла не разрешен по соображениям безопасности»

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

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

      Как добавить HTML-страницу в WordPress

      Допустим, мы были гордыми дизайнерами сайта Lonéz Scents и хотели перенести эту страницу на WordPress.

      Давайте рассмотрим процесс переноса этой страницы в WordPress.

      1. Сожмите HTML-страницу в ZIP-архив.

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

      Убедитесь, что этот HTML-файл сжат в ZIP-архив.

      2. Перейдите в cPanel вашего сайта WordPress.

      Отлично! Теперь у вас есть HTML-файл, который вы перенесете на свой веб-сайт WordPress.

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

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

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

      В Bluehost нажмите "Дополнительно" на боковой панели, прокрутите вниз до "Файлы" и нажмите "Диспетчер файлов".

      3. Войдите в свою папку public_HTML внутри cPanel.

      Ваша папка public_HTML находится на левой боковой панели. Если вы размещаете несколько веб-сайтов, вам необходимо выбрать веб-сайт, на который вы хотите перенести страницу.

      4. Добавьте новую папку в папку public_HTML вашего веб-сайта.

      Нажмите кнопку «+Папка» в верхней части экрана, чтобы создать новую папку. Теперь назовите новую папку и нажмите «Создать новую папку». (Имя этой папки будет частью URL-адреса вашей HTML-страницы.)

      5. Загрузите заархивированный HTML-файл в новую папку.

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

      6. Извлеките файлы.

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

      7. Просмотрите свою страницу.

      Теперь вы увидите параметр "Результаты извлечения". Щелкните Закрыть. Затем нажмите «Перезагрузить» в центре экрана. Вы увидите разархивированный файл HTML в папке. (Если хотите, удалите ZIP-файл. Это не повлияет на вашу извлеченную HTML-страницу или любые другие папки.)

      И готово! Теперь вы знаете, как загружать HTML-файлы на свой веб-сайт WordPress.

      Загрузите HTML-файлы в WordPress для создания своего сайта

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

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

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