Стандарты кодирования WordPress: фундамент надежной разработки

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

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

• Повышение качества кода: Стандарты кодирования помогают избежать распространенных ошибок и недочетов, делая код более качественным и устойчивым к сбоям.
• Эффективная работа в команде: Особенно актуальны стандарты кодирования в проектах 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. Встроенная документация помогает разработчикам понимать код, упрощает его поддержку и позволяет генерировать автоматическую документацию.

Стандарты кодирования 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, но благодаря своей эффективности получил широкое распространение и за пределами этой библиотеки.

Хотя рекомендации 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, были удобны и для людей с ограниченными возможностями.

Руководства по доступности W3C, в частности Web Content Accessibility Guidelines (WCAG), предоставляют всеобъемлющую структуру для улучшения доступности веб-контента. Признавая важность инклюзивности, WordPress включил эти руководства в свои основные функциональные возможности.

Например, WCAG измеряет соответствие стандартам по Европейскому закону о доступности, который начнет применяться к многим организациям в ЕС с июня 2025 года.

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

Использование семантического HTML

Используйте правильные семантические теги HTML. Например, используйте <nav> для меню навигации, <header> для заголовков сайта и <main> для основного контента. Эти теги помогают экранным читателям и другим вспомогательным технологиям понимать структуру страницы.

Добавление текстовых альтернатив для изображений, видео и аудиоконтента

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

Разработка с учетом адаптивного дизайна

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

Проектирование доступных форм

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

Навигация с помощью клавиатуры

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

Инструменты для соблюдения стандартов кода WordPress

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

PHP_CodeSniffer

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

W3C CSS Validation Service

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

JSHint

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

WebAIM Contrast Checker

WebAIM Contrast Checker помогает оценить и улучшить доступность ваших сайтов на WordPress. Этот инструмент упрощает процесс достижения оптимального цветового контраста для улучшения доступности. С помощью обратной связи в реальном времени можно определить области для улучшения читаемости текста для всех посетителей.

Заключение

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