theme – 塵芥空間

Tag: theme

WordPress テーマ作成(5)

Posted by – 2009年10月18日

single.phpを追加したことで(例によって、defaultテーマ由来)一応、殆どのリンクはクリックしても動作するようになって来ました。スナップショットとしてファイルと画像を添付しておきます。

これから、一気にCSSで見栄えを良くする処理に入ろうかと思います。基本的には各種ツールやプラグインなどと相性の良い、背景色(白)を基調にモノクロームなデザインを目指します。画像は、シングルビュー(1枚目)、カテゴリービュー(2枚目)です。simple003.zip

テーマのスナップショットカテゴリービュー

WordPress テーマ作成(4)

Posted by – 2009年10月15日

前回最小限、WordPressのテーマとして動作する(動作するだけ)のテーマを作りましたが、今回は下のように2カラムのデザインにすべく、修正を加えます。書き換えるファイルはStyle.css(必須)とheader.php、index.php、footer.phpです。今回はサイドバーが必要なため、例によってdefaultテーマからパクって来ます。

構成は次のようになります。

テーマのレイアウト

header,sidebar,footerは自動で、『<div id=”header” ~』のようにしてくれますから、CSSに#headerなどを加えればOKです。入れ子部分は自分で編集する必要があります。今回はかなりいい加減、のちのち直しますよ。simple002.zip

index.phpは前回とほぼ変わらず、こんな感じ

<?php
/**
* @package WordPress
*/
get_header(); ?>

<div id=”main”>
<?php get_sidebar(); ?>

<div id=”contents”>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class(); ?> id=”post-<?php the_ID(); ?>”>
<?php the_title(); ?>
<br />
<div>
<?php the_date(‘Y.n.j l’); ?> <?php the_time(‘h:i:s’); ?>
</div>
<?php the_content(); ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
<?php get_footer(); ?>

sidebarは<?php get_calendar(); ?>を追加してカレンダーを出したり、liの入れ子構造が気持ち悪いので少し編集(現在ぶっ壊れてる感じなので気にせずに :cry:

今回の作業でのスクリーンショット

スクリーンショット

WordPress テーマ作成(3)

Posted by – 2009年10月14日

最低限、動くテーマを作成しました。simple001.zip機能もへったくれもありません。ファイルはheader.php, footer.phpはdefaultテーマからパクって、style.cssには何も書いていない状態(テーマとして動くための情報のみでcssとしての動作はなし)、新しく作ったindex.phpの4ファイルです。index.phpでは記事のタイトル、日付、内容のみをループで表示させています。恐らく最低限動作するテーマファイルです。面倒なのでサイドバーはありません。

index.phpの内容

<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class(); ?> id=”post-<?php the_ID(); ?>”>
<?php the_title(); ?>
<br />
<?php the_time(); ?>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>

ちなみに、表示するとこんな感じになります。

simple001.zipのスナップショット

WordPress テーマ作成 (番外編)

Posted by – 2009年10月14日

テーマ作成に当たってページの雛形が欲しかったため、wp-themes.comからページをパクって来ました。また、もうひとつWordPressをインストールして、テスト用のサイトを構築しました。

Firefox 3.5.3でやると、タグを含めてコピーできるので、実際はボートの画像をローカルに落とす手間と、カテゴリやページ類のコピーで10分強で作業終了。これを雛形にテーマを作成していきます。

標準テーマのスナップショットwp-themes.comのスナップショット

WordPress テーマ作成(2)

Posted by – 2009年10月11日

早速、index.phpの構造を読み解いていきます。index.phpの構造は、まず一番外側に、<?php if (have_posts()) : ?>~<?php else : ? >~<?php endif; ?>のif文があります。have_posts()は投稿の有無を返す関数で、あればTrueをなければFalseを返します。このあたりの処理は日本語の情報としてSTANDING TALLさんの記事が良くまとまっています。

<?php if (have_posts() : ?>
…投稿のループ処理
<?php else : ?>
…投稿が存在しない場合の処理
<?php endif; ?>

次に、投稿を処理するループです。この部分は<?php while (have_posts()) : the_post(); ?>から始まり <?php endwhile; ?>で終了します。ループの中身は、post_class(), the_ID(), the_permalink(), the_title(), the_time(), the_content(), the_tags(), get_the_category_list(), edit_post_link(), comments_popup_link()を順にテンプレートタグを呼び出しています。動作を表にしました。それ以外も知りたい場合は、WordPressのテンプレートタグを参照してください。

default thema で用いられるテンプレートタグ
タグ名概要ループパラメータ
post_class()
the_ID()現在の記事の記事ID を表示ループ中
the_permalink()現在の記事のパーマリンクURI を表示ループ中
the_title()現在の記事のタイトルを表示/取得ループ中表示/取得、前後テキスト
the_time()現在の記事の投稿日時を表示。フォーマットを指定しなければ一般設定「時間のフォーマット」で表示。ループ中日時フォーマット
the_content()現在の記事の本文を表示。記事中に <!–more–> がある場合、単体記事ページ以外ではそれより前の部分を表示し「続きを読む」リンクを添える。ループ中「続きを読む」の文言、
the_tags()現在の記事のタグ一覧を表示ループ中前・後・区切り文字
get_the_category_list()
edit_post_link()現在の記事の編集リンクを表示ループ中リンク・前後テキスト
comments_popup_link()コメントフォームのポップアップへのリンクを表示。ループ中コメント数表示テキスト、CSSクラス

WordPress テーマ作成

Posted by – 2009年10月9日

色々と思い通りにならないため、WordPressのテーマを自作する必要に迫られました。PHPにはあまり馴染みがなく最低限の知識しかありません、 WordPress程整備されたフリーのblogエンジンは少ないし、フルスクラッチで作成するほどの気力もなければメリットも感じません。本当に作りたいものはシンプルかつ機能的なテーマで、派手さは後で追加すれば良いかな?と思っています。使用するバージョンは2.8.4です。

はじめの一歩として、テーマを作るためには wp-content/theme以下にディレクトリを作成し、最低限必要なファイルは、index.phpとスタイルシートです。この程度の情報はすぐに得ることができました。次に、標準テーマ(default)のindex.phpを見てみると、結構複雑ですね。すぐに理解できたのは、最初に、get_header();、最後にget_sidbar();、get_footer();でヘッダー、サイドバー、フッターに分かれていることです。あとは、ループ部分の処理ですね。

ディレクトリを見てすぐに、あれ、ja.poがある。gettextで国際化してるのか、こりゃ面倒と思いました。テーマを作ることに慣れた人が改造・改良する分には国際化ありきで良いと思いますが、勉強用には国際化は障壁でしかないし、最初に英語用テンプレートを作るのも馬鹿らしいです。国際化は無視の方向で書いていこうと思います。

スタイルシート(style.css)は最小限、次の内容を書く必要があります。

@charset “utf-8″;
/*
Theme Name: テーマの名前
Theme URI: テーマのURL
Description: 適当に注釈など
Version: バージョン番号
Author: 作者名
Author URI:作者URL
*/

上記を書かないと、テーマとして認識されません。

<?php get_header(); >はheader.phpを必要として、存在しなければwp-content/theme/default/header.phpを使用する。フッター、サイドバーも同様にdefaultのフッター、サイドバーを使用するとの事なんで。完全に自作テーマとする場合に必要なファイルは、index.php, header.php, sidbar.php, footer.php, style.cssの5個になります。

とりあえず、index.phpは学習のために自作するとして、header、footer、sidbarはdefaultのものを一時的に拝借します。


Performance Optimization WordPress Plugins by W3 EDGE