Как создать WordPress тему с нуля: основы

Динамический заголовок

Чтобы иметь возможность использовать динамический заголовок - то есть другой заголовок для главной страницы, для других выбранных страниц или для архивов - мы определим функцию dynamic_header() в нашем файле functions.php , куда мы выведем разметка нашего заголовка зависит от страницы, которую загружает посетитель.

Так что теперь наш файл header.php закончится так:

 </nav> <?php dynamic_header(); ?> <div class="container"> <div class="row"> 

Мы также определим эту функцию следующим образом:

 if(!function_exists('dynamic_header')){ function dynamic_header(){ global $post; ?> <?php if (is_front_page()){ ?> <header class="masthead" style="background:#ccc;"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <div class="site-heading"> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <span class="subheading"><?php get_bloginfo( 'description', 'display' );?></span> </div> </div> </div> </div> </header> <?php } else if (is_home()){ ?> <header class="masthead" style="background:#ccc;"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <div class="site-heading"> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <span class="subheading"><?php get_bloginfo( 'description', 'display' );?></span> </div> </div> </div> </div> </header> <?php } else if (is_page()){ ?> <header class="masthead" style="background:#ccc;"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <div class="site-heading"> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <span class="subheading"><?php get_bloginfo( 'description', 'display' );?></span> </div> </div> </div> </div> </header> <?php } else if (is_single()){ ?> <header class="masthead" style="background:#ccc;"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <div class="site-heading"> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <span class="subheading"><?php get_bloginfo( 'description', 'display' );?></span> </div> </div> </div> </div> </header> <?php } else { ?> <header class="masthead" style="background:#ccc;"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-10 mx-auto"> <div class="site-heading"> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <span class="subheading"><?php get_bloginfo( 'description', 'display' );?></span> </div> </div> </div> </div> </header> <?php } } } 

Чтобы иметь возможность использовать все текущие URL или данные публикации - как в цикле - мы объявляем переменную $post global . Затем мы просто заполняем другую страницу или запрашиваем случаи с заголовком заполнителя HTML, который мы закончим позже. Это закладывает основу для действительно динамического заголовка.

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

Мы добавим это в наш style.css :

 body.logged-in.admin-bar #mainNav { margin-top: 32px; } @media screen and (max-width: 782px) { body.logged-in.admin-bar #mainNav { margin-top: 46px; } } 

Это гарантирует, что #mainNav - наш контейнер меню - имеет достаточное смещение от вершины, поэтому он не покрывается при #mainNav пользователя в систему. WordPress добавляет классы logged-in и admin-bar в body в этих случаях, поэтому мы можем легко цель это.

Мы видим, что мы обращаемся к двум случаям в нашем CSS - один по умолчанию, а другой для небольших экранов. Это связано с тем, что WordPress выводит более широкую панель администратора на мобильные устройства, поэтому нам необходимо обеспечить смещение в 46 пикселей.

На мобильном устройстве у нас теперь должно быть отзывчивое раскрывающееся меню на основе JavaScript:

Вывод

Во второй части, посвященной созданию темы WordPress с нуля, мы создали очень простую тему WordPress и включили в нее стили и скрипты Bootstrap. Мы настроили вывод меню в соответствии с нашими предопределенными стилями. Мы также разделили вывод заголовка и нижнего колонтитула на соответствующие части.

Файл functions.php - важный файл в разработке темы - это еще одна тема, которую мы представили и использовали. Вывод заголовка был разделен на его собственную функцию, которая будет использовать особенности посещения страницы и переменные, определяемые владельцем сайта, для определения окончательного вывода.

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

В этой серии есть три статьи по созданию темы WordPress с нуля:

• понимание структуры темы
• основы темы
• уточнение темы