ホームページ作成会社-Eネット

WordPress ～ ‘ワードプレス・カスタマイズ’

サイドバーテンプレートを使い分ける

フッターテンプレート同様に、サイドバーも複数使い分けることができます。

ページによっては、異なるサイドバーで表示させたい時などの使用法です。

sidebar.phpとsidebar-2.phpと異なるサイドバーテンプレートをアップ後

読み込みたいテンプレートに以下の様にコードを書いて使い分けます。

sidebar.phpを読み込ませるとき

<?php get_sidebar(); ?>

sidebar-2.phpを読み込ませるとき

<?php get_sidebar('2'); ?>

と書いて異なるサイドバーを使い分けます。

別のフッターテンプレートの読み込み方

普通、ワードプレス全テンプレートでは、フッターテンプレートを読み込むときは

<?php get_footer(); ?>

を用いますが、 別のフッター用ファイル「footer2.php」を作成し、

それを読み込みたい場合には、 上記のコードを以下のコードに書き換えます。

<?php include (TEMPLATEPATH . ‘/footer2.php’); ?>

つまり、テンプレート毎にフッターを変えることが出来ます。

他のカテゴリーのレイアウトと商品表示形式にしたいカテゴリーのレイアウトは 

全く異なるわけなので、まず、商品表示形式にしたいカテゴリー用の専用のテンプレート 

を作成します。 

例として、当サイトの「ワードプレス・テーマ一覧」の作成方法を記述しておきます。 

まず、管理室で「ワードプレス・テーマ一覧」というカテゴリーを作成します。 

このページのURLは、
../wp-admin/edit-tags.php?action=edit&taxonomy=category&post_type=post&tag_ID=5
と、ページIDは ’5′ です。 

ページID=5ならば、 

category-5.php　とハイフンとカテゴリIDの数字をつけてを作成します。 

*archive.phpをそのままコピーしてファイル名をcategory-5.phpとし、アップしました。 

そのファイル「category-5.php」を商品表示形式に、以下の様にカスタマイズします。 

<?php get_header(); ?>
<div>
<div style="float:right; width:240px;">
<?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
</div>

<div>

 <br><h2>ワードプレス・テーマご選択から完成までの概要</h2>
<div id="info_top">
<div>

 <!-- 上部メッセージループ開始 -->

<?php include('info.php') ?>
<!-- 上部メッセージループ終わり -->

</div>
</div>

</div>

<!-- プロダクト -->

<div id="product3">
 <h2>ワードプレス・テーマ一覧</h2>
<!-- 次ページへのナビ上 -->
<div>
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
</div>
<!-- 次ページへのナビ上ここまで -->  
        <?php query_posts($query_string . "&order=ASC"); ?>
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <!-- エントリータイトル -->
  <div>
  <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
  <!-- エントリーの内容 -->
　　　　　　　　　　　<div align="center">（画像をクリックで拡大）</div>
  <?php the_content('詳細...'); ?>
  </div>
<?php endwhile; ?>

</div>
<!-- 次ページへのナビ下 -->
<div>
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

<?php if ($prev_link || $next_link): ?>
<div>
 <div><?php echo $next_link; ?></div>
 <div><?php echo $prev_link; ?></div>
</div>
</div>

<?php endif; ?>
<!-- 次ページへのナビ下ここまで -->  
<?php endif; ?>
</div>
</div>

<div>
<div>
</div>
</div>
<?php get_footer(); ?>

このページのスタイルシートcssは、以下

/* 上部メッセージループ部 */
#info_top{
  width: 522px;
  height:px;
  border: 1px solid #BBB;
  background-color: #F2CCCC;
  margin: 3px 0px 3px 0px;
  line-height:150%;

}

#info_top .inner{
  padding: 0px 0px 2px 5px;
}
/* テーマ一覧ページ */

#content3 h2, #product3 h2{
  margin: 0px 8px 4px 10px;
  height: 30px;
  font-size: 117%;
  font-weight: bold;
  color: #6D8A92;
  text-indent: 5px;
  line-height: 180%;
  border: 0px solid #CCC;
  display: block;
  overflow: hidden;
  background: url("images/nav2.png") no-repeat right top;
  width:540px;
  padding-top: 3px;
}

/*Product*/
#product3 {
  clear: both;
  margin: 5px 0 5px 10px;
  width:540px;
}
#product3 .box3{
  float: left;
  width: 160px;
  height: 240px;
  overflow: hidden;
  margin: 5px 3px 5px 2px;
  padding: 5px;
  border: 1px solid #CCC;
  font-size: 12px;
  text-align: left;
  line-height: 120%;
}

#product3 .box3 p{
  margin: 5px;
  font-size: 12px;
  line-height: 120%;
}

#product3 img{
  margin: 3px 0;
  border-style: none;
  text-align: center;
  width:140px;
  height:105px;
}

.art-content {
  float:left;
  width:540px;
  margin-left:10px;
  margin-right:5px;
}
.nextpage {
  margin-top:10px;
  margin-bottom:10px;
  width:520px;
  height:10px;
  text-align:left;
  margin-left:20px;
}

*ちなみに、ページナビにはこちらのプラグインを使用しています。

WordPress(ワードプレス)は、ブログなのでTOPページが新着記事に入れ替わってしまう。

<?php
/*
Template Name: FrontPage
*/
?>

内容 外観 ＞ テーマ編集 ＞ function.php を開き

function.php の最下部にそのまま

<?php
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
?>

を挿入します。

● 一行目と五行目の ＜?php と ?＞　は入れなくても良いです。

● ちなみに

remove_action(‘wp_head’, ‘rsd_link’);　
は、iPhoneなどで投稿する時。

remove_action(‘wp_head’, ‘wlwmanifest_link’);　
は、Windows Live Writer を使ってブログ投稿する時。

に使用するとの事です。

■ テンプレート内容を別ページに表示-1

内容 「info.php」 テンプレートファイルを作成し、そのファイル内に

別のページに表示したい内容を直接記述します。

1.まず、「info.php」に以下の様に記述し、テーマ内にアップします。

<?php
/*
Template Name: インフォメーション
*/ ?>

<div id=”info”>
　　　<div>
　　　　
　　　ここに別のページに表示したい内容を記述

　　　</div>
</div>

2.実際に表示させたいテンプレートに以下を記述します。

<div id=”info_top”>
<div>
<!– インフォ内容を表示 –>
<?php include(‘info.php’) ?>
<!– インフォ内容を表示終わり –>
</div>
</div>

3、表示部分のCSSをスタイルシートに記述して、調整します。
#info_top {
width: ○○px;
height:○○px;
border: ○○px solid #○○;
background-color: #○○;
margin: ○○px ○○px ○○px ○○px;
line-height:○○%;
}
#info_top .inner {
padding: ○○px;
}

＊アドセンスコードを「info.php」に記述して、ページの映したいところに

　<?php include(‘info.php’) ?>

を挿入するなどの使い方も出来ます。