В мире WordPress разработки стандарты кодирования играют ключевую роль в создании надежной и стабильной кодовой базы. Они представляют собой набор правил и соглашений, которые программисты используют при написании кода. Стандарты кодирования WordPress помогают улучшить совместную работу, упростить обслуживание кода и гарантировать его общую безотказность.
![Стандарты кодирования WordPress:](https://genius.courses/wp-content/uploads/2024/07/wordpress-php-coding-standards-1024x570.webp)
Преимущества использования стандартов кодирования:
- Повышение качества кода: Стандарты кодирования помогают избежать распространенных ошибок и недочетов, делая код более качественным и устойчивым к сбоям.
- Эффективная работа в команде: Особенно актуальны стандарты кодирования в проектах WordPress, где над одним сайтом могут работать сразу несколько разработчиков. Стандарты способствуют эффективному взаимодействию внутри команды, снижают вероятность возникновения конфликтов и ускоряют процесс разработки.
- Согласованность и преемственность: Соблюдение стандартов кодирования обеспечивает единообразие кода в разных проектах. Это позволяет разработчикам легко переключаться между различными кодовыми базами без необходимости тратить время на изучение специфических стилей кодирования каждого проекта.
- Понятность и сопровождаемость кода: Благодаря стандартам код становится более читаемым и понятным для других разработчиков. Это упрощает процесс внесения изменений и доработок в будущем, как тем, кто писал изначальный код, так и другим специалистам.
Официальные стандарты кодирования WordPress охватывают пять ключевых областей для обеспечения согласованной и эффективной разработки:
- PHP: Стандарты для серверного кода, гарантирующие его единообразие и безошибочную работу.
- HTML: Правила создания структурированной и семантической разметки HTML-страниц.
- JavaScript: Стандарты для эффективной реализации клиентской функциональности на JavaScript.
- CSS: Определяют согласованный подход к стилизации элементов сайта.
- Доступность: Стандарты направлены на создание инклюзивных и удобных для всех пользователей сайтов, учитывая потребности людей с ограниченными возможностями.
В этой статье мы подробно рассмотрим эти стандарты кодирования, чтобы помочь вам создавать сайты в соответствии с ними, а также, возможно, стать частью сообщества разработчиков WordPress.
Cтандарты кодирования на PHP
Помимо обеспечения функциональности и внешнего вида сайта, грамотная разработка на WordPress требует соблюдения стандартов кодирования. Эти стандарты, конкретно для PHP, гарантируют чистоту, читаемость и согласованность кода. Они обязательны для ядра WordPress и настоятельно рекомендуются для тем и плагинов. Давайте разберемся, из чего состоят эти стандарты.
Основные категории стандартов кодирования PHP в WordPress:
Общие стандарты:
Определяют расположение открывающих и закрывающих PHP-тегов, рекомендуют использование одинарных или двойных кавычек, а также регламентируют запись инструкций include
и require
.
// Открывающие и закрывающие теги PHP в HTML:
// Размещайте теги открытие/закрытие на своих строках.
# Верно
function foo() {
?>
<div>
<?php
echo esc_html (
bar (
$param1,
$param2
)
);
?>
</div>
<?php
}
# Не верно
if ( $x === $y ) { ?>
<div>
<!-- HTML content -->
<?php }
// Избегайте сокращённых тегов PHP
# Верно
<?php ... ?>
<?php esc_html( $x ); ?>
# Не верно
<? ... ?>
<? esc_html( $x ); ?>
// Написание include/require:
// Избегайте include_once, так как он продолжает выполнение даже если файл не найден.
// Не используйте скобки вокруг пути к файлу.
# Верно
require_once ABSPATH . 'file-name.php';
# Не верно
require_once __DIR__ . '/file-name.php';
include_once ( ABSPATH . 'file-name.php' );
Именование:
Устанавливают правила именования функций, переменных, констант и хуков (точек подключения) с использованием строгих форматов.
# Верно
// Используйте строчные буквы для имен функций и переменных.
function genius_function( $some_variable ) {}
// Используйте прописные буквы для имен констант.
define('MAX_AGE', 60);
# Не надо
// Использование camelCase.
function geniusFunction( $someVariable ) {}
Отступы:
Регламентируют использование пробелов, отступов и удаление лишних пробелов в конце строк.
# Верно
// Ставьте пробелы после запятых.
$colors = ['red', 'green', 'blue'];
// Ставьте пробелы с обеих сторон от открывающих и закрывающих скобок управляющих структур.
foreach ( $foo as $bar ) { ...
// Определение функции:
function my_function() { ...
// Логические сравнения:
if ( ! $foo ) { ...
// Доступ к элементам массива:
$a = $foo['bar'];
$a = $foo[ $bar ];
# Не верно
$colors = ['red','green','blue'];
foreach($foo as $bar){ ...
function my_function(){ ...
if(!$foo) { ...
$a = $foo[ ‘bar’ ];
$a = $foo[$bar];
Форматирование:
Определяют стиль фигурных скобок, объявления массивов, многострочных вызовов функций, использование оператора «spread» (распространение) и многое другое.
# Верно
// Используйте следующий стиль для скобок.
if ( condition ) {
action();
} elseif ( condition2 ) {
action2();
} else {
default_action();
}
// Объявляйте массивы, используя длинный синтаксис.
$numbers_long = array(1, 2, 3, 4, 5);
// В многострочных вызовах функций каждый параметр должен занимать только одну строку.
// Многострочные значения параметров должны быть присвоены переменной, а переменная передана в вызов функции.
$data = array(
'user_name' => 'John Doe',
'email' => '[email protected]',
'address' => '123 Main Street, Cityville',
);
$greeting_message = sprintf(
/* translation function. %s maps to User's name */
__( 'Hello, %s!', 'yourtextdomain' ),
$data['user_name']
);
$result = some_function(
$data,
$greeting_message,
/* translation function %s maps to city name*/
sprintf( __( 'User resides in %s.' ), 'Cityville' )
);
// Магические константы должны быть написаны прописными буквами.
// Константа ::class должна быть написана строчными буквами без пробелов вокруг оператора разрешения области видимости (::).
add_action( my_action, array( __CLASS__, my_method ) );
add_action( my_action, array( My_Class::class, my_method ) );
/* Добавьте пробел или новую строку с соответствующим отступом перед оператором spread.
Не должно быть пробела между оператором spread и переменной/функцией, к которой он применяется.
Не должно быть пробела между операторами spread и reference, когда они комбинируются. */
# Верно
function some_func( &...$arg1 ) {
bar( ...$arg2 );
bar(
array( ...$arg3 ),
...array_values( $array_vals )
);
}
# Не верно
function some_func( & ... $arg1 ) {
bar(...
$arg2 );
bar(
array( ...$arg3 ),...array_values( $array_vals )
);
}
Операторы контроля видимости, пространства имен и импорта:
Регламентируют объявление пространств имен и использование инструкций use
.
// Каждое объявление пространства имен должно содержать слова с заглавной буквы, разделенные подчеркиванием.
namespace My_Genius_ProjectUtilities;
// Импорт use может использовать псевдонимы для предотвращения конфликтов имен.
use Project_NameFeatureClass_C as Aliased_Class_C;
Объектно-ориентированное программирование (ООП):
Определяют правила использования структур объектов, применение директив use trait
, обязательное объявление видимости элементов класса, порядок модификаторов видимости и правил создания экземпляров объектов.
// Операторы trait use должны быть в начале класса.
// Trait use должны иметь по крайней мере одну строку до и после первого и последнего операторов.
// Всегда объявляйте видимость.
class Foo {
use Bar_Trait;
public $baz = true;
...
}
// Всегда используйте скобки при создании нового экземпляра объекта.
// Не добавляйте пробел между именем класса и открывающей скобкой.
$foo = new Foo();
Конструкции управления:
Включают использование elseif
вместо else if
, а также рекомендации по применению условия Yoda (размещение переменной справа в логических сравнениях).
// "Легальное" сравнение:
if ( true === $result ) {
// Делаем что-то с $result
}
// Но опечатка, подобная этой, может ускользнуть:
if ( $result = true ) {
// Мы всегда окажемся здесь
}
Операторы:
Охватывают правила использования тернарного оператора, оператора управления ошибками (@
) и операторов инкремента/декремента.
// Всегда используйте тернарные операторы для проверки, если утверждение истинно, а не ложно.
$programming_language = ( 'PHP' === $language ) ? 'cool' : 'meh';
// Предпочитайте пре-инкремент/декремент пост-инкременту/декременту для автономных операторов.
// Верно
--$a;
// Не нужно
$a--;
База данных: Предоставляют инструкции по выполнению запросов к базе данных и форматированию SQL-выражений.
Соблюдение этих стандартов кодирования при разработке на WordPress обеспечит вам:
- Чистый и читаемый код: Легко поддерживаемый и понятный другим разработчикам.
- Согласованность кода: Позволяет легко переключаться между разными проектами WordPress.
- Меньше ошибок: Стандарты помогают избежать частых ошибок кодирования.
- Эффективная работа в команде: Единый стиль кода упрощает совместную работу над проектами.
Помимо основных стандартов, существуют дополнительные рекомендации, такие как использование понятных значений флагов в аргументах функций и избежание устаревшей функции extract()
.
Встроенная документация (Inline Documentation) для PHP
Встроенная документация для PHP в WordPress базируется на стандартах PHPDoc и используется для документирования кода. Оно включает описание функций, классов, методов, параметров, возвращаемых значений и других аспектов кода. Встроенная документация помогает разработчикам понимать и поддерживать код, а также генерировать автоматическую документацию с помощью инструментов, таких как phpDocumentor.
Документирование функций и методов включает использование аннотаций для описания параметров, возвращаемых значений и других деталей:
/**
* Краткое описание функции.
*
* Подробное описание функции, включая информацию о параметрах,
* возвращаемых значениях и других аспектах.
*
* @param string $param1 Краткое описание параметра 1.
* @param int $param2 Краткое описание параметра 2.
* @return bool Описание возвращаемого значения.
*/
function my_function( $param1, $param2 ) {
// Тело функции
}
Документирование классов и свойств включает описание класса и его свойств:
/**
* Краткое описание класса.
*
* Подробное описание класса, включая информацию о его назначении,
* методах и других аспектах.
*/
class My_Class {
/**
* Краткое описание свойства.
*
* Подробное описание свойства, включая информацию о его типе и назначении.
*
* @var string
*/
public $property;
/**
* Краткое описание метода.
*
* Подробное описание метода, включая информацию о параметрах,
* возвращаемых значениях и других аспектах.
*
* @param string $param1 Краткое описание параметра 1.
* @param int $param2 Краткое описание параметра 2.
* @return bool Описание возвращаемого значения.
*/
public function my_method( $param1, $param2 ) {
// Тело метода
}
}
Фильтры и экшены (хуки) в WordPress также должны быть документированы для понимания их назначения и использования:
/**
* Краткое описание фильтра.
*
* Подробное описание фильтра, включая информацию о параметрах,
* передаваемых в фильтр, и возвращаемом значении.
*
* @param mixed $value Описание параметра.
* @return mixed Описание возвращаемого значения.
*/
apply_filters( 'my_filter', $value );
/**
* Краткое описание экшена.
*
* Подробное описание экшена, включая информацию о параметрах,
* передаваемых в экшен.
*
* @param mixed $param1 Описание параметра 1.
* @param int $param2 Описание параметра 2.
*/
do_action( 'my_action', $param1, $param2 );
Пример документирования:
/**
* Краткое описание функции.
*
* Подробное описание функции, включая информацию о параметрах,
* возвращаемых значениях и других аспектах.
*
* @param string $name Имя пользователя.
* @param int $age Возраст пользователя.
* @return string Приветственное сообщение.
*/
function greet_user( $name, $age ) {
return "Привет, $name! Тебе $age лет.";
}
/**
* Краткое описание класса.
*
* Подробное описание класса, включая информацию о его назначении,
* методах и других аспектах.
*/
class User {
/**
* Имя пользователя.
*
* @var string
*/
public $name;
/**
* Возраст пользователя.
*
* @var int
*/
public $age;
/**
* Создает нового пользователя.
*
* @param string $name Имя пользователя.
* @param int $age Возраст пользователя.
*/
public function __construct( $name, $age ) {
$this->name = $name;
$this->age = $age;
}
/**
* Возвращает приветственное сообщение для пользователя.
*
* @return string Приветственное сообщение.
*/
public function get_greeting() {
return "Привет, $this->name! Тебе $this->age лет.";
}
}
Эти примеры показывают, как документировать различные элементы кода с использованием стандартов PHPDoc. Встроенная документация помогает разработчикам понимать код, упрощает его поддержку и позволяет генерировать автоматическую документацию.
Погрузитесь в увлекательный мир веб разработки и дизайна с моими эксклюзивными курсами на Udemy! Я их разработал с душой и учел все нюансы. Сейчас активированы скидки до 90%! Получите доступ к знаниям высокого качества от $9!
Стандарты кодирования JavaScript
JavaScript в WordPress используется для добавления интерактивности на сайты, создания пользовательских интерфейсов и улучшения взаимодействия с пользователями. Кодирование JavaScript в WordPress следует определенным стандартам и практикам, чтобы обеспечить совместимость, безопасность и производительность кода.
Основы работы с JavaScript в WordPress
JavaScript в WordPress подключается и используется через файлы скриптов и стилей, которые могут быть добавлены через functions.php
или плагины. Основные методы для работы с JavaScript в WordPress включают регистрацию и подключение скриптов и стилей, а также использование встроенных функций и возможностей.
Для регистрации и подключения JavaScript файлов используйте функции wp_enqueue_script
и wp_register_script
. Это позволяет WordPress корректно подключать ваши скрипты и управлять их зависимостями.
function my_theme_enqueue_scripts() {
// Регистрация скрипта
wp_register_script(
'my-custom-script', // Уникальный идентификатор скрипта
get_template_directory_uri() . '/js/my-custom-script.js', // Путь к файлу скрипта
array('jquery'), // Зависимости от других скриптов (например, jQuery)
'1.0.0', // Версия скрипта
true // Загружать скрипт в футере
);
// Подключение скрипта
wp_enqueue_script('my-custom-script');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
Для передачи данных из PHP в JavaScript можно использовать wp_localize_script
. Это полезно для передачи переменных или настроек из PHP в ваш JavaScript файл.
function my_theme_enqueue_scripts() {
wp_register_script(
'my-custom-script',
get_template_directory_uri() . '/js/my-custom-script.js',
array('jquery'),
'1.0.0',
true
);
wp_enqueue_script('my-custom-script');
// Передача данных в JavaScript
wp_localize_script(
'my-custom-script',
'myScriptVars',
array(
'ajaxUrl' => admin_url('admin-ajax.php'), // URL для AJAX запросов
'someData' => 'Пример данных из PHP' // Пример данных для использования в JavaScript
)
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
В JavaScript доступ к переданным данным можно получить так:
console.log(myScriptVars.ajaxUrl); // Выводит URL для AJAX запросов
console.log(myScriptVars.someData); // Выводит данные из PHP
В основе стандартов JavaScript под WordPress лежит руководство по стилю JavaScript от jQuery, появившееся в 2012 году. Этот набор правил форматирования кода улучшает его читаемость и единообразие. Изначально он был разработан для проектов jQuery, но благодаря своей эффективности получил широкое распространение и за пределами этой библиотеки.
![Стандарты кодирования WordPress:](https://genius.courses/wp-content/uploads/2024/07/1_tsqlgfBBb32ZLx1Y6bwzKA.webp)
Хотя рекомендации jQuery во многом повлияли на стандарты WordPress, существуют и некоторые ключевые различия для разработки на WordPress:
- В WordPress для объявления строк используются одиночные кавычки (»).
- Операторы
case
в блокахswitch
отступают на один уровень. - Содержимое функций имеет одинаковый отступ, включая обёртки замыканий (closure wrappers) во всем файле.
- Некоторые правила использования пробелов отличаются для согласования со стандартами PHP в WordPress, например, использование табуляции или отступов.
- Жесткое ограничение jQuery в 100 символов на строку рекомендуется, но не является обязательным для WordPress.
Стандарты JavaScript кодирования WordPress охватывают следующие области:
Рефакторинг кода
.Отступы в коде
, включая объявления объектов, массивов и вызовы функций:
/ Объявление объектов
// Верно
var obj = {
name: 'John',
age: 27,
height: 179
}
// Не верно
var obj = {
name: 'John', age: 27,
height: 179
}
// Массивы и вызовы функций
// Используйте дополнительные пробелы вокруг элементов и аргументов
array = [ 1, 2 ];
foo( arg1, arg2 );
- Использование
точек с запятой
(semicolon):
// Всегда используйте точки с запятой
array = [ 1, 2 ];
Отступы и переносы строк
, включая блоки и фигурные скобки, многострочные выражения и цепочные вызовы методов:
// Используйте табуляцию для отступов
( function ( $ ) {
// Выражения с отступом
function doSomething() {
// Выражения с отступом
}
} )( jQuery );
// Блоки if, else, for, while и try должны располагаться на
// нескольких строках
if ( condition ) {
// Выражения
} else if ( ( condition && condition ) || condition ) {
// Выражения
} else {
// Выражения
}
// Перенос строки должен произойти после оператора, если выражение
// слишком длинное, чтобы поместиться на одной строке
var html = '<p>The sum of ' + a + ' and ' + b + ' plus ' + c +
' is ' + ( a + b + c ) + '</p>';
/* Если цепочка вызовов методов слишком длинная
для одной строки, используйте один вызов на строке.
Первый вызов должен быть на отдельной строке от объекта,
на котором вызываются методы. */
elements
.addClass( 'foo' )
.children()
.html( 'hello' )
.end()
.appendTo( 'body' );
Присваивания и глобальные переменные
, включая объявление переменных с помощьюconst
иlet
, объявление переменных с помощьюvar
, глобальные переменные и распространенные библиотеки.Правила именования
, такие как сокращения и акронимы, определения классов и константы:
// Сокращения должны писаться в camelCase
// Все буквы акронимов должны быть заглавными
const userId = 1;
const currentDOMDocument = window.document;
// Определение класса должно использовать UpperCamelCaseConvention.
class Human {
...
}
//Константа
const SESSION_DURATION = 60
Равенство:
Используйте строгие проверки равенства/неравенства (===
и!==
) вместо абстрактных проверок (==
и!=
).
if ( name === "John" ) {
...
}
if ( result !== false ) {
...
}
// Также с отрицанием
if !( result === false ) {
...
}
Строки:
Используйте одиночные кавычки ('
) для строковых литералов.
var myString = 'Hello world!';
Операторы switch:
Используйтеbreak
для каждого случая, кромеdefault
. Отступайте операторыcase
на один уровень внутриswitch
.
switch ( event.keyCode ) {
// ENTER и SPACE оба вызывают x()
case $.ui.keyCode.ENTER:
case $.ui.keyCode.SPACE:
x();
break;
case $.ui.keyCode.ESCAPE:
y();
break;
default:
z();
}
Дополнительные рекомендации:
- Документирование кода: Как и для PHP, WordPress предоставляет стандарты встроенной документации для JavaScript кода. Эти стандарты, представленные в виде блоков документации или встроенных комментариев, следуют стандарту JSDoc 3 для встроенной документации JavaScript. Встроенная документация охватывает функции, методы классов, объекты, замыкания, свойства объектов, события и заголовки файлов.
- Использование лучших практик: Помимо описанных выше правил, стандарты JavaScript кодирования WordPress также рекомендуют следовать ряду лучших практик при написании кода. Эти практики направлены на повышение читаемости, поддерживаемости и производительности кода.
Некоторые из этих лучших практик включают:
- Используйте описательные имена переменных и функций.
- Разбивайте длинные функции на более мелкие, более управляемые функции.
- Избегайте использования глобальных переменных.
- Комментируйте свой код, чтобы объяснить сложные или не очевидные части кода.
- Используйте инструменты проверки кода, чтобы выявлять и исправлять ошибки и предупреждения.
Стандарты кодирования HTML и CSS
Разработчиков WordPress поощряют использовать семантическую разметку, то есть применять HTML-элементы в соответствии с их предназначением. Эта практика улучшает структуру контента и положительно влияет на поисковую оптимизацию (SEO) сайта. Соблюдение стандартов HTML кодирования также подразумевает валидацию кода для обеспечения совместимости с разными браузерами.
Стандарты HTML кодирования в WordPress охватывают следующее:
Валидация:
Все HTML-страницы должны быть проверены валидатором W3C, чтобы гарантировать корректность разметки.Самозакрывающиеся элементы:
Косая черта в самозакрывающихся элементах должна предваряться одним пробелом.
<!-- Верно -->
<br />
<!-- Не верно -->
<br/>
Атрибуты и теги:
Все теги и атрибуты должны быть написаны в нижнем регистре. Значения атрибутов также должны быть в нижнем регистре, за исключением случаев, когда они предназначены для восприятия людьми (тогда применяется title case).
<!-- Верно -->
<a href="http://example.com/" title="Описание ссылки">Описательный текст</a>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Не верно -->
<a HREF="http://example.com/" TITLE="Описание ссылки">Нажмите здесь</a>
Кавычки:
Все атрибуты должны иметь значения, заключенные в одинарные или двойные кавычки. Отсутствие кавычек может привести к уязвимостям безопасности.
<!-- Верно -->
<input type="text" name="email" disabled="disabled" />
<input type='text' name='email' disabled='disabled' />
<!-- Не верно -->
<input type=text name=email disabled>
Отступы:
Отступы в HTML-коде должны отражать логическую структуру документа. При смешивании PHP и HTML, отступы блоков PHP должны совпадать с отступами окружающего HTML-кода.
<!-- Верно -->
<?php if ( ! have_articles() ) : ?>
<div class="article">
<h1 class="article-title">Not Found</h1>
<div class="article-content">
<p>No results were found.</p>
<?php get_error_msg(); ?>
</div>
</div>
<?php endif; ?>
<!-- Не верно -->
<?php if ( ! have_articles() ) : ?>
<div class="article">
<h1 class="article-title">Not Found</h1>
<div class="article-content">
<p>No results were found.</p>
<?php get_error_msg(); ?>
</div>
</div>
<?php endif; ?>
Помимо стандартов HTML, WordPress предлагает стандарты CSS, которые помогают создавать чистые, модульные и адаптивные таблицы стилей. Они обеспечивают основу для совместной работы и проверки кода, начиная с ядра и заканчивая темами и плагинами. Эти стандарты гарантируют читаемость, единообразие и осмысленность кода.
Стандарты CSS кодирования в WordPress делают акцент на использовании определенных классов для выбора элементов, способствуя созданию единообразной и организованной структуры. В частности, они устанавливают правила для:
Структуры:
/* Верно
Каждый селектор должен находиться на отдельной строке,
заканчивающейся запятой или фигурной скобкой. Закрывающая
фигурная скобка должна иметь тот же уровень отступа,
что и открывающий селектор. */
#selector-1,
#selector-2 {
property: value;
}
Селекторы:
/* Верно
Используйте строчные буквы и разделяйте слова дефисами.
Используйте двойные кавычки вокруг значений для селекторов
по атрибутам.
Избегайте чрезмерно квалифицированных селекторов,
таких как div.container. */
#contact-form {
property: value;
}
input[type="text"] {
property: value;
}
Свойства
(порядок и вендорные префиксы):
/* Верно
Добавляйте свойства с двоеточием и пробелом.
Свойства должны быть в нижнем регистре (за исключением
названий шрифтов и вендор-специфических свойств)
и использовать сокращенную запись. */
#selector {
property: value;
}
Значения:
/* Верно
Добавляйте пробел перед значением и точку с запятой после.
Используйте двойные кавычки.
Нулевые значения не должны иметь единиц измерения.
Используйте ведущий ноль для десятичных значений.
Разделяйте несколько значений, разделенных запятыми,
для одного свойства пробелом или новой строкой. */
#contact-form {
font-family: "Helvetica Neue", sans-serif;
opacity: 0.9;
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(20, 120, 170, 0.9);
}
Медиа-запросы:
/* Верно
Правила, установленные для media-запросов, должны быть
отступом внутрь на один уровень.
Группируйте media-запросы по типам носителей в нижней части
таблицы стилей. */
@media all and (max-width: 1024px) and (min-width: 780px) {
$selector {
property: value;
}
}
С 2003 года стандарты кодирования HTML и CSS в WordPress соответствуют рекомендациям Консорциума W3C (World Wide Web Consortium) для HTML и CSS. Стандарты W3C, подчеркивающие важность интеграции принципов адаптивного дизайна и семантической разметки, оказали влияние на разработку тем и плагинов, начиная с выпуска HTML5 и CSS3.
Принятие этих рекомендаций W3C гарантирует, что сайты WordPress соответствуют глобальным веб-стандартам, улучшая взаимодействие и пользовательский опыт, а также отражая стремление оставаться актуальными, безопасными и совместимыми в рамках более широкой экосистемы веб-разработки.
Как обеспечить доступность при разработке на WordPress
Стандарты доступности играют ключевую роль в обеспечении того, чтобы цифровой контент, включая сайты созданные на WordPress, были удобны и для людей с ограниченными возможностями.
![WCAG](https://genius.courses/wp-content/uploads/2024/07/1Dg9IhLPBp1ROttw-LuUVlQ-1024x576.webp)
Руководства по доступности W3C, в частности Web Content Accessibility Guidelines (WCAG), предоставляют всеобъемлющую структуру для улучшения доступности веб-контента. Признавая важность инклюзивности, WordPress включил эти руководства в свои основные функциональные возможности.
Например, WCAG измеряет соответствие стандартам по Европейскому закону о доступности, который начнет применяться к многим организациям в ЕС с июня 2025 года.
Для удовлетворения различных потребностей следует внедрять функции и принципы дизайна, такие как совместимость с экранными читателями, навигация с помощью клавиатуры и текстовые альтернативы для контента, не являющегося текстом.
Использование семантического HTML
Используйте правильные семантические теги HTML. Например, используйте <nav>
для меню навигации, <header>
для заголовков сайта и <main>
для основного контента. Эти теги помогают экранным читателям и другим вспомогательным технологиям понимать структуру страницы.
Добавление текстовых альтернатив для изображений, видео и аудиоконтента
Предоставьте описательный alt-текст
для изображений, чтобы передать их значение пользователям, которые не могут их видеть. В WordPress добавляйте описательные атрибуты alt в медиабиблиотеку при добавлении изображений. Включайте субтитры и расшифровки для видео и предоставляйте текстовые альтернативы для аудиоконтента, чтобы пользователи с нарушениями слуха могли получить доступ к информации.
Разработка с учетом адаптивного дизайна
Убедитесь, что ваша тема или плагин адаптивны и хорошо адаптируются к различным размерам экранов. Этот подход приносит пользу пользователям с различными устройствами и обеспечивает единообразный опыт на всех платформах.
Проектирование доступных форм
Предоставьте четкие метки и инструкции для полей форм. Используйте соответствующие типы ввода, такие как email или телефон, чтобы активировать правильную клавиатуру на мобильных устройствах и вспомогательных технологиях.
Навигация с помощью клавиатуры
Убедитесь, что все интерактивные элементы доступны с помощью клавиатуры. Пользователи должны иметь возможность переходить между ссылками, кнопками и полями форм с помощью клавиш Tab и Enter. Тестируйте и улучшайте доступность с помощью клавиатуры, избегая зависимостей от действий только с помощью мыши.
Инструменты для соблюдения стандартов кода WordPress
Существует множество инструментов проверки кода, которые могут помочь вам соблюдать описанные выше стандарты кодирования. Рассмотрим некоторые из них:
PHP_CodeSniffer
![Стандарты кодирования WordPress:](https://genius.courses/wp-content/uploads/2024/07/how-to-install-php-codesniffer-using-composer-1038x519-1-1024x512.webp)
PHP_CodeSniffer сканирует ваш код на PHP, чтобы выявить отклонения от установленных норм. Он способствует написанию чистого и эффективного кода, указывая на нарушения стиля и ошибки. Это улучшает производительность сайтов на WordPress и гарантирует совместимость с будущими обновлениями и плагинами.
W3C CSS Validation Service
![Стандарты кодирования WordPress:](https://genius.courses/wp-content/uploads/2024/07/images-1.webp)
Сервис валидации CSS от W3C сканирует ваши CSS-стили, выявляя и исправляя потенциальные ошибки, которые могут мешать оптимальной работе сайта. Он играет ключевую роль в поддержании согласованности и соблюдении стандартов W3C, что гарантирует плавный пользовательский опыт на различных устройствах. В результате сайты получают улучшенное время загрузки и соответствуют строгим стандартам кодирования CSS, установленным WordPress.
JSHint
![Стандарты кодирования WordPress:](https://genius.courses/wp-content/uploads/2024/07/jshint.webp)
JSHint анализирует JavaScript-код, выявляя потенциальные ошибки, стилистические несоответствия и соблюдение лучших практик. Это помогает писать чистый и эффективный код, что в конечном итоге оптимизирует производительность сайта. Особое внимание JSHint к стандартам кодирования WordPress обеспечивает беспроблемную интеграцию JavaScript-кода с общей архитектурой WordPress, помогая поддерживать единый и стандартизированный код.
WebAIM Contrast Checker
![Стандарты кодирования WordPress:](https://genius.courses/wp-content/uploads/2024/07/logo-13.webp)
WebAIM Contrast Checker помогает оценить и улучшить доступность ваших сайтов на WordPress. Этот инструмент упрощает процесс достижения оптимального цветового контраста для улучшения доступности. С помощью обратной связи в реальном времени можно определить области для улучшения читаемости текста для всех посетителей.
Заключение
Стандарты кодирования являются основой эффективной и совместной разработки программного обеспечения. Они обеспечивают согласованность и читаемость кода, упрощают процесс разработки, повышают поддерживаемость и способствуют командной работе. Для разработчиков WordPress соблюдение стандартов кодирования жизненно важно для создания надежных и масштабируемых сайтов.