WordPressのテーマやプラグイン開発・JavaScriptなどのナレッジブログ

WordPress制作マニュアル

WordPressのテーマやプラグインの制作を行う上で実行すべき事項や規約、便利なプラグインなど自分の中で定めているルールをまとめておこうと思います。随時更新。

コーディング規約

WordPress.org で定めてある Cording Standards に則ってコーディングを行います。
WordPress Coding Standards

PHP / HTML / CSS / JavaScript が対象となります。その他の言語を使用する場合は、その言語に応じてコーディング規約を提示します。

変数や関数・クラス名などの命名規則も定めてありますので、規約に則ってコーディングを行います。
WordPress コーディング規約

Typo Error がなるべく出ないように命名します。

制作対象ページ(基本テーマ制作)

「基本テンプレートページ制作」と呼ぶ対象は以下の12ファイルを指します。
テンプレート階層

ページファイル名備考
共通ヘッダーheader.phpmeta情報等はプラグインで実装するので記述しない。
共通サイドバーsidebar.php 
共通フッターfooter.php 
共通テンプレートindex.phpファイルのみ作成して中身は空のファイル
ホームページhome.php 
一覧ページarchive.php 
投稿ページsingle.php 
固定ページpage.php 
検索結果ページsearch.php 
Not Found ページ404.php 
テーマカスタマイズ関数ファイルfunctions.php 
テーマ必須ファイル(CSS)style.css 

ディレクトリ構造

wp-content
┗ themes
  ┗ xxxxxxx(テーマ名)
    ┣ js (JavaScriptが必要な場合はこのディレクトリに保存)
    ┣ css (style.css以外に個別にページで指定する場合はこのディレクトリに保存)
    ┗ images (テーマで使用する画像を保存)※変更が行われる可能性がある画像がメディアアップローダーを使用

これ以外のディレクトリは、基本的に作成しないようにします。
テーマディレクトリ以外のファイルには、改修を入れてはいけません。WordPressの更新(後述)によって上書きされてしまう可能性があります。

外部ファイル(JavaScript・StyleSheet)の読み込み

JavaScriptやStyleSheetは、必ず外部ファイルにします。HTML埋め込みやインラインでの記述は行わないようにします。
外部ファイルの読込も header.php などのテンプレートファイルに直接書き込まず、functions.php で登録・挿入の記述を行うようにします。

ライブラリ

JavaScriptのライブラリ群(jQuery等)もWordPressで準備されているものは、そちらを利用するようにします。
/wp-includes/js/ ディレクトリ以下のライブラリ一覧
Default Scripts Included and Registered by WordPress

カスタマイズ

テーマに対してカスタマイズを実装する場合は、原則 fucntions.php にまとめて記述をします。

カスタマイズの実装例

  • ウィジェットエリアの追加
  • カスタム投稿の追加
  • アイキャッチの有効化
  • タイトルタグの有効化
  • ナビゲーションの追加
  • カスタムロゴなどの外観項目追加
  • 投稿フォーマットの種類設定

などなど。テーマテンプレート内にカスタマイズを直接記述はなるべく避けましょう。(可読性・メンテナンス性の向上)

セキュリティポリシー

WordPressには、セキュリティに関するガイドラインが定めてあります。セキュリティコンポーネントとこのソフトウェアのベストプラクティスとして習熟すべきです。必ず内容を確認しておきましょう。
WordPress セキュリティ白書

デバッグモード

ローカル環境で制作を行う際に必ずデバッグモードをONにして作業を行って下さい。wp-config.php に設定がある以下の値をfalseからtrueに設定。ログは/wp_content/debug.log に記録されます。

define('WP_DEBUG', true); // デバッグモードを有効化

// ログファイルに保存する場合は、以下を書き足します。
if ( WP_DEBUG ) {
    // debug.log ファイルに記録
    define( 'WP_DEBUG_LOG', true );
    // ブラウザ上に表示しない
    define( 'WP_DEBUG_DISPLAY', false );
    // ブラウザ上に表示しない
    @ini_set( 'display_errors',0 );
}

テーマやプラグインの制作中に非推奨関数を使用したり、Notice,Warningエラーを表示するために設定します。このエラーが出ない状態で完了させてください。(一部、こちらから指定してプラグインで発生するものは除きます。)

テスト

制作中は、テストデータをインポートした状態で制作してください。テストデータが入力されている状態で表示崩れなど起こさないようにコーディングを行って下さい。

  • ※テストデータのインポート時はデバッグモードを一時的にFALSEに設定してください。警告が出て取り込めない場合があります。
  • ※vccwでローカル開発を行う場合は、インポートプラグイン以外を停止して取り込んで下さい。

主なチェック項目

  • ブラウザ表示・動作チェック(表示崩れ)
  • JavaScript動作チェック(DeveloperTool などでエラーが出力されていないかチェック)
  • デバイス動作チェック(PC/SP)
  • デバッグモードでの、Notice, Warning エラー
  • ソースコードの構文チェック(閉じタグ漏れ、TypoError、無駄な処理が残っていないか等)
  • 脆弱性対策におけるエスケープ漏れ
  • 不要な翻訳処理

テスト時に活用してほしいプラグイン

Wordpress Importer:テストデータのインポート
https://wordpress.org/plugins/wordpress-importer/

Theme Check:テーマチェックを行い、内容を Required / Reccomend / Note に分類してエラーチェックしてくれる。Required項目はゼロにする。
https://wordpress.org/plugins/theme-check/

Monster Widget:標準ウィジェットをまとめて設定してくれる。
https://wordpress.org/plugins/monster-widget/

Show Current Template:ログインバー上に現在表示しているページのテンプレートファイルを表示してくれる。
https://wordpress.org/plugins/show-current-template/

WordPress制作関連記事

最近の投稿

イベント参加レポート

イベント動画レポート

記事カテゴリー

月別集計

投稿カレンダー

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31 

最近のコメント

投稿タグ

メタ情報