IT坊やだからさ。

ウェブディレクター/プログララマーの現役フリーランスが送るガンダム話

Wordpress

【WordPressテーマ作成】最低限必要なファイルで作る!

投稿日:

必要最低限のファイルでWordpressのテーマを作成

ウェブサイトの運営を行う上で最近人気なソフトウェアWordpress。

WordPressがあればコーディング知識がなくとも立派なウェブサイトを作り上げることが可能だ。

またプラグインなど駆使することでウェブページのパフォーマンスも出せるCMSソフトウェアである。

CMSとは・・・
コンテンツ管理システム(Contents Management Systemの略称)。
ウェブコンテンツを構成するテキストや画像などのデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を行うシステムの総称。ウェブサイト、ポータルサイトの構築、管理によく使用される。

今回はCMSソフトのトップシェアに君臨しているWordpressについて。

WordPressで使われている「テーマ」作成に必要なファイルを共有しようと思う。

まず「テーマ」とは何かについて。

WordPressには無料有料の様々な「テーマ」が用意されている。

よく使われる「テーマ」には「Stork」や「Hummingbird」などが有名だ。

WordPressテーマ「ストーク」

WordPressテーマ「ハミングバード」

本気のブロガーの50%くらいはこのどちらかを使用している印象がある。

わたしは皆んなと合わせるのが嫌な性格なので「Stinger8」というテーマを使用している。

「Stinger 8」自体も有名なテーマなので差別化は測れてないが、そこは細かなデザインで差をつけるのが男。

この様にテーマには膨大な種類がある。

従って初めての人は、何も知識がないと「テーマ」を選ぶことすら困惑するだろう。

また「テーマ」の選定は難しく、ウェブサイトの活用方法によって適切なテーマが変わってくる。

したがって多くのブロガーは「Stork」か「Hummingbird」を使う場合が多い。

では、テーマの種類の話はこれくらいにして、本題に入ろう。

WordPressのテーマは自作できる

実はWordpressのテーマは自作できるのだ。

わたしはフリーランスの仕事でクライアントさんの要望に合わせたワイヤーフレームをWordpress化する仕事を請け負っているので、この部分を共有したいと考えた。

そこでWordpressのテーマを自作する場合に最低限必要になるファイルを把握しようと思う。

WordPressのテーマを作成する上で必ず必要になるのは以下のファイルである。

  • index.php
  • header.php
  • footer.php
  • style.css
  • functions.php

これだけ。

究極では「index.php」と「style.css」だけでも作ることが可能のようだ。

では図解でWordpressのファイルの仕組みを書いていく。

wordpressのページは複数のファイルで構成されている

図では代表的な4つの構成ファイルを示している。

WordPressの構造は複数のファイルから機能を集結させて1つのページに仕上げている。

その最もシンプルな型が上記4つの設定ファイルになる。

HTMLファイルをphpファイルへ分割する

ではウェブページを表示するHTMLファイルをまず考えてみてほしい。

HTMLの最もシンプルな形は「html」タグ、「head」タグ「body」タグだけで構成されたものだ。

つまりWordpressでこの構成を実現してあげればウェブページとして最低限の表示は可能になる。

最低限の要素を先ほどの4つのphpファイルに分割すればWordpressのテーマとして機能する。

では一般的なテーマがHTML要素をどのphpファイルが担っているかざっくり解説しよう。

まず「html」タグは「header.php」で「/html」タグは「footer.php」にある。

「head」タグは「/head」タグも合わせて「header.php」にある。

「body」タグは「header/php」で「/body」タグは「footer.php」にある。

これが基本的な構造。

これだけ見ると「index.php」は必要ない様に見えるが肝心のコンテンツは「index.php」に集約される。

では具体的にそれぞれのファイルの構造をここでは書いていこう。

index.phpの基本的な構造

まずはメインのファイルとなる「index.php」の基本的な構成から。

基本的な構成とは「HTML」ファイルとして画面生成がしっかりできていれば良い。

ただし前提条件として「header.php」と「footer.php」を使用する。

つまり「html」や「head」タグはここでは含めない。

さらにいえば「body」タグも「index.php」には含めない。

具体的な構造をざっくりと書くとこの様になる。

「index.php」の基本的概念は次の通り。

  • 「header.php」を先頭で呼び出す
  • 存在する記事のループ処理
  • 「footer.php」を最後に呼び出す

シンプルに処理はこれだけで十分だ。

phpの書き方は人によって違うし、テーマ構造はそれぞれ異なるがシンプルにすると3つの処理ができていれば「index.php」は十分である。

header.phpの基本的な構造

次に先頭に位置する「header.php」について。

このファイルには「html」「head」「body」タグなどHTML要素を入れ込む。

特に「head」タグは重要で「function.php」などで多くの取り決めを行うのであればここに注力を注ぎたい。

今回はシンプルに必要最低限レベルの要素のみ記入する。

「head」タグの中では「jQuery」など外部のライブラリなども予めインポートしておくことでテーマのバランスを取ることが可能になる。

必要なのはウェブサイトのタイトルやディスクリプション、ナビメニューなどの設定変更を見越したコーディングで仕上げることだろう。

footer.phpの基本的な構造

次に「footer.php」について。

必要最低限のシンプルなスタイルでよければ「footer.php」はそれほど重要ではない。

多くのテーマで採用しているコピーライトなどを入力して終わり。

「/body」タグと「/html」タグを入力すれば全体としては完了というところだ。

style.cssの基本的な構造

最後に「style.css」を付け加える。

スタイルシートはウェブサイトがCMSが主流でなかった時代から使われているファイルで重要である。

特にウェブサイト全体のデザインは「css」ファイルが担うことになる。

テーマの情緒性を持たせるのもこのファイルになるだろう。

特に必須項目などは無いが次の要素はどのテーマにおいても取り決めされているのでテーマ作成を行うのであれば重要になる。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td

これ以外にも独自の「class」を展開するのであれば「css」のカスタマイズが重要になってくる。

CSSについてはまた別の機会で触れることにしよう。

今回はWordpressのテーマをシンプルに作成する必要最低限のファイルの説明だけとする。

この他にも多くのテーマが所有しているファイルを列記しておこう。

  • function.php
  • category.php
  • page.php
  • single.php
  • sideber.php
  • comments.php
  • archive.php

この辺りは必須では無いがもはや必須に近いファイルばかり。

シンプルにミニマリストを目指すわたしとしては十分な要領である。

しかしながら旅行鞄だけで生活するのも悪く無いなと思う今日この頃。

今日も良い1日を。

      

-Wordpress

執筆者:

関連記事

文章・文章コピー禁止メゾット一覧!資産サイトは盗まれるな!

文書・文章コピー禁止スクリプト一覧!資産サイトは盗まれるな!

ウェブサイトは「タダ」で公開するのが一般的。 つまりウェブサイト上に記述された情報も「タダ」で公開するのが一般的。 ただ勘違いしないで欲しい。 「タダ」で公開している情報だからと言って「タダ」で使って …

しかし、わかるように努力するつもりであります。

【必須用語まとめ】WordPressのブログで必要な単語!

WordPressでブログを始めたが思ったより難しい。 IT出身じゃないから挫折したとか。 WordPressあるあるだ。 そこでよりWordpressを身近になるようにブログを運営しているわたしが必 …

逆立ちしたって人は神様にはなれねえもんな

【WordPress】エックスサーバーでサブドメインを設定する方法!

特化サイトを作ったが他のテーマも書いてみたいと思うことはあるだろう。 その度に新しいドメインを取得していては金がかかって仕方ない。 だが、新しいドメインを取らずとも別のサイトを作ることは容易なのだ。 …

ptengineの解析コードをwordpressに設定する

【超簡単】リアルタイム解析ツール「PTengine」の設定方法!

ウェブサイトのアクセスを分析したいが、コードを追加するとかよくわからない。 と思われる人は多いだろう。 でも実際、コードの追加にプログラミング知識は全くと言っていいほどいらない。 必要なのは正しい「情 …

見せて貰おうか。GoogleAnalyticsの性能とやらを!

【WordPress】Google Analyticsのトラッキングコード設定!

サイトを運営していると気になるのはアクセスだ。 アクセスにWEB関係の人間は喜怒哀楽を表すものだ。 わたしも修行した心身であるが、いまだに煩悩が過ぎるものだ。 それと同時に、アクセス数に関しては重要だ …

プロフィール

逆襲のジェリド

逆襲のジェリドは史実を覆すべく、復活を遂げた。時代はプログラミングを求める!俺を戦いに駆り立てたのは貴様だ!そんなこと言えるのかよ!

現役ITエンジニアフリーランス。得意分野はphp、Java、Javascript、VB.net、VBA。仕事についてはDMで。このブログではウェブかプログラミング、ガンダムについて徒然なるままに。

詳しくはこちら→ 詳細プロフィール