【WordPress】コーディングを、他の人にやってもらう時のルールを決める｜Blog｜株式会社トライム

Blog

ブログ

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

Category

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

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

2016.09.13

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のテーマに組み込む作業で、苦労することが少なくなりました。

Webサイト制作についてお悩みでしたら私たちにご相談ください。

私たちはECサイトなどのBtoCのサイトの制作に特化したWeb制作会社です。マーケティング視点をもったクリエイティブにより、運用まで見据えた効果の高いWebサイトを構築いたします。Webサイトについてお悩みのWeb担当者の方は、トライムまでお気軽にご相談ください。

Contact

お問い合わせ

トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします！
お気軽にお問い合わせください。

03-6403-3259

受付：10：00 - 19：00