Создайте шаблон 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 PDF, HTML, email
wordpress создание темы

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

 

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

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

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

 

Создание основы для темы WordPress

В настоящее время у вас есть только один простой 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 курсы

Внешний вид

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

Индекс.php

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

редактор создания тем wordpress

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

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

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

Цикл входов

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

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

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

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

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

функцию в PHP

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

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

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

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

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

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

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

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

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

Kotlin обучение

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

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

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

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

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

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

Registrar scripts

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

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

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

 

Части шаблонов: header, footer и sidebar

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

создание дочерней темы wordpress

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

header.php

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Unity курс

настройщик WordPress

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

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

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

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

Меню

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

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

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

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

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

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

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

Футер.php

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

react native курсы

разбиение на страницы на теме

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

 

Создать шаблон для постов в теме WordPress (single.php)

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

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

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

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

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

создать шаблон posts

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

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

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

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

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

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

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

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

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

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

 

Создать шаблон страницы (page.php)

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

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

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

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

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

 

Создание страниц файлов и категорий

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

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

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

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

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

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

 

Как упаковать тему WordPress

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

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