Вы также можете заказать:
Верстку
Шаблон
Плагин

Разработка шаблона для создания тем для WordPress

Немного предисловия

Разрабатывая различные шаблоны под WordPress я задумался над тем ЧТО если есть заготовки HTML шаблонов то почему бы мне не создать под себя заготовку для шаблонов под данную CMS, так называемый каркас.

О создании именно шаблонов я писать не буду т.к этой информации в интернете много, приступлю сразу к делу.

Создаю папку шаблона

project/
project/css/
project/js/
project/inc/
project/images/
project/style.css
project/functions.php
project/index.php
project/page.php
project/single.php
project/search.php
project/404.php

Это основные файлы, далее их можно дополнить

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

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

Функционал необходимый для большинства мои проектов:
  1. Подключение скриптов и стилей
  2. Поддержка миниатюр (как правило со своими размерами)
  3. Произвольная обрезка текста the_excerpt()
  4. Поддержка Woocommerce (в большинстве случаев)

Начинаю прописывать функции:

Изначально я давно подобрал для себя скрипты которые будут присутствовать в большинстве проектов, такие как – Fancybox, Slick, валидация полей формы (jquery.validate.min.js), маска телефона и т.п. Такой набор обычно у меня в большинстве проектов используется.


function theme_name_scripts() {
wp_enqueue_style( 'style-css', get_stylesheet_uri() );
wp_enqueue_style( 'fonts-css', 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i' );
wp_enqueue_style( 'awesone-css', get_template_directory_uri() . '/css/font-awesome.min.css' );
wp_enqueue_style( 'slick-css', get_template_directory_uri() . '/js/slick/slick.css' );
wp_enqueue_style( 'form-css', get_template_directory_uri() . '/css/form.css' );
wp_enqueue_style( 'fancybox-css', get_template_directory_uri() . '/css/jquery.fancybox.css' );

if(is_single() or is_page()){
wp_enqueue_style( 'single-css', get_template_directory_uri() . '/css/single.css' );
}
wp_enqueue_script('jquery');
wp_enqueue_script( 'fancybox-js', get_template_directory_uri() . '/js/jquery.fancybox.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'validate-js', get_template_directory_uri() . '/js/jquery.validate.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'mask-js', get_template_directory_uri() . '/js/mask.js', array(), '1.0.0', true );
wp_enqueue_script( 'form-js', get_template_directory_uri() . '/js/form.js', array(), '1.0.0', true );
wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/js/slick/slick.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'mainscript-js', get_template_directory_uri() . '/js/mainscript.js', array(), '1.0.0', true );
}

Делаю поддержку миниатюр в шаблоне


if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 450, 450 ); // размер миниатюры поста по умолчанию
}

// Регистрируем новые размеры
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'home_img', 360, 360, array('center', 'top') );
add_image_size( 'category_img', 240, 360, array('center', 'top') );
add_image_size( 'page_img',480, 620, array('center', 'top') );
}

Добавляю функцию вывода миниатюры

function site_post_thumbnail($size='home_thumb'){
	
if( has_post_thumbnail() ) { ?>
	<a class="image" href="<?php the_permalink(); ?>">
		<?php the_post_thumbnail($size); ?>
	</a>
<? }
else { ?>
	<a class="images" href="<?php the_permalink(); ?>">
		<img class="noimage" src="<?php echo get_bloginfo("template_url");?>/images/default-660x540.png" alt="noimage">
	</a>
<?php 
	}
}

До сих пор не понимаю почему разработчики не уберут это надоедливое слово “Рубрика” из заголовков категорий, т.к в шаблонах их удаляют практически все. Ну да ладно, убрать их недолго, что я и сделаю)

	add_filter( 'get_the_archive_title', 'theme_remove_name_cat' );
	 function theme_remove_name_cat( $title ){
		if ( is_category() ) {
		$title = single_cat_title( '', false );
		} elseif ( is_tag() ) {
		$title = single_tag_title( '', false );
		}
		return $title;
	 }

Далее, чтобы следовать современным стандартам подключу поддержку SVG

function theme_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'theme_mime_types');

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

add_action( 'after_setup_theme', 'theme_woocommerce_true' );
function theme_woocommerce_true() {
add_theme_support( 'woocommerce' );
}

Ах да! Совсем забыл про обрезку текста)
Я не любитель изобретать то что уже создано поэтому я использую функцию kama_excerpt которая описана тут
Для многих проектов (по крайней мере моих) такая заготовка для шаблонов под WP подойдет во многих случаях, единственное вам надо еще, будет создать саму структуру для файлов index, page, single и т.п но думаю это уже не составит проблем а в будущем я планирую написать подробную заметку о “создании шаблона на wordpress”

Оставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*