Archive for 3月, 2008

iモードID の仕様

1

iモードID の仕様が公開されました。

作ろうiモードコンテンツ:iモードセンタの各種情報 | サービス・機能 | NTTドコモ

リンクに ?guid=ON という引数をつけないとダメらしいです。
(続きを読む…)

2038年問題でクッキーの有効期限がブラウザを閉じるまでになっていた

1

ログインするときにログインの状態を保持するチェックボックスがあると思います。以前開発したシステムで急にそのログイン状態を保持するのが利かなくなったと連絡があり調査したところ、原因は2038年問題でした。

ログインするときにログインを保持するにチェックがあると
session_set_cookie_params(60*60*24*365*30);
として30年後を指定していました。
(続きを読む…)

ルパンタイトル風待受けジェネレータ

1

swftools の勉強がてら、ルパンタイトルの待受けFlash ジェネレータを作りました。

FlashLite で文字を自由に入力させて何か作ろうとするとフォントとフォントサイズで自由度が低くなるんですよね。
そこで、一文字づつ画像を PHP で作成して、swftools の jpeg2swf を使用して Flash に変換するようにしました。
(続きを読む…)

WordPress テーマを作成する(6) CSS でデザインを整える

1

前回まではまだ縦に長いだけのデザインされていない状態でした。今回は CSS を作成してデザインを整えてブログらしくして行こうと思います。 (続きを読む…)

PHP 開発に使う10個のツール

2

DaveDevelopment ? Archive ? 10 tools for Modern PHP Development で「PHP の開発に使われている10個のツール」が紹介されていました。 (続きを読む…)

WordPress テーマを作成する(5) サイドバーをウィジットに対応させる

10

前回作成したサイドバーをウィジットに対応させて、管理画面からサイドバーを変更できるようにしてみました。

sidebar.php の修正

sidebar.php の ulタグ の直後に以下の行を追加
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
また sidebar.php の最後の ul タグの前に以下の行を追加
<?php endif; ?>
つまり ul タグの中を上記の if 文ではさむ感じです。

<div id="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
// ここにデフォルトのサイドバーの内容を書く
<?php endif; ?>
</ul>
</div>

functions.php の作成

作成しているテーマディレクトリに functions.php を作成して下記のコードを追加する。

<?php
if ( function_exists('register_sidebar') )
    register_sidebar();
?>

これで管理画面で 表示 > ウィジット でアクセスすると下記のような画面になり動的にサイドバーを変更することができます。
dynamic1.png

少しの手間で使い勝手が便利になるので、テーマを作成するときにはウィジットに対応させておいた方がいいでしょう。

参考URL:Widgetizing Themes ? Automattic

WordPress テーマを作成する(4) サイドバーを作る

1

今回はサイドバーを作っていきます。sidebar.php にコードを書いていきます。

骨格

WordPress のサイドバーは下記のような構成の HTML になります。

WordPress テーマを作成する(3) トップページの投稿一覧を作る

1

index.php に投稿一覧を作成する

投稿内容の一覧を表示するには下記のコードのパターンを使用します。

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
/* ここに投稿内容を表示するコードを書く */
<?php endwhile; ?>
/* 1件も投稿がなかった場合 */
<?php endif; ?>

最初の if (have_posts()) で投稿があるかチェックしてあれば、次の while 文で投稿の数だけループして、投稿がなければ endwhile に分岐します。

WordPress のタグを使用して投稿内容を表示する

上記のループ内で使用する個別の投稿を表示するタグの一部を書いておきます。
投稿の個別URLを表示<?php the_permalink() ?>
タイトルを表示<?php the_title(); ?>
投稿日時を表示<?php the_time('Y/m/d') ?>
カテゴリを表示<?php the_category(', ') ?>
コメント・トラックバックを表示<?php comments_popup_link('0ä?¶', '1ä?¶', '%ä?¶'); ?>
投稿の編集リンクを表示(ログインしていないと非表示になる)<?php edit_post_link('ç?¨é??', '', ' | '); ?>

最終的なコード

<?php get_header(); ?>

<div id="content" class="narrowcolumn">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('Y/m/d') ?></small>
<div class="entry">
<?php the_content('続きを読む ?'); ?>
</div>
<p class="postmetadata">カテゴリ:?<?php the_category(', ') ?> | <?php edit_post_link('編集', '', ' | '); ?> コメント・トラックバック:<?php comments_popup_link('0件', '1件', '%件'); ?></p>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('? 前のページへ') ?></div>
<div class="alignright"><?php previous_posts_link('次のページへ ?') ?></div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

最終的にこうなりました。(クリックで拡大表示されます)
wp3.png

まだ CSS をまったく書いていないので縦にのっぺりとしていますが、だいぶブログらしくなってきました。

WordPress テーマを作成する(2)

1

前回は style.css と index.php だけを作成して最低限のブログを表示させました。なぜこれだけのファイルで表示ができるかというと選択しているテーマに必要なファイルがない場合は wp-content/thmems/default 内のファイルを使用するためです。

今回はヘッダファイルとフッタファイルを作成します。

ヘッダファイル

テーマディレクトリに header.php を作成し下記のような内容にしました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>

ゼロから書くのは大変なので default/header.php をコピーして必要最低限のみ残してみました。

フッタファイルの作成

ヘッダ同様に footer.php ファイルを作成し、下記のようにしました。

<div id="footer">
<?php bloginfo('name'); ?> Powered by <a href="http://wordpress.org/">WordPress</a><br />
<a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
</div>
</div>

<?php wp_footer(); ?>
</body>
</html>

ヘッダとフッタのみのブログができました

(クリックで拡大画像が見れます)
wp2.png

WordPress テーマを作成する(1)

4

WordPress用のテーマを作ってみようと思います。始めて作成するのですが、作成過程を投稿していきます。まずは第1回目です。

テーマフォルダを作成する

wp-content/themes/ 以下にテーマ用のディレクトリを作成します。
今回は test というディレクトリを作成しました。

CSS ファイルを作成する

作成したテーマディレクトリに style.css を作成します。
style.css には必要最低限の項目を書いておきます。

/*
Theme Name: Test Template
Theme URI: http://www.syuhari.jp/
Description: テーマ作成テスト用です。<a href='http://www.syuhari.jp/'>リンクも出来ます</a>
Author: Boze
Author URI: http://www.syuhari.jp/blog/
Version: 1.0
*/
Theme Name
テーマの名称。全角可。ここに書いた名称が管理画面のテーマ選択画面に表示される。
Theme URI
テーマのサイトURL。半角のみ
Description
テーマの説明。全角可。a タグでリンクも作成できる。ちなみに script タグなども書けました。タグはノーチェックかも。いいのかな?
Author
作成者名。全角可
Author URI
作成者のURI。半角のみ
Version
バージョン。半角のみ。ここに書いたバージョン番号が管理画面のテーマ選択画面のテーマ名の後に表示される。

全角を入れたときには文字コードを UTF-8 にする必要があります。

index.php を作成する

作成したテーマディレクトリに index.php を作成して、最低限のコードを書く。

< ?php get_header(); ?>
< ?php get_sidebar(); ?>
< ?php get_footer(); ?>

テーマを見てみる

ここまで出来たら最低限のファイルはそろったので管理画面よりテーマを選択して実際にどういう風に見えるか確認してみます。
管理画面の「表示」を選択すると作成したテーマが一覧にあるので、選択します。
下が現在のサイトの様子です。(クリックで大きな画像が見れます。)
wp1.png

まだ、検索用のファイルなどを作成していないので Warning など出てますがシンプルな WordPress のページが表示されています。

Go to Top