WordPress テーマ（テンプレート）: 小粋空間

Top ＞ WordPress ＞テーマ＞ WordPress テーマ（テンプレート）

WordPress テーマ（テンプレート）

Posted at January 17,2007 1:17 AM
Tag：[Template, WordPress]

WordPress 用のテーマ（テンプレート）を作りました。サンプルのスクリーンショットは2カラム（右サイドバー）ですが、左サイドバーも用意しております。レイアウトの変更方法につきましては本エントリー本文を参照ください。

注：このエントリーに掲載されている内容は古いため、「WordPress テーマ（テンプレート）・3カラム版」をご覧ください。リンク先のテーマで2カラムも利用可能です。

１．動作確認環境

動作確認は下記の環境で行っています。

OS：Windows2000/XP
ブラウザ：IE6.0/IE7.0/Firefox 2.0/Opera 9
WordPress ME：2.0.5～2.0.7（以降のバージョンでもOKのようです）

２．利用規定

ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します。

３．カラムレイアウト変更方法

このテーマではカラムレイアウトのバリエーションとして、

2カラム（右サイドバー：カラム幅固定）
2カラム（左サイドバー：カラム幅固定）
2カラムリキッドレイアウト（右サイドバー：左カラム幅可変）
2カラムリキッドレイアウト（左サイドバー：右カラム幅可変）

の計4種類を用意しています（それぞれのサンプルは下にある画像をご覧ください）。

カラムレイアウトは、HTMLテンプレートの body 要素の class 属性を書き換えることで変更することができます。例えば、2カラムの右サイドバーから2カラム（左サイドバー）に変更したい場合は、header.php の

<body class="layout-two-column-right">

の赤色部分を

<body class="layout-two-column-left">

と、青色の内容に変更します。このテクニックは Designing with Web Standards でも紹介されています。

以下にそれぞれのレイアウトに対する class 属性値を示します。

<body class="layout-two-column-right">

2カラム（右サイドバー）

<body class="layout-two-column-liquid-right">

2カラム・リキッドレイアウト（右サイドバー）

<body class="layout-two-column-left">

2カラム（左サイドバー）

<body class="layout-two-column-liquid-left">

2カラム・リキッドレイアウト（左サイドバー）

配布時は一番上の2カラム・固定レイアウト（右サイドバー）で配布しております。

５．記事の日付表示について

本テンプレートでは、タイトル前方に記事の公開日を表示するようにしており、JavaScript を用いてページの前方に同一日付の記事がある場合、日付を重複して表示しないようにしています。なおデフォルトの環境設定でのみ動作確認していますので不具合ございましたらご連絡ください。
この機能を無効にする場合はベースHTMLテンプレート下にある

<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('p');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
    if (elements[i].getAttribute('class') == 'date' ||
        elements[i].getAttribute('className') == 'date') {
        work = elements[i].innerHTML;
        if(work == work_old){
            elements[i].style.display = 'none';
        }
        work_old = work;
    }
}
//-->
</script>

を削除してください。

６．XHTML1.0 Transitional valid

テンプレートを設定した状態で W3C Markup Validation Service での XHTML1.0 Transitional valid および、Another HTML-lint gateway で高得点になるようにしています。

７．その他

基本的な動作は確認したつもりですが、WordPress の動作を全て理解できていない状態ですので、不具合等ございましたらご連絡ください。

８．ダウンロード

下のリンクからテーマ（テンプレート）をダウンロードしてください。

2007.01.17 初版
2007.01.24 コメントエリアの横幅を修正
2007.02.11 クレジットバナーにアンカーを追加
2007.02.11 サイドバーのアンカーのない文字への color プロパティ追加
2007.02.24 リキッドレイアウトのサイドバーの垂直開始位置修正

テーマの設定方法は、ダウンロードしたファイルを解凍し、中にある koikikukan というフォルダを、wp-content/themes 配下にアップロードしてください。そのあと管理画面の [表示] をクリックすると「利用できるテーマ」にアップロードしたテーマが表示されますので、クリックしてください。

2007.02.04 追記
カラムレイアウト変更内容に誤記がありましたので修正しました。

Posted by yujiro このページの先頭に戻る

関連記事をもっと読む

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ Wordpress とか…。 from affection.
別のサイトではMTで構築したので今回はWordpressで行ってみました。 ... [続きを読む]

Tracked on January 26, 2007 11:55 AM

≫ WordPress テーマ from PARADISE
Movable Type を始めた頃から大変お世話になっている小粋空間様にて、配布されている「WordPress」テンプレートを使わせて頂いています。 ... [続きを読む]

Tracked on February 15, 2007 1:24 AM

3カラムはないのでしょうか？

[1] Posted by panser : January 17, 2007 5:03 PM

＞panserさん
こんばんは。
ご質問の件ですが、WordPress のデフォルト状態では、

・3カラムにするほど情報がない（個人差はあると思いますが）
・「最近のコメント」等を表示する場合、プラグインが必要
・プラグインを利用しなくても使えるテーマ

という理由で2カラムにしています。
3カラムはいずれ公開する予定ですが、提供方法は未定です。

[2] Posted by yujiro : January 17, 2007 6:49 PM

こんばんは、yujiroさん
お世話になっています。

以前から興味のあった「WordPress」をテスト設置したので
テンプレートをダウンロードさせて頂きました。

ありがとうございます。

[3] Posted by mituru : January 20, 2007 1:23 AM

＞mituruさん
こんばんは。
ご利用＆ご連絡ありがとうございました。
不具合等ございましたらご連絡ください。
ではでは！

[4] Posted by yujiro : January 20, 2007 4:00 AM

こんにちは。

はじめまして。

テンプレートをダウンロードさせて頂きました。

これから、WPに挑戦です。(^^ゞ

よろしくお願いします。

[5] Posted by aso : January 22, 2007 11:42 AM

＞asoさん
はじめまして。
ご利用＆ご連絡ありがとうございました。
こちらこそどうぞよろしくお願い致します。

[6] Posted by yujiro : January 23, 2007 2:12 AM

お久しぶりです、デフォルト２カラムで使ってますが、
Firefoxだとコメントエリアが大きすぎてサイドバーにはみ出るようです、IEでは問題ありません。

[7] Posted by rpm : January 24, 2007 8:41 AM

＞rpmさん
こんばんは。
ご無沙汰してます。

テンプレートご利用ありがとうございました。
ご指摘の箇所は先ほど修正致しました。
ご連絡ありがとうございます！

[8] Posted by yujiro : January 24, 2007 11:40 PM

はじめまして、こんにちは。
テンプレートをDLさせていただきました。

WP2.0.7と2.1で利用させてもらってます。
デザインがシンプルでとても気に入りました。
ありがとうございます。

いつも、MTなどのカスタマイズ情報を参考にさせていただいております。
これからもがんばってくださいませ。

[9] Posted by Trickster : January 26, 2007 11:00 AM

＞Tricksterさん
こんばんは。
テンプレートご利用＆ご連絡ありがとうございます。
WordPress の情報も少しずつお出しできればと思います。
ではでは！

[10] Posted by yujiro : January 26, 2007 11:06 PM

yujiroさん、ご無沙汰しております！

yujiroさんのWP用テンプレート、とても嬉しいです！
去年の暮れから、MTからひそかにWPでブログやっていましたが、引き続きこのまま小粋ユーザーとしてよろしくお願いいたします！

[11] Posted by ミッチ : January 28, 2007 5:41 PM

早速ですが、PagedCommentsというプラグインを利用しているのですが、Koikikukan 0.1でこのプラグインを利用しているページがうまく表示されません。
スタイルシートがうまく反映されてないようですし、サイドバー等も表示されません。

私の方では、wp-content/themes/koikikukan の中へ　comments-paged.phpとguestbook.phpもちゃんと入れました。

ムムムー？

[12] Posted by ミッチ : January 28, 2007 8:24 PM

テンプレート拝借いたすました！
MovalbeType 愛好家なんですが、チャレンジャーはココにも。。。
なろ?愛好家にも優しい軽いテンプレート！
ありがとうございました。

3カラムなんて。。。贅沢言いませんよ！ホントに。。。
涙こらえてます。。。ぷっ。

[13] Posted by なろ?王子 : January 29, 2007 6:43 PM

＞ミッチさん
ご無沙汰してます。
テンプレートご利用ありがとうございます。
ご質問の件につきましては別途エントリー致します（まずはプラグインの動作確認からですが…）。
少々お時間ください。
それではよろしくお願い致します。

[14] Posted by yujiro : January 29, 2007 7:05 PM

＞なろ?王子さん
こんにちは。
ご利用＆ご連絡ありがとうございます。
3カラムもそのうち公開しますので少々お待ちください。

[15] Posted by yujiro : January 29, 2007 7:23 PM

yujiro様

僭越で大変申し訳ないのですが、ミッチ様の件はテンプレートのCSSの問題でしたようなので、私が横槍を入れてしまいました（汗

たぶん解決してると...思います。
あまりPHPに詳しくないので深い落とし穴あるかもですが...。

とりあえず、ご報告まで。

[16] Posted by Trickster : January 30, 2007 9:39 AM

＞Tricksterさん
こんにちは。
ご連絡くださりありがとうございました。
WordPress の情報をためていきたいので、とりあえずこちらでもカスタマイズについて改めてエントリーさせて頂きます。
ではでは！

[17] Posted by yujiro : February 1, 2007 11:44 AM

はじめまして。テンプレート利用させていただき感謝しています！

一つ質問なのですが、サイドバーの文字、「categories」などを日本語に変更しようとすると、必ず文字化けが起こります。

文字化けを防ぐにはどうすればいいでしょうか？
ご回答よろしくお願いいたします。

[18] Posted by maki : February 17, 2007 4:15 PM

maki 様

横から失礼いたします。
たぶん、テンプレートの文字コードがサイトの文字コードを違うためだと思います。
エディタでテンプレートを開き、文字コードをサイトで使用している文字コードに変換すると、上手くいくかもしれないです。

[19] Posted by Trickster : February 21, 2007 10:15 AM

＞makiさん
こんばんは。
ご質問の件ですが、 Trickster さんのおっしゃる通り、テンプレート（sidebar.php）の文字コードをブログの文字コードにすれば正常に表示されます。
文字コードの変更方法は「ファイルの文字コードを簡単に変更する方法」が幸いになれば幸いです。
それではよろしくお願い致します。

＞Tricksterさん
こんばんは。
たびたびのアドバイスありがとうございます！

[20] Posted by yujiro : February 21, 2007 11:25 PM

はじめまして。
テンプレートDL＆利用させていただきました。
はじめてのWordPressだったので試行錯誤でしたが
色々と勉強になりました。
ありがとうございました。

[21] Posted by m+ : March 19, 2007 6:28 PM

＞m+さん
はじめまして。
テンプレートご利用＆ご連絡ありがとうございます。
それでは今後ともどうぞよろしくお願い致します。

[22] Posted by yujiro : March 20, 2007 11:47 AM

テンプレート使用させて頂きました。ありがとうございました。

[23] Posted by パン子とにゃんこ : May 17, 2007 11:24 AM

＞パン子とにゃんこさん
こんにちは。
ご利用＆ご連絡ありがとうございました。
ではでは！

[24] Posted by yujiro : May 17, 2007 1:13 PM

お久しぶりです。こんばんわ。
動作報告にきました。
wordpressme2.0.7?2.0.10
wordpressme2.1.2?2.1.3
wordpressme2.2
上記3つのバージョン問題なく動作しています。
今後は、2.2系のみを使う予定なのでそれ以前ぼバージョンの報告はできません；；
これからも開発頑張って下さい！

MTもインストールしてみましたが、こっちもいいですね！

[25] Posted by kazu : June 21, 2007 12:53 AM

＞kazuさん
こんにちは。
ご無沙汰してます。
WordPressテンプレートの動作確認、ありがとうございます。
2.2系も大丈夫みたいですね。
大変助かりました！

[26] Posted by yujiro : June 23, 2007 12:17 PM

はじめまして！

テンプレートを使わせていただきます。
ありがとうございます！

スタイルシートの色（バックグラウンド）のところを変えました。
よろしくお願いします。

MTにもチャレンジしようと考えています。

[27] Posted by フラマン : August 30, 2007 3:02 PM

＞フラマンさん
はじめまして。
ご連絡遅くなってすいません。
テンプレートご利用ありがとうございます。
デザインはご自由にカスタマイズしてください。
それではよろしくお願い致します。

[28] Posted by yujiro : September 6, 2007 11:38 AM

ここでのテンプレートをワードプレスに適用させてもらいました。
カスタマイズしたいのですが、管理からファイルのところにいくと、ワードプレスのデフォルトのテンプレートのファイルしかありません。
MTのように管理画面から直接書き換えはできないのでしょうか。
よろしかったらファイルの書き換えの仕方を教えてください。

[29] Posted by pine : October 18, 2007 4:39 PM

＞pineさん
こんばんは。
ご質問の件ですが、「表示」→「テーマエディタ」で、変更したテーマの編集をすることができます。
それではよろしくお願い致します。

[30] Posted by yujiro

: October 20, 2007 3:41 AM

ありがとうございました！もっとよく調べてから質問すべきでした。
お手数おかけしてすみません・・。

[31] Posted by pine : October 21, 2007 11:50 AM

＞pineさん
こんにちは。
どういたしまして。
ではでは！

[32] Posted by yujiro

: October 22, 2007 1:52 PM

３カラムレイアウト版をDLして、とかきかえましたが、URLにあるように表示されてしまいます。コメントに関するプラグインも説明どおりに、アップロードし、必要な記述をしたつもりなのですが、どんな問題があるのでしょうか。コメントはともかく、サイドバーが全体にわたって表示されてしまい、日記が表示されないのは困ります。どうぞアドバイスよろしくお願いいたします。

[33] Posted by ぴね : December 5, 2007 12:01 AM

３カラムレイアウト版をDLして、<body class="layout-two-column-liquid-right">とかきかえましたが、URLにあるように表示されてしまいます。コメントに関するプラグインも説明どおりに、アップロードし、必要な記述をしたつもりなのですが、どんな問題があるのでしょうか。コメントはともかく、サイドバーが全体にわたって表示されてしまい、日記が表示されないのは困ります。どうぞアドバイスよろしくお願いいたします。

[34] Posted by ぴね : December 5, 2007 12:07 AM

＞ぴねさん
こんばんは。
テンプレートご利用ありがとうございます。
ご質問の件ですが、レイアウトが崩れている一番下に、3カラム版の記事の一番最後に記しているものと同じエラー

Fatal error: Call to undefined function: get_recently_commented() in～

が表示されています。

プラグインは、リンク先にある commented-entry-list_1.2.zip をご利用であること。またプラグインを有効にされていることをご確認頂けますでしょうか。

同じ事象の質問が3カラム版の記事のコメント欄の[73][74]にありますので、そちらもご参考にして頂ければ幸いです。

レイアウトが崩れる件は、layout-two-column-liquid-right にした場合は、テンプレート内（メインページ・アーカイブ・ページ・シングルポスト）にある

<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>

を削除してください。
またテンプレート「sidebar2.php（左カラム表示の内容）」の内容を「サイドバー（右カラム表示の内容）」に移動してください（この点は説明不足でした）。

それではよろしくお願い致します。

[35] Posted by yujiro

: December 5, 2007 12:29 AM

回答ありがとうございます。実はここを参考にする前から、wordopressにはデフォルトでサイドバーにコメントがないので、自分で調べて、commented-entry-list_1.2.zipを見つけて、DLし、説明どおりにプラグインも有効にし、PHPの記述もサイドバーにしたのですが、同じエラーメッセージが出てしまっていたのです。サーバーに問題あるということもあるのでしょうか。ロリポップなんですが、関係ないのでしょうか。
レイアウトが崩れてしまう件に関しましては問題解決しました。
ただ、sidebar2.phpの内容をサイドバーに付け足すと、デフォルトでサイドバーに記述され、表示されるようになっていたarchivesやらcategoriesなどが表示されなくなってしまうので、やはりcommented-entry-list_1.2.zipは使えません。

[36] Posted by ぴね : December 5, 2007 12:59 AM

＞ぴねさん
こんばんは。
ご連絡ありがとうございました。

ロリポップをレンタルして、WordPress223をインストールして、commented-entry-list_1.2.php を有効（緑色）にして試してみたところ、OKでした。
テーマを入れ替えた以外、他のプラグインは何もいれていない状態です。
http://movabletype.lolipop.jp/wordpress223/

プラグインの動作はテンプレートに依存するものではないので、エラーになる件につきましては配布元サイトで質問をされた方が適切なアドバイスを頂けるかもしれません。
お役に立てず申し訳ありません。

それではよろしくお願い致します。

[37] Posted by yujiro

: December 5, 2007 10:37 PM

大変申し訳ありません！「有効（緑色）」の文字の記述で気づきました。わたしはプラグインの横の文字が「有効化」となっているものが、プラグイン有効の意味なのかと勘違いしていたのです。ですから、それを押してしまって「無効化」としたらプラグインが無効になってしまうとばかり思っていました。
わたしの勘違いで大変ご迷惑おかけしました。コメント表示は問題なくされています。
わざわざwordpressのインストールまでしていただき、恐縮です。本当に申し訳ありませんでした。

[38] Posted by ぴね : December 6, 2007 12:24 PM

＞ぴねさん
こんばんは。
ご連絡ありがとうございました。
無事に表示されたようで良かったです。
ではでは！

[39] Posted by yujiro

: December 9, 2007 12:27 AM

wordpressの3カラム版をインストールして、右サイドバーの2カラムにしたかったので、小粋空間での説明どおり、header.phpを書き換えたのですが、表示が大きく崩れてしまいます。左サイドバーにしても同じです。ブラウザはfirefoxでしか確認していませんが、なにか間違っているのでしょうか。宜しくお願いいたします。

[40] Posted by pine : December 30, 2007 9:01 PM

＞pineさん
こんばんは。
ご質問の件ですが、右サイドバーの2カラムにする場合、当ブログの変更手順で、左サイドバーのマークアップをすべて削除する手順がもれているのが原因です。すいません。

具体的には、インデックス・アーカイブ・ページ・シングルポストにある、下記のタグを削除してください。

<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>

不具合が解消しない場合、ページのURLをご連絡ください。
それではよろしくお願い致します。

[41] Posted by yujiro

: January 1, 2008 3:54 AM

レスが大変遅れましたもうしわけありませんでした。問題は解消いたしました。ありがとうございます。

[42] Posted by pine : January 16, 2008 1:46 PM

＞pineさん
こんばんは。
ご連絡ありがとうございました。
無事に解消したようでよかったです。
ではでは！

[43] Posted by yujiro

: January 16, 2008 11:12 PM

こんにちわ。

WordPress2.5.1にてテンプレートを使わせて貰ってます。
ありがとうございます。

質問なのですが、小粋空間様のようにタイトルの下にPageのリンクを追加するには
どうすればいいのでしょうか。

希望としましては、Home　Page１　Page２　・・・　みたいな感じでしたいのですが・・・

お忙しいところすみませんがお教えください。

[44] Posted by タマ : May 8, 2008 5:39 PM

＞タマさん
こんにちは。
ご質問の件につきまして、「Pageのリンク」というのは、当ブログの

　Home About　Archives Tags Template Custom …（以下略）

という部分を指してますでしょうか。
であれば、「グローバルナビゲーション（その1：基本スタイル）」が参考になるかもしれません。

追加位置は、配布テーマの下記の位置に追加してください。

<?php get_header(); ?>
[ここに、記事の１項のグローバルナビゲーション追加]
<div id="content">
　　：
（以下略）
　　：

それではよろしくお願い致します。

[45] Posted by yujiro

: May 8, 2008 6:20 PM

yujiroさん

ありがとうございます。
無事に設置できました。

[46] Posted by タマ : May 9, 2008 11:07 AM

＞タマさん
こんにちは。
ご連絡ありがとうございました。
無事にできたようでよかったです。
ではでは！

[47] Posted by yujiro

: May 9, 2008 1:22 PM

こんばんは、はじめまして。
WordPress バージョン2.6.3 で３カラムのテンプレートを使用させていただいております。
　早速ですが、2点質問があります。
１．sidebar2.phpに以下のようにしてカテゴリーをプルダウン化していますが、表示されるカテゴリーは次のページへ進むとカテゴリーの括りがなくなってしまいます。
　何かよいカテゴリーのプルダウン化はありませんでしょうか。

<li><h2>カテゴリー</h2>
<ul><form action="<?php bloginfo('url'); ?>/index.php" method="post">
<?php dropdown_cats(); ?>
<input type="submit" name="submit" value="決定" />
</form></ul>
</li>

２．コメントのタイトルについてです。
　記事の最後にある「コメント（１）」をクリックするとコメント付きのページへ移行しますが、タイトルの記事題名の後に#comments#comments#commentsと表示されます。これを表示しなくする方法はありませんでしょうか。

　以上、2点をご教授くださいますようにお願いいたします。

[48] Posted by rikaumo : November 5, 2008 9:11 PM

＞rikaumoさん
こんにちは。
テンプレートご利用ありがとうございます。
ご質問の件ですが、

１．ローカル環境でカテゴリーのプルダウン化を動作させてみましたが、カテゴリー選択後のカテゴリーページやプルダウンメニューは正常に表示されているようです。「カテゴリーの括りがなくなってしまいます」とは、具体的にどこがどういう状態のことを指しておりますでしょうか？

２．ローカル環境で記事ページを表示させてみましたが、同様の事象が確認できませんでた。ネットで調べるとブログパーツによっては同じ事象が発生するようです。
http://knowledge.livedoor.com/34207
パーツをつけているようでしたら一度外してみてください。

それではよろしくお願い致します。

[49] Posted by yujiro

: November 7, 2008 4:02 PM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

小粋空間 - a cheap joke and a play on words site