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

Включить wp_footer и wp_head

Это довольно простые, но очень важные вещи. Убедитесь, что вы включили хук wp_head в файл header.php и хук wp_footer в файл footer.php. Эти хуки очень важны для работы плагинов с вашей темой. Кроме того, если вы включаете какие-либо функции, которые добавляются к этим хукам, они, очевидно, вам понадобятся.

Take Your Screenshot.png

Часто мне очень хочется выпустить свою тему из-за того, что я забываю включить основной файл screenshot.png с темой. Это изображение будет отображаться в вашем админке WP под вашим тегом Appearance.

Как правило, сделайте снимок экрана своей темы, обрежьте его примерно до размера 300 на 225 пикселей, сохраните его как png и назовите «скриншот». Затем поместите этого ребенка прямо в корень папки вашей темы.

Включить поддержку основной темы WordPress

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


// Add theme support
function themename_add_theme_support() {
    add_theme_support( 'post-formats', array( 'aside', 'video', 'image', 'gallery', 'quote') );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'automatic-feed-links' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption') );
    add_theme_support( 'title-tag' );
    add_theme_support( 'custom-header' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'customize-selective-refresh-widgets' );
}
add_action( 'after_setup_theme', 'themename_add_theme_support' );

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

Убедитесь, что разбивка на страницы работает

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

Установить резервное меню WordPress

Один из наиболее частых вопросов, которые я получаю от людей, помимо того, как установить свои изображения, – это как настроить их меню. Когда вы используете систему меню WP с перетаскиванием и перетаскиванием, она всегда идеально подходит для установки запасного варианта для вашего меню со ссылкой на панель администратора, чтобы пользователи могли видеть, как настроить свое меню. Не заставляйте пользователей гадать!

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

Сценарий постановки в очередь потоковых комментариев

Когда пользователи активируют цепочки комментариев в своем админке WordPress, это позволяет людям отвечать на свои комментарии в своем блоге. Вы, наверное, заметили, как некоторые темы перезагружают страницу, когда пользователь нажимает кнопку «ответить», что не очень удобно и профессионально. К счастью, WordPress поставляется со встроенным скриптом, поэтому цепочки комментариев могут работать без повторной загрузки страницы. Чтобы активировать его, просто добавьте следующий код в свой файл functions.php:

Убедитесь, что Javascript добавлен правильно

Важно правильно включать Javascript в свои темы, чтобы он не конфликтовал с какими-либо плагинами. Некоторое время назад я написал сообщение, показывающее, как добавить Javascript через ваш файл functions.php. Если вы все еще добавляете свой JS в файл header.php, обязательно прочтите наш пост о правильном добавлении Javascript в WordPress.

Протестируйте свою тему во всех «основных» браузерах

К сожалению, люди до сих пор используют старые браузеры, такие как Internet Explorer 10. Если вы разрабатываете темы WordPress, очень важно протестировать их во всех основных браузерах и убедиться, что они хорошо выглядят. Если ваш сайт плохо выглядит в Firefox, Safari или IE (не проверяйте только в Chrome), люди могут не загружать или покупать его, и если они это сделают, вы можете получить много обращений в службу поддержки с просьбой исправить тему и заставить ее работать. Ознакомьтесь с некоторыми отличными сайтами для тестирования браузеров ниже:

Включите файл 404.php

Это очень легко сделать, но при этом очень важно. Если вы не включили файл 404.php в свою тему, когда пользователь просматривает сайт и попадает на страницу с ошибкой 404, он может отображать содержимое вашего файла index.php или отображать сгенерированную сервером страницу 404, которая не соответствовать дизайну вашего сайта или предоставлять посетителю полезные ссылки. Это может быть плохо для SEO, но также очень недружелюбно для пользователей. Лично мне нравится включать заголовок, список страниц и, возможно, даже форму поиска. Вам решать, что включить, но убедитесь, что у вас есть файл.

Создавайте отдельные страницы для ваших типов сообщений

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

Если у вас есть настраиваемые типы сообщений, для которых вам не обязательно нужны отдельные сообщения (например, тип сообщения для слайдера или домашней страницы), вы должны определить эти типы сообщений, установив для параметра public значение false, а для параметра show_ui – значение true (см. функцию register_post_type для получения дополнительной информации),

Включить детали темы в таблицу стилей

Не забудьте включить детали темы в свою тему! Вам не только нужно имя, чтобы тема отображалась на вкладке «Внешний вид», но вы также захотите показать пользователям, какую версию темы они используют, и отдать себе должное. Ниже приведен образец деталей моей темы Total WordPress.


/*
 Theme Name: Total
 Version: 4.6
 Description: Premium WordPress theme by WPExplorer
 Author: WPExplorer
 Theme URI: https://themeforest.net/item/total-responsive-multipurpose-wordpress-theme/6339019
 Author URI: https://themeforest.net/user/wpexplorer
 License: Custom license
 License URI: http://themeforest.net/licenses/terms/regular
 Text Domain: total
 Tags: custom-colors, accessibility-ready, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready

Выравнивание стилей по умолчанию / Стили изображений

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


/*--------------------------*
/*  WordPress Alignments
/*--------------------------*/
.aligncenter{ display:block;  margin:0 auto}
.alignright{ float:right;  margin:10px 0 10px 10px}
.alignleft{ float:left;  margin:10px 10px 10px 0}
.floatleft{ float:left}
.floatright{ float:right}
.textcenter{ text-align:center}
.textright{ text-align:right}
.textleft{ text-align:left}

Стиль виджетов по умолчанию

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


/*--------------------------*
/*  WordPress Widget Styles
/*--------------------------*/
.widget {}
/* links widget */
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}
/* meta widget */
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}
/* pages widget */
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}
/* recent-posts widget */
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}
/* archives widget */
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}
/* tag-cloud widget */
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}
/* calendar widget */
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}
/* category widget */
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}
/* recent-comments widget */
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}
/* search widget */
#searchform {}
.widget_search {}
.screen-reader-text {}
/* text widget */
.textwidget {}
.widget_text {}

Проверить исходящие ссылки

Это не относится к темам премиум-класса, поскольку вы не должны включать в свою тему какие-либо ссылки (кроме, может быть, ссылки на документы или журнал изменений), но для тех, кто создает бесплатные темы, убедитесь, что ссылки, которые вы предоставляете в области администрирования и, что более важно, нижний колонтитул на самом деле куда-то идет. И, пожалуйста, не ссылайтесь на сайты, содержащие спам, и не включайте рекламные ссылки в свои темы. Если вы действительно хотите создать бесплатную тему, сделайте это, чтобы вернуть ее сообществу или увеличить свое присутствие. Вы не должны создавать темы только с целью получения или продажи обратных ссылок.

Убедитесь, что ваша форма поиска настроена

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

Проверьте все параметры своей темы

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

Усовершенствуйте файлы CSS вашей темы

Еще одна вещь, которую мне нравится делать, прежде чем я закончу со своей темой, – это запустить свой CSS через «генератор CSS», чтобы убедиться, что все мои отступы идеальны и нет ошибок. Иногда мне также нравится сжимать свой CSS, в зависимости от направленности темы. Я лично купил приложение для Mac под названием «Procssor», которое я использую, но вы можете просто выполнить поиск в Google «pretty css» или «css beautifier», и в Интернете есть много инструментов для этого.

Проверить валидацию на w3.org

Очевидно, вы хотите, чтобы в вашей теме не было синтаксических ошибок кода. Не только для того, чтобы вы могли гордиться своей работой, но и потому, что люди могут не купить вашу тему, если обнаружат много ошибок. Правильная тема демонстрирует профессионализм и опыт, поэтому обязательно выполните несколько простых проверок, чтобы убедиться, что она соответствует требованиям. Перейдите к W3 Online Validator и введите URL-адрес демонстрации вашей темы, чтобы проверить наличие ошибок. Обязательно проверьте все основные страницы (домашняя страница, архивы, поиск, отдельные сообщения, отдельные типы сообщений, 404 и т.д. ).

Тестирование с помощью WordPress.org «Модульный тест темы»

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

Источник записи: https://www.wpexplorer.com