В этом уроке мы с вами разберёмся, как создать свою тему для WordPress с нуля. Ну почти с нуля – мы же планируем натягивать на WordPress свою HTML-вёрстку.
Первым делом вам нужно будет определиться, хотите ли начинать разработку на основе стартовых тем или же полностью с нуля. Про стартовые темы мы обязательно поговорим, но я не привык их использовать, поэтому не буду использовать и в уроке тоже.
Что будет в видеоуроке?
Как вы заметили, что помимо текстового урока, тут также есть и видеоурок. Он абсолютно бесплатный, вам достаточно лишь зарегистрироваться на сайте для доступа к нему.
В видеоуроке мы сразу же начнём работать с готовой вёрсткой, которая выглядит вот так:
Для доступа к файлам вёрстки необходимо приобрести курс.
Сделаем первые шаги по натяжке этой вёрстки на WordPress, заменим статичные данные в HTML на динамичные при помощи таких функций WordPress, как wp_head(), wp_footer(), get_stylesheet_directory_uri(), get_stylesheet_uri(), bloginfo(), wp_get_document_title(), language_attributes(). Объясняю принцип действия каждой функции.
Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.
Cтартовые темы. Что это такое и для чего они нужны?
Когда мы создаёт тему с нуля, мы ручками создаёт директорию, в ней потом создаём два файла – index.php и style.css – смотрите следующий шаг.
Возможно стартовые темы придумали те люди, которые, так же как и я, не умеют создавать файлы на MacOS ��
Первоначально стартовые темы задуманы для упрощения этого процесса – чтобы вам вроде как пришлось меньше писать один и тот же код. Вроде как. Когда я только начинал свою карьеру в создании WordPress-тем, и когда даже не знал о существовании стартовых тем (а может их и вовсе не было), я задумывался о создании своего собственного «темплейта», то есть стартовой темы, при помощи которой я бы мог сэкономить себе время.
Сейчас в мире не существует такой стартовой темы, которая бы подошла под мои уникальные ежедневные задачи, да и как вы убедитесь в процессе этого курса, они также не подходят и для переноса вёрстки на WordPress. Опс. Меня за это захейтят.
Тем не менее, если вдруг вы приноровитесь к использованию какой-либо стартовой темы в своей работе – круто, молодцы! Я ничего не имею против, к тому же самую популярную стартовую темы Underscores разработали ребята из Automattic (компания, которая стоит за WordPress.com). Если вы почувствовали некоторый эмоциональный подтекст в моих словах, это только потому что я встречал людей, которые считают, что разрабатывать нужно ТОЛЬКО на стартовых темах, и обучаться тоже на них.
Приступаем к созданию темы. Файлы index.php и style.css
Для начала создайте какую-нибудь папку в /wp-content/themes — это и будет ваша будущая тема, я например создал kurs (очень оригинально). Каждая тема должна содержать по крайней мере 2 файла — это index.php и style.css — создаём их внутри этой папки.
Если вы забыли/забили на style.css , то в админке во Внешний вид > Темы ожидайте такую ошибку:
Если же отсутствует файл index.php , то:
Тут WordPress ещё что-то болтает про дочерние темы, не обращайте внимания, вам про них ещё рано читать.
Итак, после того, как вы создали все необходимые файлы, наша тема начнёт отображаться в админке:
До тех пор, пока мы ещё не изучили другие файлы шаблона, index.php у нас будет отвечать за вывод любой страницы сайта, а style.css , понятное дело, содержать стили (хоть это и не обязательно), но главное, чтобы в файле style.css вы добавили метаданные и описание темы.
Параметры (метаданные) темы
Если вы не хотите, чтобы ваша тема так и отображалась в админке без названия и описания, давайте добавим немного информации в style.css , поместив её в комментарии CSS /* */ .
/* * Theme name: Тема для курса * Author: Миша * Author URI: https://misha.agency * Version: 1.0 */
Но дело в том, что существуют и другие параметры темы, которые вы можете использовать, вот их список:
Theme name Название темы. Description Описание темы, которое будет отображаться в админке. Version Версия темы, например 1.0 Author Тут можете указать себя и тех людей, которые вам помогали. Author URI URL на сайт автора, позволит превратить имя автора в ссылку в админке WordPress. License Если вы создаёте под WordPress, рекомендую почитать немного про лицензию GPL License URI А в этом параметре указывается ссылка на страницу с лицензией. Text Domain Идентификатор локализации темы, полагаю сейчас нам это не понадобится, но позже рекомендую почитать про правильную локализацию плагинов и тем WordPress. Tags Если эта тема станет вашим будущим сайтом или сайтом вашего клиента, наиболее вероятно вам можно пропустить этот параметр, если же вы будете в дальнейшем публиковать свою тему в официальном репозитории WordPress, тогда уделите ему особое внимание. Со списком поддерживаемых тегов можно ознакомиться на официальном сайте. Template Параметр только для дочерних тем, подробнее тут.
Изображение темы
Для того, чтобы в качестве изображения темы не отображался «фотошоповский фон», мы создадим файл screenshot.png и отправим его прямиком в папку с темой (рекомендуемое разрешение 1200px на 900px).
Что касается расширения файла, то сгодится и jpg и gif, и jpeg, но в официальной документации WP рекомендуется всё же использовать screenshot.png .
Вот что у меня получилось:
Для чего нужны wp_head() и wp_footer()
После того, как вы начинаете добавлять первый HTML в теме, то вам сразу же нужно сделать две вещи:
Добавить функцию wp_head() перед закрывающим тегом ,
Добавить функцию wp_footer() перед закрывающим тегом
Это обязательное условие для всех тем WordPress, благодаря этим функциям работают плагины (даже банально плагин для вставки кода Google Analytics на сайт), подключаются различные дополнительные CSS и JS в тему и так далее. Чуть более подробно описываю предназначение этих функций на видео.
functions.php
Трудно представить тему для WordPress, в которой отсутствует файл functions.php , он используется для включения каких-либо функций темы, например:
подключения стилей и скриптов,
регистрации областей меню,
регистрации сайдбаров,
включения поддержки изображений поста и так далее и так далее.
Также он сам может содержать какой-то дополнительный функционал, ну либо файлы, подключенные в него через include() / require() .
Главное правило по functions.php — сам по себе файл не должен ничего выводить! �� То есть никогда не оставляем первую строку пустой! ��
И никогда не обрываем PHP-код пустыми строками где-то посередине кода! ��
Это очень распространённая ошибка. Очень!
Пока что можете создать пустой файл functions.php в папке с вашей темой.
Пример работы с functions.php. Что делать, если админ-панель наехала на вёрстку сайта?
После того, как мы вставили в наш шаблон функции wp_head() и wp_footer(), у нас появилась админ панель сверху сайта, которая налезла на вёрстку.
Такое случается практически всегда, когда в вашей вёрстке присутствуют фиксированные меню.
В видеоуроке я решил не заморачиваться и просто скрыл админ-панель при помощи этой строки кода в functions.php :
add_filter('show_admin_bar', '__return_false');
Также я показал, как это делать через настройки сайта. Однако, как поступить, если она вам нужна и вы не хотели бы её скрывать?
В этом случае нужно сделать некоторые небольшие изменения в CSS вёрстки, когда у нас фиксированное меню, оно имеет CSS-свойство top:0 , верно?
Высота админ панель для десктопа 32px, значит мы меняем упомянутое выше свойство на top:32px .
Высота админ бара для мобайл (менее 782px) 46px, а значит меняем свойство меню на top:46px .
После добавления соответствующих CSS-стилей вы можете заметить, что изменения применяются даже тогда, когда админ-панель не отображается на сайте! (например для незарегистрированных пользователей). Что делать?
Добавьте к тегу функцию body_class() примерно так: > – суть этой функции в том, что она добавляет различные CSS-классы в зависимости от того, зареган пользователь или нет, от того, на какой странице мы находимся и так далее.
Используйте появившийся класс в теге – .admin-bar , для того, чтобы применять соответствующие стили только для ситуаций, когда админ бар отображается на сайте.
Также можете почитать на моём сайте урок, в котором я переносил админ бар в нижнюю часть страницы.
Что делать, если в процессе создания темы WP у вас всё сломалось и отображается белый экран?
Если вы делали шаги в этом уроке, но после того, как вставили или изменили какой-то код, у вас стал отображаться белый экран, и вы не знаете из-за чего, то вы можете поступить следующим образом:
Открываем файл wp-config.php , который лежит в корне вашей установки WordPress
Ищем там параметр WP_DEBUG и устанавливает его равным true (таким его и можно оставить до конца нашего курса).
После этого вместо вашего белого экрана у вас будет отображаться, какие ошибки возникли в процессе с указанием того, на какой строке и в каком файле находится ошибка в коде.
Исправляете и продолжаем ��
Купить курс
21 видеоурок
Можно скачать готовый код после каждого урока
Можно начать проходить курс сразу же после оплаты
Достаточно базовых знаний HTML и CSS, чтобы пройти курс
Единоразовый платёж
Доступ навсегда
Уроки актуальны в 2023-м году
Как свою верстку натянуть на Woocommerce?
Много читать придется, если шаришь в php, то наиболее простой вариант будет скачать и установить готовую дефолтную тему Storefront (https://docs.woocommerce.com/documentation/themes/storefront/) и уже на ее основе менять код или свою верстку.
P.S. Код таким как есть нельзя будет использовать, тебе придется ОЧЕНЬ много поменять всего.
smolanov_sergey 2.7 лет назад
Спасибо! Тоесть нужно хуками собрать новый dom именно по макету. Мне где-то попадался урок где парень с $product натянул на обсолютно левый макет. Буду читать.
anseme 2.7 лет назад
Ну не совсем, скорее всего придеться поменять части шаблона woocommerce которые используются для вывода разметки html
Открой несколько магазинов на wp и сравни их внутренности, там заметишь схожие места.
В идеале, тот кто верстал макет, должен это делать соблюдая структуру которая используется в woocommerce.
Вот тут есть оч крутой визуальный пример, но УЧТИ! Он точно устарел, скорее всего некоторые хуки исчезли или же добавились новые.
Как натянуть вёрстку на WordPress (материалы для новичка)?
Добрый день. Во-первых, есть кодекс WP — https://codex.wordpress.org/Theme_Development Во-вторых, есть небольшой видеокурс — https://www.youtube.com/playlist?list=PLzi5JvpYf_hh6NaL1o0aYIpEdICG7P0gK В-третьих, статья на хабре — https://habr.com/post/228523/ В-четвёртых, здесь достаточно доступно описан процесс «натягивания» html шаблона — https://wp-best.ru/kak-natyanut-html-shablon-na-wordpress-chast-1.html В-пятых, если совсем лень «курить», можно воспользоваться этим видео — https://www.youtube.com/watch?v=7akPICFR-AI Что-то линки не вставляются как надо.
dexterh 5.5 лет назад
Спасибо Вам за ответ!
webazex 5.5 лет назад
Здравствуйте. В принципе возник тот же вопрос. Делаю свою тему, к ней нужно подключить плагин. Он подключается но корректно не работает. Есть подозрение что связано это с отсутствием файла functions.php. Главной вопрос. Что должно быть в этом файле, точнее как мне его сформировать? Скопировать с существующей — возникают ошибки. Если писать самому — что писать? Какие функции? Какой шаблон самого файла хотя бы?
Kama 5.5 лет назад
Создай functions.php файл в теме, только с текстом
и дальше «сувай» туда любые коды. Это прочитай еще.
OLD_Grays 5.5 лет назад
А какой плагин подключаете? И как он не работает корректно, что делает/чего не делает (скриншоты в студию)) )? Если совсем в двух словах, то functions.php расширяет функционал темы. А дальше. В первую очередь, Вам сюда — https://wp-kama.ru/id_71/fayl-shablona-functionsphp-v-wordpress.html Во вторую, когда решите какой функционал хотите реализовывать, Вам сюда — https://wp-kama.ru/functions — и сюда — https://wp-kama.ru/hooks Для примера, можете взять файл из стандартной темы типа TwentyEleven и посмотреть какие переменные там инициализируются/создаются/используются, какие функции/классы создаются. Тут ведь большой разброс от глобальных настроек до мелких сниппетов.
Комментировать
Здравствуйте! У меня такой вопрос. По поводу натягивания вёрстки на WordPress. Я конечно понимаю, что об этом уже много всего написано и много видео есть в интернете. Но всё-таки хочу спросить. Есть непонятный момент. Не могу разобраться. Когда я в установленном WordPress устанавливаю какую-либо тему из репозитория, то получаю практически пустой сайт, в который я при помощи PageBuilder вставляю контент. При этом в файлах темы ничего не меняется. В файле index.php всего несколько строк. Куда же записывается весь контент? Если мы поменяем тему на другую, то весь контент остаётся, но меняется его вид (стили). А когда речь идет о натягивании вёрстки, то мы переносим нашу вёрстку в файл index.php. Мы записываем в index.php все тексты, картинки и т.п. И если мы потом поменяем тему на какую-то другую, то мы потеряем весь контент. И еще — index.php это шаблон страницы. А мы ведь можем создать много разных страниц, и чем они будут заполняться? Я смотрел видео про натягивание вёрстки, там говорят, что переносим основное содержимое файла index.html в файл index.php, шапка при этом помещается в header.php. А если у нас несколько html страниц, то куда их переносить ? Я никак не могу понять. Натянуть вёрстку это что значит? Перенести весь контент ? или нет . Или мы так же должны получить пустой сайт, в который заказчик сам будет вставлять свой контент ? Я так понимаю, что свёрстанный сайт, он уже со всеми страницами, картинками и прочее, и мы его переносим на WordPress, прямо в файлы темы. А как тогда заказчик потом будет дополнять, менять контент, картинки, тексты, он что, будет лезть в файлы темы, править php файлы ? скорее всего нет, он должен вооружиться каким либо PageBuilder’ом. А как тогда это всё совместить?
Как натянуть верстку на CMS WordPress: простой и полный гайд с нуля
Натягивание верстки на WordPress – это процесс, при котором ваш сайт WordPress получает новый дизайн, созданный с помощью HTML, CSS и, возможно, JavaScript. Это может быть необходимо, если вы хотите изменить внешний вид сайта, улучшить его доступность или увеличить скорость загрузки. В любом случае, натягивание верстки на WordPress требует некоторых знаний и навыков. В этой статье мы расскажем вам, как это сделать.
Содержание
Шаг 1: подготовьтесь
Шаг 2: напишите HTML и CSS
Шаг 3: загрузите код на сайт
Шаг 4: проверьте результат
Шаг 5: оптимизируйте сайт
Ошибки при нятежке верстки на WordPress
Основные функции PHP, которые нужно знать для натяжки верстки
В заключении
Шаг 1: подготовьтесь
Перед тем как начать натягивать верстку на WordPress, вам нужно подготовиться. Сначала вам нужно будет создать новую тему WordPress или найти уже существующую тему, которую вы хотите использовать. Если вы создаете свою собственную тему, то вам нужно будет создать файл style.css, в котором будет храниться ваш код CSS. Также вам будет нужно создать файл functions.php, в котором вы можете добавить некоторые функции, необходимые для работы темы. Если вы используете уже существующую тему, то вам нужно будет найти файлы style.css и functions.php и открыть их в редакторе кода.
Шаг 2: напишите HTML и CSS
После того, как вы подготовитесь, вам нужно будет написать код HTML и CSS, который будет определять внешний вид сайта. Это может включать в себя стилизацию текста, цветов, шрифтов, размеров и т.д. При написании кода HTML и CSS следует помнить, что он должен быть организован хорошо и читаемо, чтобы было легко понимать, что происходит.
Шаг 3: загрузите код на сайт
После того, как вы напишете код HTML и CSS, вам нужно будет загрузить его на сайт. Для этого вам нужно будет войти в административную панель WordPress, найти раздел “Внешний вид” и выбрать “Редактор”. Здесь вы увидите список файлов темы, включая файлы style.css и functions.php. Откройте файл style.css и вставьте туда свой код CSS. Также вы можете вставить код HTML в файл header.php, footer.php или другой файл, который отвечает за внешний вид сайта. После того, как вы вставите код, не забудьте сохранить изменения.
Шаг 4: проверьте результат
После того, как вы загрузите код на сайт, необходимо проверить, что все работает корректно. Откройте сайт в браузере и проверьте, что внешний вид сайта соответствует вашему коду. Если вы нашли какие-то ошибки или неточности, вернитесь к шагу 2 и исправьте их.
Шаг 5: оптимизируйте сайт
После того, как вы натянете верстку на сайт, не забудьте оптимизировать его. Это важно, чтобы увеличить скорость загрузки сайта и улучшить его позицию в поисковых системах. Для этого вы можете использовать сжатие изображений, оптимизацию кода и другие техники. Вы также можете установить плагины, которые автоматически оптимизируют сайт за вас.
Ошибки при нятежке верстки на WordPress
Неправильное отображение сайта
Одной из самых распространенных ошибок, которые могут возникнуть при натягивании верстки на WordPress, является неправильное отображение сайта. Это может быть связано с неправильно написанным кодом HTML и CSS, несовместимостью темы с версией WordPress или другими проблемами. Чтобы исправить эту ошибку, нужно проверить код на наличие ошибок, убедиться, что тема совместима с текущей версией WordPress, а также проверить, что нет конфликтов с другими плагинами или темами.
Ошибка форматирования текста
Другой часто встречающейся ошибкой является неправильное отображение форматирования текста. Это может быть связано с неправильно написанным кодом CSS, который не учитывает специфику разных браузеров. Чтобы исправить эту ошибку, нужно проверить код CSS на соответствие стандартам, а также убедиться, что он совместим с разными браузерами. Вы можете использовать сервисы, такие как Can I Use, чтобы узнать, какие свойства CSS поддерживаются разными браузерами.
Ошибки изображений
Еще одной проблемой, с которой можете столкнуться при натяжке верстки на WordPress, является неправильное отображение изображений. Это может быть связано с неправильно указанными путями к изображениям в коде HTML или с несовместимостью изображений с текущей темой. Чтобы исправить эту ошибку, нужно проверить код HTML на наличие неправильно указанных путей к изображениям, а также убедиться, что изображения совместимы с текущей темой.
Основные функции PHP, которые нужно знать для натяжки верстки
PHP является языком программирования, который широко используется для разработки веб-приложений, в том числе и для создания сайта на WordPress. Если вы хотите натянуть верстку на WordPress, то стоит ознакомиться с основными функциями PHP, которые нужно знать для этого.
Одной из самых важных функций PHP является функция echo . Она используется для вывода строки или переменной на экран. Например, чтобы вывести строку “Hello, World!” на экран, вы можете использовать следующий код:
echo "Hello, World!";
Другой важной функцией PHP является include или require . Они используются для включения файла в текущую страницу. Это может быть полезно, например, если у вас есть общий шаблон для всех страниц сайта, который хотите использовать на каждой странице. Чтобы включить файл с именем header.php , вы можете использовать следующий код:
include "header.php";
Другой важной функцией PHP является if . Она используется для условного выполнения кода. Например, чтобы вывести строку “It’s raining” только в том случае, если переменная $isRaining равна true , вы можете использовать следующий код:
if ($isRaining) echo "It's raining"; >
Другой важной функцией PHP является foreach . Она используется для итерации по массиву и выполнения определенного кода для каждого элемента массива. Например, чтобы вывести на экран список элементов массива $items , вы можете использовать следующий код:
foreach ($items as $item) echo $item . " "; >
Еще одной полезной функцией PHP, которую стоит знать при натяжке верстки на WordPress, является wp_head . Она вызывается в шапке сайта и используется для вывода мета-тегов, стилей и скриптов, необходимых для работы WordPress. Например, чтобы вывести стили, вы можете использовать следующий код:
wp_head();
Эти функции являются лишь небольшим примером того, какие функции PHP могут быть полезны для натяжки верстки на WordPress. Стоит также ознакомиться с функциями, такими как while , do while , switch , array , isset , unset , empty , и многими другими, чтобы получить более полное представление о возможностях PHP и о том, как их можно использовать в своей работе. Обратите внимание, что некоторые из этих функций могут быть устаревшими и не рекомендуется использовать их в новых проектах. Поэтому стоит следить за актуальностью технологий и иногда обновлять свои знания.
Где искать информацию по PHP
Документация PHP может быть найдена на официальном сайте PHP: https://www.php.net/manual/ru/index.php. На сайте вы можете найти информацию обо всех функциях PHP, а также узнать, как их использовать в своей работе. Также на сайте есть раздел с примерами кода, которые можно использовать в своих проектах. Рекомендуется ознакомиться с документацией PHP, чтобы получить более полное представление о возможностях языка и узнать, как их можно использовать в своей работе.
В заключении
Вот и все, теперь вы знаете, как натянуть верстку на WordPress. Этот процесс требует некоторых знаний и навыков, но с ними вы сможете создать сайт, который будет соответствовать вашим требованиям и предпочтениям. Не стоит стесняться практиковаться и искать новые решения, так как это поможет вам стать более компетентным специалистом в этой области. Не бойтесь также задавать вопросы и искать помощи у сообщества, так как это тоже поможет вам развить свои навыки и получить необходимую поддержку. Удачи!
