固定ページ-トップページをビジネスサイト風に

ビジネスサイト風にカスタマイズ


サイトトップをブログの最新記事一覧ページにしたときの構造



サイトトップをビジネスサイト風のページにしたときの構造

固定ページを新規追加


サイトトップをビジネスサイト風のページをトップにする



ビジネスサイト風のページ専用テンプレートを用意する

  • 「business.php」を作成する
<?php
/*
Template Name: ビジネスサイト風テンプレート
*/
?>




※このとき、固定ページ「ホーム」が「投稿ページ」であることに注意

ヘッダー画像を消す


指定したタイトルの固定ページを生成した場合にだけ中身を出力しない
<?php if(!(is_page('タイトル'))): ?>〜<?php endif; ?>


《header.php

<!-- ▼#header -->
<div id="header">
<h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>
<p id="desc"><?php bloginfo('description'); ?></p>
<?php if(!(is_page('ビジネスサイト風のページ'))): ?>
<p id="image"><img src="<?php bloginfo('template_url'); ?>/images/header.jpg" alt="" width="760" height="200" /></p>
<?php endif; ?>
</div><!-- ▲#header -->


ナビゲーションバーをデザイン
#nav {
  clear: both;
  width: 100%;
}


固定ページのタイトルを削除
  • 「<h2>」を削除する
既存のスタイルシートを適用させない

《business.php

<?php get_header(); ?>
<!-- ▼#content -->
<div id="topcontent">
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<!-- ▼.post -->
<?php the_content(); ?>
<!-- ▲.post -->
<?php endwhile; endif; ?>
</div><!-- ▲#content -->
<?php get_footer(); ?>

ビルボードの画像を表示する

《business.php

<div id="topcontent">
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<p><img src="<?php bloginfo('template_url'); ?>/images/topimage.jpg" alt="" width="760" height="370" /></p>


メッセージをデザイン
/* toppage */
#topcontent h5 {
  font-size: 0.875em;
  line-height: 1.5;
  text-align: center;
  margin: 20px 0;
}
#topcontent ol {
  font-size: 0.875em;
  line-height: 1.5;
  margin: 20px 0 20px 4em;
}


ページの構造を調整

  • 「ビジネスサイト風のページ」を「ホーム」へ変更
  • 「ホーム」を「ブログ」に変更
新規固定ページ「ブログ」を作成
  • 投稿ページを「ブログ」に変更


「ビジネスサイト風のページ」を「ホーム」へ変更


これで「ホーム」ボタンを押すと「ビジネスサイト風のページ」のトップへ移動することができました。