<div id=”header”>
<div id=”header-inner”><h1>PHP practice</h1></div>
</div>

#header{width:100%; margin:0; padding:0; background:#E9E4BF;}
#header-inner{text-align:center; margin:0; padding:10px;}
h1{display: block; background:#ffffff;}

上記のような設定にすると、何故かヘッダーの背景色の上下が左右の幅より広く表示される。
何がいけないのかと色々ＣＳＳを書き換えたり、divの括り方がいけないのかと書き直したりして、漸く判明。

参考はこちらのサイトのマージンの相殺（collapsing margins） h1-h6要素
上下に自動的に一行分の余白が追加されるとの事。
CSSの記載を　h1{display: block; background:#ffffff; margin:0; padding:0;}　に変えたところ上下左右の幅は整った。

No CSS hacks
SEO friendly 2-1-3 column ordering
Equal height columns
No Images
No JavaScript
Full cross-browser support
iPhone & iPod Touch
Mac:Safari, Firefox, Opera 9.25, Netscape 9.0.0.5 & 7.1
Windows:Firefox 1.5 & 2, Safari, Opera 8.1 & 9, Explorer 5.5, 6 & 7, Netscape 8,
Valid XHTML strict markup
Resizable text compatible
This layout is FREE for anyone to use
Free traffic for your website

すごい…

こちらのサイトの記事を読んで。
原文はこちら。シンプルで見やすいデザインのサイト。

ブラウザ毎に異なる表示……頭が痛いのだが……

これです。(涙)

一難去ってまた一難が……。
何をやったかと言うと、先の記事にも記載した通り、サイドバーには現在二通りのお勧めのマークアップの仕方があるらしい。
リスト表示とdivで囲む方法。
自分はデザインする時の事を考えると断然divで囲って……というのが好きだ。
で、その方法をそのままコピーして試してみた。そこで出たのが上記のエラーメッセージなのだ。(涙)

現時点で「良」とされているサイドバーのマークアップは、

<ul id=”sidebar”>
<li id=”about”>
<h2>About</h2>
<p>This is my blog.</p>
</li>
<li id=”links”>
<h2>Links</h2>
<ul>
<li><a href=”http://example.com”>Example</a></li>
</ul>
</li>
</ul>

なのだそうだ。
そして、これをウィジェットに反映させるためには

<ul id=”sidebar”>
<?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<li id=”about”>
<h2>About</h2>
<p>This is my blog.</p>
</li>
<li id=”links”>
<h2>Links</h2>
<ul>
<li><a href=”http://example.com”>Example</a></li>
</ul>
</li>
<?php endif; ?>
</ul>

青文字の部分を書き足す。
そして、functions.php ファイルへの記載は

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

そして、サイドバーがリスト表示タイプでは無い時は以下のようにする

<div id=”sidebar”>
<div class=”title”>About</div>
<p>This is my blog.</p>
<div class=”title”>Links</div>
<ul>
<li><a href=”http://example.com”>Example</a></li>
</ul>

これがウィジェットに反映するようにするには、

<div id=”sidebar”>
<?php if ( !function_exists(’dynamic_sidebar’)
|| !dynamic_sidebar() ) : ?>
<div class=”title”>About</div>
<p>This is my blog.</p>
<div class=”title”>Links</div>
<ul>
<li><a href=”http://example.com”>Example</a></li>
</ul>
<?php endif; ?>
</div>

そして、functions.php ファイルには以下のように記載する。

<?php
if ( function_exists(’register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<div class=”title”>’,
‘after_title’ => ‘</div>’,
));
?>

さらに、もっとフレキシブルにしたい時には、

‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</div>’,
と記載すると良い、と書いてある。

ちなみに、%1$s とか %2$s などは以下の意味だそう。(参照サイト：http://ecn.blog4.fc2.com/blog-entry-5.html)

%1$s	投稿者名
%2$s	日付	2008-02-08
%3$s	時刻	11:33:42+0900
%4$s	日付	管理画面＞オプション＞一般設定＞デフォルトの日付フォーマットで設定したフォーマット
%5$s	時刻	管理画面＞オプション＞一般設定＞デフォルトの時刻フォーマットで設定したフォーマット
%6$s	登録されたカテゴリー名&リンク
%7$s	登録されたタグ名&リンク

ちなみに「＄」は変数名にする為のPHPの定義

name　←　「＄」がないとただの文字列
$name　←　「＄」が付くと変数になる

「％」は多分色々な使われ方があって、
■余りを表示させる算術演算子としての「％」
【例】10%3　10を3で割った余りを求めている剰余算
他に、
■sprintf (文字列書式フォーマット)

【例】
$a = sprintf(’a = %06d b = %04d’, 10, 20);

** $a には、’a = 000010 b = 0020′ がセットされます。
** 書式記号は C 言語と同じみたいです。

%b 2進
%c 文字
%d 整数
%u 符号なし整数
%f 浮動小数点
%o 8進
%s 文字列
%x 16進小文字
%X 16進大文字

(参照:http://homepage2.nifty.com/sak/w_sak3/doc/sysbrd/php_k05.htm)

という事。

それで、%1$s　などが一体どんな規則性でこうなっているか、は今ひとつ分かっていない。今後の課題。

Warning: include() [function.include]: Unable to access /virtual/hoshina/public_html/wp/wp-content/themes/basicHMO/searchform.php in /virtual/hoshina/public_html/wp/wp-content/themes/default/sidebar.php on line 6

Warning: include(/virtual/hoshina/public_html/wp/wp-content/themes/basicHMO/searchform.php) [function.include]: failed to open stream: No such file or directory in /virtual/hoshina/public_html/wp/wp-content/themes/default/sidebar.php on line 6

Warning: include() [function.include]: Failed opening ‘/virtual/hoshina/public_html/wp/wp-content/themes/basicHMO/searchform.php’ for inclusion (include_path=’.:/usr/local/lib/php’) in /virtual/hoshina/public_html/wp/wp-content/themes/default/sidebar.php on line 6

そこで、以下のサイト等を参考に、function.phpとsidebar.php(自分の設定では、sidbar_left.php と sidebar_right.php という複数のものを用意していた。) に手を加える。

http://d.hatena.ne.jp/uniluq/20080502/1209718587
http://www.syuhari.jp/blog/archives/209
http://officel.biz/wordpress/functionphp-widget.htm

表記に関しては、以下のサイトにて { を使わない表記でよさそうと判明。つまり、<?php ～?>の方の表記でよし。
http://automattic.com/code/widgets/themes/

が、しかし、それぞれのサイトでphpに関しての表記の仕方が異なっていて、まだphp初心者にはどちらがいいのか、両方ともあっているのか判断がつかない。

googleで検索をかけてみると、以下のようなサイトを拝見する。
http://sb.xrea.com/showthread.php?t=12847
が、取り合えず、もともとWordPressに添付されていた記述と同じにし、sidebar　テンプレートも sidebar.php を用意した。
すると、上記のエラーメッセージは消えたが、ウィジェットは相変わらず反応しない。

色々とやってみた。そして、ふと気付いた。
どの参考にしたサイトにも、function.php ファイルを作る、そこに記述する、とあるが、これが、実は WordPress にくっついてきていた classic または default テーマの中を覗くと、functions.php ファイルとなっていた(大泣)。
そして、内容は変えないまま、ファイルの名前を functions.php に変更すると……ウィジェット、読み込みメッセージが消えました……。

どういう事だ？？　ちゃんと記事は2008年４月とかそんな書き込みだったのだが……何がいけなかったのだろうか？？(泣)

バージョン2.5.1から変わったのだろうか……。まあ、動いたからいいけれど……。

header.php
index.php
footer.php
sidebar_left.php
sidebar_right.php

というものを作ってみた。が、

ウィジェットは使用できません

現在使用中のテーマはウィジェットに対応していないため、このままではサイドバーの変更はできません。ウィジェットに対応するようにテーマを修正するにはこちらの説明を参照してください。

こんな表示が。その上ウィジェットが有効になっていない。
調べれば、直ぐに分かったのだが、一番分かりやすかったのが以下のサイト。

http://d.hatena.ne.jp/uniluq/20080502/1209718587

function.php

色々とまだ勉強である。

ので、以下のサイトを参考に、環境を作ってみる。

http://de-lab.com/article/eclipse/

最初の三桁をカットして表示するやり方はうまく行ったが、何故かサイドバーでmenuのように利用するカテゴリー一覧でこれが効いていない。
小さな事が本当に躓き、なんとも、……。


つまり、ブログから見たカテゴリ並び方は親カテゴリ「WordPress」を筆頭に「WordPress」の子カテゴリ、NOTE、未分類、となっているのに、内部(管理画面、記事投稿の為にカテゴリを選択する部分)では、

このようになってしまう。