【WordPress】コーディングを、他の人にやってもらう時のルールを決める
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が得意ですが、本当の特技は薪割りです。
あわせて読みたい記事
