WordPress のテーマ制作で欠かせない関数をまとめてみた
WordPress でテーマ制作する際にいつも調べるのが面倒なので、主に使用する関数をまとめました。
HTML/CSS/JavaScriptで共通してやるべきこと・知っておくべきこと・気をつけるべきこと
エラーがあったりうまくいかないときはタイポ（スペルミス）を疑う
初心者は特にこれです。 タイポをできるだけ少なくする一つの方法は、専用のエディタをインストールしてエディタの入力補助・補完機能（途中まで入力すると候補を表示してくれるやつです）を使うことです。コーディングのスピードも上がるので一石二鳥です。専用のエディタですが、MacならCoda／Sublime Text／Atomあたりです。Vimmerならvim一択です。唯一無二のキーバインディングで、赤い彗星のごとくコーディングができます。WindowsならBrackets／Sublime Text／Atomあたりでしょうか。 BracketsはもともとAdobe Creative CloudのEdge Code CCでしたが、単体の無料エディタとしてAdobeからリリースされました。Dreamweaverとは天と地ほどの差があります。なのでDreamweaverを開くのはもう止めましょう。というかもしパソコンにインストールされてるならアンインストールしてBracketsをインストールしてください。たまに他人のWindowsパソコンを使うときに、ファイルを開いたらDreamweaverが立ち上がるとイラッとします。タイポ（スペルミス）を見つけてもらう
タイポを疑う、とはいっても自分で書いていると案外見落としたりします。タイポに気付かず延々と時間を使うなんてこともあったりしてそれで何時間も使うと時間が勿体ないので、ある程度時間を決めてその時間内に解決しなかったら自分以外の人にコードを見てもらいましょう。さっくり解決したりします。 逆に『うまくいかないです〜(T-T)』『どうすれば….(p_q､)』と聞かれる立場の人は、まずタイポがないかをチェックしてあげましょう。エラー内容を知る
うまくいかないときにまず知らないといけないのは『どのような内容のエラーなのか』ということです。どのような内容のエラーが出ているのかが分からないと、どのような対処をすればいいのか分かりません。逆に言えば、エラーの内容が分かれば、そこで言われていることを直すか、もしくはエラー文ごとググればその対処法がネットに書いてあります。「うまくいかないよー(T-T)」「なんかエラーが出るーorz」で右往左往するのではなくて、まずは『どんな内容のエラーなのか』を落ち着いて把握しましょう。 エラー内容は、例えばJavaScriptだとブラウザのコンソールに表示されます。SCSSだとコンパイルの段階でコンソール画面（「コンパイルが終わりました、的な内容が英語で出力される部分です）に表示されます。CSSよりもSCSSを使った方が良い理由の一つがこれです。SCSSはコンパイルする必要があるため、コード自体にタイポ等の誤りがあればコンパイラーがそれを教えてくれますが、CSSはそんな親切なことはしてくれません。なので例え初心者でも（というか初心者ほど）SCSS／SASS／LESS／STYLUS等のCSSプリプロセッサを使用しましょう。エラーの対処法がわからなかったら、コンソール画面のエラーメッセージごとググる
ほとんどの場合はこれで解決します。 地球上に70億以上の人間がいるので、そのうちの誰かは同じエラーを経験しています。そしてそのうちの誰かがネットの掲示板とかで質問していて、他の誰かがその解決策を示してくれています。それに従いましょう。21世紀は『ググれる能力』がとても大切です。良い加減義務教育でもググり方を教えた方が良いと思います。ググるときは検索結果に表示される年月日をチェックする
ウェブ業界の移り変わりは激しいです。去年まで正しかったことが今年には間違ってたりします。去年までサポートしてなかったけど最新版ではサポートしてるようなこともあります。なのでググったときに出てきた記事が何年に書かれた記事かをしっかり見てそれを頭に入れた上でその記事を読みましょう。今年や去年くらいの記事であればいいですが、2,3年前の記事となるとそれが今でも有効なのかをチェックする必要があります。インデントと空白行を使ってソースコードを綺麗にしましょう
とてもとても大切なことです。 汚くて醜いソースコードは見づらいですし、他人の汚いコードなんて見る気が失せます。そしてコードの汚さとエラーの多さには強い相関があります（…きっとあるはず… もしすでに長いコードを書いていて、全部にインデントを入れるのにすごく時間がかかる…というのであればOnline JavaScript beautifierのようなサービスを利用しましょう。『JavaScript』となっていますが、HTMLでもSCSSでもJavaScriptでも綺麗にインデントをつけてくれます。右上の『indent with 4 spaces』の部分をクリックするとインデントのときの字数（一つのインデントにいくつの半角スペースを使うか）を変えることができます。これは好みの問題ですが、インデントが深いコードの場合に『indent with 4 spaces』にすると逆に見づらくなることもあるので、その場合は『indent with 2 spaces』にしておきましょう。ファイル名は英語にしましょう
予約ページ用のhtmlファイルをつくるとき、yoyaku.htmlとするのはNGです。その場合ならreserve.html (or reservation.html) です。
日本語をそのままローマ字にしたファイル名はやめにしましょう。 英語がわからなければアルクとかで調べてみましょう。
名付けるときに、例えばreserve.htmlとreservation.htmlのように動詞／名詞で迷ったら、『reserve.html』と『reservation.html』でググってみましょう。
ヒットした件数が多い方がベターです（前の仕事で英語の論文を書くときに、とりあえずアルクで調べてみて、出てきた言い回しが実際に使われているかどうかを調べるためにググってヒット件数を見るというのをよくやっていました）。 あと、サイトを参考にする際に（特に海外のサイトで）ファイル名も気にした方がいいと思います。
普段から気をつけてみていると、こういうページのときはどんなファイル名にするのが良いんだろうというのが分かるようになってくるはずです。
ファイルの文字コードはUTF-8にしましょう
Windowsの人向けです。Macなら問題ありません。 htmlファイルでも最初にmetaタグでcharset=”UTF-8″としているはずです。UTF-8が標準なんです。 自分たちが使っているOSが採用しているデフォルトのエンコーディングは標準ではないということを理解してください。 ファイルを作成するとき。
ファイルを開くとき。
ファイルをコピーするとき。
ファイルを転送するとき。 すべてのアクションで常にエンコーディングがUTF-8かどうかを確認してください。
それが嫌ならMacかLinuxにしましょう。
それも嫌なら、クリエイティビティのかけらもない職を探しましょう。
きっとそこはWindowsしかない素敵な職場です。
Windowsパソコンを使うのをやめましょう
そのOSで採用されているフォントが綺麗だと思いますか？そのOSで採用されているUIが素敵だと思いますか？ もしそう思うなら、Web制作の仕事には向いてないと思います（真顔 目の前にあるOSが自分自身の創造性を阻害していることを理解しましょう。 WindowsパソコンはIEでの動作確認のためにさえあれば十分です。
Macを使いましょう
いろいろなOSを見たり触ったりしてきましたが、消去法でMacしか残りません。Macが素晴らしいのではなく、他がどうしようもないのです。
なのでMac以上のものが現れるまではMacを使いましょう。
HTMLでやるべきこと・知っておくべきこと・気をつけるべきこと
不要なコメント文は書かない
なぜかというと、HTMLではコメント文のネスト（入れ子。コメント文の中にコメント文を入れること）が許されていない からです。仕様なので仕方がありません。 コーディング段階ではあっちをコメントアウトしたりこっちをコメントアウトしたりというのがよくあります。そのときに<!-- ここからheader部分 --> 的なコメント文があると、そのコメント文を含めてコメントアウトすることができません（『ここからheader –>』でコメントアウトが終わって、それ以降がコメントアウトされません）。なので、こういう不要なコメント文を書く癖はなくしましょう。というかこういうコメント文が『不要なコメント文』なんだという意識をもちましょう。 <header id="header"> と書いておけば、それがheaderの開始位置だと分かりますし、それでも分かりにくいというのであれば、開始タグの前と終了タグの後ろに空白行を入れておきましょう。例えば
CSSでやるべきこと・知っておくべきこと・気をつけるべきこと
プリプロセッサを使う
CSSを直接書くのではなくて、SCSS／SASS／LESS／STYLUS等のCSSプリプロセッサを使用しましょう。その理由の一つは、タイポなどの初歩的な誤りをコンパイル段階で検知してくれるからです。CSSで書き間違えをしてもCSSは何も教えてくれません。ただその書き間違えた部分はスタイルとして反映されないだけです。なので初心者ほどSCSSなどのプリプロセッサを使用してタイポや文法の誤りなどの初歩的な間違いを減らすようにしましょう。ブラウザのウェブインスペクタを使用する
コーディングするときにインスペクタを使用しないなんて考えられません。スタイルを当てたい要素に自分が思ったとおりの適切なスタイルが当たっているかをチェックできます。MacならSafari／Chrome／Firefoxすべて”⌘+option+I”でインスペクタが立ち上がります。デバッグ用のスタイルを当てる
思った通りにスタイルを当てれないときは、まずスタイルを当てたい要素の領域をしっかり把握しましょう。そのために自分なりのデバッグ用のスタイルを用意しておきましょう。例えばSCSSで@include debug_border(); や @include debug_background(); を入れてみましょう。もしボーダーや背景が赤に変わらない場合は、例えばクラス名にタイポがあったり要素名が誤っていたりということが疑えます。もしボーダーや背景が思ったとおりの幅・高さになってくれないときやへんな隙間ができていれば、widthやheightの指定がされてなかったり、paddingやmarginが間違ってたり、というのが疑えます。
ウェブインスペクタでもいいですが、こういうデバッグ用のスタイルを用意していると、一括で要素の領域をチェックできたりするのでとても便利です。
JavaScriptでやるべきこと・知っておくべきこと・気をつけるべきこと
console.logで変数を書き出す
デバッグの基本です。 例えばhogeという変数の中身を確認したい場合はconsole.log(hoge); というのをソースコードに書き加えます。これでブラウザのコンソール画面にhogeの中身が表示されます。うまく動かないときはこれで変数に意図しないundefinedやnullが入っていないかをチェックしましょう。
また、本番用のファイルにするときにはデバッグ用のconsole.logは消しておきましょう。そのためにはデバッグが終わったらすぐにconsole.logを消すか、ファイルをminifyする前にブラウザのコンソール画面を確認して、console.logによる不要な書き出しが行われていないかをチェックしましょう。