Главная » Wordpress

Как редактировать нижний колонтитул WordPress

На чтение 11 мин. Просмотров 82 Опубликовано

Среди множества систем управления контентом WordPress является, пожалуй, самой часто используемой CMS. Сайт WordPress состоит из нескольких компонентов:

  • Ядро WordPress: установка WordPress
  • Тема: базовая основа для отображения динамического контента
  • Плагины: для расширения основной функциональности WordPress
  • Контент: создается владельцем и хранится в медиатеке.

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

Содержание
  1. Что такое нижний колонтитул WordPress и каковы его элементы?
  2. Видимые элементы в нижнем колонтитуле WordPress
  3. Невидимые элементы в нижнем колонтитуле WordPress
  4. Как редактировать нижний колонтитул в WordPress?
  5. Использование плагина для изменения нижнего колонтитула WordPress
  6. Изменение кода темы для изменения нижнего колонтитула WordPress
  7. Изменение кода в файле footer.php
  8. Создание функций в файле functions.php
  9. Встраивание дополнительных файлов скриптов в нижний колонтитул WordPress — вот как это делается

Что такое нижний колонтитул WordPress и каковы его элементы?

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

  1. Видимые элементы
  2. Невидимые элементы

Видимые элементы в нижнем колонтитуле WordPress

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

  • Ссылки на другие страницы, такие как политика конфиденциальности, контактная информация и т.д.
  • Уведомление об авторских правах
  • Ссылка «Прокрутить вверх».
Совет

Начните создание собственного сайта WordPress с профессионального WordPress хостинга от IONOS.

Невидимые элементы в нижнем колонтитуле WordPress

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

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

Совет

Элемент script теперь понимает современные атрибуты «async» и «defer», с помощью которых файлы сценариев можно интегрировать, не блокируя загрузку страницы.

Однако, говоря о скриптах, следует немного различать понятия. Скрипты могут быть загружены из внешнего файла, но они также могут быть встроены в страницу. Более того, элементы скриптов теперь используются для гораздо более широкого круга целей. Атрибут «type» используется для описания типа внедряемых данных. Таким образом, данные приложения и метаданные могут быть внедрены на одной странице. Ниже приведен обзор часто используемых элементов сценария:

Элемент сценария Описание Атрибут
Ссылка на файл сценария Внешний, исполняемый скрипт Атрибут src с URL
Встроенный скрипт Встроенный исполняемый скрипт без атрибута src
Разметка сценария JSON-LD Встроенные, неисполняемые метаданные type=»application/ld+json»
данные JSON Встроенные, неисполняемые данные приложения type=»application/json»

Как редактировать нижний колонтитул в WordPress?

Существует два способа размещения дополнительного кода в нижнем колонтитуле WordPress:

  1. Использовать плагин
  2. Изменить код темы

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

Метод Преимущество Недостаток
Использование плагина Простота применения и использования Фрагменты кода хранятся в базе данных; недостаточный контроль; может вызвать проблемы с производительностью
Изменение темы Сниппеты кода являются частью кодовой базы; возможны визуальные изменения; контроль даже над сложными приложениями Требуется редактирование кода темы и навыки кодирования

Использование плагина для изменения нижнего колонтитула WordPress

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

  • Head, Footer и Post Injections
  • Скрипты верхнего и нижнего колонтитулов
  • Менеджер кода колонтитулов

Мы пошагово покажем вам, как использовать плагин «Header and Footer Scripts» для размещения дополнительного кода в футере WordPress.

Изменение кода темы для изменения нижнего колонтитула WordPress

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

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

Когда вы хотите внести изменения в тему, стоит создать a href=»t3://page?uid=2815″>дочернюю тему, которая гарантирует, что изменения будут защищены от обновлений и могут быть отменены в любой момент. Преимущества перевешивают несколько большие усилия.

Вы можете изменить нижний колонтитул WordPress следующими способами:

  1. Изменить код в файле шаблона footer.php
  2. Создать дополнительные функции infunctions.php
Метод Преимущество Недостаток
Добавить код в файл footer.php Принцип действия прост для понимания; Контроль над последовательностью выполнения скриптов; Также можно реализовать визуальные изменения Изменения жестко закодированы; При многократном внесении изменений есть риск создания запутанного кода
Создание функций в functions.php Четкое разделение представления и функциональности; детальный контроль над встроенными тегами скриптов Может быть запутанным для новичков; повышенная сложность

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

<!-- `header.php` starts here -->
  
    <!--—Invisible elements in HTML head ---->
  
  
    <header></header>
      <!--—Visible elements in header ---->
    
    <!-- `header.php` ends here -->
    <main></main>
      <!--—Visible elements in main area ---->
    
    <!-- `footer.php` starts here -->
    <footer></footer>
      <!--—Visible elements in footer ---->
    
      <!--—Invisible elements at end of document ---->
  
<!-- `footer.php` ends here -->

HTML-документ состоит из двух элементов: <head> и <body>. В нашем примере элемент <body> содержит элементы <header>, <main> и <footer>. В теме WordPress эта структура элементов распределена по нескольким файлам шаблона. Почти все темы используют файлы header.php и footer.php для кодирования верхнего или нижнего колонтитула.

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

    <footer id="site-footer" role="contentinfo" class="header-footer-group"></footer>
    <!--—Visible elements are displayed here ---->
    <!-- #site-footer -->
    <!--?php wp_footer(); ?-->
    <!-- Invisible elements are displayed here -->
  1. Файл footer.php начинается с открытия
  2. За ним следуют видимые элементы и закрывающий тег.
  3. Затем вызывается хук WordPress wp_footer.

Дополнительные элементы вставляются динамически (мы перейдем к этому далее в нашем руководстве).

  1. Наконец, следуют закрывающие теги </body> и </html>.

Вы заметите, что нижний колонтитул WordPress в теме TwentyTwenty содержит текст «Powered by WordPress». Давайте удалим его из файла footer.php, отредактировав файл с помощью следующего кода:

<p class="powered-by-wordpress">
  <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>">
    <?php _e( 'Powered by WordPress', 'twentytwenty' ); ?>
  </a>
</p><!-- .powered-by-wordpress -->

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

Часто проще и менее рискованно добавить строку CSS вместо того, чтобы изменять PHP-код. Однако это работает только в том случае, если код темы аккуратен. Для темы TwentyTwenty вы можете скрыть текст с помощью следующего кода CSS:

#site-footer .powered-by-wordpress {
  display: none;}

Создание функций в файле functions.php

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

Для начала мы встроим блок с метаданными скриптовой разметки на главной странице WordPress. Для этого мы добавляем следующий код в формате JSON-LD в файл functions.php:

Начнем с того, что встроим блок с метаданными скриптовой разметки на главной странице WordPress. Для этого мы добавляем следующий код в формате JSON-LD в файл functions.php:

function load_start_page_meta() {
  // Are we on the homepage?
  if ( is_front_page() ) {
    // Script element output
    echo <<<'EOT'
    <script type='application/ld+json'>
    {
      "@context": "http://www.schema.org",
      "@type": "Florist",
      "name": "Happy Flower",
      "address": {
         "@type": "PostalAddress",
         "streetAddress": "Floral Street 1",
         "addressLocality": "Berlin",
         "postalCode": "10243"
      }
    }
    </script>
EOT; // this line must not be indented!
  }
}
// Link the function with the `wp_footer` hook
add_action( 'wp_footer', 'load_start_page_meta' );
Примечание

В этом примере мы используем «синтаксис Nowdoc» для встраивания JSON-кода в элемент HTML-скрипта в PHP.

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

function load_comments_exclusion() {
  // are we on the page with comments?
  if ( is_single() && comments_open() ) {
    // Script element output
    echo <<<'EOT'
    <script type="application/json">
      {
        "userName": "Mark Jones",
        "cutoffYear": "2018"
      }
    </script>
EOT; // this line must not be indented!
  }
}
// Link the function with the `wp_footer` hook
add_action( 'wp_footer', 'load_comments_exclusion' );

Встраивание дополнительных файлов скриптов в нижний колонтитул WordPress — вот как это делается

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

Использование специфических для WordPress функций для интеграции внешних скриптов имеет ряд преимуществ:

  • Вы можете указать, что скрипт A загружается только после загрузки скрипта B. Этот шаг гарантирует соблюдение зависимостей.
  • Вы можете указать, что скрипт должен выводиться в нижнем колонтитуле WordPress. В противном случае скрипт окажется в шапке HTML.
  • Вы можете добавить явный номер версии для сценария. Он добавляется к URL-адресу сценария. Если версия меняется, сценарию присваивается новый URL. Это заставляет скрипт перезагружаться, а не использовать старую версию из кэша.
  • Вы можете определить, какие скрипты и как вы хотите их интегрировать. WordPress позаботится обо всем остальном. Это важный шаг для оптимизации производительности. Например, плагин кэширования может взять на себя список интегрируемых скриптов и обработать их. Часто используемые техники оптимизации, такие как «минификация» и «конкатенация», основаны на этом механизме.

Давайте подробнее рассмотрим структуру функции wp_enqueue_script (). Вот основной скрипт для вызова функции со всеми ее параметрами:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Ниже приводится краткое описание функции wp_enqueue_script (), <strong>объяснение ее параметров</strong> и пример:

wp_enqueue_script() $handle $src $deps $ver $in_footer
Пояснение Внутренняя аббревиатура Путь к файлу JavaScript Массив зависимостей Версия Выводить в нижнем колонтитуле?
Пример ‘main-script’ ‘/js/main.js’ в папке темы array(‘jquery’)   true

Наконец, давайте посмотрим, как пример в таблице переводится в код. Если мы поместим следующий код в файл functions.php, то наш скрипт будет загружен как зависимость от jQuery. Номер версии установки WordPress добавляется в качестве версии к URL скрипта. Скрипт интегрируется в нижний колонтитул WordPress:

function add_theme_scripts() {
  # Load script based on jQuery in the footer
  wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js', array('jquery'), false, true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
  • Блоги

    Оцените статью
    cdelat.ru
    Добавить комментарий