誰が後任になっても大丈夫な作り方を

ここ最近はサイト制作をすることが多いので、サイト制作に関する取り組みをご紹介したいと思います。Wordpressを利用したサイト制作でも、micro CMSを活用したサイト制作でも同じなのですが納品後に永遠に初回制作者の手を離れないわけではありません。

いつどういう技能を持った人がメンテナンスをするかは誰にもわかりません。なので制作時点で可能な限りシンプルにわかりやすく、誰が引き継いでも迷わないように制作することはクライアントにとってきっと有益なはずです。

HTMLしかわからない人でも何となく分かる構造にする

少なくともHTMLやCSSすらさっぱりわからない人が後任になることは確率的に少ないと思うので、ごく基本的な知識や技能だけでも調べれば取りあえずなんとかなるような構造にして制作をすることが第一です。

例えばWordpressならPHPがかなり出来ないと手も足も出ないかというとそうではありません。
基本的に必要なテーマファイルはディレクトリを分けたりすることなく同一階層に配置することは後々メンテナンスの安易さに繋がると思います。ちょっとの条件分岐でテーマファイルを細かく細分化すると、制作者以外ではまず何がどうなっているか把握するための時間が無駄です。

ディレクトリ構造も
img
css
fonts
js
くらいでいいような気がします。

PHPもHTMLをベースに利用する

WordPressはHTMLとの親和性が高いので、PHPでHTMLを呼び出すよりもHTMLの中で呼び出す方がずっと直感的です。例えばimgを呼び出す場合はHTMLしか分からなくても以下のようにしていれば何となくわかるはず・・・。

<img src=”<?php echo esc_url( get_template_directory_uri() ); ?>/img/sc-01.jpg” alt=”画像1″ />

極力プレーンなHTML構造にWordpressのPHPを包括するような書き方を進めておけば、後任者がWordpressに不慣れでも「調べれば」なんとかなるようにしておくことは可能です。

また、<?php endif; ?>が何の終わりかもコメントを残すことで、テーマファイル自体が総崩れになることも回避できるので癖付けしておくといいような気がします。

<?php endif; ?><!–/is_category(“live-event”) –>

CSSはヘッダーで分ける

WordPressだけでなく、CSSはヘッダーの中で分岐させるほうがメンテナンス性が高くなり、なおかつ制作時も利便性が高いように思います。

<link rel=”stylesheet” href=”<?php echo esc_url( get_template_directory_uri() ); ?>/style.css” type=”text/css” media=”all”>
<link rel=”stylesheet” href=”<?php echo esc_url( get_template_directory_uri() ); ?>/css/spstyle.css” media=”screen and (max-width:768px)”>
<link rel=”stylesheet” href=”<?php echo esc_url( get_template_directory_uri() ); ?>/css/pcstyle.css” media=”screen and (min-width:1340px)”>

上記は一例ですが、極端に大きなスクリーンを想定する場合や際どいレスポンシブをやらなければならなくなった場合に効果的です。

個別ページにページIDをスラッグで出力させる

これも後任用ですが、カスタムフィールドなどを使っている場合や個別ページごとに異なるCSSを書く場合があるかもしれませんのでページテーマを作る場合にIDをスラッグで出力させておくと親切だと思います。

<?php
$cats = get_the_category();
$cat = $cats[0];
if( $cat->parent ){
$parent = get_category( $cat->parent );
$parent->slug;
}
?>
<section id=”single-page” class=”post <?php echo $parent->slug; ?>”>

タグに関しては使うかどうかわからないサイトもあるので属するカテゴリータグなどはclassに入れておいてあげるのも親切だと思います。

<?php
$categories = get_the_category();
if ( $categories ) {
foreach ( $categories as $category ) {
echo ‘<span class=”tag”><a href=”‘.esc_url(get_category_link($category->term_id)).'” class=”‘.$category->slug.'”>’.$category->name.'</a></span>’;
}
}
?>