サイドバーにカレンダーをつけてみました。
といっても、ウィジェットから選んだだけですけれど。
先には、横置きのFlashカレンダーをつけるつもりなので、デザインはあまり気にしないことにします。
プラグインを使わずにやれるところまでやっていきます。
もちろん初心者なので教科書は使っておりますが、デザインは自分用に変更しながら進んでおります。
そういえば、だいぶ前にphpでカレンダーを作ったことがあります。
投稿カレンダーにできないかなぁ･･
月: 2012年6月
月別アーカイブ
日付にちょっと手こずってしまいました。
ディフォルトで年月を表示すると「6月2012」のようになってしまうので、これを「2012年6月」のように表示しようしたらちとつまずいてしまいました。
原因は、パーマリンクの設定を変えていたからです。
その場合は次のようにタグを書きます。
<!--月ごとの場合--> <?php if(is_month()): ?> <p id="pagetitle"> <?php echo $year ,'年' . $monthnum .'月' ?></p> <?php endif; ?>
こうすると、月ごとの記事を表示させたときにページの先頭に「○○年○○月」のように表示されます。
後ろに「～の記事」なんてつけてもいいかもしれません。
if()は、「月別アーカイブをクリックしたら」という条件式です。
テーマの名前
くりまんさんの写真を生かすデザインを考えて作っておりますので、テーマの名前を「greenbase」としました。
と言っても、まだまだ出来上がりまでは程遠いですが。
なんとなくカスタマイズの流れがわかってきたので、（手法が違うだけでHTMLのテンプレートと同じようなもの）、1つ上がったらいろんなテーマが作れると思います。
写真がメインの黒テーマなんてのも作ってみたいな。
ウィジェットを使うには
WordPressには、ウィジェットという機能があります。これを利用すると、パーツから必要なものをドラッグするだけでサイドバーにメニューを表示することができます。ウィジェットを利用するためには、functions.php というテンプレートが必要です。
このphpを作って、次のようなタグを入力するとウィジェットが使えるようになります。
<?php register_sidebar(); ?>
index.phpのサイドバーのウィジェットエリアには、次のようなタグを入れます。
<div id="sidebar"> <?php dynamic_sidebar(); ?> </div>
dynamic_sidebar は、タイトルが見出し2（H2)、メニューが箇条書き（UL）でマークアップされています。
だけど、初期値ではなんとも恰好が悪いです。
これを自分の好みにデザインしていきます。
2段組みに分ける
写真の挿入を考え少し大き目に横幅をとったので、左右を648と250に分けました。
一般的なテンプレートとまったく同じで、大段落（コンテナ）の下にメイン記事（コンテンツ）を置き、その下にサイドバー（右）を置きます。
幅はスタイルシートで設定するので、テンプレートにはスタイルシートのidを入れます。
このサイドバーの中に、これからいろいろな設定を入れていきます。
＜テンプレート＞
<div id="sidebar"> </div>
＜スタイルシート＞
/*記事の段落*/
div#content {width:648px;
float: left}
/*サイドバー*/
div#sidebar {width: 250px;
float: right}
画像にキャプションをつける
画像にキャプションをつけてみました。
スタイルは下記のように
.wp-caption {border: solid 1px #aaaaaa;
text-align: center;
padding-top: 5px}
画像の編集は挿入した後からでも編集が可能です。
画像をクリックして出てくる画面の「画像を編集」ボタンをクリックし、変更してから「更新」をクリックします。
回り込み解除
投稿情報（この例ではカテゴリ）の回り込みの解除をしておかないと、投稿情報が右に回り込んだままになります。
これを解除するには、投稿情報のところで、回り込みの解除を指定します。
/*投稿情報*/
p.postinfo {color:#808080;
font-weight: bold;
text-align: rignt;
margin: 20px 0 0;
clear: both}
プラグインを使って、ソーシャルボタンを下位に表示させるようにしたので、画像をアップロードすると回り込んでしまいましたので、次のスタイルを、スタイルシートに追加しました。
.wp_social_bookmarking_light{clear: both}
画像を左右に表示する
本文に画像を表示するには、画像の配置を「左」や「右」に指定します。
スタイルシートは次のように設定します。
.alignleft {float: left;
margin-right:10px;
margin-bottom: 10px}.alignright {float: right;
margin-left: 10px;
margin-bottom: 10px}
記事の段落の右端に余白がいりますね。ついでになおしておきます。
/*記事の段落*/
div.post {margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
トップページの作成
本を見ながらですが、サイトを1個作りましたので、次はカスタマイズなるものに挑戦しようと思います。
テーマフォルダを作ったら、最初に必要なのは、「index.html」と「style.css」ですが、これを公開したサーバーから編集することができます。
テーマの「編集」をクリックすると、右側にリンクが現れるのでこれを選択して、編集画面を表示させます。
こんな感じです。
「index.php」には、コンテンツタイプとエンコードの種類を入れておきます。
DreamWeaverなら「ファイル」→「新規」→「HTMLテンプレート」をクリックすると、勝手に作ってくれます。
面倒くさがりなので、なるべく手抜きをしようかと(＾＾;
ブログ名を表示するには<?php bloginfo('name'); ?>と記述します。
<body>直下に入れてみると、Oh！ブログ名が表示されました。
ついでにディスクリプションは、<?php bloginfo('description'); ?>
これを表示させただけでも、「私のテーマだ～」ってな気分に浸れますわ(＾＾;
スタイルを作ってあげればちょっとは見栄えよくできますものね。
余談ですが、テンプレートを直接編集するよりは、自分のPCでやったほうがいいような気がします。エディターによっては（DreamWeaverや秀丸）、phpのコードを色付けしてくれるので、エラーとかの発見がし易いです。DreamWeaverだと、サイトを構築しておけば、ボタン１つでアップロードしておけるし、結構便利だす。（パーミッションには要注意）
ソーシャルボタンをつける
投稿記事に対してだけですが、たくさんのソーシャルボタンをつけました。
実験なのでいろいろやっています。
方法は、それぞれのサイト（ツィッターやFaceBookなど）に行って、コードを取得してテンプレートに貼り付けるという作業です。
FacebookのLikeボタン
Twitterボタン
＋１ボタン（Google)
はてなブックマーク
上記ボタンを設置するための、専用のてんプレートを作りました。
といっても先生（本）がいるわけでして、私の力ではありません。
「WordPressの教科書」という本が最初の先生です。サイト構築本なのでちとハードルが高く、理解しようとせずに、言われるがままに進んでいます。
