小粋空間  -  a cheap joke and a play on words site

3カラムレイアウトで中央カラムを（X）HTMLの最初に記述する（WordPress 用テーマ版）

当サイトで配布中の WordPress 用テーマ（3カラム版）の、固定レイアウトの(X)HTMLマークアップについて、中央カラムをマークアップの前方に移動する方法です。

この内容は、「3カラムレイアウトで中央カラムを（X）HTMLの最初に記述する」を元にしたものです。元記事では WordPress でのテーマ編集方法が分かりにくいため、このエントリーで説明致します。

以下、インデックスを例に、テーマ変更前と変更後の(X)HTMLマークアップ修正内容を示します。この記事のカスタマイズを行う前に、「3カラムレイアウトで中央カラムを（X）HTMLの最初に記述する」で、カラムレイアウトの仕組みを事前に知っておいてください。

１．変更前

まず、赤色で示す include 命令を、<div id="content"> に対応する div 要素の終了タグ直後に移動します（変更後のイメージをご覧ください）。

<?php get_header(); ?>
 
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
 
<div id="content">
<div class="blog">
 
<?php if (have_posts()) :  while (have_posts()) : the_post(); ?>
    <div class="entry" id="post<?php the_ID(); ?>">
        <?php the_date('Y.m.d', '<p class="date">', '</p>') ?>
        <h2 class="entry-header"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
        <div class="entry-body">
            <?php the_content('Read more &raquo;'); ?>
        </div>
        <p class="entry-footer">Posted at <?php the_time('h:i') ?> | Category: <?php the_category(', ') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> <?php edit_post_link('Edit', ' | ', ''); ?></p>
    </div>
<?php endwhile; else: ?>
<h2 class="center">Not Found</h2>
    <p class="center"><?php _e('Sorry, but you are looking for something that isn\'t here.'); ?></p>
<?php endif; ?>
<p class="content-nav"><?php posts_nav_link(' | ', '&laquo; Previous', 'Next &raquo;'); ?></p>
 
</div>
</div>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

２．変更後

次に、青色で示す div 要素を追加してください。

<?php get_header(); ?>
 
<div id="wrap">
 
<div id="content">
<div class="blog">
  
<?php if (have_posts()) :  while (have_posts()) : the_post(); ?>
    <div class="entry" id="post<?php the_ID(); ?>">
        <?php the_date('Y.m.d', '<p class="date">', '</p>') ?>
        <h2 class="entry-header"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
        <div class="entry-body">
            <?php the_content('Read more &raquo;'); ?>
        </div>
        <p class="entry-footer">Posted at <?php the_time('h:i') ?> | Category: <?php the_category(', ') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> <?php edit_post_link('Edit', ' | ', ''); ?></p>
    </div>
<?php endwhile; else: ?>
<h2 class="center">Not Found</h2>
    <p class="center"><?php _e('Sorry, but you are looking for something that isn\'t here.'); ?></p>
<?php endif; ?>
<p class="content-nav"><?php posts_nav_link(' | ', '&laquo; Previous', 'Next &raquo;'); ?></p>
 
</div>
</div>
 
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
 
</div>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

変更したら「ファイルを更新」をクリックして保存してください。

３．その他のファイル

インデックスと同じ変更を、

• アーカイブ
• ページ
• 検索結果
• シングルポスト

についても行ってください。スタイルシートの変更もお忘れなく。

• 
• Tweet