Чек-лист по натяжке вёрстки на WP

Дневник разработчика
Содержание

Введение

Начало работы подразумевает, что у нас в наличии есть всё необходимое:

  • готовая html-вёрстка;
  • редактор кода (он же IDE);
  • установлен и настроен локальный сервер.

Про локальный сервер — не принципиально. Можете работать сразу же на хостинге. Это не влияет на порядок действий и прочее.

  • По редактору кода — использую VSCode
  • По Локальному серверу — Open Server

Да, локальный сервер, который я рекомендую — для винды, а не для мака. Но исторически сложилось, что я пользуюсь windows. Если у вас другая OS — погуглите самостоятельно альтернативные решения, пожалуйста.

Установка WP на локальном сервере

тут всё банально и просто. идёте на сайт вордпресс, скачиваете дистрибутив в последней версии и ставите на локалку. Если это сложно для вас — откройте ютубчик и там найдите видео инструкции. Их уже и без меня 100500 штук.

Создание основных файлов будущей темы: style.css и index.php

Я не любою underscores, потому что слишком много там приходится чистить и удалять. Проще говоря я почти ничего оттуда не использую и как результат — делать тему на базе их заготовки — геморрой.

Но это лично для меня так. Возможно вам этот сервис понравится и вы будете использовать именно его, для создания стартовой темы под ваш сайт на WP. Это всё вкусовщина. Не так ли?

Лично я делаю темы ручками, потому что это приятней, экологичней и дороже, а кому не нравится — не заказывайте ╭∩╮(ಠಠ)╭∩╮

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

В папке мы создадим два файла, без которых наша тема не будет работать:

style.css — основной файл темы. Исторически так сложилось, что в этом файле записывается базовая информация по теме — имя, ссылка на автора и т п + можно еще стили оформления сюда же писать.

index.php — главная страница темы, которая открывается во всех непонятных вордпрессу ситуациях. Она должна быть в каждой теме, иначе сайт не будет работать.

В итоге папка с вашей темой на начальном этапе должна выглядеть примерно вот так:

Чек-лист по натяжке вёрстки на WP
Начальная структура ЛЮБОЙ темы на WordPress, как минимум, состоит из двух файлов.

Важно добавить, что в стилевой файл нужно записать основные данные нашей темы. Без этого вордпресс ничего про неё не узнает.

Чек-лист по натяжке вёрстки на WP

Если вы всё сделали правильно, в админке вордпресса увидите вашу новую тему и информацию о ней.

Чек-лист по натяжке вёрстки на WP

Кстати! папку с темой нужно перенести в вордпресс в определённое место — папку \wp-content\themes\ваша папка с темой

Добавляем скриншот темы

С этим пукнтом все просто. Идете в любую предустановленную тему на вашем WP и смотрите размеры и название для скриншота темы. он в корне папки с темой лежит и делаете такой же файл, но из той картинки, которую захотите опубликовать, как обложку темы.

Название картинки должно быть screenshot.png и никак иначе!

Если всё сделано правильно, в детальной информации про тему появится обложка.

Чек-лист по натяжке вёрстки на WP

Теперь структура нашей темы выглядит вот так:

Чек-лист по натяжке вёрстки на WP

Перенос вспомогательных файлов из вёрстки

Под вспомогательными файлами я подразумеваю стили, картинки, шрифты и скрипты-js.

Это значит что HTML-страницы мы пока не переносим! Ими будем заниматься позже.

Названия папок, которые мы будем переносить из вёрстки можно оставить как есть. так вы сведёте к минимуму необходимость изменения html-разметки после переносе, но я обычно придерживаюсь некоторых правил именования файлов и папок. Это опять таки вкусовщина. Делайте так, как вам больше нравится.

Итак вернёмся к деталям именования файлов.

папка img — тут мы храним все изображения, иконки и прочие графические элементы сайта. Обычно внутри этой папки я разделяю всё на иконки, контентные изображения и декоративные (фоновые картинки и прочие элементы, которые добавляются не через разметку, а по средствам css)/

Некоторые именуют папку с картинками в теме полным названием images, но я считаю, что это слишком длинное название, которое лучше сокращать. Это уже стало стандартом разработки.

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

Ну а остальное вы можете видеть на картинке снизу. там все понятно.

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

Чек-лист по натяжке вёрстки на WP

Перенос верстки главной страницы index.html в index.php

Копипастим = копируем всю нашу разметку с главной страницы свёрстанного проекта в файл темы index.php Дальше будем его ковырять и резать на части, раскидывая по отдельным файлам части разметки.

После того как мы перенесли вёрстку в файл темы, нам потребуется перенастроить пути к картинкам, что бы они отображались нправильно. Это я говорю про теги <img> и фотовые картинки, которые присутствуют в разметке-html. А еще мы не должны забывать что у нас под капотом есть движок WordPress и мы теперь можем потихоньку оживлять даннные в разметке, т е выводить динамически изменяющиеся значения в коде сайта.

Оживление отдельных данных в разметке

Корректировка адресов хранения изображений, используемых в html-разметке

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

<img class="seo-block__picture" src="img/services/2.jpg" alt="Фото услуги">

На вот такой вариант:

<img class="seo-block__picture" src="<?php echo get_stylesheet_directory_uri(); ?>/img/services/2.jpg" alt="Фото услуги">

Ну в общем вы видите разницу, верно? я делаю подстановку фрагмента кода вида <?php echo get_stylesheet_directory_uri(); ?> в путь до файла с изображением. тем самым, мы получаем актуальный и рабочий путь до файла. Вордпресс интерпретирует его, отталкиваясь от расположения файла style.css находящегося в корне нашей темы, подставляя стандартный путь от домена к этмоу файлу, ну а дальше уже идёт наша папочка с картинками и остальное как и было.

Чек-лист по натяжке вёрстки на WP
Корректировка путей к картинкам в index.php

Надеюсь понятно объяснил ¯\_(ツ)_/¯

Просто это тот самый момент, когда проще показать, чем описать ( ͡ᵔ ͜ʖ ͡ᵔ )

Динамический вывод языка сайта в head при помощи конструкции

Чек-лист по натяжке вёрстки на WP

Динамический вывод кодировки страницы сайта при помощи конструкции

Чек-лист по натяжке вёрстки на WP

Динамический вывод заголовка страницы = title при помощи конструкции

Чек-лист по натяжке вёрстки на WP

Динамический вывод года, заголовка сайта и его текстового описания в подвале

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

Чек-лист по натяжке вёрстки на WP

Нарезка = разделение html-вёрстки на типовые части, группировка, перенос и подключение в шаблоне

Итак. подходим к кое чему интересному.

Для начала давайте определимся что у нас есть:

файл index.php — это наш базовый шаблон темы, в нем находится html разметка главной страницы сайта. Условно эту страницу можно разделить на ТРИ большие части — ШАПКА, Контентная часть и ПОДВАЛ.

Но не стоит забывать что есть еще и другие странички, которые присутствуют в вёрстке. Мы до них ещё не дошли, но они есть. У них есть такие же шапки и подвалы, как на главной. Это важно помнить.

А еще у нас есть ресурсы в виде папок со стилями, скриптами и шрифтами, котоыре мы должны подключить к ШАБЛОНУ (файл index.php).

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

Не забывайте о целях!

Мы всё это начали (разработку темы), что бы оживить сайт. Оживить = вывести на страницах повторяющиеся блоки кода, вставить динамические данные и настроить удобное управление информацией на страницах сайта из удобно панели WordPress.

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

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

То как мы делаем что-то, так мы делаем всё!

какой то мудрец…имя вставлю позже. но сути это не меняет.

Выносим шапку и подвал из разметки в отдельные файлы и подключаем их

Для начала определимся с повторяющимися фрагментами кода под названием ШАПКА сайта и ПОДВАЛ сайта. На большинстве сайтов они сквозные = повторяются на всех страницах сайта, поэтому мы создаем в теме отдельные файлы:

  • header.php
  • footer.php

Из скопированной разметки вырезаем верхнюю и нижнюю части, которые, по нашему мнению повторяются, и вставляем в соответствующие файлы.

На место вырезанных фрагментов кода вставляем код подключения наших файлов: функции <?php wp_head() ?> и <?php wp_footer() ?> в файле index.php

Теперь можно проверить работает ли сайт. Для этого просто откройте страницу в браузере. Если вы работаете на локальном сервере — не забудьте включить сервер, что бы ваш вордпресс работал. А то мало ли (¬‿¬)

Вырезаем сайдбар из контентной части и сохраняем в отдельный файл

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

Для этого создаём отдельный файл sidebar.php и вставляем в него вырезанный фрагмент разметки с файла index.php. А на место вырезанного фрагмента html-кода вставляем конструкцию для подключения <?php get_sidebar(); ?>

Начинаем программировать тему

Создание файла functions.php

Подключение стилей и скриптов темы в файле functions.php

Переподключение jquery (опционально, если требуется)

Чек-лист по натяжке вёрстки на WP

Вы же в курсе для чего нужен был PHP изначально? Шаблонизация, верно! так что используем этот замечательный инструмент по назначению ヽ༼◐ل͜◑༽ノ

Создаём все страницы, которые будут у нас сайте (создание соответствующих типов записей в админке сайта — страницы — новая страница и сохранить)

Чек-лист по натяжке вёрстки на WP

Определяемся с количеством областей для вывода меню, а так же с их местами в шаблоне сайта.

Регистрируем области для меню в файле functions.php при помощи конструкции

Чек-лист по натяжке вёрстки на WP

Создаём динамические меню

Создаём динамические меню для сайта в административной панели сайта и добавляем туда все созданные страницы сайта.

Чек-лист по натяжке вёрстки на WP

Выводим меню в шаблоне сайта

Выводим меню в шаблоне сайта при помощи конструкции

Чек-лист по натяжке вёрстки на WP

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

Например, если мы назовём меню «Главное меню»

Чек-лист по натяжке вёрстки на WP

И выведем его в шаблоне, в итоге получим вот такие классы и идентификаторы в разметке

Чек-лист по натяжке вёрстки на WP

Поэтому используйте английские именования. например вот так

Чек-лист по натяжке вёрстки на WP

Что бы классы и id были корректными и читабельными, как тут

Чек-лист по натяжке вёрстки на WP

Настраиваем разметку меню и стилизацию меню

Настраиваем разметку меню, которое генерирует WP — для этого используем следующую конструкцию:

Настраиваем = корректируем стилизацию активного пункта меню, по средствам следующей конструкции

Чек-лист по натяжке вёрстки на WP
Находим в стилях параметры для активных пунктов меню (если они стилизованы) и добавляем новые классы, либо заменяем старые классы на новые.

Дополняем функцию динамического вывода меню в шаблоне УСЛОВИЕМ, для того что бы если меню на сайте отключено — ничего не выводилось в шапке. В противном случае у нас все равно будет выводиться пустой блок

Чек-лист по натяжке вёрстки на WP
Если в админке тен активного меню, то мы не выводим ничего — это достигается за счёт условий в функции вывода меню в шаблоне
Чек-лист по натяжке вёрстки на WP
Оборачиваем параметры функции в условие if

Аналогично программируем и другие области вывода меню.

ОПЦИОНАЛЬНО может потребоваться добавить в меню дополнительные элементы, например мобильный поиск, который виден только на телефонах.
В этом случае нам потребуется преопределить шаблон меню, используя следующую конструкцию:

Чек-лист по натяжке вёрстки на WP

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

Чек-лист по натяжке вёрстки на WP

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

Кода много, поэтому сохраню код в текстовом виде. гляди пригодится кому ))

<?php
                  $mobile_search = '<li id="mobile-search" class="hidden-lg hidden-md">
                  <form method="get" class="mobile-search">
                    <input type="search" class="form-control" placeholder="Search...">
                    <button type="submit" class="search-button">
                      <i class="icon icon_search"></i>
                    </button>
                  </form>
                </li>';
                  if ( has_nav_menu( 'header_menu' ) ) {
                    wp_nav_menu( array(
                      'theme_location' => 'header_menu',
                      'container' => false,
                      'menu_class' => 'nav navbar-nav',
                      'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s' . $mobile_search . '</ul>'
                    ) );
                  }

                  ?>

ОПЦИОНАЛЬНО! если меню у вас на сайте двухуровневое, как вариант, пригодится понимание работы следующего параметра

Чек-лист по натяжке вёрстки на WP

Во-первых нужно указать аргумент 'walker' => new Your_Walker_Function.

Your_Walker_Function — это наш новый класс, который строит меню. Чтобы не изобретать велосипед, её можно скопировать из оригинала, см. класс Walker_Nav_Menu. Копируем код класса и просто поправляем его там где нужно.

Вот пример, добавляющий глубину меню и четные/нечетные CSS классы к элементам меню (обоим ul и li):

// свой класс построения меню:
class magomra_walker_nav_menu extends Walker_Nav_Menu {

	// add classes to ul sub-menus
	function start_lvl( &$output, $depth ) {
		// depth dependent classes
		$indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
		$display_depth = ( $depth + 1); // because it counts the first submenu as 0
		$classes = array(
			'sub-menu',
			( $display_depth % 2  ? 'menu-odd' : 'menu-even' ),
			( $display_depth >=2 ? 'sub-sub-menu' : '' ),
			'menu-depth-' . $display_depth
			);
		$class_names = implode( ' ', $classes );

		// build html
		$output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";
	}

	// add main/sub classes to li's and links
	 function start_el( &$output, $item, $depth, $args ) {
		global $wp_query;
		$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent

		// depth dependent classes
		$depth_classes = array(
			( $depth == 0 ? 'main-menu-item' : 'sub-menu-item' ),
			( $depth >=2 ? 'sub-sub-menu-item' : '' ),
			( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ),
			'menu-item-depth-' . $depth
		);
		$depth_class_names = esc_attr( implode( ' ', $depth_classes ) );

		// passed classes
		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
		$class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );

		// build html
		$output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">';

		// link attributes
		$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
		$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
		$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
		$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
		$attributes .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';

		$item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
			$args->before,
			$attributes,
			$args->link_before,
			apply_filters( 'the_title', $item->title, $item->ID ),
			$args->link_after,
			$args->after
		);

		// build html
		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

// И там, где нужно выводим меню так:
function magomra_nav_menu( $menu_id ) {
	// main navigation menu
	$args = array(
		'theme_location'    => 'navigation_menu_primary',
		'container'     => 'div',
		'container_id'      => 'top-navigation-primary',
		'container_class'   => 'top-navigation',
		'menu_class'        => 'menu main-menu menu-depth-0 menu-even', 
		'echo'          => true,
		'items_wrap'        => '<ul id="%1$s" class="%2$s">%3$s</ul>',
		'depth'         => 10, 
		'walker'        => new magomra_walker_nav_menu
	);

	// print menu
	wp_nav_menu( $args );
}

А вот пример того как изменить класс для тега <ul> у вложенного меню второго уровня (подкатегории в меню = выпадающие пункты):

Чек-лист по натяжке вёрстки на WP
Чек-лист по натяжке вёрстки на WP

При этом не забывайте что в файле functions.php для соответствующего меню понадобится создать объект по аналогии с этим параметром:

Чек-лист по натяжке вёрстки на WP

Статья в процессе написания. Пишу по мере прохождения курса.

Добавляем файлы для типовых шаблонов страниц сайта

Все страницы на сайте я условно делю на типовые и нетиповые, проще говоря на повторяющиеся и уникальные.

К типовым страницам чаще всего можно отнести страницы со статьями, с новостями, контактные странички и прочие. Они обычно простые по своей структуре и имеют очень много повторяющихся секций.

Уникальные страницы — это промо страницы с нетипичной компоновкой блоков, которые нигде больше на сайте не повторяются. Например главная страничка, которая оформлена в виде лендинга и т п.

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

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

Теперь обо всем подробнее и с примерами.

Добавляем в тему файлы для типовых шаблонов страниц:

  • single.php — файл с описанием шаблона для статьи (для записи)
  • page.php — файл шаблона для страницы
  • template-parts — папка для хранения шаблонов уникальных страниц
  • 404.php — файл шаблона для страницы ошибки 404
  • archive.php — файл шаблона для страницы со списком статей
  • search.php — файл шаблона для страницы с результатами поиска

К слову, стоит упомянуть про типы постов. У WordPress есть два стандартных типа постов:

  • Страница — page
  • Запись — post

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

Теперь WordPress распределяет вывод страниц сай сайте согласно своим правилам:

При попытке просмотра любой страницы на нашем сайте — открывается файл page.php

При попытке перехода на страничку блога с анонсами статей — файл archive.php (при условии что ссылка ведёт именно на анонсы статей, а не является страничкой в админке сайта!)

При попытке посмотреть статью — открывается страничка single.php

Всё отлично если так. Если что то не работает — проверьте правильно ли вы проименовали файлы.

Для полноты картины предлагаю ознакомиться со схемой работы шаблонов в WordPress

https://misha.agency/images/2012/06/wordrpess-ierarhiya-faylov.png

Создание папки для нестандартных шаблонов

Теперь пора создать отдельную папку, в которую мы будем складывать все нестандартные шаблоны — page-templates.

Если вы всё сделали, то получите структуру темы примерно вот такого вида:

Чек-лист по натяжке вёрстки на WP
Доработанная тема для сайта на WordPress. Слева расположены файлы для шаблонов публикаций, а справа служебные файлы темы и вспомогательные папки.

Перенос верстки в соответствующие шаблоны

Мы берём только разметку контента, а шапку, сайдбар и подвал подключаем при помощи php кода, как на странице index.php

Вывод контента для статей в шаблоне single.php

Тут мы вставляем php-констуркции в следующие части разметки:

Объявляем переменную отвечающую за вывод отдельного поста — the_post();

выводим заголовк поста — <?php the_title(); ?>

выводим контент поста — <?php the_content(); ?>

выводми категорию поста — <?php the_category( ‘, ‘); ?>

Чек-лист по натяжке вёрстки на WP
Обратите внимание на то какой параметр я вывел в скобках функции вывода категорий — там стоит запятая и отступ. Это нужно для читабельного вывода нескольких категорий у статьи.
Чек-лист по натяжке вёрстки на WP
Вывод контента статьи. тут всё просто, без каких либо доп. параметров.
Чек-лист по натяжке вёрстки на WP
Вывод метки в статье выполнен с доп. параметрами. Первый параметр — лейбл «Метки» который мы успешно обнулили, а второй параметр — это разделитель между тегами (мы задаём пустой параметр).
Чек-лист по натяжке вёрстки на WP
Ввод даты публикации поста выводим с соответствующими параметрами. В этом варианте выводится дата вида «16 ноября 2020 21:22» т е с указанием времени и даты.

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

Я тоже долго не мог понять почему все вроде как правильно, но не работает ┌ʕ º ʖ̯ º ʔ┐

Юрий Ронин