ถ้าเป็นผมคงใช้ Table -*- เพราะผมความรู้งูๆปลาๆ งมๆ เอาน่ะ แต่ถ้าผลออกมาเป็นแบบที่ต้องการแล้วก็โอ อิอิ
ถ้าใช้ Template เดิมๆ ของ Wordpress (Twenty Eleven) ซึ่งแสดงเนื้อหาแบบเต็ม 1Column
ก่อนอื่น ผมจะทำให้ แสดงเนื้อหา แบบ หลาย column ยกตัวอย่าง 3 Column
โดยเพิ่ม โค้ดในไฟล์ Stylesheet (style.css)
.box-1 { float:left; clear:left; width: 31%;}
.box { float:left; width: 31%; margin-left: 10px;}จากนั้นที่ไฟล์ Main Index Template (index.php)
<div id="column-wrap">
<?php
$displayposts = new WP_Query();
//get posts from your news category
while(have_posts()) : the_post(); ?>
<div class="box<?php if( $count%3 == 0 ) { echo '-1'; }; $count++; ?>">
<h1><a title="<?php the_title(); ?>"href="<?php the_permalink() ?>" rel="bookmark"><b><?php the_title(); ?></b></a></h1>
<?php if ( get_post_meta($post->ID, 'thumb', true) ){ ?>
<!-- DISPLAYS THE IMAGE URL SPECIFIEDIN THE CUSTOM FIELD -->
<center><a href="<?php the_permalink() ?>"><img style="margin-bottom:10px" src="<?php echo get_post_meta($post->ID, "thumb",$single = true); ?>" alt="More Detail" /></a></center>
<?php } else { ?>
<!-- DISPLAY THE DEFAULT IMAGE, IF CUSTOMFIELD HAS NOT BEEN COMPLETED -->
<center><a href="<?php the_permalink() ?>"><img style="margin-bottom:5px;" src="<?php bloginfo('template_directory'); ?>/images/no-img-thumb.jpg" alt="More Detail" /></a></center>
<?php } ?>
<!-- <p><?php the_excerpt(); ?></p> -->
<!--and other output of the loop --> </div>
<?php endwhile; ?></div>
<!--end column-wrap-->
มันก็จะแสดงบทความ ที่โพสในหน้าแรก 3 แถว เรียงกันไป
ต่อไป คือ ถ้าอยากแสดง ให้คล้ายๆดังรูป เช่น ตรง title ด้านซ้ายมี Logo เว็บ
ผมก็จะทำ Table ประมาณนี้ เขียนแบบบ้านๆ ยังงี้แหละ แหะๆ
<table><tr><td><img src="Logo" alt="Logo"></td>
<td><h1><a title="<?php the_title(); ?>"href="<?php the_permalink() ?>" rel="bookmark"><b><?php the_title(); ?></b></a></h1></td></tr>
<tr><td><?php if ( get_post_meta($post->ID, 'thumb', true) ){ ?>
<!-- DISPLAYS THE IMAGE URL SPECIFIEDIN THE CUSTOM FIELD -->
<center><a href="<?php the_permalink() ?>"><img style="margin-bottom:10px" src="<?php echo get_post_meta($post->ID, "thumb",$single = true); ?>" alt="More Detail" /></a></center>
<?php } else { ?>
<!-- DISPLAY THE DEFAULT IMAGE, IF CUSTOMFIELD HAS NOT BEEN COMPLETED -->
<center><a href="<?php the_permalink() ?>"><img style="margin-bottom:5px;" src="<?php bloginfo('template_directory'); ?>/images/no-img-thumb.jpg" alt="More Detail" /></a></center>
<?php } ?></td>
<td>><?php the_excerpt(); ?></td></tr></table>
ประมาณนี้มั้ง อย่างอื่นก็แล้วแต่ปรับแต่ง
ส่วนความกว้างของ logo กับ รูป thumb ที่จะแสดงก็ควรจะให้มีขนาดเท่ากัน เพื่อความสวยงาม อาจจะกำหนดตายตัวไปเลยก็ได้
ผมก็มีความรู้ไม่มาก อธิบายตามรูปที่เข้าใจ ถ้าผิดพลาดไปก็ขอโทษด้วยครับ แต่ก็หวังว่าจะเป็นประโยชน์อยู่บ้าง
พัฒนาเว็บไซต์
