WordPressテーマ作成番外編~OneClickCSS

wordpressを弄っていて、自分にいかに構築力がかけているかを痛感する。

HTMLタグをカタカタ打って、レイアウトを弄っていた頃は割と思い通りに出来たのに。

何故かと思えば、スタイルシートを全く勉強していないからなんだなw

スタイルシートが広まる前にブログに移行しちゃったし、それも適当にソフトがやってくれるヤツを使ってたからなあ。

あらためて会社のwebサイトを作っているのだが、とりあえずトップページをHTMLで作成してそこからwordpressで、構築し直してテーマを作ることにしてみた。

そこで便利に使ったのがこれ。
OneClickCSS
HTMLからスタイルシート(のセレクタ)を自動生成してくれるツール。

なかなか使えると思います。

WordPressテーマ作成その4~テーマのアップロード

では、実際にサイトを構成してみる。
テキストエディタでstyle.cssを開き、まだからのファイルに下記を記入する。

文字コードは日本語サイトでは必須。
Theme Name、Version、Descriptionは必ず書いておく。これがないとWordPressのテーマとして認識されない。
また、ダッシュボードでテーマを表示するときにもこの情報は表示される。その他は省略可能。
CSSファイルは、外部から直接アクセスすることができるので、あまり重要なことは書かない方がよい。
このままコピー・ペーストでもOkだがカッコ内は消去すること。書き込んだら保存する。

“WordPressテーマ作成その4~テーマのアップロード” の続きを読む

WordPressテーマ作成その3~サイトディレクトリの構成

WordPressをインスト-ルしたらテーマファイルの作成に移る。
まずは準備から始める。

ディレクトリの構成
3column   
図のようなページを構成するとする。
まずはタイトルをつける。ブログタイトルではなくテーマのタイトルだ。

ここでは「hogehoge」とつけてみる。
任意の場所に
hogehogehogehoge
という名のフォルダを作成する。

ここで次の作業をしておく。

1 [コントロール パネル]、[デスクトップのカスタマイズ]、[フォルダー オプション] の順にクリックする。
2 [表示] タブをクリックし [詳細設定] から、[登録されている拡張子は表示しない] チェック ボックスをオフにして、[OK] をクリックする。

続いて必要なファイルを作成していく。中身は何もなくて良い。手順は

1 hogehogeフォルダを開く
2 右クリックで新規作成を選択
3 テキストファイルを作成
4 作成したテキストファイルを選択
5 F2キーを押す
6 下記のファイル名に変更

を繰り返していく。 “WordPressテーマ作成その3~サイトディレクトリの構成” の続きを読む