カテゴリー: WordPressオリジナルテーマ作成手順

「single.php」のメインビジュアルを記述している部分の

    <div id="mainVisualInner2"><h2><img src="<?php bloginfo('template_url'); ?>/tmp/img/h2_01.jpg" alt="学校の概要" width="920" height="70" /></h2></div>

をカテゴリーごとに背景画像を切り替えるために、カテゴリーＩＤを取得して、それを画像の番号にあてて、動的にカテゴリー別にメインビジュアルを切り替えるようにするために、下記のように修正する。

    <div id="mainVisualInner2">
			<?php
      $cat_id = get_the_category();
      $cat_id = $cat_id[0];
      $cat_id = $cat_id->cat_ID;
      $catname = get_the_category_by_ID($cat_id);
      //var_dump(each( $cat_id));
      //echo $cat_id;
      //echo $catname;
      echo '<h2><img src="';
      bloginfo('template_url');
      echo '/tmp/img/h2_0';
      echo $cat_id;
      echo '.jpg" alt="';
      echo $catname;
      echo '" width="920" height="70" /></h2>';
      ?>
    </div>

画像の番号の部分「h2_0x.jpg」の「x」の部分にカテゴリーIDを動的に入れて、「h2_01.jpg」、「h2_02.jpg」、「h2_03.jpg」・・・と用意しておき、CSSで背景画像を切り替えるようにする。

サイドバーを下記のように修正します。

<div id="sidebar01">
 <?php if (is_category() || is_single()) : ?>
 <ul class="snav01">
 <?php
 $cat_id = get_the_category();
 $cat_id = $cat_id[0];
 $cat_id = $cat_id->cat_ID;
 $catname = get_the_category_by_ID($cat_id);
 //var_dump(each( $cat_id));
 //echo $cat_id;
 //echo $catname;
 echo '<li class="liFirst0' . $cat_id . '"><h2>' . $catname . '</h2></li>';
 ?>
 <?php
 $args = array(
 'cat' => $cat_id
 );
 ?>
 <?php $loop = new WP_Query($args); ?>
 <?php while ( $loop->have_posts() ) : $loop->the_post();
 /* ループ開始 */ ?>
 <li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
 <?php endwhile; ?>
 </ul>
 <?php endif; ?>
 <!-- /div.sidebar01 --></div>

現在のカテゴリーID、カテゴリー名を取得して、カテゴリーごとに見出しの画像をCSSで差し替え、カテゴリーの記事の数だけ左メニューとして表示する。

「single.php」に実際にワードプレスのタイトル、記事を表示させるように設定します。

<div id="content2">
<div id="contentInner2">
<?php get_sidebar(); ?>
<article id="mainContents2">
<section>
<h3>タイトル１のサンプルテキストです</h3>
<P>これはタイトル１の本文のサンプルテキストです。</p>
<h3>タイトル２のサンプルサンプルテキストです</h3>
<P>これはタイトル２の本文のサンプルテキストです。</p>
</section>
<div class="pagetop"><a href="#siteTitle">PAGE TOP</a></div>
<!-- /article#mainContents --></article>
</div>
<!-- /#content --></div>

のようになっているところ、今回の場合は＜section＞タグの中身を

<div id="content2">
<div id="contentInner2">
<?php get_sidebar(); ?>
<article id="mainContents2">
<section>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php if(is_single()): ?>
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
<?php endif; ?>
<?php endwhile; endif; ?>
</section>
<div class="pagetop"><a href="#siteTitle">PAGE TOP</a></div>
<!-- /article#mainContents --></article>
</div>
<!-- /#content --></div>

このように修正します。

基本的にはおまじないなのですが、HTMLコーディングのときのタイトルタグへの装飾の設定を反映させるために

<?php the_title(); ?>

このタイトルにあたる部分にタグを追記します。今回は＜h3＞タグとして設定してあるので

<h3><?php the_title(); ?></h3>

このように＜h3＞タグで囲んでやります。

今回はトップページにはサイドバーがないサイトだったので、「page.php」の作成の際にはやりませんでしたがサブページに方にはサイドバーがあるので、「sidebar.php」を作成します。

基本的な要領は「header.php」、「footer.php」と同じで、サイドバーに当たる部分を「sidebar.php」として保存してやります。

画像のように、「sidebar」のdivタブ部分のみを残して「sidebar.php」として保存します。次にサイドバーの内容をワードプレスで表示するようにします。

＜ul＞タグの中身を

<?php dynamic_sidebar(); ?>

と書き換えて保存します。これは「page.php」や「single.php」を作るときにとりあえずサイドバー用のウィジェットを表示させて各ページへのリンクを確保するときに使ったものと同じものです。以後は「single.php」はこれを利用するので適当な場所に確認用に表示させているサイドバー用のウィジェットは削除してもかまいません。

次に「single.php」側で「header.php」、「footer.php」と同じようにサイドバーを読み込む記述を追記します。

となっているところを

サイドバーのところをそっくり

<?php get_sidebar(); ?>

のように修正します。

「single.php」のサイドバーの部分にサイドバー用のウィジェットが表示されるようなります。

まだ、表示が崩れたりしている状態ですが、リンクが確保できればいいのと、実際にはこのままの状態ではサイドバーとして使えないので後々手を加えていきます。とりあえず今はこの状態でよしとします。

「single.php」を「page.php」と同じように「heder.php」と「footer.php」の部分を切り取ってしまいます。「heder.php」と「footer.php」は「page.php」を作成した時に既に作ってあるので今回の「single.php」は「heder.php」と「footer.php」にあたる不要部分を切り取って

1行目に

<?php get_header(); ?>

最終行に

<?php get_footer(); ?>

と追記して保存します。

FTPで「index.php」と同じ場所へアップロードします。

これで「page.php」と同じようにヘッダーとフッターが表示されればＯＫです。この状態では既にヘッダーとフッターは共有されているのでヘッダーを修正するときは「header.php」、フッターを修正するときは「footer.php」を修正すればトップページ、サブページの両方に反映されます。