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

Опубликовано: 5 Января, 2022

Написать собственный шаблон WordPress с нуля довольно просто. Если вы занимаетесь веб-разработкой, возможно, вы уже слышали, что такое «WordPress». Возможно, клиент упомянул, но вы не знакомы с этим. Возможно, вы уже работали с ним раньше, но не знаете, как создать тему с нуля. Или, может быть, вы совсем новичок. В любом случае, этот пост для вас.

Предварительные требования: Прежде чем мы начнем, вам необходимо выполнить следующий набор требований.

  • У вас должна быть полноценная установка WordPress либо на локальном, либо на реальном хостинге. Если вы хотите узнать больше о том, как начать с WordPress, обратитесь к этой статье.
  • Концептуальный дизайн в формате PSD или HTML CSS, которому необходимо следовать на протяжении всего процесса разработки.
  • Небольшое введение в программирование на PHP. Однако это не обязательно для данной публикации, но все же рекомендуется.

Сфера

Разработка темы WordPress - долгая, утомительная, нескончаемая, но сложная задача для программирования. Процесс разработки полностью зависит от того, как вы хотите, чтобы ваша тема выглядела. Этот пост является всего лишь учебным пособием и не охватывает всех деталей, необходимых для стандартной темы WordPress. После прочтения этой статьи вы должны полностью полагаться на WordPress Codex и WordPress StackExchange для ваших дальнейших запросов.

Начиная

Помня о предпосылках, приступим. Первое, что вам нужно знать, это то, что почти все, что вы делаете в WordPress, находится в каталоге wp-content Все остальное - это сама WordPress CMS, и вы не хотите связываться с этим.

Когда вы откроете каталог wp-content -> theme , вы найдете темы WordPress по умолчанию, например , двадцать пятнадцать , двадцать четырнадцать, двадцать тринадцать и т. Д. Для начала создайте каталог с любым именем, которое вы предпочитаете. В этом посте мы назовем его wpstart .

A WordPress theme atleast needs two files to exist – style.css and index.php

Так что зайдите в папку wpstart и создайте эти два файла. В style.css вставьте следующий комментарий. Это сообщает панели управления WordPress о деталях темы и метаинформации.

/*
Theme Name: WP Start
Author: FedUser
Description: A bare bone WordPress theme
Version: 0.0.1
*/

Теперь переключитесь на панель управления WordPress и нажмите « Внешний вид»> «Темы» . Вы найдете WP Start в своей коллекции тем.

Идите вперед и активируйте эту тему, а затем посетите сайт. И вуаля! Технически вы сами создали собственную тему. Конечно, он ничего не делает, кроме пустого белого экрана. Здесь вступает в действие index.php

Откройте index.php в текстовом редакторе и напишите следующий код.

<!DOCTYPE html>
< html >
< body >
< h1 >This is a sample WordPress theme.</ h1 >
</ body >
</ html >

Посетите сайт еще раз и запустите свой первый шаблон WordPress.

Разделяй и властвуй


Чтобы разработать стандартную тему WordPress, вам нужно разделить всю вашу работу на разделы. В этом нет необходимости, так как вы можете делать все в index.php , но хорошая практика программирования предполагает модульность. В этом посте мы разделим всю нашу работу на четыре раздела, а именно. верхний колонтитул, нижний колонтитул, боковая панель и контент. В соответствии с этими разделами мы создадим четыре разных файла, а именно header.php , footer.php , sidebar.php и content.php .

  • header.php : В этом конкретном примере этот файл будет делать следующее;
    • Определите все мета-теги и теги ссылок внутри <head> для HTML.
    • Отображение фирменного стиля сайта, например названия и описания.
    • Обеспечьте навигацию по разным страницам.

    Помня об этом, давайте закодируем заголовок нашей темы.

    <!DOCTYPE html>
    < html >
    < head >
    < meta charset = "utf-8" />
    < meta name = "viewport" content = "width=device-width, initial-scale=1" />
    < title >WP Start</ title >
    integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin = "anonymous" />
    </ head >
    < body >
    < nav ></ nav >

    Теперь я хочу обратить ваше внимание на одну вещь. Вы можете видеть, насколько «жестко запрограммировано» название нашего сайта. Это означает, что название останется тем же «WP Start», независимо от того, на каком сайте вы примените эту тему. Если автору нужно изменить это, он должен вручную отредактировать код, чтобы сделать это. Чтобы избежать этой ручной настройки шаблонов, WordPress предоставляет различные вызовы функций для динамического решения этих ситуаций. В этом конкретном случае я хочу, чтобы заголовок был именем сайта / блога. Для этого заменю

     <title> WP Start <title>

    с участием

     <название> <? php echo get_bloginfo ("имя"); ?> </title>

    Это называется встраиванием небольшого фрагмента php в HTML. (Технически мы пишем HTML в php-файле. Поэтому мы встраиваем HTML в php-код).

    Таким образом, header.php с некоторым дополнительным кодом становится;

    <!DOCTYPE html>
    < html >
    < head >
    < meta charset = "utf-8" />
    < meta name = "viewport" content = "width=device-width, initial-scale=1" />
    < title > <? php echo get_bloginfo( "name" ); ?> </ title >
    integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin = "anonymous" />
    < link rel = "stylesheet" href="<?php echo get_bloginfo( 'template_directory' ); ?>/style.css" />
    <? php wp_head(); ?>
    </ head >
    < body >
    < nav class = "navbar navbar-default" >
    < div class = "container" >
    < div class = "navbar-header" >
    < a class = "navbar-brand" href="<?php echo esc_url( home_url() ); ?>">
    < h3 class = "site-branding" > <? php echo get_bloginfo( "name" ); ?> </ h3 >
    </ a >
    </ div >
    < ul class = "nav navbar-nav navbar-right" >
    < li class = "active" >< a href = "#" >Home</ a ></ li >
    < li >< a href = "#" >Contact</ a ></ li >
    < li >< a href = "#" >About</ a ></ li >
    </ ul >
    </ div >
    </ nav >

    Дополнительные фрагменты php, используемые в этом коде:

     <? php echo get_bloginfo ('каталог_шаблона'); ?>

    Это необходимо для получения каталога шаблона, чтобы можно было найти дополнительные ресурсы, такие как CSS, JS, шрифты и т. Д.

     <? php echo esc_url (home_url ()); ?>

    Это будет отражать URL-адрес домашней страницы сайта.

  • footer.php : это файл, в который мы будем добавлять все, что захотим, в нижний колонтитул сайта, например, пользовательский нижний колонтитул, теги скриптов и т. д. Кроме того, HTML-теги, которые начинаются в header.php , закрываются в этом файле.
    < footer class = "site-footer" >
    < div class = "container" >
    < div class = "row row-30" >
    < div class = "col-md-4 col-xl-5" >
    < div class = "pr-xl-4" >
    < h3 >
    < a href="<?php echo esc_url( home_url() ); ?>">
    <? php echo get_bloginfo( "name" ); ?>
    </ a >
    </ h3 >
    < p ><? php echo get_bloginfo( "description" ); ?></ p >
    < p > 2018 FedUser. All Rights Reserved.</ p >
    </ div >
    </ div >
    < div class = "col-md-4" >
    < h5 >Contacts</ h5 >
    < dl class = "contact-list" >
    < dt >Address:</ dt >
    < dd >798 ABC Nagar, JKL, Rajasthan</ dd >
    </ dl >
    < dl class = "contact-list" >
    < dt >e-Mail:</ dt >
    < dd >< a href = "mailto:#" >someone@example.com</ a ></ dd >
    </ dl >
    < dl class = "contact-list" >
    < dt >Phone No.:</ dt >
    < dd >< a href = "tel:#" >+91 1234567890</ a >
    </ dd >
    </ dl >
    </ div >
    < div class = "col-md-4 col-xl-3" >
    < h5 >Links</ h5 >
    < ul class = "nav-list" >
    < li >< a href = "#" >About</ a ></ li >
    < li >< a href = "#" >Projects</ a ></ li >
    < li >< a href = "#" >Blog</ a ></ li >
    < li >< a href = "#" >Contacts</ a ></ li >
    < li >< a href = "#" >Pricing</ a ></ li >
    </ ul >
    </ div >
    </ div >
    </ div >
    </ footer >
    integrity = "sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin = "anonymous" >
    </ script >
    integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin = "anonymous" >
    </ script >
    </ body >
    </ html >

    Дополнительный фрагмент php, используемый в этом файле:

     <? php echo get_bloginfo ("описание"); ?>

    Будет получено и размещено описание сайта.

    Также следует упомянуть, что я использовал «жестко запрограммированные» подразделы, такие как «Контакты» и «Ссылки» в файле footer.php Вместо этого вы можете использовать виджеты WordPress для автоматизации и сделать их изменяемыми непосредственно через Customizer. Однако это выходит за рамки этой публикации, и мы обсудим это в любое время в следующих статьях.

  • sidebar.php : у большинства веб-сайтов есть боковая панель, также как и у нас. Часто на боковых панелях отображаются ссылки на архивы, недавние сообщения, учетные записи в социальных сетях, рекламные объявления и т. Д. В нашем случае мы будем использовать ссылки на архивы и ссылки на социальные сети. Опять же, виджет WordPress намного лучше, чем «жестко запрограммированный» мусор! Но для ясности остановимся на последнем.
    < div class = "sidebar" >
    < div class = "widget" >
    < h3 class = "widget-title" >Archives</ h3 >
    < div class = "widget-content" >
    < ul >
    < li >< a href = "#" >October 2018</ a ></ li >
    < li >< a href = "#" >November 2018</ a ></ li >
    < li >< a href = "#" >December 2018</ a ></ li >
    </ ul >
    </ div >
    </ div >
    < div class = "widget" >
    < h3 class = "widget-title" >Social</ h3 >
    < div class = "widget-content" >
    < ul >
    < li >< a href = "#" >Facebook</ a ></ li >
    < li >< a href = "#" >Twitter</ a ></ li >
    < li >< a href = "#" >LinkedIn</ a ></ li >
    < li >< a href = "#" >Github</ a ></ li >
    </ ul >
    </ div >
    </ div >
    </ div >
  • content.php : Теперь, когда настроены верхний колонтитул, нижний колонтитул и боковая панель, мы перейдем к основному контенту сайта. На данный момент мы будем придерживаться некоторого фиктивного содержимого внутри этого файла.
    < div class = "main-content" >
    < h3 >Sample Title</ h3 >
    < p >Sample text goes here.......</ p >
    </ div >

Интеграция


Теперь вернемся к index.php где мы объединим все вышеперечисленные разделы в один. Поскольку этот файл является отправной точкой для нашей темы, мы можем разумно выбрать размещение этих разделов. Вот как я это сделал.
<? php get_header(); ?>
< div class = "container" >
< div class = "row" >
< div class = "col-md-9" >
<? php get_template_part( 'content', get_post_format() ); ?>
</ div >
< div class = "col-md-3" >
<? php get_sidebar(); ?>
</ div >
</ div >
</ div >
<? php get_footer(); ?>

Используемые здесь фрагменты php говорят сами за себя. get_header(), get_sidebar() и get_footer() - это предопределенные функции, используемые для встраивания соответствующих разделов. Для настраиваемого раздела, такого как content.php , встраивание выполняется с помощью следующего кода;

 <? php get_template_part ('контент', get_post_format ()); ?>

style.css : Теперь, когда мы обновили наш index.php , давайте добавим шарма с помощью CSS .

/*
Theme Name: WP Start
Author: FedUser
Description: A bare bone WordPress theme
Version: 0.0.1
*/
nav.navbar .navbar-brand .site-branding {
margin : 0 ;
}
footer.site-footer {
background-color : #502550 ;
color : #fff ;
padding : 40px 0 20px 0 ;
}
footer.site-footer a {
color : #fff ;
}

И вуаля! Первый вид вашей пользовательской темы WordPress готов.

Петля

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

Сам цикл не требует пояснений.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- contents of the loop -->
<?php endwhile ; endif ; ?>

ЕСЛИ есть какие-либо сообщения, ПОКА их не осталось, ПОКАЗАТЬ их. Все, что находится внутри этого цикла, будет повторяться, пока на странице не закончатся все сообщения. Мы можем использовать эту концепцию для отображения нашего списка. Вот как я это сделал.

< div class = "panel panel-default blog-post" >
< div class = "panel-heading" >
< h3 class = "panel-title post-title" >
<? php if( !is_single() ): ?>
< a href="<?php echo esc_url( get_permalink() ); ?>">
<? php the_title(); ?>
</ a >
<? php else:
the_title();
endif; ?>
</ h3 >
< p class = "post-meta" >
<? php the_date(); ?>
by < a href = "#" >
<? php the_author(); ?>
</ a >
</ p >
</ div >
< div class = "panel-body" >
<? php if( !is_single() ):
the_excerpt();
else:
the_content();
endif; ?>
</ div >
</ div >

И изменил index.php на это.