coreseverからxserverへwordpressのDBを移す際への留意点

phpmayadminからダウンロードしたsqlのデータをDreamweaverなどで開き

パスの置き換えを行う。

httpから始まるものや、/virtual/から始まるルートパスを置換する。

その際、xserver側であらかじめwordpressがインストールして使用しているものがあれば
そのDBをダウンロードして中を開いてみれば変更箇所の参考になる。

<?php wp_head(); ?>
<?php wp_footer(); ?>

この2つのメソッド。
とても大切なものらしい。

wordpress3.1にバージョンアップするとログイン中はサイトとダッシュボード内の上部に管理バーが出るが、今回自作テーマに関してサイトの方に表示されなかった。

twentytenや人のテーマには表示されるのに、自分の作ったテーマには表示されない？
このままでは気持ち悪いのでいろいろ調べていくと、

この管理バーは<?php wp_footer(); ?>というメソッドで呼び出されているらしい。ということが分かりました。

この一文が抜けていたので表示されなかった。

header部の</head>タグの直前に入れる<?php wp_head(); ?>は
以前plugin関連で動作しない時に調べて入れていたのだが、

footer部の</body>タグの直前に入れる<?php wp_footer(); ?>に関してはまったく知らなかった。

今後自作テーマをつくる際は2つのメソッドは必須としておいた方が良いだろう。

●抜粋表示時の省略文字列[...]の変更の仕方

記事抜粋で設定文字数を超えると表示される[...]これ。WordPress 2.9 以降では、excerpt_more フィルターを使って変更することができるらしい。

<?php
add_filter('excerpt_more', 'new_excerpt_more');
function new_excerpt_more($post) {
return ' ... <a href="'. get_permalink($post->ID) .'">'.'続きを読む>>'.'</a>';
}?>

以上のコードをfunction.phpに記述してサーバーにアップする。

なぜか画面が白くなるエラーが出る場合があるので、その場合は

<?php
function new_excerpt_more($post) {
return '... <br/><a href="'. get_permalink($post->ID) . '">' . '...続きを読む' . '</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
?>

こちらを使ってみる。

上の図のように装飾したい場合
CSSでtext-indentプロパティーとpadding-leftプロパティーを使って表現することができます。

【HTML】

<ul>
<li> 2010年10月26日  3つめのサンプルを入荷いたしましたが、
これについては後日発売日を発表いたします
</li>
</ul>

【CSS】

ul li{
padding-left: 120px; /*120px分、右に動かす*/
text-indent: -120px;</span> </span>/*最初の行だけ120px分、左に動かす*/
}

※ただし、下げ幅の値はブラウザによって見え方に誤差が生じるので注意が必要です。

検索フォームをCSSでカスタマイズ

blogやCMSには必ずといっていいほど検索フォームがでてきます。

wordpressの送信ボタンを画像に置き換えて装飾します。

【html】
<form method=”get” id=”searchform” action=”<?php bloginfo(‘home’); ?>/”>
<div>
<input type=”text” value=”Search” name=”s” id=”s” onfocus=”if (this.value == ‘Search’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Search’;}” />
<input type=”image” id=”searchsubmit” src=”<?php bloginfo(‘template_url’); ?>/img/button.png”  alt=”送信する” width=”45″ height=”25″ value=”<?php _e(‘Search’,'kubrik’); ?>” />
</div>
</form>

【CSS】
#searchform{
text-align:center;
width:205px;
height:35px;
position:absolute;
top:44px;
right:30px;
margin:0;
padding:0;
background:url(img/seach_back.png) no-repeat top left;
}

#searchform #s{
margin:9px 0 0 11px;
width: 130px;
height: 20px;
border:none;
float:left;
}

#searchform #searchsubmit{
margin:4px 4px 0 0;
float:right;
}

重用なのはCSSの中で
#searchform #sと#searchform #searchsubmitのところで
それぞれ
float:left;　float:right;
としているところ

marginがきれいにそろってくれます。