Themes ｜横浜のホームページ制作スタジオFIXの社長ブログ

"Themes" タグがついている記事

Tag Cloud

WordPress テーマ作成の基礎知識

WordPressテーマを自作する場合、
ゼロから全て自力で作るのは、さすがに難しいと思いますので、
最初はデフォルトテーマ「WordPress Default」の
カスタマイズから始めてみるのがオススメです。

WordPressテーマのディレクトリ
自作するWordPressテーマは、
WordPress＞wp-content＞themes
以下に「テーマフォルダ」を作成して関連ファイルを格納します。

WordPressテーマのスタイルシート

WordPressテーマのスタイルシートには、テーマ名、作成者などを記載します。
style.cssに記載されたテーマ名、作成者情報が
WordPressダッシュボード＞外観＞テーマに表示される仕組みになっています。

以下は、このブログで無料配布している
WordPressテーマのスタイルシートの書き出し部分です。

@charset “utf-8″;
/* CSS Document */
/*
Theme Name: StudioFix_Type006
Description: 横浜のホームページ制作Studio FIX Inc.
Author: Studio FIX Inc.
Author URI: http://www.studio-fix.com/
*/

Theme Name:テーマ名
Description: 概要
Author: 作成者
Author URI: 作成者のホームページURL

[スタイルシートを見てみる]

テンプレート用phpファイルについて
WordPressテンプレートは、このようにヘッダ、フッター、サイドバーなど
モジュール化（部品化）された構成になっています。
- header.php — 共通ヘッダ用モジュール
- footer.php — 共通フッター用モジュール
- sidebar1.php — サイドバー用モジュール
- comments.php — コメント投稿用モジュール
- index.php — トップページ用
- single.php — 個別記事用
- page.php — 固定ページ用
- archive.php — 月間アーカイブ用
- category.php — カテゴリ用
- search.php — 検索結果用
- searchform.php — サイドバーの検索フォーム用
- tag.php — タグアーカイブ用
- 404.php — NotFound用
- style.css — テーマ用スタイルシート
- screenshot.png — テーマのサムネイル画像
これらのファイルのファイル名を変えることは出来ません。
WordPress指定のファイル名ですので、
ファイル名を変えてしまうと、WordPressが正しく動作しなくなります。

トップページ用のテンプレート
テーマフォルダ内に「index.php」が無いと、WordPressは正常に動作しません。
「index.php」は必ず作成する必要があります。

WordPressのデフォルト設定では新しい記事を投稿すると、
トップページが更新され、新しい記事が一番上に表示されます。
この場合のテンプレートが「index.php」です。

WordPressでは、トップページを固定ページにすることもできます。
企業のサイトをWordPressで構築したい場合などは、
トップページを固定して利用します。

そうしないと例えば「福利厚生について」という記事を作ったとたん
会社のトップページが「福利厚生について」に書き換わってしまいます。
それも、アリといえばアリですが…（笑）

このようにトップページを固定して使う場合のテンプレートが「home.php」となります。
トップページを固定ページにしないのであれば「home.php」の作成は不要です。

テーマフォルダ内に「index.php」と「home.php」
どちらも格納されている場合は、
WordPressは「home.php」を優先します。

以上、WordPress自作テーマを作成するときに
知っておくべき基礎知識編でした。
どうぞ素敵なテーマを作ってくださいね〜。(^-^)ノ



NO COMMENT

CATEGORY : Tips , WordPress

TAG : Themes , WordPress , 自分MEMO

2010/01/30

WordPress無料テーマ配布

先日、Movable TypeからWordPressに移行した
この横浜のホームページ制作スタジオFIXの社長ブログですが、
早速このブログデザインを WordPressテーマとして無料配布いたしま〜す。(^-^)ノ

無料WordPressテーマ「StudioFix_Type001」ダウンロード (336KB)

1. ダウンロードしたファイルを解凍してください
2. wp-content/themes の中にフォルダごとコピーしてください
3. WordPressへログインしてください
4. 外観→テーマの中に「StudioFix_Type001」という
　　テーマが表示されるので「使用する」をクリックしてください。

●プラグインについて
この無料WordPressテーマでは、ブログタイトルが表示される部分に
以下のような透過PNGファイルを使っています。

グレーのチェックに見える部分が透けて
グリーンの葉っぱのに重なって見える仕組みになっているのですが、
残念ながら、IE6は透過PNGに対応しておらず、
↓のようにグレーに見えてしまいます。ダサい…。orz

これを回避するためには、
IE6でも透過PNG対応できる JavaScriptライブラリ (無料) がオススメです。

1. IE PNG Fix へアクセスして「iepngfix.zip」をダウンロードします。
2. ダウンロードしたファイルを解凍します。
3. 「iepngfix」フォルダを、WordPressフォルダへアップロードします。

「iepngfix」をサーバにアップロードしたら、
テーマフォルダ「StudioFix_Type001」の中にある
スタイルシート「style.css」の25行目
behavior:url(iepngfix/iepngfix.htc);
の赤文字部分を、「iepngfix」をアップロードしたURLに書き換えます。
（例） behavior:url(http://www.studio-fix.com/iepngfix/iepngfix.htc);

最後に 25行目を書き換えた「style.css」を
wp-content/themes/StudioFix_Type001
にアップロードすれば、IE6でも透過PNGの美しいデザインが
表示されるようになりまーす。(^-^)

この WordPressテーマは無料でご利用いただけますが、
当社 Studio FIX Inc.のクレジットは消さないでご利用ください。
またテーマのカスタマイズは自由ですので、
お好みにあわせて変更してご利用ください。
なお配布テーマに関して作者はソフトウェアに対する一切の責任は負いません。
自己責任でご利用ください。

NO COMMENT

CATEGORY : Tips , Webデザイン , WordPress , ホームページ制作 , 無料ホームページ素材

TAG : Themes , Webデザイン , WordPress , 社長ブログ

2009/09/29

Copyright © 横浜のホームページ制作スタジオFIXの社長ブログ