waka8*stakes

〜馬絵+林檎+Wordpress〜

素人が自作テーマを1から作ってみた(2) 、サイドバー、カスタムメニュー、ヘッダー、フッター編

themechange

パーツを作っていく

記事などをを表示するメインの部分ができたのでその周りのメニュー(メインメニューとかサイドバー)やヘッダー、フッターを表示する部分を作ります。

サイドバー(sidebar.php)

多くのブログには記事の右側にサイドバーって言うメニューがあってそこにはだいたい

  • 簡単な自己紹介
  • 最近の記事
  • 人気の記事
  • カテゴリー
  • 最近のコメント

みたいに記事に関するリンクが並んでます。

サイドバーにのせる内容は管理画面からウィジェットで管理した方が楽そうなので内容をいっさい書かずウィジェットを出力するコードとテンプレートタグと表示用のHTMLタグしか書いてません。

ウィジェットを使わず直接テーマにテンプレートタグを使って上の事を表示した方がいいメリットもあるようですがまたの機会にやってみたいです。

ちなみに私のsidebar.php

たったこれだけしか書いてませんw

<div id="sidebar"> <?php get_search_form();
?> <?php if ( is_active_sidebar( 'sidebar-1' ) ) :
/*メイン・サイドバー1*/ ?> <aside id="primary">
<?php dynamic_sidebar('sidebar-1'); ?>
</aside> <?php endif; ?> <?php
if ( is_active_sidebar('sidebar-2') ) : /* サブ・サイドバー2 */ ?>
<div id="secondary"> <?php
dynamic_sidebar('sidebar-2'); ?> </div>
<?php endif; ?> </div> 

しかしこれだけだと表示されません。ウィジェットを表示するにはfunctions.phpに以下を書きます

 /* サイドバーウィジェット */
/*ウィジェットをdlで囲み、題名をdt、中身をddで囲むようにマークアップ。*/ register_sidebar(array(
//1個目のウィジェット 'name' => 'primary', //名前 'id' => 'sidebar-1',
//ID:テーマに表示するコードを書くときにいる 'description' => 'サイドバー上部',
//出力する位置など解りやすく説明を付ける 'before_widget' => '<dl id="%1$s"
class="widget %2$s">', //ウィジェットの前に入れる文字列、HTMLタグなど 'after_widget'
=> '</dd>>/dl>', //ウィジェットの後に入れる文字列、HTMLタグなど
'before_title' => '<dt class="widget-title">',
//ウィジェットの題名の前に入れる文字列、HTMLタグなど 'after_title' =>
'</dt><dd class="widget-content">',
//ウィジェットの題名の後に入れる文字列、HTMLタグなど )); register_sidebar(array(
//2個目のウィジェット 'name' => 'secondary', 'id' => 'sidebar-2',
'description' => 'サイドバー下部', 'before_widget' => '<dl
id="%1$s" class="widget %2$s">', 'after_widget' =>
'</dd>>/dl>', 'before_title' => '<dt
class="widget-title">', 'after_title' =>
'</dt>>dd class="widget-content">', ));

ウィジェットを増やしたい場合は下に続けて以下のコードを付け足すとウィジェット領域が増えます。

 register_sidebar(array( 'name'
=> '名前(英数字で)', 'id' => 'ID(英数字で)', 'description' =>
'位置とかの説明', 'before_widget' => 'ウィジェットの前に入れる文字列、HTMLタグなど',
'after_widget' => 'ウィジェットの後に入れる文字列、HTMLタグなど', 'before_title'
=> 'タイトルの前に入れる文字列、HTMLタグなど', 'after_title' =>
'タイトルの後に入れる文字列、HTMLタグなど', )); 

ヘッダーとメインメニュー(header.php)

headタグで囲んだ中に必要な事項(DOCTYPE宣言やmetaタグ、スタイルシートを読み込むlinkタグを書いていき、最後に<?php wp_header();?>を書きます。これがないとプラグインがうまく動かなくなります。

ヘッダー

  • サイト名を<?php
    bloginfo('name');?>
    で出力し、トップページへのリンクを<?php
    bloginfo('url');?>/
    <?php echo
    home_url('/');?>
    を使って書きh1タグで囲む。
  • <?php
    bloginfo('description');?>
    でサブタイトルというかブログの説明を出力しpタグで囲む
  • これらをheaderタグで囲む

上部メインメニューをカスタムメニュー化する

固定ページのリンクが上部メニューになってるテーマが多いと思いますが、カスタムメニューに対応させると管理画面で上部メインメニューを好きなように作れます。
対応させるには以下のコードをテーマに書きました。

functions.php
 add_theme_support( ‘menu’ );
register_nav_menu( ‘topmenu’, ‘トップメニュー’ ); 
header.php(ヘッダー画像とかの後に)
 <?php wp_nav_menu(
array( 'theme_location'=>'topmenu', //メニューの位置 'container'
=>'', //メニューリストのulを囲むタグ 'menu_class' =>'', //ulにつけるclass
'items_wrap' =>'<ul id="top-menu-navi">%3$s</ul>'));
//メニューアイテムを囲むタグとか ?> 

ほかにも設定できる項目はたくさんありますが必要なものだけでいいでしょう。

フッター(footer.php)

ウィジェットを置けるようにしてその下にWordpressのリンクや連絡先(メールアドレスへのリンク)などの管理者情報を書きました。

あと、Syntaxhigilighterとかfancyboxを反映させたり、『ページの上に戻る』などのスクリプトはフッターに書いてます。