たなブログ WordPress入門講座

WordPress テーマの作成　トップページ作成 その4

WordPress入門

Tweet

　トップページ作成講座の最後となります。
サイドバーを追加していきます。

 今回のページは3カラム（3列）のサイトですので、
2つのサイドバーを追加します。

サンプルでは、左サイドバーにアフィリエイト関連、
右サイドバーに、その他の項目を入れていきます。

サイドバーは、WordPressのウィジェット機能を使い
構築していきます。

それでは、はじめましょう。

ウィジェットの機能を使う

 まずは、WordPressにウィジェットの機能を追加してみましょう。
functions.php //ウィジェット register_sidebar(array( 'name' => '右サイドバー' )); register_sidebar(array( 'name' => '左サイドバー' ));

functions.phpに記述を記入（コピペ）して追加してください。　→　サンプル

 これで、ウィジェットの機能が使えるようになります。

　管理画面の「外観」「ウィジェット」を選択してください。
 項目に、右サイドバーと左サイドバーがありますので、そこにカテゴリーなどのメニューを
追加していきます。 追加は、ドラック＆ドロップで行なえます。

　 今回のサンプルでは、左は、アフィリエイトなどの記事を入れたいと思います。
 やり方は、簡単です。「テキスト」という項目を左サイドバーにドラック＆ドロップするだけです。
　この「テキスト」の項目には、普通にHTMLタグなど利用できますので、アフィリエイトコードなど
お好みに編集しましょう。編集が終わりましたら「保存」をクリックしてください。

 　ウィジェットで左右のサイドバーを作り終えましたら、サイドバーを表示させます。
まずは、home.phpにサイドバーを表示させるWordPress用タグを追加します。
home.php <?php get_header(); ?><!-- 　ヘッダー部分（上部分）呼び出し　 --> <div id="body2"> <div id="content"><!-- 　記事コンテンツ（中央部分）　 --> <p class="title">記事一覧 </p> <?php get_template_part('pagenation'); ?> <?php if(have_posts()): while(have_posts()): the_post(); ?> <?php get_template_part('content'); ?> <?php endwhile; endif; ?> <?php get_template_part('pagenation'); ?> </div> <?php get_sidebar('2'); ?><!-- 　左サイドバー　 --> </div> <?php get_sidebar(); ?><!-- 　右サイドバー　 --> <?php get_footer(); ?><!-- 　フッター部分（下部分）呼び出し　 --> 

 サンプルのように、home.phpを修正してください。　→　サンプル 

追加した記述の＜?php get_sidebar(); ?＞は1個目のサイドバーを呼び出す記述（右サイドバー）、
＜?php get_sidebar(‘2’); ?＞は、2個目のサイドバーを呼び出す記述（左サイドバー）です。

　1個目のサイドバーの記述は、sidebar.phpに記入され、2個目はsidebar-2.phpというファイルに
記入されます。

まずは、sidebar.phpです。以下の記述を記入（コピペ）してください。
sidebar.php <div id="sidebar"><!-- サイドバー --> <ul> <?php dynamic_sidebar(); ?> </ul> </div> 

　記入（コピペ）することで、1個目のサイドバーが表示されるようになります。　→　記入サンプル

続いて、2個目のサイドバーです。home.phpにて、＜?php get_sidebar(‘2’); ?＞と指定しましたので、
 sidebar-2.phpというファイルに記述を作る必要があります。
　もし、 ＜?php get_sidebar(‘left’); ?＞という風に記述したなら、sidebar-left.phpというファイルになる
しくみです。今回は、’2’と指定しましたので、 sidebar-2.phpファイルを作ってください。

　現在のテーマのテンプレートファイルには、 sidebar-2.phpというファイル名はありませんので、FTPでアップしましょう。

 sidebar-2.phpの中身は、以下のように記述してください。
sidebar-2.php <div id="left"><!-- サイドバー --> <ul> <?php dynamic_sidebar(2); ?> </ul> </div> 

　 内容も、sidebar.phpとほとんど変わりません。cssと、呼び出すファイル指定が変わってるだけです。
 上記を記入（コピペ）してアップしてください。　→　サンプル

 あとは、cssでデザインを整えるだけです。

以下の記述をstyle.cssに記入（コピペ）しましょう。
 style.css /* 右サイドバー */ div#sidebar {width:200px; margin: 5px 15px 5px 5px; float: right} div#sidebar ul {width:200px; margin: 5px 15px 5px 5px; padding: 0; list-style-type: none} div#sidebar .widget {margin-bottom: 20px} div#sidebar h2 {font-size: 0.85em; font-weight : bold; color: #ffffff; background-color: #55aa22; border-radius: 3px; padding: 2px 10px; margin: 0} div#sidebar li li {font-size: 0.75em; border-bottom: dotted 1px #aaaaaa; margin: 0px 15px 0px 5px} div#sidebar li li a {color: #000000; display: block; padding: 5px 10px} div#sidebar li li a:hover {background-color: #f7e29e} /* 左サイドバー */ div#left { margin: 5px 5px 0px 5px; float: left; width: 200px} div#left ul {width:200px; margin: 5px 5px 0px 5px; padding: 0; list-style-type: none} div#left .widget {margin-bottom: 20px} div#left h2 {font-size: 0.85em; font-weight : bold; color: #ffffff; background-color: #55aa22; border-radius: 3px; padding: 2px 10px; margin: 0} div#left li li {font-size: 0.75em; border-bottom: dotted 1px #aaaaaa; margin: 0px 10px 0px 0px} div#left li li a {color: #000000; display: block; padding: 5px 10px} div#left li li a:hover {background-color: #f7e29e}

 以上の記述を追加すれば、ちゃんと3カラムになっているはずです。　→　サンプル

 これで、トップページの基礎は完了です。
次の講座では、トップページ以外のページを作っていきます。 
まだ、カテゴリーページや過去ログページなど、記事の個別ページ や固定ページなど
基礎的なページを作っていませんので、トップページを見本として、それらのページを作っていきます。

 そのほかの基礎ページの作成の講座へ進む

登録タグ: wordpress　・ WordPress入門講座　・ サイドバー　 | 2012年3月23日