Top > March 12, 2008

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

March 12,2008 1:55 AM
Category:[テーマ]
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...
List of "Mar 12, 2008"
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!