WordPressテーマ作成方法[第1回]

今回はオープンソースCMSワードプレスのデザインテンプレート、すなわちテーマの作り方と作成手順についてです。

WordPressでブログやホームページを開設する際のデザインはデフォルトのテーマを使用したり、無料で配布されているテンプレートを導入して、
CSSやタグ部分をダッシュボードからカスタマイズするような方法があります。

もしくは、既にHTMLの静的構造のWEBサイトをcms化するような場合も、そのようなカスタマイズやデザイン編集作業が必要になります。


国内ではMovableTypeなどの需要も大きいですが、プレビューするには再構築などの操作が必要であり、構造が複雑になる場合もあるので、
時がかかりやすいのに比べて、WordPressはファイル実行後すぐに反映結果が見えるWordPressのデザイン反映やカスタマイズを習得することで、
よりスピーディんに、CMSサイトのデザイン編集が可能になることを目的としています。


基本的にはデフォルトで配置されているテーマのフォルダ内の構成を参照すればよいのですが、テーマ作成の最小限ファイル構成はstyle.css,index.php,screenshot.pngのみで可能なようです。当然、サイドバーのウィジェット編集などの機能は該当ファイルが必要になります。

【WordPressテーマ作成方法手順】

【1】.テーマ配置フォルダを作成
ルートフォルダ\wp-content\themes の中に、新規テーマ用のフォルダを作成します。
今回は『sampletheme』とします。

【2】基本構成ファイルの準備

基本的な構成ファイルが必要になりますが、1ページごとに準備するのは結構時間がかかります。
classicフォルダ内のファイルをそのままコピーして新規作成したsamplethemeフォルダに貼り付けます

【3】style.cssファイルの編集

コピーしたファイルのなかから、style.cssをエディタソフトで開き、ヘッダ部分の編集を行います。

以下は必ずヘッダ部分に記述するべき内容です。
デフォルトの記述例を参考にするとよいでしょう。

style.cssのヘッダ情報

ここから============================================
@charset "utf-8";
/*
Theme Name: WordPress NewTheme
Theme URI: http://localhost/
Description: ここに制作者等の詳細情報を記載可能
Version: 0.000
Author: サンプル制作者
Author URI: http://localhost/
Tags: blue, custom header, fixed width, two columns, widgets

ここはメモ欄でテーマのテンプレート一覧では表示されません
http://localhost/

*/
ここまで============================================

『CSSヘッダ項目の説明』
Theme Name= テーマ名。ダッシュボードでのテーマ選択画面で表示されるテーマ名がを記述する。全角文字も可能。
Theme URI= テーマの配布元WEBサイトのURI。
Description= テーマについて詳細説明。<a>タグでアンカーテキストも可能で、他には<b>タグなどインライン要素は認識される。
Author= テーマ制作者の氏名。全角可能
Author URI= テーマ制作者のURI。
Version= テーマのバージョン情報。
Tags= タグの情報
他= タグを指定しない部分にメモなどの情報が記載可能で、テーマ選択画面では表示されない。


【4】テーマ追加の確認

テーマフォルダを作成して、デフォルトのclassicテーマのファイルをコピーして、style.cssファイルを編集したら、
WordPressの管理画面ダッシュボードの『外観』項目から『テーマ』を選択して、新規テーマが追加されているか確認します。

無事追加されていたら、テーマを使用するをクリックして、サイトに反映されているか確認します。


WordPressテーマ作成方法[第1回]は基本ファイル構成の作成です。


テーマへのデザイン編集や反映の具体的な手順はWordPressテーマ作成方法[第2回]で掲載予定です。





ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

この記事へのトラックバック