WordPressでは具体的にどうやってコーディングってしていくの?

はじめに

コーディングって何?

広く言うと、コンピュータを何らかの目的に合わせて動かすプログラムをキーボードで正しく動くように打ち込んで、システムというおおきなまとまりを作り上げること。

Web業界・デザイン業界でのコーディング

HTML・CSS・JavaScript・PHPなどを記述することだが、同じようにシステムを組み上げていくこともコーディングと言うので、例えば、マークアップ言語であるHTMLを記述することをマークアップ。と言い分けたりする。

田舎だったり、特に樹にしないところはシステムだろうが、HTMLだろうが、コード/英語を羅列した暗号のようなものを記述していくことをまとめてコーディングっていう。

フロントエンド?バックエンド?

フロントというのはWebサイトで言うと、閲覧者に表示されているページなどのフロント・表側のこと。
反対に、裏というとなんだか怪しいが、表示として閲覧者に表すことは少ないが、表に表示するための自動の処理や、中で動作しているプログラム/システム/そのコンピュータを動かす根幹の仕組みなどのこと。

クライアントサイド・サーバーサイド

同じような退避で、クライアント側(閲覧者側)に見えるところのこと。サーバー側のことをサーバーサイドって言ったり。

えーと、そんなこんなで、人によって捉え方や範囲などが全く違って誤解を招くコーディングのお話です。

コーディングのイメージ

難しい、英語ばっかり並んでいる、動かなくなる、エラーが嫌だ。
→たしかにそのとおり。好きじゃないとこればかりやってられない。
でも、サイトをカスタマイズするためには避けては通れないのも事実。

誰でも最初はできなかったので、例えるなら数学・国語など人によって得意不得意もちろんあるけれども簡単なものならできるのでやってみましょう、触れてみましょうということで。

具体的なコーディング

本題です。

先に伝えたとおり、範囲に誤解が出るので、どこのお話をするのか。ということですが、
ここでは、表・フロントに表示させるところをコーディングするハナシをします。
バック・サーバーサイド側はWordPress(PHP・MySQL・Apacheなど)が動いているというので、そちらは予め用意されているのでここでは、気にしないようにしましょう。

えーと、まずやりたいこと。
サイトを作っていく流れをおさらいしますね。

  1. 誰かに発信したい情報を公開するための場所:Webサーバー(レンタルサーバーなど)が必要
    これは準備しないといけない。自分でコンピュータに作る人もいるけど、多くはレンタルサーバーを使う。
  2. ドメインは必要に応じて、とってもとらなくても動くけど、URLと呼ばれるそのページやサイトの場所が未来にずっと残らないかも。かもくらいで、実は殆どはサーバーが用意しているドメインで大丈夫ってことも
  3. サーバーに契約したり・お試し申し込みした段階で、接続情報が届きます。

これで、申込みは終了。

次にファイルの転送(FTP)を行う。

WordPressにおけるコーディングとは?

CMSを使わないサイトはあまり作られるといったことは少なくなった。多くはCMSを利用している。HTML・CSSをページごとに作ると言ったことは個人サイトやコンテンツをたくさん配信するサイトで行うのは管理が難しいし、更新が大変。

WordPressも他のCMSと同じくテンプレートファイルと言われるファイルをもとに同じ形(レイアウト)で本文などの中身が違ったページを表示させる。金型をもとにして出来上がったものだと考えればいいのかな。

テーマというフォルダに作成する。多くは/wp-content/themes/テーマの名前(任意)でフォルダが作成されていて、そこの中に決められたルールに沿ってテンプレートファイルを準備する。無料テーマや購入したテーマなどは、ここに出来上がったものをそのままアップロード、または管理画面から追加する。有効化すればそれで完了。

構造としてはこんな感じ

  • テーマフォルダ
    • テンプレートファイル

  • original-theme
    • index.php
    • style.css
    • screenshot.png
    • archive.php
    • singular.php

コーディングというのは、それらをもとにしてカスタマイズする・自分ですべてテーマを作成するという時に行う。

このページではここをこんなふうに表示したいときってあるかと思いますが、そういった時には避けられない道。プラグインなどで解決できればいいですが、そうじゃない時はコーディングします。

コーディングする

themesフォルダ内にあなたが作成したフォルダまたは、もととなるテーマフォルダがあります。

  • 一からフォルダを作る
  • コピーして別の名前で作る
  • 子テーマを作る

の3つの方法があります。絶対に、もととなるテーマはカスタマイズしないこと。なぜかって?あなたの追記したところ等が更新時に上書きされてしまう可能性があるから。

いずれかの方法でページをカスタマイズするとします。

トップページに「こんにちは」を表示させる時には、index.phpを開いて、表示したいところにこんにちはという文字を入れます。こんにちはをそのまま記述してもいいですが、文章・挨拶なので、<p>こんにちは</p>と記述します。<p>は段落です。

見出しを表示したい時は、<h1><h2>といったヘディングタグを使います。<h6>まであります。

こういった文字やコンテンツ等に対して意味付け・定義を行い、コンピュータにどういった情報なのかといったことを明記する・マークアップすることをコーディングと大まかにいいます。さらに、マークアップというのはHTML文法に沿って記述されるコーディングですが、WordPressではPHP、CSS、場合によってはJavaScriptなども使用します。それも含めて、コーディングといいます。デザインは見た目をどうしたいのかといった図・設計を行います。

仕事でない限りは厳密に考えることはないですが、そうやって作成されているサイトもあります。

各ページごとに違った表示を行いたい

行いたいことを検索して、それをテンプレートファイルの適切な場所に貼り付けてあなたのサイトに合わせてコーディングを行いますが、各ページごとに違った表示を行いたいですよね?プログラムを記述しても良いですが、WordPressではテンプレートファイルの名称にルールがあるというお話をしました。それぞれのファイル名はそれぞれのページに合わせて読み込まれる仕組みになっており、ファイルを増やしていけばさらに細かくページごとに違った表示を行えるのです。

各テンプレートファイルの意味

WordPressは最低3つのファイルがテーマ内にあればそれなりに、何か表示できるようになっています。

  • index.php
  • style.css
  • screenshot.pngまたはscreenshot.jpg

index.phpはおもにトップページや、ブログサイトであれば最新の記事表示などに使います。archive.phpはアーカイブ全般ページ、category.phpを作成すると、カテゴリーページではcategory.phpが読み込まれ、他の西暦ごと・月ごとのアーカイブではarchive.phpが読み込まれます。date.phpなどを作ると日付のアーカイブのカスタマイズも可能です。

singular.phpは詳細ページ。デフォルトでは投稿・固定ページの2つの入力欄がありますが、それらの詳細ページの表示用に使用されます。

投稿と固定ページを別の表示にしたい時は、single.phpとpage.phpに分けることも可能です。

他に検索結果ページやNotfoundなどのテンプレートも作れます。

カスタム投稿の一覧、詳細・カスタムタクソノミーという拡張したページパターン向けのテンプレートも作成できます。

テンプレート階層という考え方

テンプレート階層という考え方に触れなければいけません。

トップページ用のテンプレートはトップページに使用されます。index.phpが主にそれに使われます。home.phpやfront-page.phpでも良いですが、index.phpで十分。

月や日ごと、カテゴリー・タグなどの記事一覧ページはarchive.php、またはdate.php・category.php・tag.phpなどを使います。

詳細ページ、固定ページ・投稿ページにはsingular.phpが使用されます。page.php・single.phpを使います。

階層ということですが、どういうことか。試しに、使用しているファイルを削除してみるとわかるのですが、index.phpのみ残してテーマをアップロードすると、トップページ用のテンプレートしかないため、どのページでもトップページに使用されるテンプレートと同じ形で表示されます。反対に言うと、同じ形で良いのであれば、index.phpやstyle.css・screenshot.png(.jpg)で事足りるのです。細かくテンプレートを作成するために、それぞれのページ用のテンプレートを作成していく、これがテンプレート階層というWordPressの考え方です。どのページでもindex.phpがあれば、表示されないというエラーになることなく、どこかのページにはどれかのテンプレートが必ず当てはまるように設計されているのです。

実際のコーディング

さて、実際のテンプレートファイルのコーディング。

WordPressは、

  • PHP
  • HTML
  • CSS

の3つにふれることが多い。PHPはプログラムで、通常はサーバーにアップロードして処理結果をHTMLとして表示させることがほとんど。CSSは表示されたHTMLをレイアウト・装飾する。

WordPressに関する検索やPHPに関する検索を行い、適切な記述をしたら、処理が正しく行われ表示される。誤りがあればそこにエラーメッセージが表示されるまたは、画面が白くなるなどの変化が起きます。

具体的な例として、以下のように日付表示を行うような処理があります。

<p>投稿時刻: <?php the_time('g:i a'); ?></p>

投稿の日時を表示させる時に使用します。適切な場所:投稿を表示させるアーカイブのループ・詳細ページの本文を表示させる付近(詳細ページでも通常1回転しかしませんがループ内)に記述します。

日付の例は上記通り。

カテゴリーを表示させるときは、違ったタグを使って表示します。PHPはスクリプト・プログラム言語ですが、コピー・アンド・ペーストするくらいのことであれば、だれでも編集可能で、怖いものではない。