WPでページによってサイドバーの中身を変える

水曜日, 2月 15th, 2012

 WordPressのサイドバーはウェジェット機能によって簡単に内容を変えられます。しかし、ページによってサイドバーの内容を変えようとするとちょっと工夫が必要です。
 たとえばこちらのホームページを見て下さい。
 「會津野 茂三郎」
 知り合いのお蕎麦屋さんのホームページを私が作ったものです。
 「ご案内」や「お品書」のサイドバーと「こぼれ話」のサイドバー、また「ブログ」のサイドバーがそれぞれ違っています。このようにページによってサイドバーの内容を変えようというのです。
 
 その為にまずする事はいくつかのページのテンプレートを作らなければいけません。新しいページのテンプレートを作るのは前に書いてありますのでそれを参考にして下さい。WP新たなページのテンプレート
 簡単に言うと雛型のページの先頭に

<?php
/*
Template Name: page2
*/
?>

というのを入れるのです。page2の部分は任意のローマ字数字で結構です。分かりやすいようにして下さい。
WP新たなページのテンプレートでは get_header() と一緒のPHP内に入れていますが、独立させた方がわかりやすいでしょう。
 
 さてここからが本番です。
 (A)めんどくさがり屋さん用 と (B)きちんとしたがり屋さん用 で説明します。
 
 
(A)めんどくさがり屋さん用
 まずはサイドバーの種類をいくつつくるのか。
 テーマの編集の中の「テーマのための関数(functions.php)」を開いて下さい。
 その先頭にこういう風に書きます。

<?php
register_sidebar();
register_sidebar();
register_sidebar();
?>

 これでサイドバーが3種類作れます。4種類作りたければregister_sidebar();を追加してください。
 この方法だと、WPの方で勝手にウェジェットに「sidebar-1」「sidebar-2」というように表示してきます。ウェジェットのタイトルです。

 次におこなう事はサイドバーテンプレートを必要なだけ作る事です。今回は3ツにしましょう。
 初めからあるサイドバーテンプレートの名前をちょっと変えます。
 「sidebar.php」となっているのを「sidebar-1.php」と名前を変えて格納します。次に「sidebar-1.php」をコピーして「sidebar-2.php」「sidebar-3.php」を作って、同じ場所に入れて下さい。
 ここまでだと、サイドバーテンプレートの中身は同じですので、今度はサイドバーテンプレートの中を変えます。ウェジェットを使わずにサイドバーを作る場合は好きなようにかえていただければ結構です。
 ウェジェットを使う場合はサイドバーテンプレートの中の「dynamic_sidebar()」という所を少しいじります。「dynamic_sidebar」がウェジェットに対応しています。
 たとえば「sidebar-1.php」で説明すると、
<?php dynamic_sidebar(); ?> を
<?php dynamic_sidebar(1); ?>と()の中に1/2/3をそれぞれ入れます。
 これでウェジェット内の「sidebar-1」がサイドバーテンプレートの「sidebar-1.php」に対応し、「sidebar-2」が「sidebar-2.php」、「sidebar-3」が「sidebar-3.php」にそれぞれ対応します。
 サイドバーが出来ましたので、今度は最初に作ったページのテンプレートにそのサイドバーを組み込みます。
 いじりたいページテンプレートを開いていただきます。その中に「<?php get_sidebar(); ?>」という所があります。これがサイドバーをそのページに組み込むための関数です。この()の中に組み込みたいサイドバーの数字を入れて下さい。「<?php get_sidebar(1); ?>」と、このように。
 これで終了です。後はウェジェットをいじって何を載せるか決めるだけです。
 
 
(B)きちんとしたがり屋さん用
 めんどくさがり屋さん用ではウェジェットのタイトルをWPが勝手に決めていましたが、そこはちゃんと自分で決めたいというきちんとしたがり屋さん用です。
 まずは、テーマの編集の中の「テーマのための関数(functions.php)」を開いて下さい。
 そして一番に上にこのように記述して下さい。

<?php
register_sidebar(array(‘name’=> ‘Sidebar-a’));
register_sidebar(array(‘name’=> ‘Sidebar-b’));
register_sidebar(array(‘name’=> ‘Sidebar-c’));
?>

 これでウェジェットのタイトルが「Sidebar-a」「Sidebar-b」「Sidebar-c」となります。
 そしてサイドバーテンプレート、「sidebar.php」となっているのを「sidebar-a.php」とします。そしてその内容をコピーして「sidebar-b.php」「sidebar-c.php」というテンプレートを追加します。
 今度はサイドバーテンプレートの中を変えます。
 サイドバーテンプレートの中の「dynamic_sidebar()」の()の中にSidebar-a/Sidebar-b/Sidebar-cを入れます。
 たとえば「sidebar-a.php」で説明すると、
<?php dynamic_sidebar(); ?> を
<?php dynamic_sidebar(‘Sidebar-a’); ?>と()の中にウェジェットのタイトル全部を入れます。「Sidebar-b」「Sidebar-c」もそれぞれのサイドバーテンプレートの中に組み込んで下さい。この時Sidebar-aの前後に ’を入れるのを忘れずに。数字ではなく文字の場合は必要です。
 そして最後にページテンプレートにサイドバーを組み込みます。
 今回は1/2/3の数字ではなく、サイドバーテンプレートの名前に使ったa/b/cを組み込んで下さい。
 「<?php get_sidebar(‘a’); ?>」と、このように。ここも ‘ を入れるのを忘れずに。
 これで終了です。

WordPressのテーマを手作り

火曜日, 8月 16th, 2011

 WordPressのテーマを手作りしてみました。と言っても、ど素人の私にまったくの自力で作れるはずはありません。「WordPress レッスンブック 3.x対応」という本を買い込んで、その通りに作っていきました。そうしたら出来るもんですね。最後にヘッダーや色をカスタマイズして出来上がりました。
その作ったテーマを使用しているブログがこちらです。
「古い本棚」
 
 皆様も挑戦してみてはいかがですか。

WP新たなページのテンプレート

火曜日, 7月 28th, 2009

 WordPressにはページのデザインを同じHP(ブログも)内で変更することができます。とりあえずこちらのホームページをご覧ください。私の別のホームページです。
 <Cut Chips/カットチップス>     
 このトップページはとてもブログソフトで作ったものとは思えないでしょう。ヘッダーもサイドバーもありませんから。でも、これもWordPressで作ったものです。このトップページだけのためにページのテンプレートを作っているのです。
 
 ページのといいましたが、ブログの一般投稿の部分は一種類のテンプレートしか使えません。WordPress独特のページ機能の部分を新たなテンプレートで変えられるということです。ですから、ブログの一般投稿を使わすにページ機能だけでホームページを作る事も出来、そのページのデザインをさまざまに変えることができるということです。
 
 では新しいページのテンプレートの作り方を紹介します。
 まずは元になる雛型を用意します。たとえばどのテーマ(WordPressのデザインを決めるもので、世界中に無料のテーマが存在します)の中に『メインインデックスのテンプレート』や『ページのテンプレート』があるはずですので、それらを雛型としましょう。
 雛型が決まったら、それをテキストエディタ(『TeraPad』など)で開いてください。
 
 たとえばこんな風です。
tera01b
 
 先頭の赤線の行に注目してください。ここを少し細工します。

<?php
/*
Template Name: toppage
*/
get_header(); ?>

 
 このように中に
/*
Template Name: toppage
*/
というのを入れます。この『toppage』というのがこのテンプレートの名前になりますので、適当な名前を入れてください。自由に決めて結構です。これはページを書く時に右に属性の中のテンプレートとして表示され、選択出来る名前になります。この説明は後で出てきます。
 実際には下の画像のようです。
tera02a
 
 ここで、ページのデザインを変更するのですが、とりあえずこれを格納しましょう。変更を加えたら上書き保存すればいいのですから。雛型としたテンプレートと同じ場所に『aaaaaa.php』として格納しますが、aaaaaaaの部分はテンプレートの名前と同じにした方が後でわかりやすいでしょう。
 
 これで用意はできましたので、さっそく使ってみましょう。もちろん使うWordPressの中のテーマに新たに格納したテーマを送り込んでくださいね。
 
 ページの新規追加を開いてください。そしたら右の方にある属性に注目してください。下の画像です。
tera03a
 
 デフォルトだけではなく、作ったテンプレート名も入っているはずです。この新しく作ったテンプレートを選択して、ページを書くと、そのデザインでそのページが表示されるということです。
 
 以上が新たなページのテンプレートの作り方と使用方法です。
 

WordPressのサイドバーをカスタマイズ Ⅰ

木曜日, 4月 30th, 2009

 WordPressのサイドバーをカスタマイズするのに一番手っ取り早いのはウェジェットを使うことです。今のWordPressにはこのウェジェット機能が備わっていますので、サイドバーのメニューを手動で取り捨て、変更をする必要がなくなりました。必要なメニューを必要な場所に簡単に載せることができます。
 例えば左右にサイドバーのあるテンプレートを使っているとして、左にカテゴリー・ページ、右にサイト内検索、最新の投稿を載せたいとすると、いとも簡単に出来るのです。あまりに簡単なので、いちいちスクリーンショットは載せません。
 ダッシュボードの左にある外観>ウェジェットをクリックしてください。そこにサイドバーのメニューがありますので、入れるだけです。
 ウェジェットは規定のものだけではなく、いろんなサイトで新たなウェジェットが公開されていますので、それを取り込むことも出来ます。
 テキストというメニューには自分で必要と思われるものを入れることが出来ます。例えばGoogleアドセンスをそこに入れる、また無料のブログパーツを見つけてきて入れる、などに使えます。
 
 このブログの右のサイドバーももちろんウェジェットを使用しています。
 
 初心者には本当に強い見方のウェジェット機能。WordPressを導入したらまず初めにいじる所ではないでしょうか。おじさんにも簡単。

WordPressのヘッダー画像の変更

火曜日, 4月 7th, 2009

 今日はWordPressのヘッダー画像を変えてみましょう。WordPressのカスタマイズの初歩の初歩です。
 まず自前の画像を用意します。変えたいヘッダーの大きさに合わせたものを用意してください。任意のネームを付けて結構です。それを使っているテーマ(themes)の中の「images」フォルダに「FFFTP」などFTPクライアントを使って送ってください。
 さてここからが本番。
 ヘッダー画像を変えるということはスタイルシート内のその部分を変えるということです。
 使っているテーマ(themes)の中の、スタイルシート(css)の中の「#header」あるいは「 .header」「div .header」などとある部分の後に「background -image: url(“images/aaaaaaabbbb.jpg”);」などとURLが書いてある部分が見つかるはずです「background: url(img/aaaaaaabbbb.jpg) bottom left repeat-x #ff0000;」などとbackgroundプロパティ―をまとめて入れている場合もありますが、要するにheaderとbackgroundがセットになっている部分を探して、その後に「url」が出てくればそこです。
 スタイルシート(css)の「background」のurl部分「aaaaaaabbbb.jpg」を自身が送り込んだネームに埋め変えるとその画像がヘッダー画像になります。
 はい、終わり。簡単ですね。 ・・・・・・・・・ て、もっと簡単に変える方法があります。あまりスマートではありませんが ・・・・・・・・・。
 「images」ディレクトリ内のヘッダー画像と同じ名前で自前の画像を用意し、上書きしてしまうのです。たったこれだけで、画像が変えられます。私としてはこんな力技は好きではありませんがね。