В первой части этого руководства мы рассмотрели основы преобразования шаблона HTML в тему WordPress. Если вам немного любопытно, мы узнали несколько вещей о разделении шаблонов HTML на файлы PHP, их объединении, стилизации и именовании тем WordPress. На самом деле, мы многому научились, и вы захотите ознакомиться с концепциями, которые мы рассмотрели в нашем первом руководстве, чтобы насладиться второй порцией. В сегодняшнем посте мы поднимем вещи на ступень выше. Мы рассмотрим еще несколько областей, чтобы вы могли создать полнофункциональную тему WordPress. Итак, без лишних слов, начнем.
Настройка изображений и файлов JavaScript
Если у вас были изображения в исходном шаблоне HTML (index.html ), вы, вероятно, заметили, что они перестали отображаться после разделения шаблона на файлы PHP. Совсем не волнуйтесь, PHP такой же, как есть. Например, если у вас в разделе заголовка был такой логотип…
… Вам нужно будет немного поиграть с кодом. Код, который я раскрою через минуту, поможет браузерам найти ваш логотип (или любое другое изображение) в папке с изображениями , которая является (или должна быть) подпапкой основного каталога вашей темы. Итак, чтобы отобразить ваш логотип в разделе заголовка, откройте файл header.php и замените приведенный выше код следующим:
Функция get_template_directory_uri() возвращает URL-адрес каталога вашей темы. Итак, если вы добавите свой логотип в папку с изображениями, код захватит этот логотип.
Заметили разницу? Очевидно, этот фрагмент кода исправит только ваш логотип. Чтобы исправить другие изображения, вам нужно будет переписать их коды аналогичным образом. Легкая легкая штука.
Перейдем к JavaScript. Если ваш HTML-сайт использует JavaScript, создайте папку с именем js и поместите туда свои скрипты. Вы можете вызвать их в файле header.php, используя следующий код:
В приведенном выше коде в качестве иллюстрации используется 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-коду. Разобравшись с этим, давайте изменим открывающий HTML-тег. Мы добавим атрибут lang с помощью тега language_attributes следующим образом:
Приведенный выше код сгенерирует следующее:
При наличии объявления DOCTYPE и тега language_attribute структура вашей темы является допустимой, и браузеры будут понимать ваш код. Если вы создаете тему для блога, важно разместить в голове ссылки на ваш URL-адрес pingback и RSS-канал. В свой header.php добавьте следующий код:
Вы заметили, как мы использовали тег bloginfo для включения RSS-канала (‘rss2_url') и pingback (‘pingback_url')? Перед сохранением файла header.php добавьте также следующий код:
Приведенный выше тег wp_head будет загружать таблицы стилей и файлы JavaScript, необходимые для ваших плагинов. Если вы опустите этот крошечный фрагмент кода, ваши плагины могут работать не так, как хотелось бы. Разобравшись с этим, давайте добавим заголовки страниц в нашу тему WordPress, снова используя тег bloginfo. В свой файл header.php добавьте следующий код:
Первый тег wp_title добавит заголовок вашей страницы или сообщения, а второй тег bloginfo (‘name') добавит название вашего блога. Теперь, когда ваша тема WordPress имеет заголовки страниц, как насчет того, чтобы сделать снимок экрана для нашей темы, перепаковать тему и отдохнуть?
Создание снимка экрана для вашей темы
Когда вы загрузили свою тестовую тему в первый раз, вы, должно быть, заметили, что на панели тем WordPress отсутствует снимок экрана. Это выглядело уныло, особенно если у вас были другие темы с красочными скриншотами. Но не волнуйтесь, создать снимок экрана для вашей темы очень просто. Просто создайте изображение с помощью вашего любимого графического редактора (например, Adobe Photoshop) или сделайте снимок экрана своей темы. Убедитесь, что ваше изображение имеет ширину 600 пикселей и высоту 450 пикселей. Сохраните изображение как screenshot.png в папке с вашей темой. Сохраните все изменения, сожмите папку вашей темы в ZIP-архив. Загрузите тему и активируйте ее, чтобы увидеть новые изменения ?
Заключение
Я хочу верить, что это второе руководство предложило вам более глубокое понимание создания темы WordPress из статического HTML. В ближайшем будущем я познакомлю вас с другими аспектами тематики WordPress, но пока что я подготовил следующие ресурсы специально для вас:
- Шаблоны – WordPress Codex
- Теги шаблона – Кодекс WordPress
- Создайте свою собственную тему WordPress из шаблона HTML – SitePoint
- Как создать свою собственную тему WordPress – Line25
- Создание темы WordPress из статического HTML – WPtuts +
Удачного творчества!
Источник записи: https://www.wpexplorer.com