IT知識の貯蔵庫

このブログでは「Wordpress」のテーマを自作することで、「Wordpress」のデザインや機能のカスタマイズを覚えていくことを目的にしています。

「Wordpress」のインストールについてはこちらの記事を御覧ください。

インストールしたWordpressページを表示してみる

インストールしたWordpressページをブラウザ表示。

これはこれでシンプルでいいのですが、オリジナルのテーマを作成する。

大元になるファイルを作成する

作成するテーマ名はこのブログタイトルの”storehouse“とします。

まずテーマのフォルダを作成します。

ここではテーマ名の”storehouse“とします。

次にページのデザインをしていきますが最低限必要なのがHTMLファイルとCSSファイルですね。

ここでは先ほど作成したフォルダの中にトップページになる”index.html“とスタイルシート”style.css“を作成します。

“style.css“ですが、こいつを”wordpress”に認識させるために、ファイルの冒頭に以下の記述をしておきます。

@charset "utf-8";
/*
Theme Name: テーマ名
Theme URI: このテーマのURL
Description: テーマの説明
Author: 制作者
Author URI: 制作者のホームページURL
Version: バージョン
*/

ページをデザインする

この記事では”Theme Name: storehouse” となります。作成するテーマ名に合わせて適宜変更してください。

あとはいつも通り自分がウェブページをデザインするときと同じ方法でひたすら作成していきましょう！ 自分はDreamweaverでサクサクデザインしていく。

画像はIllustrator、Photoshopでサクサク作っていく。できた！

ってそんな簡単にはできないのですが、htmlとcssでがんばって作りましょう！

画像作成のチュートリアルとかも将来的には記事にしていきたいのですが、ここでは端折ります。

必要なファイルの作成

次に、作成したindex.htmlをもとに、必要なテンプレートページを作成します。 代表的なページは以下の通りです。

• index.html…　トップページ

• achive.html…　記事一覧ページ

• single.html…　記事ページ

• page.html…　固定ページ

• 404.html…　404ページ

その他にもテンプレートページはありますが、とりあえず以上のページがあれば十分でしょう。

また、作成していくうちにいろいろと変更がでてくるので、ここではindex.htmlをコピーして中身そのままでもOKです。

作成したページの拡張子はhtmlからphpに変更しておきます。

最後に、テーマとしてインストールしたときにテーマ一覧に表示される画像（スクリーンショット）を作成します。

大きさは300＊225、ファイル形式はPNG、ファイル名は”screenshot.png”です。

作成したすべてのファイルをテーマのフォルダstorehouseにぶち込んでおきましょう。style.cssファイルも同じ階層にしてください。

• index.php

• achive.php

• single.php

• page.php

• 404.php

• style.css

• screenshot.png

ファイルの準備ができたら次はとりあえずアップロードしてみましょう！

カテゴリー:WordPress タグ: PHP, WordPress, テーマ, ファイル, 準備