как добавить код в wordpress на все страницы
Как можно добавить код на страницы сайта: доступные способы
В просторах интернета каждый день появляются сайты на WordPress. Начинающие пользователи довольствуются существующим функционалом, не вдаваясь в подробности кода и ничего не меняя. Однако со временем появляется потребность или желание залезть в механизм этой чудесной системы: подкрутить, что-то пофиксить, настроить под себя.
О том, как добавить код на страницы сайта, который будет выполнять или изменять ту или иную функцию, мы расскажем в этой статье.
Как правильно добавить код на страницы сайта
Добавлять код в файлы темы не имеет смысла, так как после обновления все внесенные вами изменения пропадут. Но как же в таком случае поступать? Вам следует создать дочернюю тему, с помощью которой вы сможете внедрять пользовательский код в файл function.php, без страха, что результат работы пропадет даром.
Дочерняя тема это подшаблон текущего шаблона вашего сайта. Для того, чтобы создать подтему, посредством которой вы сможете добавить код на страницы сайта, вам достаточно в корневой директории сайта, создать еще одну папку, в которой сделать файл CSS, который будет брать параметры из файла родительского шаблона.
Как альтернатива дочерней теме можно воспользоваться специализированными плагинами, позволяющими внедрять код, и минимизировать риск удалить что-то нужное или заменить на что-то не нужное. При этом изменения останутся даже после обновлений.
Один из плагинов, на который стоит обратить внимание – Insert Headers And Footers, который позволяет внедрять код в подвал и шапку сайта.
Плагин Global Content Blox позволяет работать с записями, внедрять в них код и запоминать сниппеты. Для добавления скриптов различных сервисов существует плагин Code Insert Manage. Однако данные дополнения не всегда могут дать желаемый результат.
Еще одним способом добавить код на страницы сайта – создать самому плагин, который будет реализовывать необходимую задачу или ряд задач. Это отличный способ сохранить функционал после обновлений. При этом плагин можно в любой момент деактивировать, или внести дополнительные изменения.
Если плагин широко применим, то его можно даже залить на официальный каталог расширений WordPress, чтобы им воспользовались другие пользователи и оценили ваше творение. Подробнее о том, что такое плагины, мы рассказали тут.
Как добавить собственный код на свой сайт WordPress
Написание PHP, CSS и HTML5 для изменения сайта WordPress может быть довольно неприятным, но хорошее руководство может упростить задачу. Это не тот путеводитель. Речь идет только о том, как добавить код на ваш сайт после того, как он будет готов. Но не волнуйтесь – это не менее важно. Поскольку есть несколько способов сделать это, полезно знать различия между различными вариантами. Но сначала два предупреждения:
В оставшейся части статьи я рассмотрю некоторые альтернативы, от самых простых до самых сложных.
Плагины WordPress
Так же, как существует несколько типов модификации кода, существует несколько типов подключаемых модулей пользовательского кода. Два наиболее распространенных типа – это PHP и CSS. Как вы, наверное, знаете, PHP управляет архитектурой и функциями WordPress. Итак, если вы пытаетесь изменить основные функции своего веб-сайта, добавить или изменить функцию, существует множество доступных для загрузки плагинов PHP, которые помогут вам в этом.
Точно так же вы, вероятно, тоже знаете, что делает CSS – он делает вещи красивее. И если это все, что вы хотите изменить, пользовательский плагин CSS позволит вам сделать это с минимумом хлопот. На заднем плане скрывается JavaScript, который имеет сложные отношения с плагинами. Чтобы уточнить, это немного отличается тем, что он отлично работает, если вы добавляете его в заголовок, нижний колонтитул или дочернюю тему, но чтобы использовать его в сообщении, вы должны использовать специальный плагин. Что-то вроде CSS и Javascript Toolbox должно помочь. В качестве побочного примечания: ради скорости вашей страницы лучше поместить ее в нижний колонтитул.
Написание собственных плагинов
В Интернете доступно множество фрагментов кода WordPress для изменения, отключения или модификации определенных функций. Однако знание того, где их разместить, имеет решающее значение для функциональности. Например, если у вас есть фрагмент кода, который изменяет функцию плагина, вы хотите, чтобы он работал независимо от того, какую тему вы активировали. То же самое и с фрагментами, которые касаются изменений на уровне всего сайта. Так что в любом случае было бы неплохо создать для них новый плагин. Не волнуйтесь, это не так страшно, как кажется.
Одним из основных преимуществ создания плагина является то, что он позволяет вам активировать или деактивировать плагин по запросу. Это также позволяет просматривать контекстную информацию о плагине на страницах плагина. Единственным серьезным недостатком является то, что он может быть случайно отключен кем-либо, кому разрешено изменять сайт, но строгое предупреждение для них должно предотвратить это.
В качестве примечания, вы также можете создать папку под названием mu-plugins в папке wp-content. Любые вставленные туда файлы PHP всегда будут выполняться, и их нельзя активировать или деактивировать. Благодаря этому пользовательский код не попадает в папки тем и плагинов. Но делайте это только с плагинами, которые вам всегда удобно использовать в фоновом режиме.
Пользовательские файлы CSS
Если планируемые изменения незначительны, вы можете создать файл custom-style.css. Если вы хотите предварительно просмотреть свои изменения перед их внесением, вы всегда можете использовать DevTools, если вы используете Chrome или подобное приложение. Другая возможность – добавить собственный CSS через вашу тему WordPress. Некоторые премиальные темы, такие как наша Total framework, включают опцию панели тем для добавления пользовательского CSS, где вы можете легко найти и настроить его. Кроме того, когда вы обновляете свою тему, настройки панели темы должны оставаться неизменными, поэтому ваш собственный CSS остается неизменным.
Помните, что CSS каскадируется в обратном порядке, то есть правила, которые появляются позже, всегда имеют приоритет над правилами, которые появляются раньше. Таким образом, любой CSS, примененный к отдельному листу, переопределит код страницы по умолчанию. Это также относится к CSS, вставленному в…
Дочерние темы WordPress
Для непосвященных дочерняя тема наследует функциональность другой темы, что позволяет вам изменять свой дизайн по своему желанию (вы можете узнать все, что хотите, в нашем руководстве по дочерним темам WordPress ). Они были придуманы с определенной целью: позволить вам изменять тему без потери ваших изменений при обновлении. Дочерние темы отражают все изменения, которые вы вносите во внешнюю, или «родительскую», тему. Итак, как и при применении эффекта слоя Photoshop, вы на самом деле не редактируете контент; вы можете удалить его в любое время, чтобы вернуть все на круги своя.
Создание дочерней темы, когда вы хотите изменить свой код, избавит вас от многих головных болей, и это довольно просто (как и модификации WordPress). Просто войдите на свой сайт через FTP и создайте папку, а затем создайте файл style.css, соответствующий этой папке. Стандартной практикой является называть его дочерней-темой. После этого все, что вам нужно, – это одна строка в заголовке вашего нового style.css для определения шаблона. Но есть также кое-что, что полезно иметь, – их можно найти на странице WordPress Codex.
Затем внесите необходимые изменения в текущую тему под строкой @import. Единственный недостаток дочерних тем – это объем исследований, которые необходимо провести по родительской теме, прежде чем вы сможете ее изменить, без каких-либо конфликтов или странных побочных эффектов. И помните, что с дочерними темами вам нужно только указать, что будет отличаться от исходной темы. Чтобы применить изменения, просто заархивируйте его, загрузите через страницу «Внешний вид»> «Темы» на панели инструментов WordPress и активируйте через WordPress. Это, конечно, при условии, что ваша родительская тема также загружена.
Отображение кода
Есть еще один тип добавления кода, который мы не рассмотрели: его показ. Если вы веб-дизайнер и хотите показать, как что-то делается, представить это так, чтобы зрители могли копировать и вставлять, важно правильно обозначить это. То, как ваш код будет интерпретироваться WordPress, зависит от того, используете ли вы HTML-раздел редактора Visual Post Editor. Ввод его непосредственно в визуальный редактор поможет нейтрализовать его, но нет возможности поместить его в правильное форматирование или в поле кода. Визуальный редактор просто отформатирует его так же, как обычный текст. С другой стороны, редактор HTML превратит его в код и разрушит ваш сайт. Не волнуйтесь, это можно отменить.
Как видите, существует множество способов добавить собственный код в WordPress, и я призываю вас поэкспериментировать, поиграть с ними и посмотреть, какие из них подходят вам. Есть ли дополнительные способы добавить пользовательский код, который я пропустил? Дай мне знать в комментариях.
Куда вставлять этот код в WordPress? Общая структура файлов темы
В наших уроках мы часто приводим примеры по улучшению и расширению встроенных возможностей WordPress. Часто это просто описание по настройке интересного плагина или виджета, а часто мы приводим в тексте фрагменты кода, который нужно вставить в тот или другой файл темы, чтобы добиться желаемого результата.
Как оказалось, для многих фраза — Вставьте этот код в functions.php — ничего не говорит, поэтому в этом уроке я постараюсь показать максимально упрощенно, что это за код, и как именно его нужно добавлять в файлы вашей темы. Эта заметка скорее для новичков, так что если вы профи в WordPress — ничего нового вы здесь не увидите.
Как редактировать код?
Не буду особо распинаться. Скажу коротко, у вас 2 варианта:
1. Встроенный редактор WordPress
Находится в Консоли в меню Внешний вид → Редактор.
2. Сторонние программы для правки кода
Обобщенная структура WordPress темы
Файлы темы оформления
Любой WordPress сайт (а правильней говорить тема, потому как сайт будет работать при активации одной из установленных тем) на самом деле является набором файлов. Где-то там на стороне вашего хостинг-провайдера эти файлы обрабатываются серверами, и вам на монитор возвращается готовый результат — собственно сайт. То, что вы видите, когда заходите по адресу через веб-браузер.
В случае с WordPress этот набор файлов будет отличаться в каждой теме по-своему. Но есть одна общая черта: этот набор состоит из файлов с расширением .php, .css и .js (сам WordPress целиком написан на языке PHP, так что .php файлы — основная часть любой темы оформления).
В каждой теме оформления должен присутствовать минимальный набор файлов для корректной работы в среде движка WordPress. Вы можете открыть папку со своей активной темой ( корень_сайтаwp-contentthemesваша_тема) и, скорее всего, вы найдете там все эти файлы:
Далее мы поговорим об этих файлах подробнее.
Внешний вид сайта
Теперь поговорим о структуре внешнего облика WordPress сайта. Для того, чтобы не было путаницы типа » Я хочу добавить эту штучку вот сюда» или » Мне нужно вставить эту кнопку туда», определенные области WordPress темы принято называть своими именами. Случайный посетитель, попавший на любой сайт, видит то, что видит: кнопочки, панельки, заголовки, ссылки и так далее. Человек более подкованный в WordPress видит этот сайт более структурно.
Давайте для примера возьмем наш блог Hostenko.com/wpcafe. Вот как выглядит его главная страница:
Я специально скомпоновал изображение так, чтобы было видно все основные области.
Как видите, главная страница нашего блога состоит из 4-х частей: шапки, подвала, основной части и боковой панели. Справедливо отметить, что такая структура является наиболее распространенной в большинстве тем оформления WordPress.
Теперь, когда вы знаете название областей внешнего представления WordPress сайта, вы можете говорить: » Мне нужно добавить еще один баннер в подвале», или » Я хочу вставить виджет в боковую панель», или » Нужно изменить порядок меню в шапке».
Подробнее о файлах и коде
На изображении выше вы видите, что за каждую область сайта отвечает определенный файл в папке темы оформления. Вы видите 4 области, которым соответствуют 4 файла, но на самом деле файлов больше. Я опишу только самые важные файлы темы.
header.php — Шапка
Шапка — это верхняя область сайта, в которой содержится логотип, название сайта, верхнее навигационное меню, дополнительно могут вставляться рекламные баннеры, закрепленные страницы. Это верхняя (первая) область, соответственно и обрабатываться этот файл будет в первую очередь. Это означает, что в файл header.php также прописываются все подключаемые JavaScript файлы, CSS файлы и так далее.
footer.php — Подвал
Аналогично шапке, это нижняя область сайта, которая может содержать копирайты, контактную информацию, дополнительное меню, счетчики метрики и так далее. Если провести аналогию с Microsoft Word, то шапка и подвал — это верхний и нижний колонтитулы. Это те части сайта, которые всегда будут отображаться сверху и снизу, куда бы вы не перешли в рамках сайта.
index.php — Основная часть
Основная часть (она же контентная) отвечает за вывод ленты ваших постов (записей, публикаций, это все синонимы). В этом файле содержится код для вывода заголовка записи, миниатюры, автора, даты публикации, меток, анонса записи, кнопки для продолжения чтения записи далее.
Фрагмент файла:
sidebar.php — Боковая панель
Боковая панель — это блок сопровождающей информации, где выводятся виджеты, форма поиска, социальные кнопки, облако меток, реклама, баннеры и прочая информация. Боковая панель может быть справа от основной части или слева. Может быть 2 боковые панели сразу, а может отсутствовать вообще.
Фрагмент файла:
Код этого файла говорит о том, что сайдбар в этой теме полностью настраивается через Консоль. И только панель поиска жестко закреплена в верхней позиции. А значит, чтобы добавить или изменить любой элемент в боковой панели, нужно зайти в меню Внешний вид → Виджеты, и там перетащить в область сайдбара нужные элементы:
Например, многие наши читатели спрашивают, каким плагином реализован наш блок социальных кнопок на главной странице. Ответ примерно следующий: это не плагин а наша собственная разработка. В сайдбаре добавлен виджет «Текст», который содержит код описания каждой кнопки. Выглядит это примерно так:
functions.php — Файл конфигурации темы
Это файл, которого «не видно» на сайте, но который играет очень важную роль в правильной работе темы оформления. Фактически, здесь содержатся инструкции по работе административной части темы оформления, здесь регистрируются все дополнительные функции, которые может задействовать тема, сюда включаются для загрузки все прочие компоненты и модули темы, которые были вынесены разработчиком в рамках отдельных файлов, чтобы потом можно было заменить одну составляющую вместо всего файла functions.php целиком.
Другими словами, этот файл отвечает за основную функциональную составляющую темы оформления. И именно в functions.php вставляется большинство примеров кода из наших уроков.
Фрагмент файла:
В этот файл приходится чаще всего вставлять код из примеров в наших уроках. Делается это очень просто: скопируйте код из урока, нажав по этой кнопке:
(это картинка, а не фрагмент кода)
Затем откройте файл functions.php (или другой нужный файл) с помощью встроенного редактора или сторонней программы (как было описано выше), опуститесь в конец файла и вставьте код перед закрытием php тега ?>
Это основное и единственное правило — не нарушить целостность и структуру уже существующего кода.
Если код, который вы вставляете, начинается открытием php тега
style.css — Таблица стилей оформления
Еще один очень важный файл, без которого не будет работать ни одна тема оформления WordPress. Этот файл как раз лучше всего «видно» на главной странице любого WordPress сайта.
Все оформление, фон, шрифты, цвета, интервалы отступа, заливка, тени, градиенты — за все это отвечает единый файл style.css, поэтому его важность сложно переоценить.
Фрагмент файла:
Этот файл отличается от всех, описанных выше, так как он целиком написан, используя разметку веб-стилей CSS. Поэтому весь код, что касается настройки оформления в наших уроках, добавляется в этот файл. Просто откройте этот файл, прокрутите в конец и добавьте свой css код начиная с новой пустой строки.
Какие еще файлы мы забыли?
Я просто коротко перечислю с описанием:
Вот и все! Надеюсь этот урок разъяснил некоторые моменты, и теперь вам будет проще ориентироваться, в какой именно файл нужно вставлять дополнительный код.
Как перенести HTML-код на WordPress: пошаговая инструкция с советами
Готовый HTML, CSS и JS код требуется перенести на какую-нибудь админку, чтобы для добавления нового контента и расширения функционала не приходилось лезть в директории проекта, создавать там новые файлы, копаться в коде. Это наилучшее решение не только для обычных пользователей, но и разработчика, так как сильно экономит время при расширении готового сайта. Самой популярной админкой является WordPress. Весь готовый код проекта можно перенести на нее и использовать в качестве собственной темы.
Варианты переноса HTML-сайта на WordPress
Перенос HTML-сайта с готовой структурой на WordPress не такая сложная процедура, как может показаться. Есть три варианта действий:
Пример редактора тем в WordPress
Подробно будет рассмотрен только первый вариант.
Установка WordPress
Вне зависимости от выбранного варианта вам придется изначально выполнить установку WordPress. Если он уже установлен, то пропускайте этот этап. Рассмотрим процесс установки вкратце:
Добавление информации для доступа к админ-панели
Перенос готового HTML-шаблона на WordPress
Если вам нужно перенести не только контент сайта, но и его дизайн, то придется создавать тему. Для этого потребуется не только доступ ко всем файлам сайта, но и удобный редактор кода, например VisualStudio Code или другой похожий. Далее разделим для удобства весь процесс на несколько этапов.
Этап 1: Создание файлов темы
Создайте на компьютере отдельную папку, где будет хранится информация о вашей теме. Эту папку нужно открыть в выбранном для работы редакторе кода. Создавать в ней новые файлы рекомендуется как раз через редактор кода. В Visual Studio Code это можно сделать. Создайте файлы со следующими наименованиями:
Базовая файловая структура для темы
Пока вы только создали структуру. Представленные файлы придется правильно заполнить, чтобы WordPress распознал вашу тему.
Этап 2: Прописывание стилей
Для начала вам придется отредактировать файл style.css. В него, в самом начале пропишите этот код:
После этого кода вставьте основные стили вашего сайта. Они должны быть записаны в файлу style.css или main.css, который находится в директории сайта. Просто откройте данный файл и скопируйте все его содержимое. Затем переключитесь на файл style.css, который расположен в корневой папке темы и вставьте туда CSS-код после вводных данных, которые были прописаны ранее.
Этап 3: Перенос HTML-кода
На этом этапе нужно перенести данные из файла index.html в index.php. Ничего страшного, что верстка будет в PHP-файле. Он умеет корректно обрабатывать HTML. Это необходимо из-за особенностей WordPress, так как HTML-файлы он воспринимает не очень хорошо, поэтому все ключевые элементы сайта желательно прописывать в PHP-файлах, пускай PHP-кода там почти и нет.
Откройте header.php. В него из главного HTML-файла сайта скопируйте отрывок, который отвечает за функционирование меню и всей верхней части сайта. Аналогичную операцию нужно провести для файла sidebar.php, но только скопировать и вставить код боковой панели или панелей. В случае с файлом footer.php нужно скопировать и вставить часть отвечающую за подвал сайта.
Все, что осталось в index.html копируйте в index.php. Не нужно копировать данные о шапке, боковых меню и футере, так как они уже добавлены в отдельный файл.
Этап 4: Инициализация index.php
В качестве завершающего этапа настройки темы нужно провести инициализацию файла index.php. Перед началом основного HTML-кода вставьте строку:
Она необходима для подключения файла header.php. В скобках пропишите путь до объекта. По аналогии пропишите в самом конце HTML-разметки строки для вызова бокового меню и подвала:
В качестве завершающего этапа нужно настроить вывод новых статей и других важных новостей ресурса на главной странице сайта. Код нужно добавить в блок с контентом на главной странице. Сам PHP-код выглядит так:
Теперь осталось только доделать мелкие детали, например, переподключить сторонние файлы, что-то подправить, если верстка в итоге съехала и можно сохранять файл. На этом создание темы для WordPress завершено.
Этап 5: Добавление темы в WordPress
Созданную тему осталось только загрузить в админку сайта и применить. Папку с новой темой нужно переместить по пути: /wp-content/themes/. Начальная часть адреса может отличаться в зависимости от хостинга, сервера и самой структуры сайта. Теперь останется только выбрать загруженную тему в панели управления:
1. Авторизуйтесь в админке сайта, введя соответствующую ссылку в адресную строку браузера, а также свои логин и пароль.
2. Переключитесь во вкладку “Внешний вид” в левом меню.
3. В новом окне воспользуйтесь кнопкой “Добавить новую” и выберите свою тему среди доступных. Если вы ее загрузили на хостинг, то она должна там быть.
Переход к разделу с темами
4. Или загрузите тему, воспользовавшись кнопкой “Загрузить тему”.
Загрузка готовой темы через WordPress
Заключение
Преобразовать готовую верстку в полноценный HTML-шаблон несложно, но важно потом проверить код и саму тему на корректность работы. Наиболее “уязвимыми” местами являются адреса для привязки файлов, так как они могут быть изменены при преобразовании верстки в полноценную тему, следовательно, разработчику придется менять адреса на корректные. Также из-за добавления постороннего кода в index-файл некоторые элементы на сайте могут съехать или отображаться некорректно. Это тоже придется исправить после создания темы, правда, процесс исправления не должен занять много времени.