︿

WordPress 通常作為Blog 來設計的會以兩欄設計,這是最基礎的 Blog 版型結構模式,做為這種規劃時左欄做為文章內容欄,右欄則為側邊欄,以這樣的基礎規劃作為本次的版型設計教學。

需要準備的頁面有:
single.php
style.css
sidebar.php

首先,如果首頁 index.php 要以不同的樣貌呈現,可以不考慮用兩欄的形式作為基底,只需要考慮內頁 single.php (或者其他頁面)的呈現,如果真的很懶得用的話,可以考慮所有頁面都一致為同樣兩欄設計,在此先用 single.php 教學。

先在 single.php 內加入 CSS 類別 < article> ,分別建立一個名為 container 最外層為 100% 大小的版面,為了版型底色、留白所以必需要加入寬度 100% 這項類別,再加入一個 content 控制雙欄版面大小,我們先設為 1200px

<article id="container">
<article id="content">

....

</article>
</article>

在 style.css 內加入語法。

#container {
width:100%;
}

#content{
width:1200px;
margin:0px auto;
}

完整語法:

<?php get_header(); ?>
<article id="container">
<article id="content">
<?php the_title(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php get_sidebar(); ?>
</article>
</article>
<?php get_footer(); ?>

然後再加入左欄及右欄的的語法。

<article class="article">
.... 左欄
</article>

<aside class="sidebar">
.... 右欄
</aside>

在 style.css 內加入語法。

.article {
	float: left;
	width: 69%;
	max-width: 730px;
}

.sidebar {
	float: right;
	width: 31%;
	max-width: 315px;
}

完整語法:

<?php get_header(); ?>
<article id="container">
<article id="content">
<article class="article">
<?php the_title(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php comments_template(); ?>
<?php endwhile; ?>
</article>
<aside class="sidebar">
<?php get_sidebar(); ?>
</aside>
</article>
</article>
<?php get_footer(); ?>

關於WordPress系列文章事項
文章版本:
第 2.0 版本,WordPress 系列教學純屬個人經驗,若有錯誤會重新修正並加上版本號碼,目前會持續調整樣式、整理佈景語法,目前版本已調整為先教學基本架構再教學設計樣式,之後會以最終版本告知。

▪ 相關文章

沒有留言

本篇文章目前沒有留言。

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料