コンテンツへスキップ

WordPress2.7から、コメントを階層(入れ子)にできるようになりました。
「設定」-「ディスカッション」で階層を指定するだけでできます。
このブログで使っていたコメント用プラグインを削除しました。
コメントフォームは次のようになりました。
20140308-1
しかし、メインブログ(きまま日記)で使っている自作テーマ(GreenBase)では対応しておりません。

そこで、少しだけ comments.php に追加をしました。
残念ながら段落が下がらないのですが、それは次への課題とします。

サイドバーにどんどんウィジェットを追加していくと、縦に長くなってしまいます。
そこで、ウィジェットエリアをフッターに持ってきました。3段組みです。
今までは、サイドバー1だけを、ウィジェットで使っていましたが、サイドバーを3つ追加します。
ウィジェットを追加するためには、function.php に次のように指定します。

register_sidebar();
register_sidebar();
register_sidebar();

管理画面から「ウィジェット」を開くと、3つが追加されます。
3段ぐみにするにはスタイルシート(style.css)でデザインします。
フッターに書くのは、次のようなタグです。この例ではサイドバー2を出力します。

<?php dynamic_sidebar(2); ?>

投稿フォーマットとは、記事の種類を指定する機能です。独自のフォーマットを使うことはできず、ガイドラインに沿って使用する必要があります。
Twitter のように短い記事を投稿するのに、ステータス(status)というフォーマットがあります。
この機能を有効にするには、function.php に次のようなタグを追加します。

add_theme_support('post-formats', array('status'));

投稿画面を開くと、右側に「ステータス」という項目が表示されますので、「ステータス」をチェックします。

トップページを開くと、投稿した記事が最新記事として表示されます。

 

「ステータス」をサイドバーに表示するようにしました。
このままでは、最近記事にも同じものが表示されてしまいますので、home.php には、最新記事の一覧からステータスを削除するスクリプトを書いておきます。

最新記事を表示するときに、最新の何件かをサムネイルと概要を表示し、残りの件数をタイトルのみで表示するようにしました。
例えば、最初の2件を表示するタグは次のとおりです。

<?php query_posts('posts_per_page=2
&ignore_sticky_posts=1'); ?>

3件~10件をタイトルのみで表示するようにループです。

<?php query_posts('posts_per_page=8&offset=2
&ignore_sticky_posts=1'); ?>
<?php if(have_posts()): while(have_posts()): 
the_post(); ?>
	<?php get_template_part('content','title'); ?>
<?php endwhile; endif; ?>

概要の文字数を74文字に変更しました。「続きを読む」を入れて3行ぐらいに収まるように。
function.php の中を次のように変えました。

function my_excerpt_mblength($length) {
     return 80;
}
add_filter('excerpt_mblength', 'my_excerpt_mblength');

カテゴリページに、サムネイル画像を表示しました。
画像はアイキャッチで挿入します。
アイキャッチ画像がない場合は、代替えの画像を用意しておきます。
この記事には画像が挿入されていません。

<p class="thumb">
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail('thumbnail'); ?>
<?php else: ?>
<img src="<?php bloginfo('template_url'); ?>
/images/no_image.jpg" alt="No Image" width="150" height="150" />
<?php endif; ?>
</p>

画像の回り込みをスタイルシート(回り込み解除)で指定します。

アイキャッチ画像を使わない設定に変えました。
その場合には、最後の画像がサムネイルと表示されます。(スクリプト省略)

1からテンプレートを作り、基本的なところが大体終わったので、実験ブログから記事を引っ越してきました。もっとも抜粋したものだけですので、これを読んでも他人はちんぷんかんぷんかも。

デザイン的なものはまだこれからだし、プラグインなど1つも入れていません。
これから少しずつ実験的に入れていこうと思いますが、どうなることやら。

ということで、ここまで作ったテーマをこのブログに適用してみます。
既存のテーマに比べると、相当ダサいですけど、これから少しずつネ

ヘッダー用画像は、くりまんさんからお借りしました。
写真が素敵なので、使いたい気持ちが湧きます。

 

くりまんさんの写真を生かすデザインを考えて作っておりますので、テーマの名前を「greenbase」としました。
と言っても、まだまだ出来上がりまでは程遠いですが。

なんとなくカスタマイズの流れがわかってきたので、(手法が違うだけでHTMLのテンプレートと同じようなもの)、1つ上がったらいろんなテーマが作れると思います。
写真がメインの黒テーマなんてのも作ってみたいな。

本を見ながらですが、サイトを1個作りましたので、次はカスタマイズなるものに挑戦しようと思います。
テーマフォルダを作ったら、最初に必要なのは、「index.html」と「style.css」ですが、これを公開したサーバーから編集することができます。
テーマの「編集」をクリックすると、右側にリンクが現れるのでこれを選択して、編集画面を表示させます。

こんな感じです。
「index.php」には、コンテンツタイプとエンコードの種類を入れておきます。
DreamWeaverなら「ファイル」→「新規」→「HTMLテンプレート」をクリックすると、勝手に作ってくれます。

面倒くさがりなので、なるべく手抜きをしようかと(^^;

ブログ名を表示するには<?php bloginfo('name'); ?>と記述します。
<body>直下に入れてみると、Oh!ブログ名が表示されました。

ついでにディスクリプションは、<?php bloginfo('description'); ?>
これを表示させただけでも、「私のテーマだ~」ってな気分に浸れますわ(^^;
スタイルを作ってあげればちょっとは見栄えよくできますものね。

余談ですが、テンプレートを直接編集するよりは、自分のPCでやったほうがいいような気がします。エディターによっては(DreamWeaverや秀丸)、phpのコードを色付けしてくれるので、エラーとかの発見がし易いです。DreamWeaverだと、サイトを構築しておけば、ボタン1つでアップロードしておけるし、結構便利だす。(パーミッションには要注意)

投稿記事に対してだけですが、たくさんのソーシャルボタンをつけました。
実験なのでいろいろやっています。
方法は、それぞれのサイト(ツィッターやFaceBookなど)に行って、コードを取得してテンプレートに貼り付けるという作業です。
FacebookのLikeボタン
Twitterボタン
+1ボタン(Google)
はてなブックマーク

上記ボタンを設置するための、専用のてんプレートを作りました。
といっても先生(本)がいるわけでして、私の力ではありません。
「WordPressの教科書」という本が最初の先生です。サイト構築本なのでちとハードルが高く、理解しようとせずに、言われるがままに進んでいます。