gakkieのBlog

wordpressのテーマをYUIで作ろう-その1

このエントリーを含むはてなブックマークはてなブックマーク - wordpressのテーマをYUIで作ろう-その1 この記事をクリップ!Livedoorクリップ - wordpressのテーマをYUIで作ろう-その1 Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク @niftyクリップに追加 このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 newsing it! この記事をChoix! Googleブックマークに追加 Bookmark this on Delicious Digg This FriendFeedで共有

先週、会社でYUIの勉強会に出ました。
しかしながら、今期から配属されたチームはフロントを持たないチームなので、
JavascriptもCSSも書かないと思われます。

というわけで、このBlogのデザインをYUIを利用して作っていきたいと思います。
完成するまで、シンプルというか何もないデザインですが、読めればいいかな、と。

なお、Linux上でファイルを直接いじってますので、
コマンドとかそのままのっけてます。

というわけで、続きへ。

このシリーズで今現在の僕に足りない知識は、今思い付くだけで下の3つ。

  • wordpressのテーマについて
  • YUIの使いかた
  • CSSの文法(←致命的)

今日は最初なのでベースだけ一気に作っちゃいました。

以下では、
$WP_HOME
をwordpressのインストールディレクトリと読みかえてください。

テンプレートのベースを作成する

wordpressのテンプレートデザインは、
[code]
$ cd $WP_HOME/wp-content/themes/
[/code]
の下に置かれています。
既に存在するテーマのディレクトリの中を見てみると、header.phpとかfooter.phpとかpage.phpとか、ページのコンテンツっぽいものがいろいろ並んでいます。

適当な名前でディレクトリを作って、その中にデフォルトテーマのPHPファイルを全部コピーしてしまいます。
[code]
$ mkdir gakkie_original
$ cp default/*.php gakkie_original/
[/code]

これでテンプレートができました。

テンプレート設定

前項でテンプレートをコピーしましたが、Wordpressがこのテンプレートを利用できるように設定を行う必要があります。

先ほど作ったディレクトリ内にstyle.cssを作ります。
このファイルがテンプレートの中心設定になります。
[code]
$ cd gakkie_original
$ vi style.css
[/code]

[css]
/*
Theme Name: Gakkie Original
Theme URI: http://blog.gakkie.com/
Version: 0.0.1
Description: This is gakkie’s first theme
Author: Masato Uegaki
Author URI: http://blog.gakkie.com/
*/
[/css]

これで、Web上から自分の作ったテーマを選択・適用できるようになりました。

何もない状態

長くなってきたので、今日はここまでにします。
次回はこのテンプレートにYUIでデザインを追加していきます。

参考文献




4 Comments to “wordpressのテーマをYUIで作ろう-その1”

Add Comments (+)

  1. forever5yearsold より:

    今すげえ勢いで http://blog.gakkie.com/wp-content/themes/gakkie_original/style.cs が見つからないんだけど、ここからスタート?

  2. gakkie より:

    >forever5yearsoldさん
    勢い余ってtypoなら見付からなくても仕方ないんだと思いますが、
    このへんのディレクトリ見られるの嫌ですね。どうにかします。

  3. isid より:

    juyugaoka
    ってなに

  4. gakkie より:

    >isid
    それはいいけど勉強会しようぜw

Leave a Reply