そもそもパンくずリストとは？
パンくずリストとは、ウェブサイトのページの階層を分かりやすく示すリストのことです。このブログの投稿でも、カテゴリーがパンくずリストとして表示されるようにしました。
投稿の場合は、カテゴリーをリスト表示させるのが一般的です。一方固定ページの場合は、親ページと子ページという関係性がある場合にパンくずリストを使って階層表示させることができます。
パンくずリストは SEO 的にも実装した方がよいようです。SEO で大事なことの 1 つは、検索エンジンクローラーができる限りページを巡回してくれることです。その巡回頻度を増やすためにパンくずリストが有効なわけです。
パンくずリストを出力してくれるタグ
投稿カテゴリーのパンくずリスト
カテゴリーをリスト表示させるには以下を追記します。
<a href="<?php bloginfo('url'); ?>">TOP</a> >
<?php $cat = get_the_category(); echo get_category_parents($cat[0], true, ' > '); ?>
<?php the_title(''); ?>
どこに追加すればいいのかは後ほど・・・。
固定ページのパンくずリスト
企業のコーポレートサイトなどは、固定ページのパンくずリストを追加したいと思うでしょう。その場合は以下を追記します。
<a href="<?php echo get_option('home'); ?>">TOP</a> >
<?php foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ) { ?>
<a href="<?php echo get_page_link( $parid );?>" title="<?php echo get_page($parid)->post_title; ?>">
<?php echo get_page($parid)->post_title; ?></a> >
<?php } ?>
<?php the_title(''); ?>
どこに追加すればいいのかはこの次で・・・。
パンくずリストの追記場所
Twenty Thirteen の場合を例に説明していきたいと思います。パンくずリストは基本的にページのヘッダーの下辺りに配置されます。なので、【 header.php 】のナビゲーションメニューの下に追記したいと思います。
基本的には上記のタグを記載していくのですが、それぞれ表示場所が異なるので、その使い分けを指定します。具体的には、トップページでは非表示。投稿ページではカテゴリーのパンくずリスト。固定ページでは階層のパンくずリストが表示されるようにします。条件分岐タグを利用します。
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</a>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
<?php get_search_form(); ?>
</nav><!-- #site-navigation -->
</div><!-- #navbar -->
/* ▼ パンくずリストを追記 ▼ */
<div id="breadcrumbs">
<?php if ( is_single() ) : ?><!-- 投稿ページでの表示を指示 -->
<a href="<?php bloginfo('url'); ?>">TOP</a> >
<?php $cat = get_the_category(); echo get_category_parents($cat[0], true, ' > '); ?>
<?php the_title(''); ?>
<?php endif; ?>
<?php if ( is_page() ) : ?><!-- 固定ページでの表示を指示 -->
<a href="<?php echo get_option('home'); ?>">TOP</a> >
<?php foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ) { ?>
<a href="<?php echo get_page_link( $parid );?>" title="<?php echo get_page($parid)->post_title; ?>">
<?php echo get_page($parid)->post_title; ?></a> >
<?php } ?>
<?php the_title(''); ?>
<?php endif; ?>
</div><!-- #breadcrumbs -->
</header><!-- #masthead -->
<div id="main" class="site-main">
Twenty Thirteen の場合は CSS でパンくずリストをきれいに整える
Twenty Thirteen の場合、ただ header.php に追記しただけでは端の方に表示されます。ブラウザの左端です。そこで、コンテンツの幅に合うようにレイアウトを整えたいと思います。
#breadcrumbs {
margin: 30px auto 0;
max-width: 1040px;
position: relative;
}
Twenty Thirteen の場合は横幅の指定が必要です。デフォルト通りであれば、最大 1040px にしましょう。これでレスポンシブデザインにも対応できます。
参考にさせて頂いたサイト
ありがとうございました。
]]>- グローバルメニューを一番上に持って行きたい
- 検索窓を消したい
- タイトル・画像・グローバルメニューのレイアウトを自由に入れ替えたい
header.phpの構成をなんとなくつかんでおく
グローバルメニューを一番上に持って来たり、タイトルと画像の間にメニューを挟んだり、とにかくヘッダー部分のパーツのレイアウト表示を入れ替えるためには、php の構成をつかんで、それぞれ該当箇所を入れ替えれば OK みたいです。
というわけで、header.php の構成を見てみましょう。
確認方法は Firefox の Firebug なんかを使って、CSS の id、もしくは class を確認し、それが指定している箇所をheader.php から見つけ出す、という単純作業です。
ヘッダーパーツの id の指定は、CSS についてまとめたこちらの記事でも紹介しておりますが、改めてここでも紹介しておきます。
【 header.php 】を開いて、これらのidに該当するの範囲を確認します。必要なのは 70 行目辺りの<body>タグ以降です。
<body <?php body_class(); ?>> <div id="page" class="hfeed"> <!-- ■ここからヘッダー全体を指定している【 #branding 】が始まっています --> <header id="branding" role="banner"> <!-- ★ここからヘッダーのタイトルや検索窓部分のスペースを指定している【 #hgroup 】が始まっています --> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup> <!-- ★ヘッダーのタイトルや検索窓部分のスペースを指定している【 #hgroup 】はここまで --> <!--ヘッダー画像に関する記述はここから --> <?php // Check to see if the header image has been removed $header_image = get_header_image(); if ( $header_image ) : // Compatibility with versions of WordPress prior to 3.4. if ( function_exists( 'get_custom_header' ) ) { /* * We need to figure out what the minimum width should be for our featured image. * This result would be the suggested width if the theme were to implement flexible widths. */ $header_image_width = get_theme_support( 'custom-header', 'width' ); } else { $header_image_width = HEADER_IMAGE_WIDTH; } ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php /* * The header image. * Check if this is a post or page, if it has a thumbnail, and if it's a big one */ if ( is_singular() && has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) && $image[1] >= $header_image_width ) : // Houston, we have a new header image! echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' ); else : // Compatibility with versions of WordPress prior to 3.4. if ( function_exists( 'get_custom_header' ) ) { $header_image_width = get_custom_header()->width; $header_image_height = get_custom_header()->height; } else { $header_image_width = HEADER_IMAGE_WIDTH; $header_image_height = HEADER_IMAGE_HEIGHT; } ?> <img src="<?php header_image(); ?>" width="<?php echo esc_attr( $header_image_width ); ?>" height="<?php echo esc_attr( $header_image_height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /> <?php endif; // end check for featured image or standard header ?> </a> <?php endif; // end check for removed header image ?> <!--
なるべく分かりやすくなるように、●とか★とか記号を割り振っておいたので、共通する記号に挟まれた部分をカットして好きな場所に貼付ければ、表示位置が変わるというわけです。
ちなみに、検索窓の位置変更は CSS をいじった方が思い通りにいきましたので、ヘッダー部分から検索窓を消したい！ 検索フォームなんてじゃまだ！ という場合に、【 header.php 】内の該当箇所を削除すればOKだと思います。
というわけで、あとは該当箇所を入れ替えればいいだけなんですよね。
では実際にいくつか試してみましょう。
グローバルメニューを一番上に持ってくる
まずはグローバルメニューを一番上に表示させる方法です。ブログタイトル部分の上に表示させるわけですね。
グローバルメニューは▲で囲んである部分
<!-- ▲ここからグローバルメニューを指定する【 #access 】が始まっています --> <nav id="access" role="navigation"> <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3> <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?> <div class="skip-link"><a class="assistive-text" href="#content"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div> <?php if ( ! is_singular() ) : ?> <div class="skip-link"><a class="assistive-text" href="#secondary"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div> <?php endif; ?> <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </nav><!-- #access --> <!-- ▲グローバルメニューを指定する【 #access 】はここまで -->
こちらを【 <header id=”branding” role=”banner”> 】のすぐ下に移動させればOKです。つまり【 <hgroup> 】の直前ですね。
すると、こんな感じでグローバルメニューが一番上に表示されます。
ブログ上部の余白を消す
グローバルメニューとブラウザの間、というかブログそのものとブラウザとの間にある余白を消して、グローバルメニューを画面上部に引っ付けたい場合、これは CSS の方を書き換える必要があります。
【 #page 】の【 margin 】の top を 0 にすれば OK です。
#page {
margin-top: 0;
}
これでブログ上部の余白が無くなります。
検索窓を削除してグローバルメニューは真ん中に
次は検索窓を削除します。
これはもう●で囲んでおいた箇所を削除すればいいだけなので楽勝です。
<!-- ●検索窓に関する記述はここから --> <?php // Has the text been hidden? if ( 'blank' == get_header_textcolor() ) : ?> <div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>"> <?php get_search_form(); ?> </div> <?php else : ?> <?php get_search_form(); ?> <?php endif; ?> <!-- ●検索窓に関する記述はここまで -->
検索フォームを表示させているのは
<?php get_search_form(); ?>
という部分のようなので、これを削除するだけでも大丈夫そうです。
また、
<div class="only-search 〜
から始まっている部分は、ヘッダーを消した際の検索窓がグローバルメニュー内に移動した時の表示を指定しているようです。CSS 側で【 .only-search 】を探すとスタイルの変更が可能です。
グローバルメニューの下の余白を消す
グローバルメニューをタイトルスペースとヘッダー画像の間に持って来たら、グローバルメニューとヘッダー画像との間に微妙な余白ができてしまいました。
これは CSS ではグローバルメニューの下マージン（margin-bottom）に余白が指定されているからのようです。ですので該当箇所のマージンの値を0にすると、グローバルメニューと画像が引っ付いて、余白がなくなります。
#access {
margin-bottom: 0px; /* デフォルトでは 6px なので、0 や好きな値に */
}
最後はヘッダー画像を一番上、次にブログタイトル、一番下にグローバルメニューの順番で配置してみます
これも単純で★でかこっている部分【 <hgroup> 】をヘッダー画像（）とグローバルメニュー（▲）の間に移動させるだけです。
検索窓は動きませんでしたが、こっちは CSS で好きな位置に表示させれば OK だと思います。
あとは、【 #site-title 】と【 #site-description 】を入れ替えてみると、ブログタイトルとブログの説明部分が入れ替わります。CSS で微妙なレイアウトのずれを調節すれば、だいたいのことは実現できるのではないかと思います。
以上、Twenty Eleven のヘッダーレイアウト変更についてでした。
Twenty Elevenのヘッダーの構造を押さえておく
まず、ヘッダーに関わる部分をパーツごとに見てみると、
- タイトル部分（＋ブログの説明部分）
- 検索窓
- 画像
- グローバルメニュー
の 4 つに分けることができるかなと思います。
Twenty Eleven のデフォルト画面と CSS で指定されている id を照らし合わせてみると、こんな感じになります。
Twenty Elevenのヘッダータイトルや画像に関するCSS
さて、肝腎の CSS の方ですが、まずは親テーマのスタイルシート 70 行目辺りから始まる「＝Structure」と書かれた部分。ここに【 #branding hgroup 】という記述があり、上図の黄色い枠の部分を指定しています。
/* =Structure
----------------------------------------------- */
body {
padding: 0 2em;
}
#page {
margin: 2em auto;
max-width: 1000px;
}
/* ここが上図の黄色い枠の部分 */
#branding hgroup {
margin: 0 7.6%;
}
また、500 行目辺りに「=Header」と書かれた箇所があります。ここに、その他の要素がまとまっています。
/* =Header
----------------------------------------------- */
/* ヘッダー全体 */
#branding {
border-top: 2px solid #bbb;
padding-bottom: 10px;
position: relative;
z-index: 9999;
}
/* ブログタイトルスペース */
#site-title {
margin-right: 270px;
padding: 3.65625em 0 0;
}
/* ブログタイトル文字 */
#site-title a {
color: #111;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}
/* ブログタイトルのリンクに関する事 */
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
color: #1982d1;
}
/* ブログの説明文、キャッチフレーズ部分 */
#site-description {
color: #7a7a7a;
font-size: 14px;
margin: 0 270px 3.65625em 0;
}
/* ヘッダー画像 */
#branding img {
height: auto;/* デフォルトは1000×288ですが、PHPを変更すれば好きな高さの画像をヘッダーイメージに挿入することができます。その際はここの値も画像の高さに合わせて変更しましょう。 */
margin-bottom: -7px;/* マージンはbottomしか指定されていませんが、ヘッダー画像の大きさを変更した場合はtopやright、leftもちょうどいい位置に指定しましょう。 */
width: 100%;/* 基本は100%＝1000pxです。もし、横幅も変更した場合はここの値も変更しましょう。 */
}
以上がヘッダー部分のブログタイトル・イメージ画像に関わる CSS の該当箇所です。
あとは id 部分と照らし合わせて好きなようにカスタマイズできますね。
ちなみに、いくつか解説を加えておくと・・・
タイトルの横幅を調節したい場合
【 #site-title 】の【 margin-right 】の値を変更すればOKです。右側のマージン（余白）のことですので、ここの値を大きくすればタイトルの横幅は狭くなり、ここの値を小さくすればタイトルの横幅は広くなります。
/* ブログタイトルスペース */
#site-title {
margin-right: 270px;
}
タイトルを左に寄せたい
タイトルや、タイトル説明文のブロックは、80 行目辺りの【 #branding hgroup 】で指定されていますので、ここの【 margin: 0 7.6%; 】という部分を変更すれば、デフォルトでは真ん中に配置されていたものを自由に配置できます。
マージンのとこに 7.6％ とあるのは、右・左どちらの余白も 7.6％ 分ということですから、左に寄せたい場合は左の余白を小さくする必要があります。
というわけで、【 margin: 0 7.6% 0 ●%; 】のようにして、好きな左側の余白を指定すれば位置を自由に決められます。左に寄せる場合はより小さな値、もしくは ０ で OK です。
#branding hgroup {
margin: 0 7.6%; /* 上 右 下 左 の順なので、３番目、4番目にも値を指定してあげる */
}
Twenty Elevenのグローバルメニュー部分のCSS
次はナビゲーションメニュー（グローバルメニュー）に関わる部分です。540 行目あたりから始まります。
グローバルメニューの部分は【 access 】という id で指定されています。
/* =Menu
-------------------------------------------------------------- */
/* グローバルメニューのカスタマイズ */
#access {
background: #222; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#252525, #0a0a0a);
background: -o-linear-gradient(#252525, #0a0a0a);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
background: -webkit-linear-gradient(#252525, #0a0a0a);/* ここまではメニュー背景色のグラデーション指定です。 */
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;/* ここまではドロップシャドウの指定 */
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;
}
/* グローバルメニュー全体 */
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
/* グローバルメニューの各メニュー（ここでは横並びになるように指定してます） */
#access li {
float: left;
position: relative;
}
/* グローバルメニューの文字全般 */
#access a {
color: #eee;
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
}
/* グローバルメニューの２段目 */
#access ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 3.333em;
left: 0;
width: 188px;
z-index: 99999;
}
/* グローバルメニューの３段目 */
#access ul ul ul {
left: 100%;
top: 0;
}
/* グローバルメニュー２段目の文字全般 */
#access ul ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ddd;
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: #efefef;
}
/* グローバルメニューにカーソルを持っていった場合 */
#access li:hover > a,
#access a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #373737;
}
#access ul li:hover > ul {
display: block;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;
}
グローバルメニューバーの背景色を変えたい
グローバルメニューの色を指定しているのは、冒頭の backgroud になります。これは単色ではなく、微妙にグラデーションがかかっています。最新のブラウザであればだいたい確認できるはずです。
デフォルトの場合だと、【 #252525 】は上から下へ向かう色、【 #0a0a0a 】は下から上へ向かう色を指定しています。
ここの色を変えるだけでもだいぶオリジナリティが出せそうですね！
#access {
background: #222; /* Show a solid color for older browsers （つまり古いブラウザで見た場合の色です。）*/
background: -moz-linear-gradient(#252525, #0a0a0a);
background: -o-linear-gradient(#252525, #0a0a0a);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
background: -webkit-linear-gradient(#252525, #0a0a0a);
}
<!-- ※色を変える場合は４カ所全て変えてください -->
Twenty Elevenの検索窓に関するCSS
グローバルメニューに関する CSS の次に来ているのが検索窓に関する CSS です。idは【 searchform 】になっていますね。
/* Search Form */
#branding #searchform {
position: absolute;
top: 3.8em;
right: 7.6%;/* 検索窓の位置を変えたい場合は基本的にtopとrightを変更してください */
text-align: right;
}
#branding #searchform div {
margin: 0;
}
#branding #s {
float: right;
-webkit-transition-duration: 400ms;
-webkit-transition-property: width, background;
-webkit-transition-timing-function: ease;
-moz-transition-duration: 400ms;
-moz-transition-property: width, background;
-moz-transition-timing-function: ease;
-o-transition-duration: 400ms;
-o-transition-property: width, background;
-o-transition-timing-function: ease;
width: 72px;
}
#branding #s:focus {
background-color: #f9f9f9;
width: 196px;
}
#branding #searchsubmit {
display: none;
}
あと、Twenty Eleven は管理画面からヘッダーのタイトルを削除することができると思うんですが、その時に検索窓がグローバルメニューの中に移動しますよね。
その場合のスタイルに関しては、この後の部分で指定しています。
/* タイトルを削除した場合＝グローバルメニュー内に検索窓が移動した場合 */
#branding .only-search #searchform {
top: 5px;
z-index: 1;
}
#branding .only-search #s {
background-color: #666;
border-color: #000;
color: #222;
}
#branding .only-search #s,
#branding .only-search #s:focus {
width: 85%;
}
#branding .only-search #s:focus {
background-color: #bbb;
}
#branding .with-image #searchform {
top: auto;
bottom: -27px;
max-width: 195px;
}
#branding .only-search + #access div {
padding-right: 205px;
}
もっと自由にヘッダーをカスタマイズしたい場合
一応、これでほぼ好きなようにカスタマイズできるかと思うんですが、ただ、もしこんな事をしてみたいという場合は CSS より PHP ファイルを直接いじったほうがよさそうです。
こんな場合というのは・・・
- グローバルメニューを一番上に持って行きたい
- 検索窓を消したい
- タイトル・画像・グローバルメニューの位置を自由に入れ替えたい
などなど・・・。
そういうわけで色々試行錯誤した結果を別途まとめたいと思います。こちらの記事を参考にしてみてください。
]]>