WordPress実習(4)：テキストP250 〜 P305
固定ページを1段組レイアウトにする
page.phpを用意する
- 編集中のテーマ「sample」フォルダにpage.phpファイルを何も記述せずにアップロードする
《page.php》
<?php get_header(); ?> <!-- コンテンツ --> <div id="content" class="page"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <div class="post"> <h2><a href="<?php the_permalink(); ?> <?php the_title(); ?></a></h2> <?php the_content(); ?> </div> <?php endwhile; endif;?> </div> <?php get_footer(); ?>
《style.css》
/* 固定ページ */ div#content.page { width:100%; }
ナビゲーションバーを作成する
register_nav_menus()
- カスタムメニューの機能を有効にする
＜?php wp_nav_menu(); ?＞
- カスタムメニューを出力する
《functions.php》
//カスタムメニュー register_nav_menus(array('navigation' => 'ナビゲーションバー'));
《header.php》
<!-- ナビゲーションバー --> <div id="nav"> <?php wp_nav_menu(array('theme_location' => 'navigation')); ?> </div>
《style.css》
/* ナビゲーションバー */ div#header { margin-bottom: 0; } div#nav ul { background-color: #000000; padding: 8px 0; margin: 0 0 20px; } div#nav li a { font-size: 0.75em; color: #FFFFFF; text-decoration: none; } div#nav li a:hover { color: #FFAA00; } div#nav li { display: inline; list-style-type: none; border-right: 1px #FFFFFF solid; padding-left: 15px; padding-right: 15px; }
トップページをビジネスサイト風のページにする
ビジネスサイト風のページ専用のテンプレートを用意する
- 編集中のテーマ「sample」フォルダにbusiness.phpファイルを何も記述せずにアップロードする
《header.php》
<?php if(!(is_page('ビジネス風のページ'))): ?> <p id="image"><img src="<?php bloginfo('template_url'); ?>/header.jpg" alt="*" width="760" height="200"></p> <?php endif;?>
《business.php》
<?php /* Template Name: ビジネスサイト風テンプレート */ ?> <?php get_header(); ?> <!-- content --> <div id="topcontent"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <p><img src="<?php bloginfo('template_url'); ?>/topimage.jpg" alt="*" width="760" height="370"></p> <?php the_content(); ?> <?php endwhile; endif; ?> </div> <?php get_footer(); ?>
《style.css》
/* ナビゲーションバー */ div#nav { clear: both; width:100%; } …略… /* トップページ */ div#topcontent p { text-align: center; font-size: 0.875em; line-height: 1.5; margin: 0 0 20px; }
固定ページにだけに出力する
条件分岐の結果を逆にする
管理画面でヘッダー画像を変更できるようにする
add_custom_image_header()
- カスタムヘッダーの機能を有効にする
＜?php header_image(); ?＞
- カスタムヘッダーのヘッダー画像を出力する
＜?php if(get_header_image()): ?＞〜＜?php endif; ?＞
- ヘッダー画像がある場合は中身を出力する
《function.php》
//カスタムヘッダー
add_custom_image_header('', 'admin_header_style');
function admin_header_style() {
?>
<style type="text/css">
#headimg {
width: 760px!important;
}
</style>
<?php
}
define('NO_HEADER_TEXT', true);
define('HEADER_IMAGE', '%s/default_header.jpg');
define('HEADER_IMAGE_WIDTH', 760);
define('HEADER_IMAGE_HEIGHT', 200);
?>
《header.php》
<!-- ヘッダー --> <div id="header"> …略… <?php if(!(is_page('ビジネスサイト風のページ'))): ?> <?php if(get_header_image()): ?> <p id="image"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT ?>"></p> <?php endif; ?> <?php endif; ?> </div>
管理画面で背景画像を変更できるようにする
add_custom_background()
- カスタム背景の機能を有効にする
《function.php》
…略…
define('HEADER_IMAGE_HEIGHT', 200);
//カスタム背景
add_custom_background();
?>
《header.php》
…略… <link rel="alternate" type="application/rss+xml" title="RSSフィード" href="<?php bloginfo('rss2_url'); ?>"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> //WordPress3.3以降はこの指定が必要
《style.css》
/* コンテンツの背景 */ div.post, p.feed, #comments { background-color: #FFFFFF; }
