Тема на WordPress?

Question

[Михаил]

Всем привет!
Тут подумал, что выражение "Верстать тему для WordPress" неправильное.
В теме нет вёрстки. В теме только набор файлов шаблонов с набором функций, которые только подключают файлы друг к другу. Если мы просто установили тему, то сайт пустой. Чтобы сделать сайт, надо не делать тему, а надо верстать сайт. Надо взять index.php и сверстать там главную страницу. Только вынести header и footer в отдельные файлы и подключить их к index.php. Потом сверстать вторую страницу по типу index.php (например about.php) . и т.д.
А файлы типа
comments.php
single.php
archive.php
и прочее можно вообще выкинуть, т.к. у меня на сайте не будет записей (это не блог) , не будет комментариев и тому подобное...
Оставить только style.css и functions.php чтобы подключить стили и скрипты.
Так ? Или нет ? Вроде так...
А если придётся добавлять потом материалы ?
То придется в вёрстку лезть.
Тогда как?
Или всё таки делать шаблон для записей , а в шаблоне страницы цикл Wordpress , чтобы новые записи потом было удобно добавлять ...
Сайт предполагается не блог, но возможны повторяющиеся материалы
что-то я запутался уже

Answer 1

[Орхан Гасанлы]

Здравствуйте!
1) Настоятельно рекомендую изучить иерархию шаблонов ВП.
2) Для главной страницы нужен не index.php, а front-page.php (для статичной страницы), а для динамичной (ваши последние записи) - blog.php. index.php "примет на себя удар", когда нужных шаблонов не окажется.
3) functions.php & style.css само собой оставляете
4)

А если придётся добавлять потом материалы ?

Смотря, что вы подразумеваете под материалами. Если это записи, то конечно же нужен шаблон single.php & archive.php. Можно еще добавить category.php
Если под материалами вы имеете ввиду страницы, то нужен шаблон page.php Собственно говоря, если нужен индивидуальный шаблон для страницы, то можно называть шаблоны page-ID.php

В общем, гляньте на иерархию шаблонов и все вопросы само собой устранятся

Comments

[Михаил]

1. По поводу иерархии шаблонов - я понимаю основную идею.
То, что файлы подключают друг друга.
Скажем index.php подключает в себя Хедер, Сайдбар, Футер
с помощью функций
get_header();
get_sidebar();
get_footer();
А те в свою очередь тоже могут включать еще какие-то файлы и т.д.
То, что контент тоже формируется из шаблонов. И еще архивы записей - из цикла WordPress.

2. Я установил тему на основе Underscores
там нет файла front-page.php , там вот такой набор файлов:

archive.php
comments.php
footer.php
functions.php
header.php
index.php
page.php
readme.txt
rtl.css
screenshot.png
search.php
sidebar.php
single.php
style.css

и плюс еще в папке template-parts несколько файлов
но это конечно не проблема, можно создать файл front-page.php

----------------

У меня основной вопрос такой : Вёрстку писать куда ?
В файле front-page.php писать вёрстку ?
В файлах темы писать вёрстку ?
Или нет ?
Дело в том, что когда человек просто установил WordPress, создал страницу и с помощью визуального конструктора сделал на странице какой-то контент, например картинки и текст, то файлы темы это не затрагивает. Человек может поменять тему, и его контент останется. Только изменится его отображение.

Вот меня это и интересует.
Только я хочу не с помощью визуального конструктора , а с помощью кода писать вёрстку.

Я сделал тему на основе Underscores, и теперь мне надо в самой теме создавать файлы страниц ? Или я могу не трогать файлы темы , и создать страницы в админке WordPress? Например Главная, О нас, Контакты и т.д. И там же в интерфейсе Wordpress , где создаются страницы , прописывать вёрстку. А шаблон страницы выбирать для всех - Базовый. Страницы все равно будут отличаться конечно друг от друга. Потому что вёрстка будет у них разная.
Или так не правильно , и надо делать шаблон для каждой страницы именно в самой теме ?
Создать front-page.php для главной страницы, потом создать отдельный шаблон about.php для страницы О нас и так далее для каждой страницы. И в этих файлах писать вёрстку.

--------------------

Я смотрел видео в Ютубе, как натягивают верстку на Wordpress. Берут index.html, делают из него index.php, то что в хедере переносят в header.php , то что в футере переносят в footer.php и т.д. Это получается неправильный подход ? Если Вы говорите что

" index.php "примет на себя удар", когда нужных шаблонов не окажется."

И вообще - что значит "когда нужных шаблонов не окажется" ? Это как ? Имеется ввиду какой-то сбой на сервере произойдёт ? и он не сможет найти нужный шаблон, и вот тогда он отправит пользователю index.php

[Орхан Гасанлы]

Ссылка на полезные источники:
1) разработка темы - https://codex.wordpress.org/Theme_Development
2) иерархия шаблонов - https://wphierarchy.com/
https://developer.wordpress.org/themes/basics/temp...

Вёрстку писать куда ?

Если верстка заключается в том, что у вас есть некий набор html, css & js файлов, то конечно же всю статику нужно подключить через functions.php А саму верстку нужно интегрировать в каждый из шаблонов.
Например, archive.php page.php index.php single.php и т.д. Просто в эту верстку интегрировать основной цикл ВП, который собвственно говоря, уже есть в теме underscores

В файлах темы писать вёрстку ?

Конечно. А куда вы собираетесь писать-то?

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

Прочитайте про иерархию шаблонов.
Когда человек создал контент не важно пусть, при помощи виз. редактора или ввел через Gutenberg или через TinyMCE и т.д. Это все хранится в БД. Дальше соответствующий шаблон отобразит содержимое из БД, если можно так выразится....
Если это страница, то page.php Если запись - single.php и т.д. Если нет ни одного из этих шаблонов, то index.php и т.д.

"когда нужных шаблонов не окажется"

Посмотрите визуальную иерархию шаблонов.... все станет понятно... Вот, например, вы говорите, что в underscores нет шаблона front-page.php Соответственно, так как этого шаблона нет и вы его не создавали, то контент страницы отобразится в Index.php А если этот шаблон имеется, то отобразится в front-page.php

Для наглядности, чтобы не быть голословным... установите плагин Query Monitor и откройте нужную страницу, тогда поймете какой шаблон используется в текущий момент для данной страницы.
https://ru.wordpress.org/plugins/query-monitor/

[Михаил]

спасибо большое !
хорошо , я еще раз просмотрю эту тему про иерархию, и еще все таки один вопр
про страницы
если 5 страниц, то для главной front-page.php
для О нас - about.php
для еще какой-то - xxx.php
и т.д. ? так надо делать ?

[Орхан Гасанлы]

Михаил,

если 5 страниц, то для главной front-page.php
для О нас - about.php
для еще какой-то - xxx.php
и т.д. ? так надо делать ?

Не поверите, но иерархия шаблонов даст вам ответ и на этот вопрос)
Во-первых, следующий момент - отличаются ли по дизайну (не только по контенту) вышеперечисленные страницы. Т.е. вы можете обойтись наличием одного шаблона page.php, которая будет отображать все вышеперечисленные страницы. Или же можете создать шаблоны для каждой из страниц. Как вам и подсказали в следующем ответе -
page-about.php
page-contact.php

Если вам нужен некий общий шаблон, который будет по контенту отличаться, то шаблона page.php будет достаточно. Если вам нужно, чтобы шаблон главной был отдельным, то конечно же front-page.php нужен.

Вам также правильно подсказали, что использование ACF облегчит вашу работу. Некоторые предпочитают carbon fields, но как по мне ACF проще. Конечно же можно пойти еще дальше и прикрутить фреймворк... Например, redux и др.

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

Как мне кажется, легче самому создать свою тему и понимать, что вы в ней делаете, чем разбираться в чужом коде)

[Михаил]

вот спасибо! все разъяснили ! пошел читать иерархию!

[Михаил]

ну вот , начал делать (вернее продолжил) тему

Сделал index.php, header.php, footer.php, style.css
Сделал front-page.php (с небольшой разметкой на HTML) - страница нормально отображается , при этом и хедер и футер отображаются нормально.
Сделал page-about.php - не отображается
Сделал page-contacts.php - не отображается
При этом в адресной строке браузера отображаются соответствующие названия страниц (page-about или contacts-about), и хедер с футером отображаются нормально.
Т.е. не отображается только контент самих страниц page-about и page-contacts
Вот код страницы page-about.php
<?php get_header(); ?>

<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>


Привет
Это page-about


<?php get_footer(); ?>

Мне подсказали :

Потому шаблон page-about.php будет работать для страницы со слагом about, а не со слагом page-about

Я так подумал, что мне ведь не надо для каждой страницы делать шаблон.
Я тогда вставил в папку с темой файл page.php
Чтобы все страницы были по этому шаблону.
Тогда получается мне не нужны файлы page-about.php и page-contacts.php
Так как же тогда создавать сами страницы ? не пойму ...
В админке Вордпресса ? или как ?

Хотелось бы не в админке делать , а в файлах темы , но тогда как называть файлы страниц надо ?
about.php и contacts.php ?

Попробовал так сделать, но все равно не отображаются страницы

[Михаил]

кажется понял, почему не видны страницы
создал в админке Вордпресса две страницы
about и contacts , и страницы стали отображаться.

Но это ж придется вертску писать в админке, а хотелось бы в файлах темы

Как быть ?

[Орхан Гасанлы]

Михаил,
так стоп)))
верстка - html, css, js внедряется в шаблон, а не в админку. Обычно, если вы используете виз. редактор типа Visual Composer, то тогда да, верстку, т.е. html, css, js он кодирует в base64 и пихает в БД. Соответственно, при надобности оттуда достает.

Вероятнее всего, вы не прочитали ссылку про theme development или например, как правильно создать шаблон и привязать его к странице.
Существует разные способы привязки шаблона (прочитав про иерархию шаблонов вы это узнали бы). Например, page-ID.php page-slug.php или любое-название.рнр , но тогда в шаблон добавляете
/* Template name: About */
а дальше в админке на странице About выбираете шаблон с одноименным названием.

кажется понял, почему не видны страницы
создал в админке Вордпресса две страницы
about и contacts , и страницы стали отображаться.

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

Вот, небольшой набор подсказок для начала создания темы....
https://yadi.sk/d/fbctg9cf_zJXdQ

[Михаил]

Насколько я понял, я создаю шаблон page-about.php и в нем пишу всю разметку html, а в админке я создаю страницу about , и просто выбираю шаблон about и ничего в этой странице в админке не пишу , т.к. вся разметка написана в шаблоне

[Орхан Гасанлы]

Михаил, ну смотря какие цели вы преследуете...
опять-таки... если под версткой подразумевается и весь контент страницы, то конечно же лучше контент перекинуть в админку при помощи кастомных полей ACF, а в местах где должен быть контент в шаблоне интегрировать поля ACF. Тогда весь контент будет редактируемым. Иначе у вас будет хардкодинг... и владелец сайта, чтобы отредактировать сайт должен залезть в файлы темы по фтп и отредактировать... (для начала должен изчучить html, css, js))))
Установите плагин ACF. Интегрируйте кастомные поля в шаблон. Перекиньте контент (текст, картинки и т.д.) в админку. Job done!

[Михаил]

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




и еще , получается , что я могу контент страницы писать как в админке, тамк и в файле темы, и они в общем-то одинаково будут выводиться на страницу (как я показал на скринах)

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

[Орхан Гасанлы]

Михаил,

и еще , получается , что я могу контент страницы писать как в админке, тамк и в файле темы, и они в общем-то одинаково будут выводиться на страницу (как я показал на скринах)

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

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

у меня на фронте сайта на странице вверху, над хедером почему-то возникает текст из шаблона этой страницы, те комментарии, которые в начале шаблона записаны,

Логично, судя по вашему скрину вы комментарии не обрамили <?php ?>
Должно быть так:
<?php /* Template Name: Bla */ ?>

Answer 2

[Николай Миронов]

Здравствуйте, Михаил
Увидел ваш комментарий к предыдущему ответу, и возможно, понял в чем проблема. Вы взяли за основу стартовую тему _underscores, которая имеет много достоинств, но слишком громоздкая/сложная для создания небольших неблоговых проектов.

1) Используйте шаблоны страниц, как основу для вашего проекта. Создайте файлы типа page-about.php, page-services.php ... Т.е отдельная верстка под каждую уникальную страницу. Чтобы эти файлы "подцепились", нужно прописать, что это шаблоны страниц, для этого в первой строчке каждого файла укажите <?php //Template Name: Название шаблона ?>

2) Для того чтобы соединить контент и верстку используйте плагин Advanced Custom Fields. Он позволит создать нужное количество различных полей для управления всеми частями страницы.

Вот что видно на фронте:


Вот как выглядит управление в админке:


Вот код для верхнего баннера:

Вместо конкретной надписи стоит вызов функций the_field() (плагин ACF)

3) В принципе, можно не брать стартовую тему за основу, а создать свою на основе готовой верстки.

Comments

[Михаил]

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

[Николай Миронов]

Поделюсь своим базовым набором. У меня есть микро-тема, в которой всего 5 файлов: style.css, index.php, functions.php header.php footer.php пример проекта на такой теме: www.eppingerberatung.de

Вот весь functions.php:

<?php 
//Theme supports - включаю миниатюры записей и title-tag для корректной работы  SEO-тайтлов страниц
add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
	
//Load styles & scripts - Корректно подключаю стили и скрипты темы, array('jquery') нужен, чтобы на сайте была подгружена библиотика jQuery
function theme_scripts() {
	wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array(), '0.99' );
	wp_enqueue_script( 'theme-scripts', get_template_directory_uri() . '/js/theme.js', array('jquery') );
}

add_action( 'wp_enqueue_scripts', 'theme_scripts' );	

//Adding Menu to theme - подключаю поддержку нав. меню и регистрирую место под меню
add_action( 'after_setup_theme', 'theme_register_nav_menu' );
function theme_register_nav_menu() {
	register_nav_menu( 'primary', 'Primary Menu' );
}

Код в header.php - присутствуют все необходимые вп-функции

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>

Ну а в футере, главное не забыть wp_footer();

Для проектов побольше использую стартовые темы на бутстрапе.

[Михаил]

ух ты! класс! да, минимальная тема, и вперёд! отлично! а какие стартовые темы на бутстрапе можете порекомендовать ?

[Николай Миронов]

_Tk от Themekraft -> Bootstrap3
Understrap -> Bootstrap 4

Сам использую модифицированную версию _Tk

[Михаил]

а надо дочернюю делать ?

[Михаил]

посмотрел некоторые стартовые темы
в understrap очень много всяких файлов
в wp-bootstrap-starter тоже много
вот в теме material-design-wp - мало , только самые основные

[Николай Миронов]

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

[Михаил]

Всем очень большой спасиб ! Пошел изучать дальше