TopWordPressテーマ > 2008年3月
2008年3月12日

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

March 12,2008 1:55 AM
Tag:[, ]
Permalink

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

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

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

1.変更前

まず、赤色で示す 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(); ?>

2.変更後

次に、青色で示す 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(); ?>

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

3.その他のファイル

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

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

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

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3