【WordPress】コーディングを、他の人にやってもらう時のルールを決める

  • CMS

WordPressでサイトを作るとき、コーディングとテーマへの組み込みを、分業で行うことがあると思います。

そんな時、WordPressのテーマを作ったことがない人のコーディングだと、苦労することが多かったので、トライムでは「こんな風にコーディングしてください」と、お願いできるように、コーディングのルールを作っています。

さらにディレクトリの階層等、ベースとなるファイルをGitHubに用意しておくことで、テーマ組み込み時の手間を減らしています。

ベースファイルは下記からダウンロード可能です。
よく使うJSや、mixinなども入れてあり、さらにWikiでそれぞれの使い方を解説しています。

https://github.com/trymcom/wordpress

HTMLのコーディングルールについては別に記事を書きました。
こちらも参考にしてください。

社内でコーディング規約を作ろう

さて、WordPress用のルールです。

こんな風にコーディングしてください!

一般的な注意点

wp-content/themes/theme-nameのディレクトリ名は適宜変更してください。

CSSやJSの読み込みをページごとに変更せずに、すべてのページで共通のファイルを使用します。
各ページのスタイルはbodyに固有のクラスを振り、子孫セレクタで行うこと。

HTML

<html>
  <body class="home">
    <div class="element"></div>
  </body>
</html>

CSS

.home .element {
  margin-bottom: 1em;
}

ヘッダー、フッターをインクルードしているため、
bodyにクラスを降る場合は3行目を変更する。

<?php
  $root = $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/theme-name/';
  $body_class = 'ここを変更する';
  include($root . 'header.php');
?>

CSSについて

SCSSを使用して構築します。
用途ごとにファイルを分割する必要がある場合は、
「_ファイル名.scss」のようにリネームし、
下記ディレクトリに収めてstyle.scssにインクルードします。

/wp-content/themes/theme-name/scss

/* =========================================================
COMMON
========================================================= */
@import "_common.scss";

/* =========================================================
PAGES
========================================================= */
@import "_pages.scss";

プラグイン用のCSSなどは「_ファイル名.scss」のようにリネームし
_plugins.scssにインクルードします。

/* =========================================================
  MMENU
========================================================= */
@import "_mmenu.scss";

/* =========================================================
  SLIDER
========================================================= */
@import "_bxslider.scss";

SCSSの書き出しパスは下記になります。

/wp-content/themes/theme-name/style.css

画像ファイルについて

画像ファイルはページごとに分けて下記のようにディレクトリに収めます。

/wp-content/themes/theme-name/images/
 ├ common/
 ├ home/
 └ about/

jQueryについて

WordPress内のjQueryを使用するため、
記述の仕方に注意が必要です。

//ダメな例
$('#element').hide();

//良い例
jQuery('#element').hide();

HTMLファイルの階層について

WordPressではすべてスラッグでアクセスになるため、
下記のような構成に出来ません。

/about/history.html

この場合下記のようにします。

/about/history/

まとめ

ヘッダー・フッター等、共通ファイルはインクルードしたほうが楽なので、PHPで組んでもらっています。

また、SCSSで書いてもらうことにより、あとでWordPressの出力するbody_classに合わせて変更するのも楽になります。

このくらいまとめておくと、WordPressのテーマに組み込む作業で、苦労することが少なくなりました。

Writer

KO

誕生日に会社のみんなから『世界文学全集』をプレゼントしてもらった読書好きフロントエンド・エンジニアです。WordPressとMovableTypeが得意ですが、本当の特技は薪割りです。

Contact

ご提案依頼、ご相談、お見積もりなど
お気軽にお問合わせください。

03-6403-3259

平日 10:00~19:00

「Web制作について」とお伝え頂ければ
担当者に取次させていただきます。

Mailform

contact@trym.jp
でも受け付けております。