Как добавлять и редактировать код в WordPress (HTML, CSS, PHP)

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

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

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

Что нужно сделать перед редактированием кода в WordPress

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

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

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

1. Сделайте резервную копию вашего сайта

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

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

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

Конечно, мы рекомендуем Jetpack Backup — комплексное решение, работающее в режиме реального времени.

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

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

2. Используйте дочернюю тему WordPress

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

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

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

Активируйте плагин и перейдите в Инструменты → Дочерние темы . Выберите вариант создания новой дочерней темы и выберите текущую тему в качестве родительской.

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

Для параметра обработки таблицы стилей «Выбрать родительскую тему » ​​нажмите «Использовать очередь стилей WordPress» .

Вы также можете настроить атрибуты дочерней темы. К ним относятся имя, автор и описание, которое появится при переходе в « Внешний вид» → «Темы ».

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

Если вы перейдете в « Темы» → «Внешний вид », новая дочерняя тема должна появиться среди доступных тем.

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

3. Используйте промежуточный веб-сайт

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

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

Как редактировать код HTML, CSS и PHP в WordPress (10 методов)

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

1. Как редактировать HTML в редакторе блоков

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

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

Теперь нажмите на опцию с надписью Редактор кода .

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

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

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

2. Как редактировать HTML в классическом редакторе

Редактировать HTML-код с помощью классического редактора очень просто. Откройте страницу или публикацию, над которой вы хотите работать, и найдите вкладку « Текст » над основной частью документа.

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

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

Также есть возможность добавить HTML-код вручную. Если вы знакомы с HTML, вы можете вставлять или редактировать его на вкладке « Текст » по своему усмотрению. Редактор позволяет переключаться между вкладками Visual и Text , чтобы увидеть результаты.

3. Как редактировать HTML с помощью редактора тем

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

Чтобы получить доступ к редактору тем, перейдите в Внешний вид → Редактор файлов тем. На следующей странице вы увидите текстовый редактор слева и список файлов справа. Этот список файлов соответствует теме, которую вы выбираете в правом верхнем раскрывающемся меню.

По умолчанию редактор темы открывается с файлом Style.css для темы, над которой вы работаете. Большинство файлов темы, к которым вы можете получить доступ с помощью редактора, включают CSS или PHP. Но вы можете редактировать несколько компонентов темы с помощью HTML.

Однако в большинстве случаев дочерние темы по умолчанию загружают только файлы style.css и functions.php . Поэтому, если вы хотите отредактировать HTML-файл, например footer.html , вам необходимо скопировать его в дочернюю тему, прежде чем вносить какие-либо изменения с помощью инструмента протокола передачи файлов (FTP) или панели управления вашего хостинг-провайдера.

Используя выбранный вами инструмент, перейдите в раздел public_html → wp-content → themes → ваша родительская тема. Найдите HTML-файл, который хотите отредактировать, и скопируйте его в папку дочерней темы. Затем этот файл будет виден в редакторе тем WordPress.

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

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

4. Как редактировать CSS и PHP в редакторе тем

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

По умолчанию редактор темы открывает таблицу стилей. Файл style.css будет содержать все стили CSS для темы. К ним относятся классы, идентификаторы, стили кнопок и многое другое.

Вы можете внести любые изменения в файл style.css . Когда вы закончите, нажмите « Обновить файл» , чтобы сохранить изменения.

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

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

5. Редактирование HTML в виджете WordPress

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

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

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

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

6. Редактирование HTML через cPanel

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

Для начала войдите в свою учетную запись cPanel и найдите параметр « Диспетчер файлов » в разделе « ФАЙЛЫ».

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

Ищите опцию, которая говорит public_html или www . Эти каталоги должны содержать файлы вашего сайта WordPress.

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

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

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

7. Редактирование HTML, CSS и PHP с использованием FTP

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

Что еще более важно, FTP может редактировать файлы WordPress и добавлять код HTML, CSS или PHP, используя любой локальный текстовый редактор по вашему выбору.

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

Введите свои учетные данные FTP в предпочтительном FTP-клиенте и подключитесь к серверу. Как только вы установите соединение, вы увидите список папок и файлов.

Благодаря FTP-подключению вы получаете полный доступ ко всем файлам и папкам в вашей учетной записи. Чтобы найти файлы WordPress, найдите каталог с именем public , public_html или www . Это наиболее распространенные имена для корня WordPress. каталог.

Откройте каталог и найдите файл, который вы хотите отредактировать. Щелкните его правой кнопкой мыши и выберите параметр « Редактировать ». В этих примерах мы используем FileZilla, поэтому в меню указано View/Edit .

Параметр « Просмотр/редактирование » открывает файл с помощью локального текстового редактора по умолчанию. В отличие от cPanel или WordPress, специальные редакторы значительно упрощают добавление кода и взаимодействие с ним.

В этом примере мы редактируем wp-config.php , который является основным файлом WordPress.

Вы можете добавить или отредактировать код любого типа с помощью текстового редактора. Это включает в себя HTML, CSS и PHP. Единственным ограничением является ваше знание каждого конкретного языка.

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

8. Добавление классов CSS с помощью редактора блоков

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

Чтобы добавить классы CSS в блок, нажмите на него и откройте вкладку « Настройки ». Затем найдите вкладку « Дополнительно » в нижней части настроек блока.

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

9. Как редактировать CSS в настройщике WordPress

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

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

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

Добавление CSS с помощью настройщика WordPress позволяет мгновенно просматривать изменения.

10. Редактирование CSS с помощью плагина WordPress

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

Одним из примеров является простой пользовательский CSS и JS. Этот конкретный плагин может добавлять пользовательский код CSS, JS и HTML в WordPress из простого меню.

При выборе параметра « Добавить код CSS» откроется редактор. Вы можете использовать этот редактор для вставки пользовательского CSS и выбора места размещения кода в ваших файлах.

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

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

Можете ли вы добавить код JavaScript в WordPress?

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

Обычно самый простой способ добавить код JavaScript — использовать плагин. Если вы выберете ручной подход, вы можете использовать JavaScript с WordPress с функцией «постановки в очередь» PHP.

Стоит ли оптимизировать код WordPress для повышения производительности?

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

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

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

 p { text-align: center; color: red; }

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

 p{text-align:center;color:red}

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

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

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

Настройте WordPress с помощью HTML, CSS и PHP

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

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