Учебники

Учебное пособие по WordPress: как создать тему WordPress из HTML (часть 2)

Учебное пособие по WordPress: как создать тему WordPress из HTML (часть 2)

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

Настройка изображений и файлов JavaScript

Если у вас были изображения в исходном шаблоне HTML (index.html ), вы, вероятно, заметили, что они перестали отображаться после разделения шаблона на файлы PHP. Совсем не волнуйтесь, PHP такой же, как есть. Например, если у вас в разделе заголовка был такой логотип…

<img alt="your_logo_alt_text" src="images/logo.jpg" />

… Вам нужно будет немного поиграть с кодом. Код, который я раскрою через минуту, поможет браузерам найти ваш логотип (или любое другое изображение) в папке с изображениями , которая является (или должна быть) подпапкой основного каталога вашей темы. Итак, чтобы отобразить ваш логотип в разделе заголовка, откройте файл header.php и замените приведенный выше код следующим:

<img alt="your_logo_alt_text" src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" />

Функция get_template_directory_uri() возвращает URL-адрес каталога вашей темы. Итак, если вы добавите свой логотип в папку с изображениями, код захватит этот логотип.

Заметили разницу? Очевидно, этот фрагмент кода исправит только ваш логотип. Чтобы исправить другие изображения, вам нужно будет переписать их коды аналогичным образом. Легкая легкая штука.

Перейдем к JavaScript. Если ваш HTML-сайт использует JavaScript, создайте папку с именем js и поместите туда свои скрипты. Вы можете вызвать их в файле header.php, используя следующий код:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/example.js"></script>

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

Конечно, если вы создаете тему для кого-то еще, вам действительно следует загружать свои js-файлы с помощью wp_enqueue_scripts. Ознакомьтесь с сообщениями AJ о добавлении JavaScript в темы WordPress для получения дополнительной информации и советов.

Файлы шаблонов

В первой части этого руководства мы упомянули четыре основных файла шаблона, а именно index.php, header.php, sidebar.php и footer.php. Файлы шаблонов определяют, как ваш веб-сайт будет отображаться в Интернете. Шаблоны получают информацию из вашей базы данных MySQL WordPress и переводят ее в HTML-код, отображаемый в веб-браузерах. Другими словами, файлы шаблонов – это строительные блоки тем WordPress. Чтобы лучше понять шаблоны, давайте углубимся в концепцию, известную как иерархия шаблонов.

Воспользуемся аналогией. Если посетитель щелкает ссылку категории (т.е. ссылку на категорию), такую ​​как http://www.yoursite.com/blog/category/your-category/, WordPress использует иерархию шаблонов для создания нужного файла (и контента) в качестве объяснено ниже:

  • Во-первых, WordPress будет искать файл шаблона, соответствующий идентификатору категории.
  • Если идентификатор категории, например, 2, WordPress будет искать файл шаблона с именем category-2.php.
  • Если category-2.php недоступен, WordPress выберет файл шаблона общей категории, такой как category.php.
  • Если этот файл шаблона также недоступен, WordPress будет искать общий шаблон архива, такой как archive.php.
  • Если общий шаблон архива не существует, WordPress вернется к основному файлу шаблона index.php.

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

home.php или index.phpИспользуется для отображения индекса сообщений блога
front-page.phpИспользуется для рендеринга статических страниц или последних сообщений, как установлено на первой странице.
single.phpИспользуется для отображения отдельной страницы сообщения
single- {post-type} .phpИспользуется для рендеринга пользовательских типов записей, например, если тип записи является продуктом, WordPress будет использовать single-product.php
page.phpИспользуется для отображения статических страниц
category.php или archive.phpИспользуется для отображения индекса архива категории
author.phpИспользуется для рендеринга автора
date.phpИспользуется для отображения даты
search.phpИспользуется для отображения результатов поиска
404.phpИспользуется для отображения страницы ошибки сервера 404

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

Теги шаблона

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

В нашем предыдущем руководстве вы встретили несколько тегов шаблонов, таких как get_header, get_sidebar, get_footer и bloginfo. В следующем разделе мы добавим несколько тегов шаблонов к нашей недавно созданной теме WordPress. Я предполагаю, что вы уже включили объявление DOCTYPE в свой файл header.php. Если нет, вот код:

<!DOCTYPE HTML>

Объявление DOCTYPE придает смысл вашему HTML-коду. Разобравшись с этим, давайте изменим открывающий HTML-тег. Мы добавим атрибут lang с помощью тега language_attributes следующим образом:

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>

Приведенный выше код сгенерирует следующее:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

При наличии объявления DOCTYPE и тега language_attribute структура вашей темы является допустимой, и браузеры будут понимать ваш код. Если вы создаете тему для блога, важно разместить в голове ссылки на ваш URL-адрес pingback и RSS-канал. В свой header.php добавьте следующий код:

<link title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" rel="alternate" type="application/rss+xml" /><link href="<?php bloginfo('pingback_url'); ?>" rel="pingback" />

Вы заметили, как мы использовали тег bloginfo для включения RSS-канала (‘rss2_url’) и pingback (‘pingback_url’)? Перед сохранением файла header.php добавьте также следующий код:

<?php wp_head(); ?>

Приведенный выше тег wp_head будет загружать таблицы стилей и файлы JavaScript, необходимые для ваших плагинов. Если вы опустите этот крошечный фрагмент кода, ваши плагины могут работать не так, как хотелось бы. Разобравшись с этим, давайте добавим заголовки страниц в нашу тему WordPress, снова используя тег bloginfo. В свой файл header.php добавьте следующий код:

<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>

Первый тег wp_title добавит заголовок вашей страницы или сообщения, а второй тег bloginfo (‘name’) добавит название вашего блога. Теперь, когда ваша тема WordPress имеет заголовки страниц, как насчет того, чтобы сделать снимок экрана для нашей темы, перепаковать тему и отдохнуть?

Создание снимка экрана для вашей темы

Когда вы загрузили свою тестовую тему в первый раз, вы, должно быть, заметили, что на панели тем WordPress отсутствует снимок экрана. Это выглядело уныло, особенно если у вас были другие темы с красочными скриншотами. Но не волнуйтесь, создать снимок экрана для вашей темы очень просто. Просто создайте изображение с помощью вашего любимого графического редактора (например, Adobe Photoshop) или сделайте снимок экрана своей темы. Убедитесь, что ваше изображение имеет ширину 600 пикселей и высоту 450 пикселей. Сохраните изображение как screenshot.png в папке с вашей темой. Сохраните все изменения, сожмите папку вашей темы в ZIP-архив. Загрузите тему и активируйте ее, чтобы увидеть новые изменения 😉

Заключение

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

Удачного творчества!

Источник записи: https://www.wpexplorer.com

Похожие сообщения
Учебники

Пошаговое руководство по переустановке WordPress

Учебники

Пошаговое руководство по построителю Gutenberg для WordPress

Учебники

Добавить ссылку на домашнюю страницу в меню WordPress

Учебники

Как установить WordPress в DigitalOcean