Создание темы wordpress дочерние темы курсы

Создайте шаблон WordPress с нуля [с загружаемыми файлами]

Создание тем на WordPress может показаться сложным на первый взгляд, но если вы знаете HTML, CSS и немного PHP, у вас есть возможность создать шаблон WordPress без проблем.

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

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

Сам курс можно скачать в конце статьи.

Базовые знания: что вам нужно знать, прежде чем начать создавать шаблон для WordPress

Хотя это учебник с нуля, я советую вам иметь минимальные знания, чтобы иметь возможность создаватьшаблоны WordPress.

HTML

Язык разметки HTML — это то, что интерпретируют браузеры — это базовый язык для отображения вашего контента.

Это относительно легко учиться и позволит вам сделать макет вашего сайта.

CSS

На английском языке “каскадная таблица стилей» Это язык, который дает вам стили и может улучшить внешний вид вашего сайта.

Вы можете просматривать документацию и учиться на HTML и CSS на таких сайтах, как www.w3schools.com

PHP

Это язык программирования, созданный для веб-разработки, который позволяет создавать динамический контент.

WordPress был создан с PHP, но вам не нужно иметь очень продвинутые знания, чтобы создать шаблон для WordPress.

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

Например, отображение заголовка так же просто, как ввод “the_title()”.

Функции WordPress всегда описательны, и вы можете искать их параметры в Кодексе.

WordPress

Если вы собираетесь создать шаблон для WordPress, в идеале вы должны знать CMS из первых рук. Узнайте, как работают записи, страницы , категории, теги и их настройки.

Инструменты: что вам нужно для создания шаблона в WordPress

Эти инструменты помогут сделать вещи проще и позволят вам создавать быстрее:

WordPress

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

Локальный сервер

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

Это упростит редактирование файлов и взаимодействие с сайтом, вы можете использовать XAMPP в Windows и MAMP на Mac.

Редактор кода

Редакторы кода похожи на автомобили: у каждого есть свой любимый. Я рекомендую Visual Studio Code, для его широких возможностей расширения и настройки. Кроме того, это бесплатно.

Кодекс

Кодекс WordPress — это официальная документация для разработчиков (в основном на английском языке), очень полезная при понимании работы функции WordPress.

Одной из наиболее важных ссылок, которые вам нужны из Кодекса, является иерархия шаблонов:

КУРСЫ ОБУЧЕНИЯ ПРОГРАММИРОВАНИЮ

Python автоматизация рутинных задач с помощью Питон – курс

Это четко показывает вам шаблоны, необходимые для темы WordPress (некоторые необязательные).

Как создать шаблон для WordPress с нуля

Чтобы создать шаблон в WordPress, вы должны начать с базовых файлов и масштабировать по мере необходимости.

Если вы хотите следовать этому руководству, вам нужно будет загрузить этот html-шаблон bootstrap, чтобы использовать его в качестве основы вместе с шаблоном posts.

В настоящее время у вас есть только один простой HTML, который WordPress не распознает.

Чтобы WordPress обнаружил шаблон, необходимо выполнить определенные требования. Необходимо, чтобы у вас были файлы style.css e index.php.

Система папок

Файлы темы должны быть в папке тем WordPress. Перейдите в корневую папку, в которой установлен WordPress. В моем случае, поскольку у меня есть WordPress, установленный на локальном, это C:\xampp\htdocs \wp-content \ themes.

Оказавшись там, создайте папку с именем “raiola “ (вы можете назвать свою тему по своему усмотрению, но в этом уроке тема будет ”Raiola Theme«). Это папка темы, в которой вы создадите все файлы темы.

Внутри папки он копирует содержимое базового шаблона HTML.

Style.css

WordPress будет анализировать все папки внутри «wp-content / themes» Он прочитает информацию из файла » style.css», который находится внутри каждого, чтобы знать, если это тема.

Если style существует.css, он возьмет папку в качестве темы и будет искать другие файлы темы WordPress. Вот почему важно создать его в первую очередь.

В папке “raiola”, созданной для темы, создайте файл style.css и написать код с информацией о теме:

/* Theme Name: Raiola Theme Theme URI: https://raiolanetworks.es Description: тема демо для учебника, как сделать тему WordPress License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */

Хотя WordPress распознает тему только по имени, я рекомендую вам указать хотя бы имя, URL, описание и лицензию с ее URL.

Как только вы сохраните изменения, вы увидите, что в меню “Внешний вид > темы”> WordPress появится тема. Невооруженным глазом он кажется поврежденным, но это не так:

Курсы sql для начинающих типы файлы server express where операторы

Это нормально, многое еще предстоит сделать. Теперь идет вся часть системы шаблонов в php.

Индекс.php

Файл index.php является основным файлом темы, и в нем будет указано, как будет отображаться home с записями.

Чтобы создать его, возьмите index.html базового шаблона, который я указал вам ранее, и создает PHP-файл с именем index.php с тем же содержанием. Сохраните его в папке темы.

Прямо сейчас WordPress распознает его как тему, поэтому вы можете включить его. Теперь нужно дать ему динамизм.

Когда вы активируете его, это будет выглядеть плохо, но это совершенно нормально. Вы должны указать ему еще раз, где находятся ваши файлы CSS. Я покажу это позже в functions.php.

Цикл входов

Loop-это запрос, который WordPress делает к базе данных для posts. В индексе.php выполняется следующим образом:

1 2 3 4 5 6 7 8 9 10 11 12 13 14   <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>             <!— ОТОБРАЖАЕТСЯ СОДЕРЖИМОЕ СООБЩЕНИЯ —>                                       <!—                 ЗДЕСЬ ИДЕТ HTML И PHP СООБЩЕНИЙ HOME              —>                <?php endwhile; else : ?>             <!— ЕСЛИ NINGUN POST НЕ ПОЛУЧЕН, СООБЩЕНИЕ ВОЗВРАЩАЕТСЯ: —>             <p>>извините, мы не нашли ningUN post.</p>         <?php endif; ?>            <!— ОСТАНОВИТЬ ЦИКЛ —>

Чтобы использовать этот цикл в шаблоне WordPress, который вы создаете, перейдите в раздел «BLOG POST» и скопируйте HTML, который я покажу вам ниже, внутри цикла:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26   <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>             <!— ОТОБРАЖАЕТСЯ СОДЕРЖИМОЕ СООБЩЕНИЯ —>             <div class=«card mb-4»>             <img class=«card-img-top» src=«http://placehold.it/750×300» alt=«Card image cap»>             <div class=«card-body»>                 <h2 class=«card-title»>Post Title</h2>                 <p class=«card-text»>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p>                 <a href=«#» class=«btn btn-primary»>Read More </a>             </div>             <div class=«card-footer text-muted»>                 Posted on January 1, 2017 by                 <a href=«#»>Start Bootstrap</a>             </div>             </div>                          <!—                 ЗДЕСЬ ИДЕТ HTML И PHP СООБЩЕНИЙ HOME              —>                <?php endwhile; else : ?>             <!— ЕСЛИ NINGUN POST НЕ ПОЛУЧЕН, СООБЩЕНИЕ ВОЗВРАЩАЕТСЯ: —>             <p>>извините, мы не нашли ningUN post.</p>         <?php endif; ?>            <!— ОСТАНОВИТЬ ЦИКЛ —>

До сих пор вы не увидите ничего конкретного, потому что HTML внутри цикла не был изменен. Для того, чтобы записи были видны, вы должны указать их свойства с функциями WordPress. В этом цикле будут использоваться следующие:

  • Заголовок: вы извлекаете заголовок из базы данных с помощью функции the_title();
  • Короткое описание: Образцы резюме статьи с the_excerp();
  • Подробнее: вы создаете ссылку на пост с помощью the_permalink();
  • Дата: вы добавляете дату статьи с помощью the_date“); но я рекомендую использовать другую полностью допустимую альтернативу » echo get_the_date();”
  • Автор: показывает автора поста с the_author();
  • Выделенное изображение: извлекает выделенное изображение с помощью функции the_post_thumbnail («выделено“); где” выделено» — это размер, который будет определен в функциях темы.

Заменяя текст на его функцию в PHP, сообщения генерируются автоматически:

Код цикла должен выглядеть так:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>               <div class=«card mb-4»>            <?php the_post_thumbnail(); ?>          <div class=«card-body»>            <h2 class=«card-title»><?php the_title(); ?> ></h2>            <p class=«card-text»><?php the_excerpt(); ?> ></p>            <a href=«<?php the_permalink(); ?>« class=«btn btn-primary»>Leer más </a>          </div>          <div class=«card-footer text-muted»>            <?php echo get_the_date(); ?> — <?php the_author(); ?>                     </div>        </div>        <?php endwhile; else : ?>            <p>>извините, мы не нашли ningUN post.</p>        <?php endif; ?>

Он уже обретает форму!

Функции темы в WordPress

Как мы уже рассказывали вам в других статьях, есть одно место для размещения всего функционального кода: файл functions.php.

Весь код, который создает определенную функциональность, входит в этот файл. Чтобы создать тему WordPress из этого урока, вы будете использовать:

  • Пользовательский размер изображения
  • Поддержка заголовка
  • Меню
  • Поддержка логотипа
  • Регистрация боковой панели
  • Регистрация стилей
  • Регистрация скриптов

Создайте файл functions.php в папку темы и начните писать код, который вам нужен для выполнения желаемых функций:

Размер изображения

По умолчанию WordPress имеет 4 размера изображения: thumbnail, small, medium, large и full (миниатюрный, маленький, средний, большой и полный размер). Однако для этой темы требуется изображение определенного размера:

Курсы kotlin android org примеры example object обучение классы

Таким образом, вы должны зарегистрировать этот размер изображения следующим образом:

1 2 // Размер изображения add_image_size( ‘destacada’, 750, 300,true );

Поддержка заголовков

Сообщите WordPress, что ваша тема не включает мета-тег <title><title > В коде и может его сгенерировать. Вы должны сделать это в functions.php следующим образом:

1 2 // Тег заголовка add_theme_support( ‘title-tag’ );

Регистрация стилей

WordPress должен знать элементы, которые он будет загружать, включая стили, поэтому вам нужно будет поместить таблицы стилей CSS, которые вам нужны, “в очередь»” Для этого вы будете использовать hook wp_enqueue_style. Поместите этот код в functions.php:

1 2 3 4 5 6 7 8 9 // Регистрация стилей function raiola_enqueue_styles() {     //Style.css     wp_enqueue_style( ‘style’, get_stylesheet_uri() );     // Registrar bootstrap     wp_enqueue_style( ‘bootstrap’, get_template_directory_uri() . ‘https://serv4.raiolanetworks.es/css/bootstrap.min.css’,false,‘1.1’,‘all’); } add_action( ‘wp_enqueue_scripts’, ‘raiola_enqueue_styles’);

Registrar scripts

Подобно стилям, вы можете зарегистрировать необходимые скрипты в WordPress с помощью wp_enqueue_scripts следующим образом:

1 2 3 4 5 // Registrar Scripts function raiola_enqueue_scripts() {     wp_enqueue_script( ‘bootstrap’, get_template_directory_uri() . ‘https://serv5.raiolanetworks.es/js/bootstrap.bundle.min.js’, array( ‘jquery’ ) );   }   add_action( ‘wp_enqueue_scripts’, ‘raiola_enqueue_scripts’);

Хорошо. Поскольку вы уже зарегистрировали стили и скрипты, помните, что вы должны удалить ссылки на статические файлы:

1 2 3 4 5 <!— Bootstrap core CSS —> <link href=«css/bootstrap.мин.css» rel=«stylesheet»> <!— Custom styles for this template —> <link href=«style.css» rel=«stylesheet»>

Это правильный способ загрузки стилей и скриптов в WordPress. Это хороший способ оптимизировать интернет, поскольку вы не загружаете один и тот же компонент несколько раз и не позволяете минимизировать и объединять файлы.

WordPress имеет возможность группировать повторяющиеся элементы в интернете. Таким образом, он предотвращает дублирование кода и оптимизирует ресурсы.

Постоянными элементами во всей сети обычно являются header, footer и sidebar. WordPress позволяет создавать файлы для каждого:

header.php

WordPress автоматически генерирует меню и заголовки страниц, поэтому из меню навигации все может быть включено в файл PHP.

Перейдите в папку темы (ту же самую, в которой вы создали предыдущие файлы) и создайте файл header.php.

Откройте файл index.php и вырезать HTML-код из тега DOCTYPE > до закрытия >< / NAV > для < / NAV> вставить его в header.php, как я покажу вам ниже:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <?php ?> <!DOCTYPE html> <html lang=«es»> <head>   <meta charset=«utf-8»>   <meta name=«viewport» content=«width=device-width, initial-scale=1, shrink-to-fit=no»>   <meta name=«description» content=«»>   <meta name=«author» content=«»>   <title>Blog Home — Start Bootstrap Template</title>   <!— Bootstrap core CSS —>   <link href=«css/bootstrap.мин.css» rel=«stylesheet»>   <!— Custom styles for this template —>   <link href=«style.css» rel=«stylesheet»> </head> <body>   <!— Navigation —>   <nav class=«navbar navbar-expand-lg navbar-dark bg-dark fixed-top»>     <div class=«container»>       <a class=«navbar-brand» href=«#»>Start Bootstrap</a>       <button class=«navbar-toggler» type=«button» data—toggle=«collapse» data—target=«#navbarResponsive» aria—controls=«navbarResponsive» aria—expanded=«false» aria—label=«Toggle navigation»>         <span class=«navbar-toggler-icon»></span>       </button>       <div class=«collapse navbar-collapse» id=«navbarResponsive»>         <ul class=«navbar-nav ml-auto»>           <li class=«nav-item active»>             <a class=«nav-link» href=«#»>Home               <span class=«sr-only»>(current)</span>             </а>           </li>           <li class=«nav-item»>             <a class=«nav-link» href=«#»>About</a>           </li>           <li class=«nav-item»>             <a class=«nav-link» href=«#»>Services</a>           </li>           <li class=«nav-item»>             <a class=«nav-link» href=«#»>Contact</a>           </li>         </ul>       </div>     </div>   </nav>

Цель состоит в том, чтобы отделить header, footer и sidebar от других файлов.

Чтобы упростить обработку стилей, добавьте в тег <body> функцию body_class ().

Теперь, в index.php, вы должны вызвать файл в начале документа следующим образом:

1 <?php get_header(); ?>

У вас уже есть связанный index и header, но в отдельных файлах.

Вам все равно нужно внести некоторые изменения, потому что заголовок не может быть простым HTML, потому что есть отдельные метаданные каждой страницы:

1 2 3 4 <meta name=«description» content=«»> <meta name=«author» content=«»> <title>Blog Home — Start Bootstrap Template</title>

Очистите эти строки, которые будут заменены функцией WordPress, специфичной для header: wp_head().

wp_head () заботится о отображении большинства тегов <head>. Даже те, которые вы удалили ранее. Помните, что вы должны добавить его в тег <head><head>.

Также некоторые коды, которые вы пишете в functions.php, отображаются в <head> с этой функцией.

Изготовленный на заказ Логос

Вы можете включить опцию пользовательского логотипа с несколькими строками кода, поместите это в functions.php:

1 2 3 4 5 6 7 8 9 10 11 12 13 add_theme_support( ‘custom-logo’, array(     //ВЫСОКИЙ     ‘height’      => 50,     //ШИРИНА     ‘width’       => 250,     // РАЗРЕШИТЬ ГИБКОСТЬ В РАЗМЕРЕ ‘flex-height’ => true,     ‘flex-width’  => true,     // ‘header-text’ => array( ‘site-title’, ‘site-description’ ), ) );     ?>

Теперь настройщик WordPress позволяет выбрать логотип из внешний вид > настроить > > идентификатор сайта>>.

Unity курсы 3d скачать creed объект player assets store games

Чтобы показать логотип, вы должны восстановить его из кода. Ve a header.php и находит и очищает строку, которая в настоящее время выражает имя сайта:

1 <a class=«navbar-brand» href=«#»>Start Bootstrap</a>

Вместо этого используйте функцию the_custom_logo (), чтобы получить логотип с включенным тегом <img><img>.

Несмотря на то, что с помощью этой функции вы уже можете отображать логотип, я рекомендую проверить совместимость функции (введенную из WordPress 4.5). Если он не поддерживается, вам нужно будет отобразить заголовок сайта.

Если он совместим, то вы покажете логотип. Если нет, вы можете показать логотип по умолчанию следующим образом:

1 2 3 4 5 6 7 8 9 10 11 12       // Проверить совместимость с пользовательскими логотипами       if( function_exists( ‘the_custom_logo’ ) ) {         // Убедитесь, что логотип установлен в настройщике WordPress         if(has_custom_logo()) {             // Если установлено, показать             the_custom_logo();         }         // Если нет, показать логотип по умолчанию.         else {             echo get_template_directory_uri().‘https://serv1.raiolanetworks.es/img/raiola.png’;         }       }

Меню

Чтобы создать меню в WordPress, вы должны зарегистрировать его в functions.php, а затем показать его в заголовке.php следующим образом:

1 2 3 4 add_action( ‘after_setup_theme’, ‘raiola_registrar_menu’ ); function raiola_registrar_menu() {     register_nav_menu( ‘menu-principal’, ‘Menu Principal’ ); }

Таким образом, Вы регистрируете меню, которое вы можете изменить из внешний вид > меню> на рабочем столе WordPress.

После регистрации вы можете отобразить его в нужном месте с помощью функции wp_nav_menu ().

Иди в Хидер.php и находит HTML-код меню:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div class=«collapse navbar-collapse» id=«navbarResponsive»>               <ul class=«navbar-nav ml-auto»>          <li class=«nav-item active»>            <a class=«nav-link» href=«#»>Home              <span class=«sr-only»>(current)</span>            </а>          </li>          <li class=«nav-item»>            <a class=«nav-link» href=«#»>About</a>          </li>          <li class=«nav-item»>            <a class=«nav-link» href=«#»>Services</a>          </li>          <li class=«nav-item»>            <a class=«nav-link» href=«#»>Contact</a>          </li>        </ul>      </div>

Он очищает HTML-код и вместо этого помещает функцию wp_nav_menu (). Установите аргументы для отображения меню, которое вы зарегистрировали в functions.php и сопоставляет классы CSS html шаблона:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 $menuraiola = array(             ‘menu’            => ‘menu-principal’,             ‘container’       => ‘div’,             ‘container_class’ => ‘collapse navbar-collapse’,             ‘container_id’    => ‘navbarResponsive’,             ‘menu_class’      => ‘navbar-nav ml-auto’,             ‘menu_id’         =>> «,             ‘echo’            => > true,             ‘fallback_cb’     => ‘wp_page_menu’,             ‘before’          => »,             ‘after’           => »,             ‘link_before’     => »,             ‘link_after’      => »,             ‘items_wrap’      => ‘<ul id=»%1$s» class=»%2$s»>%3$s</ul>’,             ‘item_spacing’    => ‘preserve’,             ‘depth’           => 0,             ‘walker’          => »,             ‘theme_location’  => »,         );         wp_nav_menu($menuraiola);         ?>

Поскольку исходный шаблон bootstrap требует класса CSS в<li> < li> меню, вам нужно добавить фильтр WordPress, чтобы отобразить его:

1 2 3 4 5 6 add_filter(‘nav_menu_css_class’ , ‘raiola_nav_class’ , 10 , 2); function raiola_nav_class($classes, $item){     $classes[] = ‘nav-link’;     return $classes; }

Теперь у вас есть динамическое и настраиваемое меню из WordPress.

Футер.php

Footer создается как header, вытаскивая код из index.php, чтобы поместить его в отдельный файл footer.php.

В той же папке темы создайте файл footer.php. Затем перейдите в index.php и идентифицирует текущий код footer в конце документа:

1 2 3 4 5 6   <footer class=«py-5 bg-dark»>     <div class=«container»>       <p class=«m-0 text-center text-white»>Copyright Your Website 2019</p>     </div>     <!— /.container —>   </footer>

Этот блок кода вы разрезаете его вместе с закрывающими тегами </body> и </body>< / html>. Вы вставляете его в footer.php, а также:

1 2 3 4 5 6 7 8 9 10 11 12 13 14   <!— Footer —>   <footer class=«py-5 bg-dark»>     <div class=«container»>       <p class=«m-0 text-center text-white»>Copyright Your Website 2019</p>     </div>     <!— /.container —>   </footer>   <!— Bootstrap core JavaScript —> </body> </html>

Чтобы показать footer, перейдите в конец index.php (где вы вырезали HTML-код) и вызываете footer.php с get_footer(); так:

1 <?php get_footer(); ?>

У вас уже есть WordPress footer готов. Если вы хотите придать ему немного динамизма, отредактируйте строку авторского права, чтобы показать заголовок сайта с помощью функции bloginfo () и текущий год с помощью PHP:

1 2 <p class=«m-0 text-center text-white»>Copyright <?php bloginfo(‘name’); echo ‘ ‘.date(‘и’); ?> > </p> <?php wp_footer(); ?>

Кроме того, чтобы улучшить совместимость темы, добавьте функцию WordPress wp_footer () (она выполняет функцию, аналогичную wp_head.php) непосредственно перед закрытием тега body.

Файл footer.php должен выглядеть так:

1 2 3 4 5 6 7 8 9 10 11 12 13 .page—numbers {     position: relative;     display: inline—block;     padding: .5рем .75rem;     margin—left: —1px;     line—height: 1.25;     color: #007bff;     background—color: #fff;     border: 1px solid #dee2e6; } .raiola—paginacion {     text—align: center; }

боковая панель.php

Боковая панель-это динамический элемент WordPress, который позволяет отображать настроенные виджеты в разделе Внешний вид > Виджеты>.

Чтобы настроить боковую панель, вы должны зарегистрировать ее в functions.php таким образом:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // ЗАРЕГИСТРИРОВАТЬ БОКОВУЮ ПАНЕЛЬ add_action( ‘widgets_init’, ‘raiola_registrar_sidebar’ ); function raiola_registrar_sidebar() {     register_sidebar( array(         ‘name’ =>‘Sidebar’,         ‘id’ => > ‘sidebar-raiola’,         ‘description’ => > ‘ боковая панель темы Raiola.’,         // DIVs боковой панели в HTML-документе         ‘before_widget’ => ‘<div id=»%1$s» class=»card my-4 %2$s»>’,         ‘after_widget’  => ‘</div></div>’,         ‘before_title’  => ‘<h5 class=»card-header»>’,         ‘after_title’   => ‘</h5> <div class=»card-body»>’,     ) ); }

При этом WordPress будет знать, что ваша тема имеет боковую панель. Теперь вы должны показать его в своем шаблоне. В папке темы создайте файл sidebar.php. Затем, в index.php, находит HTML-код, соответствующий боковой панели:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 <div class=«col-md-4»>       <!— Search Widget —>       <div class=«card my-4»>         <h5 class=«card-header»>Search</h5>         <div class=«card-body»>           <div class=«input-group»>             <input type=«text» class=«form-control» placeholder=«Search for…»>             <span class=«input-group-btn»>               <button class=«btn btn-secondary» type=«button»>Go!</button>             </span>           </div>         </div>       </div>       <!— Categories Widget —>       <div class=«card my-4»>         <h5 class=«card-header»>Categories</h5>         <div class=«card-body»>           <div class=«row»>             <div class=«col-lg-6»>               <ul class=«list-unstyled mb-0»>                 <li>                   <a href=«#»>Web Design</a>                 </li>                 <li>                   <a href=«#»>HTML</a>                 </li>                 <li>                   <a href=«#»>Freebies</a>                 </li>               </ul>             </div>             <div class=«col-lg-6»>               <ul class=«list-unstyled mb-0»>                 <li>                   <a href=«#»>JavaScript</a>                 </li>                 <li>                   <a href=«#»>CSS</a>                 </li>                 <li>                   <a href=«#»>Tutorials</a>                 </li>               </ul>             </div>           </div>         </div>       </div>       <!— Side Widget —>       <div class=«card my-4»>         <h5 class=«card-header»>Side Widget</h5>         <div class=«card-body»>           You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!         </div>       </div>     </div>

Разрежьте его и приклейте к боковой панели.php. В том месте, где вы вырезали боковую панель HTML в index.php, помещает функцию get_sidebar () для вызова sidebar.php:

1 2     <!— Sidebar Widgets Column —>     <?php get_sidebar(); ?>

Теперь на боковую панель.php, вы можете очистить статические HTML-виджеты и вместо этого вызвать виджеты WordPress с помощью функции dynamic_sidebar():

1 2 3 4 5     <div class=«col-md-4»>         <?php dynamic_sidebar( ‘sidebar-raiola’ ); ?>     </div>

У вас уже есть функциональная боковая панель, в которой будут отображаться виджеты, которые вы устанавливаете в разделе Внешний вид > Виджеты.

Нумерация страниц

Когда у вас есть больше статей, чем показано на странице, вы должны предоставить пользователю способ добраться до них. Для этого существует разбиение на страницы posts.

WordPress включает в себя собственную функцию подкачки paginate_links (), которая автоматически создает навигационные ссылки.

Чтобы поместить функцию в свою тему, перейдите в index.php и ищет блок HTML-кода статического разбиения на страницы:

1 2 3 4 5 6 7 8         <ul class=«pagination justify-content-center mb-4»>           <li class=«page-item»>            <a class=«page-link» href=«#»> Older</a>           </li>           <li class=«page-item disabled»>             <a class=«page-link» href=«#»>Newer </a>           </li>         </ul>

Замените функцию WordPress плюс тег <NAV> <NAV>, чтобы я мог настроить его и сделать его похожим на шаблон HTML:

1 2 3         <nav class=«raiola-paginacion»>             <?php echo paginate_links(); ?>         </nav>

Поскольку этот код не совсем такой же, как в шаблоне bootstrap, вам нужно применить немного CSS, чтобы сохранить стиль. En style.css, добавляет:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 .page—numbers {     position: relative;     display: inline—block;     padding: .5рем .75rem;     margin—left: —1px;     line—height: 1.25;     color: #007bff;     background—color: #fff;     border: 1px solid #dee2e6; } .raiola—paginacion {     text—align: center; } </style>> кодовый блок 25   <!— Footer —>   <footer class=«py-5 bg-dark»>     <div class=«container»>       <p class=«m-0 text-center text-white»>Copyright <?php bloginfo(‘name’); echo ‘ ‘.date(‘и’); ?> > </p>     </div>     <!— /.container —>   </footer>   <?php wp_footer(); ?>   <!— Bootstrap core JavaScript —> </body> </html>

У вас уже есть разбиение на страницы на теме.

React Native уроки icon flatlist components приложения view

Не забудьте удалить статическую разбиение на страницы HTML из шаблона, чтобы не запутать пользователя.

Несмотря на то, что тема уже распознается WordPress и может быть активирована, вам все равно нужны некоторые шаблоны для правильной работы. Например, в случае постов.

Но не волнуйтесь, вам не придется делать все вышеперечисленные шаги снова, потому что уже созданы общие компоненты (header, sidebar и footer).

В одиночном.php, вы будете использовать следующие функции:

  • the_title(): отображает название статьи.
  • the_author (): извлекает имя автора.
  • the_category (): создает список с категориями post.
  • the_date (): отображает дату публикации.
  • the_post_thumbnail (): извлекает выделенное изображение из поста.
  • the_content (): показывает тело post.

Чтобы создать шаблон posts, создайте файл с именем single.php в папке вашей темы.

В этом новом файле вы помещаете header и footer, вызывая их соответствующими методами:

1 2 3 4 5 <?php get_header(); ?> <!— Содержание сингла —> <?php get_footer(); ?>

Откройте файл post.HTML шаблона bootstrap, который вы загрузили в начале. Этот файл содержит HTML-макет post. Скопируйте блок кода, отображающий статью, без заголовка и без footer:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165   <!— Page Content —>   <div class=«container»>     <div class=«row»>       <!— Post Content Column —>       <div class=«col-lg-8»>         <!— Title —>         <h1 class=«mt-4»>Post Title</h1>         <!— Author —>         <p class=«lead»>           by           <a href=«#»>Start Bootstrap</a>         </p>         <hr>         <!— Date/Time —>         <p>Posted on January 1, 2019 at 12:00 PM</p>         <hr>         <!— Preview Image —>         <img class=«img-fluid rounded» src=«http://placehold.it/900×300» alt=«»>         <hr>         <!— Post Content —>         <p class=«lead»>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, vero, obcaecati, aut, error quam sapiente nemo saepe quibusdam sit excepturi nam quia corporis eligendi eos magni recusandae laborum minus inventore?</p>         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus.</p>         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure!</p>         <blockquote class=«blockquote»>           <p class=«mb-0»>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>           <footer class=«blockquote-footer»>Someone famous in             <cite title=«Source Title»>Source Title</cite>           </footer>         </blockquote>         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, nostrum, aliquid, animi, ut quas placeat totam sunt tempora commodi nihil ullam alias modi dicta saepe minima ab quo voluptatem obcaecati?</p>         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dolor quis. Sunt, ut, explicabo, aliquam tenetur ratione tempore quidem voluptates cupiditate voluptas illo saepe quaerat numquam recusandae? Qui, necessitatibus, est!</p>         <hr>         <!— Comments Form —>         <div class=«card my-4»>           <h5 class=«card-header»>Leave a Comment:</h5>           <div class=«card-body»>             <form>               <div class=«form-group»>                 <textarea class=«form-control» rows=«3»></textarea>               </div>               <button type=«submit» class=«btn btn-primary»>Submit</button>             </form>           </div>         </div>         <!— Single Comment —>         <div class=«media mb-4»>           <img class=«d-flex mr-3 rounded-circle» src=«http://placehold.it/50×50» alt=«»>           <div class=«media-body»>             <h5 class=«mt-0»>Commenter Name</h5>             Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.           </div>         </div>         <!— Comment with nested comments —>         <div class=«media mb-4»>           <img class=«d-flex mr-3 rounded-circle» src=«http://placehold.it/50×50» alt=«»>           <div class=«media-body»>             <h5 class=«mt-0»>Commenter Name</h5>             Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.             <div class=«media mt-4»>               <img class=«d-flex mr-3 rounded-circle» src=«http://placehold.it/50×50» alt=«»>               <div class=«media-body»>                 <h5 class=«mt-0»>Commenter Name</h5>                 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.               </div>             </div>             <div class=«media mt-4»>               <img class=«d-flex mr-3 rounded-circle» src=«http://placehold.it/50×50» alt=«»>               <div class=«media-body»>                 <h5 class=«mt-0»>Commenter Name</h5>                 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.               </div>             </div>           </div>         </div>       </div>       <!— Sidebar Widgets Column —>       <div class=«col-md-4»>         <!— Search Widget —>         <div class=«card my-4»>           <h5 class=«card-header»>Search</h5>           <div class=«card-body»>             <div class=«input-group»>               <input type=«text» class=«form-control» placeholder=«Search for…»>               <span class=«input-group-btn»>                 <button class=«btn btn-secondary» type=«button»>Go!</button>               </span>             </div>           </div>         </div>         <!— Categories Widget —>         <div class=«card my-4»>           <h5 class=«card-header»>Categories</h5>           <div class=«card-body»>             <div class=«row»>               <div class=«col-lg-6»>                 <ul class=«list-unstyled mb-0»>                   <li>                     <a href=«#»>Web Design</a>                   </li>                   <li>                     <a href=«#»>HTML</a>                   </li>                   <li>                     <a href=«#»>Freebies</a>                   </li>                 </ul>               </div>               <div class=«col-lg-6»>                 <ul class=«list-unstyled mb-0»>                   <li>                     <a href=«#»>JavaScript</a>                   </li>                   <li>                     <a href=«#»>CSS</a>                   </li>                   <li>                     <a href=«#»>Tutorials</a>                   </li>                 </ul>               </div>             </div>           </div>         </div>         <!— Side Widget —>         <div class=«card my-4»>           <h5 class=«card-header»>Side Widget</h5>           <div class=«card-body»>             You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!           </div>         </div>       </div>     </div>     <!— /.row —>   </div>   <!— /.container —>

Вы вставляете его в сингл.php между заголовком и footer. Немедленно удалите статическую боковую панель и вызовите динамическую с помощью функции get_sidebar():

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 <?php get_header(); ?> <!— Содержание сингла —>   <!— Page Content —>   <div class=«container»>     <div class=«row»>       <!— Post Content Column —>       <div class=«col-lg-8»>         <!— Title —>         <h1 class=«mt-4»>Post Title</h1>         <!— Author —>         <p class=«lead»>           by           <a href=«#»>Start Bootstrap</a>         </p>         <hr>         <!— Date/Time —>         <p>Posted on January 1, 2019 at 12:00 PM</p>         <hr>         <!— Preview Image —>         <img class=«img-fluid rounded» src=«http://placehold.it/900×300» alt=«»>         <hr>         <!— Post Content —>         <p class=«lead»>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, vero, obcaecati, aut, error quam sapiente nemo saepe quibusdam sit excepturi nam quia corporis eligendi eos magni recusandae laborum minus inventore?</p>         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus.</p>         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure!</p>         <blockquote class=«blockquote»>           <p class=«mb-0»>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>           <footer class=«blockquote-footer»>Someone famous in             <cite title=«Source Title»>Source Title</cite>           </footer>         </blockquote>         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, nostrum, aliquid, animi, ut quas placeat totam sunt tempora commodi nihil ullam alias modi dicta saepe minima ab quo voluptatem obcaecati?</p>         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dolor quis. Sunt, ut, explicabo, aliquam tenetur ratione tempore quidem voluptates cupiditate voluptas illo saepe quaerat numquam recusandae? Qui, necessitatibus, est!</p>         <hr>                </div>       <!— Sidebar Widgets Column —>       <?php get_sidebar(); ?>     </div>     <!— /.row —>   </div>   <!— /.container —> <?php get_footer(); ?>

Также удаляет содержимое комментариев. В этом посте я не буду освещать его творение, но я рекомендую вам увидеть системы комментариев, доступные для WordPress.

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

В одиночном.php, создает цикл WordPress для извлечения содержимого из базы данных от заголовка до боковой панели.

Цикл такой же, как вы использовали в index.php:

1 2 3 4 5 6 7 8 9 10 11 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <!— СОДЕРЖАНИЕ ПОСТА—>       <?php endwhile; else : ?> <!— ЕСЛИ НИЧЕГО НЕ НАЙДЕНО—>         <p>>извините, мы не нашли ningUN post.</p> <?php endif; ?> <!— КОНЕЦ ЦИКЛА—>

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

Статическое содержание после- Post Content — > > вы удаляете его, так как вместо этого вам нужно будет поместить the_content(). Сингл.php должен выглядеть так:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <?php get_header(); ?>   <!— Page Content —>   <div class=«container»>     <div class=«row»>       <!— Post Content Column —>       <div class=«col-lg-8»>       <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>         <!— Title —>         <h1 class=«mt-4»><?php the_title(); ?> ></h1>         <!— Author —>         <p class=«lead»>           В           <?php the_author(); ?>         </p>         <hr>         <!— Date/Time —>         <p>Опубликовано <?php the_date();?> > </p>         <hr>         <!— Preview Image —>         <?php the_post_thumbnail(‘destacada’,array( ‘class’ => ‘img-fluid rounded’ )); ?>         <hr>         <!— Post Content —>         <?php the_content(); ?>         <hr>         <?php endwhile; else : ?>             <p>>извините, мы не нашли ningUN post.</p>         <?php endif; ?>       </div>       <!— Sidebar Widgets Column —>       <?php get_sidebar(); ?>     </div>     <!— /.row —>   </div>   <!— /.container —> <?php get_footer(); ?>

Теперь вы можете просматривать сообщения без проблем.

Одноместный номер.php работает только для пользовательских сообщений и записей. К счастью, создать шаблон для страниц очень просто.

Различия между постами и страницами минимальны, поэтому код single.php можно взять за основу.

Откройте сингл.php и копирует все содержимое. Создайте файл page.php в папку темы и вставьте копию сингла.php.

Удаляет строку кода, показывающую категории сообщения (страницы не имеют категории), и сохраняет изменения. Файл page.php должен выглядеть так:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <?php get_header(); ?>   <!— Page Content —>   <div class=«container»>     <div class=«row»>       <!— Post Content Column —>       <div class=«col-lg-8»>       <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>         <!— Title —>         <h1 class=«mt-4»><?php the_title(); ?> ></h1>         <!— Author —>         <p class=«lead»>           В           <?php the_author(); ?>         </p>         <hr>         <!— Date/Time —>         <p>Опубликовано <?php the_date();?> > </p>         <hr>         <!— Preview Image —>         <?php the_post_thumbnail(‘destacada’,array( ‘class’ => ‘img-fluid rounded’ )); ?>         <hr>         <!— Post Content —>         <?php the_content(); ?>         <hr>         <?php endwhile; else : ?>             <p>>извините, мы не нашли ningUN post.</p>         <?php endif; ?>       </div>       <!— Sidebar Widgets Column —>       <?php get_sidebar(); ?>     </div>     <!— /.row —>   </div>   <!— /.container —> <?php get_footer(); ?>

Теперь вы можете правильно отображать страницы.

Файлы по дате и категориям необходимы для просмотра статей в хронологическом порядке и организованно. Без них вам придется перемещаться по всем страницам навигации.

Существуют специальные шаблоны для категорий, дат и тегов, но общий шаблон-archive.php. Как только у вас есть общий файл, у вас есть основа для создания других.

Создайте файл archive.php в папку темы и копирует все содержимое index.php. Затем найдите блок кода заголовка страницы:

1 2 3 <h1 class=«my-4»>Page Heading   <small>Secondary Text</small> </h1>

Этот блок кода, в index.php, вы удаляете его, потому что в index заголовки не отображаются таким образом.

В архив.php вы поместите заголовок в PHP с условным в зависимости от того, является ли это файлом по дате или файлом таксономии (категории, теги и т. д.):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15         <!— Название H1 от PКGINA —>         <h1 class=«my-4»> <?php         // Убедитесь, что файл имеет дату         if(get_the_archive_title()){           // Если это файл даты, показать заголовок даты           the_archive_title();         }         //Если это не дата         else{           // Показать название термина           single_term_title();                     } ?>       </h1>       <p><?php //Показать описание объекта        echo term_description(); ?> ></p>

Таким образом, вы проверяете, что если это файл по дате, отображается the_archive_title (); и если это категория или тег, отображается single_term_title(); и его описание с term_description();

Еще одним преимуществом WordPress является то, что, будучи PHP, HTML, CSS и JavaScript, вам не нужно компилировать , чтобы иметь устанавливаемый пакет. Просто поместите папку темы с файлами внутри сжатого файла .ZIP y subirlo a WordPress.

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

Скачать курс Посадка верстки и создание тем на CMS WordPress

О курсе на продажнике, по ссылке ниже:

https://www.udemy.com/course/cms-wordpress/

Вывод

Создание темы для WordPress (и любой другой CMS) простыми словами — это преобразование HTML-страницы в систему шаблонов.

С помощью этого урока у вас есть первая базовая тема, которую вы можете продолжать улучшать с помощью различных функций: от улучшения внешнего вида с помощью настройщика до создания панели параметров или custom post types.

Вы также можете настроить другие шаблоны HTML, выполнив шаги, упомянутые здесь.

Если у вас есть какие-либо сомнения по поводу процесса создания, не стесняйтесь оставлять комментарий с проблемой. Я уверен, что это можно исправить.

Оцените статью
Деловой журнал о различных способах заработать деньги в интернете и не только