Wordpress для верстальщика

Владислав Балабанович, Konsus

Wordpress для верстальщика

Владислав Балабанович




У нас есть

  1. Знание основ PHP
  2. Установленный Wordpress
  3. Верстка – github.com
  4. Стартовая тема _underscore
  5. Плагины

Основы PHP

Курс на Codeacademy – PHP

Курс на tuts+ – PHP Fundamentals

Список плагинов

  1. Advanced Custom Fields
  2. Custom post type UI
  3. Option tree

Генерируем стартовую тему

Основные шаги

  1. Перенос ассетов верстки в папку темы

header.php

wp_head() всегда должен быть перед </head> иначе будет нарушена работа многих плагинов, которые используют этот хук, чтобы добавить свои коды в <head<. Это: стили (styles), скрипты (scripts) и метатеги.

			...
				<?php wp_head(); ?>
			</head>
		

Путь до файлов

			<?php get_stylesheet_directory_uri(); ?>
		

Было:

href="css/style.css"

src="img/logo.png"

Стало:

href="<?php echo get_stylesheet_directory_uri(); ?>/css/style.css"

src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png"

Правильное подключение стилей и скриптов

Скрипты через wp_enqueue_script()

Стили через wp_enqueue_style()

footer.php

Всегда используйте wp_footer() перед закрывающим тегом </body> иначе множество плагинов не будут работать корректно, потому что они используют этот хук для вставки различных JS и других кодов.

			...
				<?php wp_footer(); ?>
			</body>
			</html>
		

Теги шаблонов

Список всех тегов

Вывод меню

			<?php
				wp_nav_menu( array(
					'theme_location' => 'primary',
					'menu_class'     => 'menu__list',
				) );
			?>
		

Подробнее про wp_nav_menu()

Page Templates

https://developer.wordpress.org

			<?php /* Template Name: Example Template */ ?>
		

Вывод записей. Запрос:

			<?php
				$args = array(
					'posts_per_page' => 5,
				);
				$query = new WP_Query( $args );
			?>
		

Подробнее про WP_Query

Вывод записей. Выводим:

			<?php
				while ( $query->have_posts() ) {
					$query->the_post();
					the_title(); // выведем заголовок поста
				}
			?>
		

Вывод записей. Выводим:

			<?php
				while ( $query->have_posts() ) {
					$query->the_post();
					include 'template-parts/content-single.php';
					// подставляем шаблон
				}
			?>
		

Custom post type

При помощи функции register_post_type()

При помощи плагина Custom Post Type UI

Вывод custom post type

			<?php
				$args = array(
					'posts_per_page' => 5,
					'post_type' => 'project',
				);
				$query = new WP_Query( $args );
			?>
		

Вывод custom post type

			<?php
				while ( $query->have_posts() ) {
					$query->the_post();
					include 'template-parts/content-project.php';
					// подставляем шаблон
				}
			?>
		

Шаблон для cutom post type

Берем slug произвольного типа записи и добавляем к single.php –>
single-project.php

Custom fields

При помощи плагина Advanced Custom Fields

Вывод произвольных полей на фронтенде – get_field(), the_field()

Theme options

Создаем страницу с настройками темы с помощью плагина OptionTree

«Прячем» плагин внутрь темы. Пишем в function.php:

			define('OT_THEME_MODE', apply_filters('ot_theme_mode', false));
			require_once ('option-tree/ot-loader.php');
			add_filter( 'ot_theme_mode', '__return_true' );
			add_filter( 'ot_show_pages', '__return_false' );
		

Вывод настроек во фронтенд

			<?php echo ot_get_option('option_name')?>
		

Полезные плагины

  1. WPide
  2. Page Builder by SiteOrigin
  3. BackWPup - WordPress Backup Plugin
  4. Display Widgets
  5. Maintenance

Полезные ссылки

  1. Wordpress Codex
  2. Wordpress Developer Resources
  3. Автоустановщик плагинов
  4. Theme check plugin
  5. WP Tutorials
  6. Wordpress tips & tricks
  7. WordPress Theme Submission Requirements

Владислав Балабанович

Презентация

http://goo.gl/jEs5fV

Fork me on GitHub