WordPress開発において、コーディング規約は、堅牢で持続可能なコードベース作りに極めて重要です。コードを書く際のガイドラインとして活用し、コラボレーションの強化、メンテナンスの効率化、全体的な信頼性の確保を実現することができます。
また、コーディング規約を準拠することで、ありがちな落とし穴やエラーを防ぎ、コードの品質が改善されます。複数人で共同作業を行うことが多いWordPress開発では、チームワークにも有益です。コミュニケーションを促進し、潜在的な衝突を緩和し、より効率的な開発プロセスを実現することができます。
さらに、プロジェクト間の一貫性が促進されるため、異なるコードベースをシームレスに切り替えることも。コードの可読性と保守性にも一貫性がもたらされ、常にチームで共通の知識と理解を共有することができます。
WordPress公式のコーディング規約は、以下の5種類があります。
- PHP コーディング規約：サーバーサイドのコードの一貫性を確保
- HTML コーディング規約：構造化され有意義なマークアップを促進
- JavaScript コーディング規約：効果的なクライアントサイド機能の効率化
- CSS コーディング規約：スタイリングアプローチの一貫性を確保
- アクセシビリティ規約：最終製品があらゆるユーザーにとって利用しやすいものにする
今回は、コーディング規約に準拠したWordPressサイトを開発し、WordPressの開発コミュニティに貢献する方法をご紹介します。
PHP コーディング規約
WordPressのPHPコーディング規約は、コードの一貫性と可読性を保証するものです。WordPressコアにおいては準拠が必須であり、テーマやプラグイン開発でも強く推奨されています。読みやすさを向上させ、共同作業を容易にするための命名規則、インデント、コード構造など、さまざまな側面に触れています。
具体的には、以下のようなものがあります。
- 全般：複数行のPHPコードをHTMLブロック内に埋め込む際、開始と終了のPHPタグはそれぞれ1行に配置すること、一重引用符（シングルクォーテーション）と二重引用符（ダブルクォーテーション）を使用する際に省略記法のPHPタグを使用しないこと、
includeとrequire文を書く際のガイドラインなどが含まれます。
// HTMLブロック内での開始、終了のPHPタグ
// 開始タグ、終了タグはそれぞれ1行を使用する
## 正解
function foo() {
?>
<div>
<?php
echo esc_html (
bar (
$param1,
$param2
)
);
?>
</div>
<?php
}
## 間違い
if ( $x === $y ) { ?>
<div>
<?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 my_function( $some_variable ) {}
// 定数名には大文字を使用する
define('MAX_AGE', 60);
## 間違い
// camelCase（キャメルケース）を使用する
function myFunction( $someVariable ) {}- スペース：スペースの使い方、インデント、末尾の空白の削除に関するガイドラインです（コードをインデントにタブとスペースのどちらを使用するかは、WordPress開発者の間で盛り上がるテーマだが、WordPress公式の推奨はタブ。PHPだけでなくJavaScriptやCSSでも同様）。
## 正解
// カンマの後にはスペースを入れる
$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]- フォーマット：ブレース形式（波括弧、中括弧）、配列の宣言、複数行での関数呼び出し、型宣言、マジック定数、スプレッド演算子などのガイドラインです。
// 正解
// 次の形式でブレースを使用する
if ( condition ) {
action();
} elseif ( condition2 ) {
action2();
} else {
default_action();
}
// 長い配列構文を使って配列を宣言する
$numbers_long = array(1, 2, 3, 4, 5);
/* 複数行の関数呼び出しでは、各パラメーターは1行で済むようにする
複数行のパラメータ値には変数を代入し、その変数を関数呼び出しに渡す */
$data = array(
'user_name' => 'John Doe',
'email' => '[email protected]',
'address' => '123 Main Street, Cityville',
);
$greeting_message = sprintf(
/* 翻訳関数%sは、ユーザー名にマップする */
__( 'Hello, %s!', 'yourtextdomain' ),
$data['user_name']
);
$result = some_function (
$data,
$greeting_message,
/* 翻訳関数%sは都市名にマップする */
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 ) );
/* スプレッド演算子の前に適切なインデントで
スペースまたは改行を追加する
There should be:
* スプレッド演算子とそれが適用される
変数/関数の間にスペース不要
* スプレッドと参照演算子の間には
スペース不要
*/
//正解
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_CompanyProjectKinsta_ProjectUtilities;
// インポートのuse文は、名前の競合を防ぐためにエイリアスを使用する
use Project_NameFeatureClass_C as Aliased_Class_C;- オブジェクト指向プログラミング（OOP）：ファイルごとに1つのオブジェクト構造を使用すること、トレイトの
use文を使用ためのガイドライン、徹底した可視性の宣言、可視性と修飾子の順序の概要、オブジェクトのインスタンス化に関するルールなどが示されてます。
// トレイトのuse文は、クラスの最上位に置く
// トレイトのuse文は、最初と最後の記述の前後に少なくとも1行を置く
// 可視性は常に宣言する
class Foo {
use Bar_Trait;
public $baz = true;
...
}
// 新規オブジェクトのインスタンスを作成するときは
// 常に括弧を使用する
// クラス名と開始括弧の間にスペースは入れない
$foo = new Foo();-
- 制御構造：
elseifを使用し、else ifは使用しないこと、またヨーダ記法に関するガイドラインが示されています。ヨーダ記法は、論理比較で変数と定数、リテラル、関数呼び出しを混在させる場合は、以下のように変数を右側に配置し、誤った代入を回避します。
- 制御構造：
// 論理比較
if ( true === $result ) {
// $resultで何かを実行
}
// 以下のような入力ミスは見落としがち
if ( $result = true ) {
// ここには常に到達する
}- 演算子：三項演算子、エラー制御演算子（
@）、インクリメントおよびデクリメント演算子のガイドラインです。
// 三項演算子は使用しても問題ないが
// 常に文がtrueかどうかをテストする
$programming_language = ( 'PHP' === $language ) ? 'cool' : 'meh';
// 独立した文ではインクリメントおよびデクリメント演算子は
// 前置よりも後置を推奨
// 正解
--$a;
// 間違い
$a--;- データベースクエリ：データベースクエリの実行とSQL文の書式に関するガイドラインです。
- 推奨：その他、関数の引数には意味のあるフラグ値を使用すること、賢いコード、クロージャー（無名関数）、正規表現、シェルのコマンド、
extract()の回避などについて示されています。
PHP インラインドキュメント規約
上記ガイドラインに加えて、WordPressにはPHPコードのインラインドキュメント規約もあります。この規約は、PHPDoc（phpDocumentorによってメンテナンスされているPHPにドキュメントを提供するための進化する標準）。をベースにした、カスタムのドキュメントスキーマを使用しています。準拠することで外部ドキュメントの生成が効率化され、コミュニティのコードベースの構造に関する共通理解が促進されています。
PHPのドキュメント形態は通常、フォーマットされたドキュメントブロックか、インラインコメントです。WordPressのファイルでは、以下を文書化することが推奨されています。
- 関数とクラスメソッド
- クラス
- プロパティや定数を含むクラスメンバー
- 要求とインクルード
- フック（アクションとフィルター）
- インラインコメント
- ファイルヘッダ
- 定数
HTMLおよびCSS コーディング規約
WordPressのテーマとプラグインは、一貫性、アクセシビリティ、保守性を確保するために、厳格なHTML コーディング規約に準拠します。有意義なマークアップを重視し、開発者がHTML要素を本来の目的に沿って使用することを促進するもので、コンテンツ構造の強化と検索エンジン最適化（SEO）の改善につながります。また、ブラウザ間の互換性を確実に確保するため、HTMLを検証することも推奨されています。
まずはHTMLのコーディング規約を見ていきます。
- 検証：すべてのHTMLページをW3C Validatorで検証し、マークアップが整形式であることを検証します。
- 終了を含む要素：スラッシュの前には1つのスペースを挿入します。
<br />
<!-- 間違い –>
<br/>- 属性とタグ：属性とタグはすべて小文字で書くこと。また、文字列の属性値もコンピュータ内のみで処理される場合は小文字にします。ユーザーが目にする場合は、先頭を大文字にするなど適切に記述します。
// 正解
<a href="http://example.com/" title="Link Description">説明文</a>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
// 間違い
<a HREF="http://example.com/" TITLE="link description">ここをクリック</a>- クォーテーション（引用符）：すべての属性には値が必要で、一重引用符（シングルクォーテーション）または二重引用符（ダブルクォーテーション）を使用します。値を引用符で囲わない場合、セキュリティ上の脆弱性につながります。
// 正解
<input type="text" name="email" disabled="disabled" />
<input type='text' name='email' disabled='disabled' />
// 間違い
<input type=text name=email disabled>- インデント：常に論理的な構造を反映すること。PHPとHTMLを混在させる場合、PHPブロックのインデントを周囲のHTMLコードに合わせます。
// 正解
<?php if ( ! have_articles() ) : ?>
<div class="article">
<h1 class="article-title">Not Found</h1>
<div class="article-content">
<p>結果が見つかりませんでした</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>結果が見つかりませんでした</p>
<?php get_error_msg(); ?>
</div>
</div>
<?php endif; ?>これらのHTMLコーディング規約に加えて、CSS コーディング規約は、クリーンでモジュール化された、レスポンシブなスタイルシートを作成するのに有用です。コアコードからテーマ、プラグインに至るまで、共同作業とレビューのベースラインになります。コードの可読性を高め、有意義なものにすることができます。
WordPressのCSSコーディング規約は、特定のクラスを使用して要素をターゲットにし、一貫性のある組織的な構造を促進することが重視されています。具体的に見ていきましょう。
- 構造
/* 正解
各セレクタは、カンマまたは波括弧で終わる行に記述する
閉じ波括弧は、開始のものと同じインデントレベルで書く */
#selector-1,
#selector-2 {
property: value;
}- セレクタ
/* 正解
小文字を使用して単語はハイフンで区切る
属性セレクタの値には前後に二重引用符（ダブルクォーテーション）を使用する
div.containerのような過剰に修飾したセレクタは使用しない */
#contact-form {
property: value;
}
input[type="text"] {
property: value;
}- プロパティ（順序とベンダープレフィックス）
/* プロパティの後にはコロンとスペースを置く
フォント名とベンダー固有のプロパティを除いてプロパティと値はすべて小文字
可能な限りショートハンド（省略形）を使用する */
#selector {
property: value;
}- 値
/* 値の前にはスペース、値の後にはセミコロンを置く
二重引用符（ダブルクォーテーション）を使用する
0に単位をつけない
小数点以下の値には先頭の0を使用する
1つのプロパティに複数の値をコンマ区切りで指定する場合
スペースまたは改行を挿入する */
#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);
}- メディアクエリ
/* メディアクエリのルールセットは1レベル分インデントする
一般にメディアごとにメディアクエリをグループ化し、スタイルシート末尾に配置する */
@media all and (max-width: 1024px) and (min-width: 780px) {
$selector {
property: value;
}
}- コメント
WordPressのHTMLおよびCSSのコーディング規約は、2003年のリリース以降、World Wide Web Consortium（W3C）のHTMLとCSSのガイドラインに沿っています。レスポンシブデザインの原則とセマンティックマークアップの統合を重視するW3C規格は、HTML5とCSS3のリリースを皮切りに、テーマとプラグインの開発に影響を与えています。
このW3C規格の採用により、WordPressで稼働するウェブサイトが世界規模のウェブ標準に準拠し、相互運用性とユーザー体験が高まります。また、ウェブエコシステム内で広範で最新かつ安全、互換性のある状態を維持するというコミットメントが反映されています。
WordPressにおけるこれら規約への準拠は、W3C Markup ValidatorによるHTMLコードの品質検証を重視しています。
HTMLとCSSのコーディング規約を守ることで、WordPressサイトがあらゆるプラットフォームにおいて視覚的に魅力的で、使いやすく、効率的に機能することが保証されます。また、シームレスなユーザー体験、WordPressエコシステムの多様な側面に取り組む開発者間のコラボレーションを促進することができます。
JavaScript コーディング規約
WordPressのコーディング規約は、テーマやプラグインのJavaScriptコードのフォーマットやスタイリングに関しても言及しています。コアであるPHP、HTML、CSSコードと並び、コードの一貫性を維持することが目的です。
JavaScript コーディング規約は、コードの一貫性と可読性の向上を目的として2012年に発表された jQuery JavaScript Style Guideがベースになっています。当初はjQueryプロジェクトに特化したものでしたが、その成果を受けて、jQuery以外にも広く採用されるようになりました。
jQueryのガイドラインはWordPressのコーディング規約を反映していますが、以下の点は大きく異なります。
- WordPressでは文字列宣言に一重引用符（シングルクォーテーション）を使用する
- case文はswitchブロック内でインデントされる
- 関数の内容は、ファイル全体の閉じタグを含め一貫してインデントされる
- タブの使用やインデントなど、スペースに関するいくつかのルールは、WordPressのPHP コーディング規約に合わせる
- jQueryでは100文字の行の長さ制限が推奨されているが、厳密には実施されていない
例によって、JavaScript コーディング規約をカテゴリ別に見ていきましょう。
- コードのリファクタリング
- スペース（オブジェクト定義、配列と関数呼び出し）
// オブジェクト定義
// 正解
var obj = {
name: 'John',
age: 27,
height: 179
}
// 間違い
var obj = {
name: 'John', age: 27,
height: 179
}
// 配列と関数呼び出し
// 要素と引数の周りに余分なスペースを入れる
array = [ 1, 2 ];
foo( arg1, arg2 );- セミコロン
// 常にセミコロンを使用する
array = [ 1, 2 ];- インデントと改行（ブロックとブレース、複数行、連続したメソッド呼び出し）
// インデントにはタブを使用する
( function ( $ ) {
// インデントされた式
function doSomething() {
// インデントされた式
}
} )( jQuery );
// if、else、for、while、tryブロックは複数行にまたがる
if ( condition ) {
// 式
} else if ( ( condition && condition ) || condition ) {
// 式
} else {
// 式
}
// 文が長すぎて1行に収まらない場合
// 演算子の後で改行する
var html = '<p>The sum of ' + a + ' and ' + b + ' plus ' + c +
' is ' + ( a + b + c ) + '</p>';
/* 関数呼び出しの連鎖が長すぎて1行に収まらない場合
1行に1つの呼び出しを使用する
最初の呼び出しは関数が呼び出されるオブジェクトとは別の行にする */
elements
.addClass( 'foo' )
.children()
.html( 'hello' )
.end()
.appendTo( 'body' );- 代入とグローバル変数（
const、letによる変数宣言、varでの変数宣言、グローバル変数、共通ライブラリー） - 命名規則（略語や頭字語、クラス定義、定数）
// 略語はcamelCaseで書く
// 頭文字はすべて大文字にする
const userId = 1;
const currentDOMDocument = window.document;
// クラス定義は UpperCamelCaseConvention を使用する
class Human {
...
}
// 定数には SCREAMING_SNAKE_CASE の規約を使用する
const SESSION_DURATION = 60- 等価性
// 抽象的な等価性比較 (==) よりも
// 厳格な等価性比較 (===) を使用する
if ( name === "John" ) {
...
}
if ( result !== false ) {
...
}
// 否定演算子を使用する場合
if !( result === false ) {
...
}- 文字列
// 文字列リテラルには一重引用符を使用する
var myString = 'Hello world!'- switch文
// default以外のcaseにはbreakを使用する
// switch内のcase文は1つのタブでインデントする
switch ( event.keyCode ) {
// ENTERとSPACEの両方が x() をトリガーする
case $.ui.keyCode.ENTER:
case $.ui.keyCode.SPACE:
x();
break;
case $.ui.keyCode.ESCAPE:
y();
break;
default:
z();
}他にも、JavaScriptコードのベストプラクティスが示されています。
PHPと同様、JavaScriptコード向けのインラインドキュメント規約もあります。この規約はJSDoc 3 Standardに遵守しており、ドキュメント化されたブロックやインラインコメントの形式をとります。関数、クラスメソッド、オブジェクト、クロージャ、オブジェクトプロパティ、イベント、ファイルヘッダーなどに適用されます。
アクセシビリティの確保
アクセシビリティ規約は、WordPressのようなプラットフォームで構築されたウェブサイトを含むデジタルコンテンツが、能力を問わずあらゆるユーザーが使用できることを保証するために重要です。W3Cのアクセシビリティ規約を取り入れることで、高齢者や障がいを持つユーザーでもアクセスしやすいWordPressサイトを構築することができます。
W3Cのアクセシビリティ規約、特にウェブ・コンテンツ・アクセシビリティ・ガイドライン（WCAG）では、ウェブコンテンツのアクセシビリティを高めるための包括的な枠組みが示されています。その重要性から、これらの規約はWordPressのコア機能に組み込まれています。
たとえば、WCAGは、2025年6月からEU加盟国を拠点とする多くの組織に適用される欧州アクセシビリティ法に基づいてコンプライアンスを測定します。
多様性に対応するには、スクリーンリーダーとの互換性、キーボードナビゲーション、非テキストコンテンツの代替テキストなどの機能や設計原則を実装することが欠かせません。
WordPressサイトでアクセシビリティを確保することは、単なるコンプライアンスの問題ではなく、すべての人が情報やサービスに平等にアクセスできるようにするための取り組みです。W3Cの規格を遵守することで、WordPressサイトのアクセシビリティと使い勝手を向上し、包括的なオンライン環境の実現を促進します。
テーマやプラグインにアクセシビリティ機能を実装するヒントは、次のようなものが挙げられます。
- セマンティックHTMLを使用する：ナビゲーションメニューには
<nav>、サイトヘッダーには<header>、メインコンテンツには<main>などを適切に使用することで、スクリーンリーダーやその他のサポート技術がページ構造を理解するのに役立つ。 - 画像、動画、音声コンテンツに代替テキストを追加する：画像を見ることができないユーザーを考慮し、画像に説明的な代替テキストを提供する。WordPressでは、画像を追加する際にメディアライブラリで説明的な
alt属性を追加できる。また、耳の不自由なユーザーも情報にアクセスできるよう、動画には字幕とトランスクリプトを、音声コンテンツには代替テキストを用意する。 - レスポンシブデザインを考慮する：さまざまなデバイスの画面サイズを考慮し、テーマやプラグインが画面サイズに柔軟に適応するようにする。これにより、プラットフォーム間で一貫したユーザー体験を確保できる。
- アクセシブルなフォームを作成する：フォームフィールドに明確なラベルと指示を提供する。メールや電話など、適切な入力タイプを使用して、モバイル端末や支援技術で正しいキーボードがトリガーされるようにする。
- キーボードナビゲーションを使用する：インタラクティブ要素をキーボードでも操作できるようにする。リンク、ボタン、フォームフィールドをタブで移動できるようにし、マウスのみのインタラクションに依存することを避け、キーボードアクセシビリティをテスト、強化する。
コーディング規約の準拠に役立つツール
WordPressのコーディング規約に準拠するために役立つツールは多数あります。以下、その一例をご紹介します。
PHP_CodeSniffer
PHP_CodeSnifferは、PHPコードベースをスキャンして、定められた規約に反するコードを特定します。コーディングの誤りやスタイルの不一致をピンポイントで特定することで、よりクリーンで効率的なコードを実現することができます。WordPresサイトのパフォーマンスが改善され、将来の更新やプラグインとの互換性が保証されます。
W3C CSS 検証サービス
W3C CSS 検証サービスは、CSSスタイルシートをスキャンして、サイトパフォーマンスを妨げる可能性のある潜在的なエラーを特定し、修正します。一貫性とW3Cの規格への準拠を維持する上で重要な役割を果たし、さまざまなデバイスでスムーズなユーザー体験を実現。結果としてサイトの読み込み時間が短縮され、WordPressが定める厳格なCSS コーディング規約を守ることができます。
JSHint
JSHintは、JavaScriptコードを分析し、潜在的なエラー、スタイル上の不整合、ベストプラクティスへの準拠を検証します。クリーンで効率的なコードを書くのに役立ち、サイトパフォーマンスも最適化されます。WordPressのコーディング規約に焦点を当てており、JavaScriptコードはWordPress全体のアーキテクチャとシームレスに統合され、一貫性のある標準化されたコーディング環境を確保できます。
WebAIMのContrast Checker
WebAIMのContrast Checkerは、WordPressサイトのアクセシビリティを評価し、改善するのに便利なツールです。アクセシビリティの促進につながるカラーコントラスト最適化の複雑なプロセスを簡素化。コントラストチェッカーのリアルタイムフィードバックによって、すべての訪問者に配慮して可読性を高めるべき領域を特定することができます。
まとめ
コーディング規約は、効率的な共同作業が求められるソフトウェア開発の中核になります。コードの一貫性と可読性を確保してコーディング作業を合理化し、保守性を高め、チームワークを促進するのを支援します。WordPress開発者にとってコーディング規約の遵守は、堅牢でスケーラブルなウェブサイトを構築するために必要不可欠です。
Kinstaでは、仕事に集中できる開発環境を提供することで、これらのコーディング規約に準拠する取り組みを支援しています。Kinstaが独自に構築したDockerベースのローカル開発ツール「DevKinsta」を利用すると、ローカルマシンでWordPressサイトを設計および開発し、本番環境にシームレスにデプロイすることができます。DevKinstaをKinstaのWordPress専用マネージドホスティングと組み合わせれば、サーバー設定に費やす手間や時間を削減し、より多くの時間をコーディング作業に充てることができます。
Kinstaのテクニカルエディター。救急車や消防車を追いかける記者としてキャリアをスタート。1990年代後半からインターネット関連の技術情報を担当している。
コメントを残す