Какие файлы минимально необходимы для создания темы
как создать сайт на wordpress, настроить и оптимизировать wordpress
А типичный комплект php файлов таков:
index.php
single.php
page.php
header.php
sidebar.php
footer.php
comments.php
archives.php
404.php
functions.php
Каждый из вышеуказанных php-файлов называется шаблоном.
В задачи этого файла входит обработка php кодов. Используя functions.php можно расширить функциональные возможности WordPress, как те, что предлагаются разработчиками WordPress (регистрация и настройка виджетов и т.п.), так и добавить свои функции, хаки, хуки и т.д.
Но для создаваемой нами простенькой темы wordpress данный файл-шаблон не понадобиться (functions.php).
Какие же шаблоны-файлы мы будем создавать для нашей простенькой темы:
index.php
header.php
sidebar.php
footer.php
comments.php
Создание файла header.php.
Header, хедер или шапка страницы сайта.
Что входит в этот файл.
Обычные и необходимые каждой странице сайта части html-кода.
Это доктип (DOCTYPE), теги <html>,<head> и тег <body>, мета-тег описывающий кодировку, мета-тег привязки стилей css, привязки rss фида, само собой разумеется, мета-теги title, description, keywords и другие. Здесь же по традиции находится так называемые «сквозные» элементы сайта, то есть те, которые применяются на каждой его странице. Это название сайта, и как Вы и сами могли заметить на многих сайтах – горизонтальное меню сайта.
Собственно это и есть готовый код файла header. А теперь разберемся какая часть кода за что отвечает.
<head> — Открывающий тег <head>. Между открывающим тегом <head> и закрывающим тегом </head> находится очень важная информация. Судите сами:
<?php wp_head (); ?> — код, обеспечивающий работу многих плагинов, которые добавляют в страницу сайта свой код.
</head> — закрывающий тег <head>.
Дальше идет тег <body> . Все, что находится в пределах этого тега, собственно и есть Ваш сайт, то есть все то, что видят на экране монитора посетители Вашего сайта.
Первым идет открывающий тег контейнера cont — <div >. Что это за контейнер. В этом простом сайте, все контейнеры – header, sidebar, content и futer размещаются в общем контейнере cont.
<div > — открывающий тег контейнера header
</div> — закрывающий тег контейнера header
Далее сохраняем созданный файл header в заранее созданной папке темы, естественно под именем header и как php файл.
Текст в комментариях закрыт от браузеров, но он очень важен для движка WordPress. Этот текст не является непосредственно кодом css, но если WordPress не найдет этой записи, то не найдет и Вашу тему. Так что вставляем в самое начало файла стилей css вот такой код, естественно с Вашими данными:
Если Вы загрузите Вашу тему в соответствующую папку движка WordPress то первое, что он сделает, залезет в этот файл, прочитает эту надпись и покажет вашу тему в списке установленных тем. Ну а теперь непосредственно к коду css WordPress темы. Сделаем часть css кода для уже созданного файла header и вставим ее сразу же за блоком служебной информации:
Что здесь и к чему. Самый первый код со звездочкой это так называемые глобальные правила. Звездочка означает, что эти правила действуют для всего сайта. Зачем нужна такая «глобализация». Как видите, с помощью этих правил, заданы нулевые значения рамок, полей и отступов. То есть если в файле стилей css WordPress темы не указаны для какого-то элемента числовые значения этих параметров, то они будут равны нулю для всех браузеров. Что очень не помешает в кроссбраузерности создаваемого сайта.
Дальше выписаны правила для тега body . Здесь просто задан размер шрифта для всей страницы и его тип.
Задан размер шрифта для заголовков. Очень удобно.
Правила для контейнера cont . Во-первых, просто задана ширина контейнера, а во-вторых, заданы отступы сверху и снизу ноль, а справа и слева Авто. То есть контейнер, а следовательно и страница сайта, всегда будет расположена по центру экрана монитора.
Правила для контейнера header . Просто заданы ширина, высота контейнера и положение. Хотя куда ему деваться из контейнера.
Правила для контейнера blogtitle . В этом контейнере будет название сайта. Здесь заданы: ширина контейнера, далее размер шрифта и его цвет, положение контейнера – слева, размещение – слева 450.
Правила для контейнера subtitle . В этом контейнере будет описание сайта. Здесь заданы: предполагаемая ширина контейнера, выравнивание текста по ширине, положение контейнера – слева, размещение – слева 400, а так же размещение сверху – 60. Чтобы он не лег на blogtitle.
Правила для контейнера menu . Заданы позиционирование, ширина, положение и оступ слева – 800.
Вот пока и все по созданию файла стилей css WordPress темы. Это конечно далеко не все, естественно, что мы еще вернемся к файлу стилей.
Создание файла index.php.
Ну и по строкам:
<?php get_header (); ?> — код, отвечающий за вставку шапки сайта, то есть хедера или точнее шаблона header
<div > — открывающий тег контейнера content, в котором мы собственно и видим содержание страницы сайта
<?php if (have_posts ()) : while (have_posts ()) : the_post (); ?> — код цикла, отвечающий за вывод контента на страницу сайта
<div the_title (); ?></h2></div> — контейнер title, в котором находится заголовок страницы
<?php endif; ?> — закрывающий тег кода цикла
</div> — закрывающий тег контейнера content
<?php get_sidebar (); ?> — код, отвечающий за вставку сайдбара или шаблона sidebar
<?php get_footer (); ?> — код, отвечающий за вставку футера или шаблона footer
Вот и весь код файла index.php. Как видите, потихоньку шаблоны сайтов WordPress открывают свои секреты… Да, чуть не забыл! В файл стилей добавим вот такой код:
Правила для контейнера content . Задана ширина контейнера, положение, отступы снизу и справа для того, чтобы не наезжал на сайдбар и футер, выравнивание текста записи по ширине
Правила для контейнера title . Заданы параметры шрифта заглавия страниц сайта: цвет, размер, полужирное начертание и тип шрифта
Правила для контейнера date . Заданы параметры шрифта даты создания записи: размер шрифта, отступы, фон
Во пока, на сегодня, и все о том, как создавать шаблоны сайтов WordPress и в частности как создавать файл index.php. Остались файлы sidebar и footer.
Создаем файл sidebar.php.
<h4>Категории</h4> — заглавие списка категорий.
<br> — тег перевода строки, чтобы не сбилось все в кучу.
И аналогично дальше заглавия списков новых записей и архивов по месяцам, с кодами их вывода.
Внесем изменения в файл стилей (style.css). Вставим вот такой код:
Правила для контейнера sidebar. Здесь просто задано положение контейнера sidebar, его ширина и отступ сверху, для красоты.
Создаем файл footer.php.
<div > — открывающий тег контейнера footer.
Запись копирайта с названием и ссылкой на главную страницу сайта, что в общем-то и не обязательно.
</div> — закрывающий тег контейнера footer.
</div> — закрывающий тег контейнера cont.
Ну и закрывающие теги </body> и </html>.
В файл стилей (style.css) добавим:
Правила для контейнера footer. Заданы высота, ширина и положение контейнера.
Правила для надписи в футере: начертание и цвет шрифта.
Создаем файл 404.php.
Вот и готовы все файлы!
Результат создания темы wordpress с нуля.
В итоге у нас должно получиться следующее:
У вас скачается zip архив с названием mytheme (если вы посмотрите внутрь, то увидите в нем 6 файлов, которые мы и создавали выше: header.php, index.php, footer.php, sidebar.php, 404.php, style.css).
Как установить данную тему на свой сайт?
Похожие записи:
Создаем простую тему на wordpress : 4 комментария
Спасибо большое за доступность и понятность!!
не появляется страничка 404, выходит стандартный апач, как правельно подключить помогите пожалуйста, все форумы перерыл, только ненужно писать про .htaccess
Хотите изменить что-то в теме WordPress
под себя, но не хватает знаний?
Посмотрите, как создаются темы WordPress с нуля,
чтобы понять принцип работы и легко вносить в них нужные изменения.
Введение. Минимальная тема Wordpress своими руками.
Что такое тема и шаблоны Wordpress.
Минимальный набор файлов для темы Wordpress.
Подробнее о курсе
Хотя, на сегодняшний день, в сети есть довольно много шаблонов (тем) WordPress, но, как известно, ничего идеального нет. Всегда хочется добавить или изменить что-то дополнительно. Например:
- нужно сделать, чтобы какой-либо текст выводился в определенном месте;
- изменить порядок вывода записей или страниц
- поменять положение какого-либо элемента
- Оформить страницу определенным образом и.т.д.
Сделать все это возможно только в том случае, если вы понимаете принцип работы и создания тем WordPress и знаете какие функции за что отвечают. Конечно, можно поручить эти задачи фрилансерам и программистам, которые сделают все за вас. Но, как правило, это получается довольно дорого и постоянно платить такие суммы не всегда есть возможность. Иногда проще научиться делать все самому. Если для вас это тоже проще, то вы попали в нужное место.
Большую дорогу нужно начинать с первого маленького шага. Чтобы начать разбираться в продвинутых функциях Wordpress, нужно сначала понять:
А как вообще работают и строятся темы?
Нужно понять базовые принципы и только после этого имеет смысл двигаться дальше и изучать что-то дополнительно. Зная эти базовые принципы, вам не составит никакого труда, перейти на официальный сайт с документацией Wordpress и прочитать, как работает та или иная функция. Без базовых знаний, вы можете читать ту же самую документацию как пустой набор символов и совершенно ничего в этом не понимать. Интернет буквально наводнен вопросами от людей, которые не понимают базовых принципов работы и построения тем Wordpress и пытаются решить какие-либо продвинутые задачи не понимая базовых принципов. Например,
Чтобы подобных и многих других вопросов у вас не возникало, предлагаю вашему вниманию курс, который поможет вам получить базовые знания о работе и построению тем Wordpress.
Этот курс называется: "Минимальная тема Wordpress своими руками"
В нем я хочу представить для вас серию статей, в которых вы можете увидеть работу базовых функций Wordpress без лишнего кода и сами шаг за шагом создать свою первую Wordpress тему.
Зачем это нужно?
1. Понимая принцип создания простых тем, вы можете намного проще вносить правки в сложные темы.
2. Вы больше не будете платить другим людям за определенные работы по правке тем Wordpress. Вы сможете сделать это сами.
3. Вы получаете мою помощь и поддержку в вопросах, которые трудны для понимания. Если даже у вас что-либо не получится, вы можете обратится ко мне за помощью и мы внесем необходимый функциона в форму Wordpress вместе. Вы не будете один на один со своей проблемой.
В свое время мне очень помогла одна статья, размещенная кажется на хабре. Если встречу её снова, то обязательно скину ссылку. Именно в ней более менее подробно и понятным языком был описан процесс создания шаблона для WordPress. Вся остальная информация была представлена небольшими статейками написанными абы как. Ну по крайне мере в рунете. На сегодняшний день, как я вижу, ситуация не особо изменилась.
Вот ещё один пример, когда может понадобится создать тему с нуля. На одном известном мне сайте изначально был установлен шаблон, который полностью устраивал хозяина и дизайном и функционалом. Но скорость его работы была занижена за счет лишних скриптов и не нужного ему функционала. Я думаю это проблема любого шаблона для любой CMS. После долгих мучений с оптимизацией было решено разработать шаблон с нуля на чистом Bootstrap, чтобы не было ничего лишнего, только то, что нужно. На самом деле это заняло не так много времени. Гораздо больше он бы потратил на оптимизацию готового шаблона. Вся работа заняла около недели. И вуаля в Google PageSpeed 99 пунктов.
В этом уроке я покажу как создать тему для WordPress с нуля используя начальный шаблон Bootstrap 4. На самом деле вы можете использовать любой HTML шаблон или сверстать его самостоятельно суть от этого не изменится.
Структура шаблона
Я приведу пример основной структуры файлов темы WordPress для создания шаблона блога или новостного сайта. В каждом конкретном случае эта структура может различаться. Например, можно создать разный дизайн для категорий, шаблоны для кастомных типов записей и т.д.
Получается вот такой минимальный набор всех нужных файлов для создания шаблона новостного сайта или блога.
Создание темы WordPress
Если вы ещё не установили CMS WordPress, то пришло время это сделать. Про то, как установить WordPress можно прочитать в этой статье. Если система уже установлена, то продолжаем.
Итак, приступим к созданию собственной темы. Для начала нам понадобится создать папку с названием темы в разделе /wp-content/themes/. Я назову её it-blog. Как я уже говорил, чтобы WordPress не выдавал ошибку, внутри этой папки необходимо создать файл стилей style.css. Теперь в панели администрирования в разделе Внешний вид → Темы появится наша тема, где её можно применить к сайту, нажав кнопку активировать. Название темы будет такое же, как и название её папки. На сайте теперь конечно же будет открываться только белая страница, так как тема ещё совсем пустая.
Вы можете создать свое изображение темы, добавив файл screenshot.jpg в папку с темой, а в файле style.css установить название, описание, автора и другую информацию добавив в начало файла примерно такой текст:
Лично я считаю, что это лишнее, но для эстетики можно потратить немного времени.
Теперь внутри папки с нашей новой темой нам нужно создать все файлы в соответствии со структурой описанной выше. Можно создать их все сразу пустыми или создавать отдельно по мере написания кода.
HTML шаблон
Если все сделано верно, то на главной странице сайта отобразится тема Bootstrap 4.
Добавляем API WordPress
Первым делом добавим в тему поддержку API WordPress, а так же выведем тайтл. В тег <title> добавляем следующее:
Теперь заголовок окна браузера будет содержать тайтл из системы WordPress.
И ниже подключаем API. Код должен находится внутри тега <head> :
Теперь если вы посмотрите исходный код сайта, то вы сможете увидеть, что в <head> появилась новая разметка, которую добавил WordPress. Это мета-теги, скрипты и т.д.
Далее нужно перед закрывающим тегом </body> добавить следующий код:
Эта функция выведет панель инструментов WordPress вверху сайта.
Правильное подключение скриптов
Мы вывели скрипты прямо в шаблоне указав путь до них через функцию get_template_directory_uri(); . Вы конечно можете оставить это и так. Я и сам так делал. Но по правилам WordPress скрипты должны подключаться через специальную функцию в файле functions.php. Давайте подключим их правильно. Делается это следующим образом:
Как вы можете заметить ещё я подключил файл style.css, в нём будут находится пользовательские CSS стили, которые рано или поздно вам понадобятся.
header.php
Вот что получилось:
Пока меню выводится статично, но это мы исправим позже.
footer.php
Добавляем код футера. Здесь же мы подключаем функцию для вывода виджетов dynamic_sidebar() :
Чтобы виджеты отобразились на страницах сайта, необходимо зарегистрировать из функцией register_sidebar() в файле functions.php. В аргументах функции я так же добавил немного разметки Bootstrap , которая будет добавлена в каждый блок с виджетом.
Ну и теперь в разделе Внешний вид → Виджеты вы можете добавлять в сайдбар нужные вам виджеты путём перетаскивания. Более подробно о создании и добавлении виджетов в WordPress можно прочитать в этой статье.
index.php
Чтобы подключить шапку и футер в файлах, воспользуемся функциями get_header() и get_footer() . Ну и между ними добавляем стандартный цикл WordPress. Выглядит он следующим образом:
А вот основные функции цикла, которые нам понадобятся:
Если вам нужен вывод записей по каким-либо параметрам, то можно воспользоваться классом WP_Query<> . Как его использовать можете прочитать в этой статье.
В итоге получился следующий код главной страницы:
Добавляем поддержку изображений в постах
single.php и page.php
Как я уже говорил single.php выводит запись, а page.php страницу. В нашем шаблоне эти страницы будут идентичные. Они похожи на другие шаблоны, в них так же подключается хедер и футер, но только без цикла WP:
category.php и archive.php
Данные файлы являются шаблонами категорий и архивов записей. Так же archive.php используется и как шаблон списка записей для меток. Код почти не отличается от других файлов. Так же подключается шапка, футер и циклом выводится список записей:
search.php
Добавляем меню
Давайте изменим статичное меню из нашего шаблона так, чтобы его можно было редактировать из админки WordPress. Для начала регистрируем меню в файле functions.php:
Теперь в разделе Внешний вид → Меню добавляем пункты меню и сохраняем:
Добавление пунктов меню
Осталось вывести меню в шаблоне. Заменяем в файле header.php код нашего статичного меню следующей функцией с указанием идентификатора меню:
Более подробно о том, как сделать меню в WordPress читайте в этой статье.
404.php
Ну и осталось добавить код в файл 404.php, который будет отображать шаблон страницы с ошибкой 404. Здесь ничего особенного просто заголовок и текст:
Заключение
Как видите создать свою тему на CMS WordPress с нуля не такая сложная задача. Надеюсь эта статья поможет вам научиться создавать прекрасные сайты с оригинальным и запоминающимся дизайном на этой системе управления. Ну а если возникли вопросы, то задавайте их в комментариях, обязательно отвечу.
Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:В основном, модальное окно - это диалоговое или всплывающее окно, которое используется для предоставления важной информации пользователю или побуждения пользователя предпринять необходимые действия, прежде чем двигаться дальше. Модальные окна широко используются для предупреждения пользователей о таких ситуациях, как истечение времени Читать далее
Это руководство о том, как сделать простое разбиение на страницы, используя PHP и MySQL с плагином jQuery Simple Pagination.Simplepagination.js - это простой плагин для jQuery, поддерживающий CSS3 и Bootstrap. Шаг 1: Включаем все js и css файлы Плагин jQuery Simple Pagination скачиваем отсюда. <link rel="stylesheet" Читать далее
Чтобы при вводе даты в input выпадал удобный календарик можно воспользоваться двумя способами: стандартным полем HTML5 type="date" или JavaScript библиотекой Bootstrap Datepicker. Рассмотрим подробнее эти способы в этой статье. Календарь для input HTML5 Просто применяем у input атрибут type="date" или Читать далее
Возникла задача вывести 5 одинаковых адаптивных колонок на сайте с Bootstrap. Помогло это решение. У меня был Bootrstrap 4, но есть аналогичное решение и для 3 версии, там ещё проще. 5 колонок в Bootstrap 4 Добавляем данный код в файл Читать далее
Ваш сайт WordPress может быть медленным по многим различным причинам: забитая база данных, работающая в фоновом режиме, является одним из них. Профессиональный рабочий процесс поддержки WordPress включает в себя регулярную оптимизацию базы данных, в ходе которой вы избавляетесь от ненужных Читать далее
Один комментарий на «WordPress создание темы с нуля»
В этом уроке мы с вами разберёмся, как создать свою тему для 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. Опс. Меня за это захейтят.
Приступаем к созданию темы. Файлы 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 Название темы. Description Описание темы, которое будет отображаться в админке. Version Версия темы, например 1.0 Author Тут можете указать себя и тех людей, которые вам помогали. Author URI URL на сайт автора, позволит превратить имя автора в ссылку в админке WordPress. License Если вы создаёте под WordPress, рекомендую почитать немного про лицензию GPL License URI А в этом параметре указывается ссылка на страницу с лицензией. Text Domain Идентификатор локализации темы, полагаю сейчас нам это не понадобится, но позже рекомендую почитать про правильную локализацию плагинов и тем WordPress. Tags Если эта тема станет вашим будущим сайтом или сайтом вашего клиента, наиболее вероятно вам можно пропустить этот параметр, если же вы будете в дальнейшем публиковать свою тему в официальном репозитории WordPress, тогда уделите ему особое внимание. Со списком поддерживаемых тегов можно ознакомиться на официальном сайте. Template Параметр только для дочерних тем, подробнее тут.
Изображение темы
Что касается расширения файла, то сгодится и jpg и gif, и jpeg, но в официальной документации WP рекомендуется всё же использовать screenshot.jpg .
Вот что у меня получилось:
Для чего нужны wp_head() и wp_footer()
После того, как вы начинаете добавлять первый HTML в теме, то вам сразу же нужно сделать две вещи:
- Добавить функцию wp_head() перед закрывающим тегом </head> ,
- Добавить функцию wp_footer() перед закрывающим тегом </body> .
Что-то типо этого:
Это обязательное условие для всех тем 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 :
Также я показал, как это делать через настройки сайта. Однако, как поступить, если она вам нужна и вы не хотели бы её скрывать?
В этом случае нужно сделать некоторые небольшие изменения в CSS вёрстки, когда у нас фиксированное меню, оно имеет CSS-свойство top:0 , верно?
- Высота админ панель для десктопа 32px, значит мы меняем упомянутое выше свойство на top:32px .
- Высота админ бара для мобайл (менее 782px) 46px, а значит меняем свойство меню на top:46px .
- Добавьте к тегу <body> функцию body_class() примерно так: <body <?php body_class() ?>> – суть этой функции в том, что она добавляет различные CSS-классы в зависимости от того, зареган пользователь или нет, от того, на какой странице мы находимся и так далее.
- Используйте появившийся класс в теге <body> – .admin-bar , для того, чтобы применять соответствующие стили только для ситуаций, когда админ бар отображается на сайте.
Также можете почитать на моём сайте урок, в котором я переносил админ бар в нижнюю часть страницы.
Что делать, если в процессе создания темы WP у вас всё сломалось и отображается белый экран?
Если вы делали шаги в этом уроке, но после того, как вставили или изменили какой-то код, у вас стал отображаться белый экран, и вы не знаете из-за чего, то вы можете поступить следующим образом:
Читайте также: