2008 3月 | Sun Limited Mt.

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();
?>

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

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

参考URL:Widgetizing Themes ? Automattic

3月 21

WordPress テーマを作成する（４）　サイドバーを作る

WordPress No Comments »

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

骨格

WordPress のサイドバーは下記のような構成の HTML になります。
<div id=”sidebar”> <ul><br /> <li><h2>タイトル 1</h2><br /> <ul><br /> <li>要素 1</li><br /> <li>要素 2</li><br /> </ul><br /> </li><br /> <li><h2>タイトル 2</h2><br /> <ul><br /> <li>要素 1</li><br /> <li>要素 2</li><br /> </ul><br /> </li><br /> </ul><br /> </div>

3月 20

WordPress テーマを作成する（３）　トップページの投稿一覧を作る

WordPress No Comments »

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(); ?>

最終的にこうなりました。（クリックで拡大表示されます）

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

3月 20

WordPress テーマを作成する（２）

WordPress 1 Comment »

前回は 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>

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

（クリックで拡大画像が見れます）

3月 20

WordPress テーマを作成する（１）

WordPress 3 Comments »

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(); ?>

テーマを見てみる

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

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

Sun Limited Mt.

iモードID の仕様

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

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

WordPress テーマを作成する（６）　CSS でデザインを整える

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

WordPress テーマを作成する（５）　サイドバーをウィジットに対応させる

sidebar.php の修正

functions.php の作成

WordPress テーマを作成する（４）　サイドバーを作る

骨格

WordPress テーマを作成する（３）　トップページの投稿一覧を作る

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

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

最終的なコード

WordPress テーマを作成する（２）

ヘッダファイル

フッタファイルの作成

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

WordPress テーマを作成する（１）

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

CSS ファイルを作成する

index.php を作成する

テーマを見てみる

カテゴリー

アーカイブ

Recent Posts

Recent Comments

About Me