弦也運氣不錯，申請六所上四所。
（沒上那兩所也是差了一點點就上了，大約1~2級分左右。）

這次會做主要是因為我大學的伙食費阿（誤

主要還是寒假那個老爸的 Project 拉！
不過使用WordPress如有神助呢！

至少到現在，都還沒有自己寫過GUI控制（增加Meta Box算是簡單的加上吧……）
其餘的，大多是使用Custom Post Type就完成了！

就這方面來看，使用WordPress這個決定真是太正確了！

目前商品的設定項都差不多了，接下來就是比較進階的訂單和金流的處理摟！
（期待我完成的那天，因為可以開始領傳說中的維護費……）

休息一下就來繼續製作～

您可能也喜歡：

WordPress 的「裁切」功能

WordPress MU + BuddyPress

WordPress Theme有中文教學了！

WordPress 的孩子 BackPress

无觅

於是就選了一天看似有點閒的日子趕緊再寫個一篇。

頁尾，大致上就是內容結束。
底下要放些版權訊息時使用的部份。

假設你打算讓整個版面都顯示側邊欄，那麼也可以把側邊欄寫在這個區段裡面。

下面為 貳夢之弦 V5 的 Footer 檔案內容。

<div id="sidebar"> <!-- 側邊攔 -->
 <div id="menu"> <!-- 選單 -->
 <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
 </div>
 <?php get_sidebar(); ?>
 </div>
 </div>
 <div id="footer"> <!-- 頁尾 -->
 <div id="foot-ad"> <!-- 頁尾廣告 -->
 </div>
 <div id="about"> <!-- 關於站長 -->
 <div>
 <?php echo get_avatar( get_bloginfo('admin_email'), 100 ); ?>
 </div>
 <div>
 <strong><?php the_author_meta('nickname', 1); ?></strong>
 <p>
 <!-- 目前高三，是快被玩死的考生。喜愛架站、動漫、畫畫、設計、程式等。夢想是成為獨一無二的網頁設計師…… -->
 <?php the_author_meta('description', 1); ?>
 </p>
 </div>
 </div>
 <div id="copyright"> <!-- 版權 -->
 <div id="icons"> <!-- 頁尾圖示 -->
 <a href="http://blog.frost.tw" title="貳夢之弦"><img src="<?php bloginfo('template_url'); ?>/images/2ds_logo.gif" alt="貳夢之弦" /></a><a href="http://wordpress.org" title="WordPress" target="_WordPress"><img src="<?php bloginfo('template_url'); ?>/images/wordpress_logo.gif" alt="WordPress" /></a>
 </div>
 © 2010 <a href="http://blog.frost.tw" title="貳夢之弦">貳夢の弦</a>. Powered by <a href="http://wordpress.org" title="WordPress" target="_blank">WordPress</a> <?php bloginfo('version'); ?>. 2Dreams[Changing] Desigened by <a href="http://frost.tw" title="蒼時弦也" target="_blank">Aotoki</a>.
 </div>
 </div>
 </div>
 <?php
 //After Every things end, run wp_footer();
 wp_footer();

 if(is_home() || is_front_page()){
 ?>
 <script type="text/javascript">
 var $j = jQuery.noConflict();
 //Slide Show Function
 function slideSwitch()
 {
 var $active = $j('#slidebox div.slide-active');
 if ( $active.length == 0 ) $active = $j('#slidebox div.slide:last');
 var $next =  $active.next().length ? $active.next() : $j('#slidebox div.slide:first');

 $active.removeClass('slide-active').hide();
 $next.fadeIn(1000).addClass('slide-active');
 }

 $j(function() {
 setInterval( "slideSwitch()", 5000 );
 });
 </script>
 <?php
 }
 ?>
</body>
</html>

側邊欄的部份弦也是使用 get_sidebar() 來呼叫。
之後還會和大家介紹 get_header() 和 get_footer() 兩個函式。
這些都是 WordPress 用來輸出檔首、檔尾的函式。

從 貳夢之弦V5 的版面來看，可以看到下面這些東西。

1. 側邊欄
2. 選單（弦也的選單和側邊欄一組）
3. 版權資訊
4. 站長個人介紹

這些也是頁尾常見的資訊。

其中我們又會看見一個很熟悉的函式 bloginfo()
在 WordPress 版面中，關於網誌的基本資訊都可以利用他來呼叫。
如：網誌名稱、簡介、版本等等……

而在這個版面中，新出現的函式有幾組。
一個是 wp_nav_menu() 函式，用於呼叫「自訂選單」
如果你現在使用的版面支援自訂選單，那麼應該可以找到他的使用方法。
不過這方面的使用還需要在 functions.php 這個進階一點的檔案做些琢磨，因此就暫時不介紹了！

另一個函式為 the_author_meta() 函式。
Meta 是 -Press 系列網站使用的一種欄位，用來儲存各種資料。
而 the_author_meta 就是查詢某個「作者」的某項資訊。
弦也用這個方式來呼叫自己的暱稱(nickname)
因為弦也是自己撰寫網誌，所以就沒有呼叫問題，直接指定 ID 為1的作者（弦也）

如果你在某些WordPress網誌文章上看見「作者」的簡介，那就是利用這個函式產生的。

get_avatar 則是抓取頭像，我想有使用 GAvatar 的朋友應該就知道WordPress的頭像怎麼出來的。
並且使用 get_bloginfo() 函式取得站長（弦也）的信箱。
get_bloginfo() 是被 bloginfo() 呼叫的一個函式。

bloginfo() 其實就是 echo get_bloginfo() 的意思。
（程式中，輸出與傳入一個值是有差的。）

其實頁尾是一個很簡單使用的部份。
下一次就是告訴大家如何製作 index.php 這個頁面摟！
完成後，就要來介紹一些特別的函式以及運用。

寫到這邊，弦也才發現……
WordPress 的版面設計真的不難，麻煩的還是 HTML/CSS 的切版、製版阿～～

您可能也喜歡：
弦也式 WP 版面製作之一 – 工具篇	弦也式 WP 版面製作之二 – Header 檔首	弦也式 WP 版面製作之二 – 切版與架構篇	網誌新版面設計
无觅

不過，當我看到 WordPress 的 Custom Header 功能後，我馬上知道我該怎麼做了！

WordPress 內建一款名為 imgAreaSelect 的切圖 jQuery Plguin
不過，似乎只有在使用 Custom Header 時比較容易見到他。
（據說在媒體庫上傳時也能使用，不過大家通常都是隨文章上傳吧……）

那麼，我想另外呼叫又該如何做呢？
以 WordPress 的作法，是三部曲。

上傳、裁切、儲存三個部份。

首先我們來看看裁切中的畫面。

實際上用起來沒有 Flash 的靈敏，不過已經算很方便了！

當裁切完成後，製作成 Slideshow 時，效果又如何呢？
（某弦案子的製成品，會如下圖所示……）

抓取的區域會被切下（圖片解析度不夠大時，會被拉大，裁切時請注意喔！）

那麼，分別來解釋這個「三部曲」吧！
（大部分原始碼都來自 Custom Header 的原始碼、弦也Slideshow的原始碼）

第一步，上傳。
（簡單建立一個上傳的From即可）

<h3>新增幻燈片</h3>
 <form enctype="multipart/form-data" id="upload-form" method="post" action="<?php echo esc_attr( add_query_arg( 'step', 2 ) ) ?>">
 <label for="upload"><?php _e( 'Choose an image from your computer:' ); ?></label><br />
 <input type="file" id="upload" name="import" /><br />
 <label for="title">標題</label>
 <input type="text" name="title" /><br />
 <label for="link">連結</label>
 <input type="text" name="link" /><br />
 <label for="des">說明</label>
 <textarea name="des" cols="20" rows="5"><?php echo $slides['des']; ?></textarea><br />
 <?php wp_nonce_field( 'moho-slide', '_wpnonce-moho-slide' ) ?>
 <input type="submit" value="<?php esc_attr_e( 'Upload' ); ?>" />
 </form>

esc_attr( add_query_arg( ‘step’, 2 ) ) 會產生一個 http://網址/wp-admin/目前頁面.php?page=插件註冊名&step=2 的查詢串。
要判斷目前為第幾步，使用 if(intval($_GET['step']) == 2) 這類判斷式即可。

第二步，裁切。
（要先用引入相關JS/Style才能使用，弦也是寫在Themes附上的模組，所以直接在 functions.php 加入下列語法）

wp_enqueue_style('imgareaselect');
wp_enqueue_script('imgareaselect');

接收上傳檔案的地方要先做第一階段處理（儲存檔案、計算放大縮小倍率、插入到媒體庫）

check_admin_referer('moho-slide', '_wpnonce-moho-slide');
 $overrides = array('test_form' => false);

 if(!empty($_FILES['import']['tmp_name'])){
 $file = wp_handle_upload($_FILES['import'], $overrides);

 if ( isset($file['error']) )
 wp_die( $file['error'],  __( 'Image Upload Error' ) );

 $url = $file['url'];
 $type = $file['type'];
 $file = $file['file'];
 $filename = basename($file);
 }

 if(isset($_POST['ss_id']) && isset($_POST['attachment_id'])){
 if(!empty($_POST['title']) && !empty($_POST['des'])){
 $slides[$_POST['ss_id']]['title'] = htmlspecialchars($_POST['title']);
 $slides[$_POST['ss_id']]['link'] = htmlspecialchars($_POST['link']);
 $slides[$_POST['ss_id']]['des'] = htmlspecialchars($_POST['des']);
 update_option('slideshow', $slides);
 if(empty($_FILES['import']['tmp_name'])){
 call_step_1($slides);
 return;
 }
 }
 }else{
 if(!empty($_POST['title']) && !empty($_POST['des']) && !empty($_FILES['import']['tmp_name'])){
 $slide = array(
 'title' => htmlspecialchars($_POST['title']),
 'link' => htmlspecialchars($_POST['link']),
 'des' => htmlspecialchars($_POST['des']),
 'attachment_id' => $id,
 'imgurl' => $url
 );
 array_push($slides, $slide);
 update_option('slideshow', $slides);
 $_POST['ss_id'] = count($slides)-1;
 }else{
 call_step_1($slides);
 return;
 }

 }

 $object = array(
 'post_title' => $filename,
 'post_content' => $url,
 'post_mime_type' => $type,
 'guid' => $url);

 //Save Data
 $id = wp_insert_attachment($object, $file);

 list($width, $height, $type, $attr) = getimagesize( $file );

 if ( $width == 600 && $height == 300 ) {
 // Add the meta-data
 wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $file ) );

 set_theme_mod('header_image', esc_url($url));
 do_action('wp_create_file_in_uploads', $file, $id); // For replication
 return $this->finished();
 } elseif ( $width > 600 ) {
 $oitar = $width / 600;
 $image = wp_crop_image($file, 0, 0, $width, $height, 600, $height / $oitar, false, str_replace(basename($file), 'midsize-'.basename($file), $file));
 if ( is_wp_error( $image ) )
 wp_die( __( 'Image could not be processed.  Please go back and try again.' ), __( 'Image Processing Error' ) );

 $image = apply_filters('wp_create_file_in_uploads', $image, $id); // For replication

 $url = str_replace(basename($url), basename($image), $url);
 $width = $width / $oitar;
 $height = $height / $oitar;
 } else {
 $oitar = 1;
 }

完成後產生一個只有 Submit 的表單，其餘都是隱藏值（把切割資訊傳給 WordPress 處理）
（而還需要 jQuery 幫忙處理表單值和啟動裁切功能）

<form method="post" action="<?php echo esc_attr(add_query_arg('step', 3)); ?>">
 <p><?php _e('Choose the part of the image you want to use as your header.'); ?></p>
 <p><strong><?php _e( 'You need Javascript to choose a part of the image.'); ?></strong></p>

 <div id="crop_image" style="position: relative">
 <img src="<?php echo esc_url( $url ); ?>" id="upload" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
 </div>

 <p>
 <input type="hidden" name="x1" id="x1" value="0"/>
 <input type="hidden" name="y1" id="y1" value="0"/>
 <input type="hidden" name="width" id="width" value="<?php echo esc_attr( $width ); ?>"/>
 <input type="hidden" name="height" id="height" value="<?php echo esc_attr( $height ); ?>"/>
 <input type="hidden" name="attachment_id" id="attachment_id" value="<?php echo esc_attr( $id ); ?>" />
 <input type="hidden" name="oitar" id="oitar" value="<?php echo esc_attr( $oitar ); ?>" />
 <input type="hidden" name="ss_id" id="ss_id" value="<?php echo $_POST['ss_id']; ?>" />
 <?php wp_nonce_field( 'moho-slide-crop' ) ?>
 <input type="submit" value="<?php esc_attr_e( 'Crop and Publish' ); ?>" />
 </p>
 </form>
 <script type="text/javascript">
 /* <![CDATA[ */
 function onEndCrop( coords ) {
 jQuery( '#x1' ).val(coords.x);
 jQuery( '#y1' ).val(coords.y);
 jQuery( '#width' ).val(coords.w);
 jQuery( '#height' ).val(coords.h);
 }

 jQuery(document).ready(function() {
 var xinit = <?php echo 600; ?>;
 var yinit = <?php echo 300; ?>;
 var ratio = xinit / yinit;
 var ximg = jQuery('img#upload').width();
 var yimg = jQuery('img#upload').height();

 if ( yimg < yinit || ximg < xinit ) {
 if ( ximg / yimg > ratio ) {
 yinit = yimg;
 xinit = yinit * ratio;
 } else {
 xinit = ximg;
 yinit = xinit / ratio;
 }
 }

 jQuery('img#upload').imgAreaSelect({
 handles: true,
 keys: true,
 aspectRatio: xinit + ':' + yinit,
 show: true,
 x1: 0,
 y1: 0,
 x2: xinit,
 y2: yinit,
 maxHeight: <?php echo 600; ?>,
 maxWidth: <?php echo 300; ?>,
 onInit: function () {
 jQuery('#width').val(xinit);
 jQuery('#height').val(yinit);
 },
 onSelectChange: function(img, c) {
 jQuery('#x1').val(c.x1);
 jQuery('#y1').val(c.y1);
 jQuery('#width').val(c.width);
 jQuery('#height').val(c.height);
 }
 });
 });
 /* ]]> */
 </script>

完成後，就讓他送出吧！

第三步，儲存。
這部份就是單純的 PHP 呼叫，去更改摟！
（依照應用面去儲存，弦也用在Slideshow所以是存到我儲存Slideshow資訊的變數內）

$slides = get_option('slideshow');
 $slides = empty($slides) ? array() : $slides;

 if(intval($_GET['step']) != 2){
 if(intval($_GET['step']) == 3)
 {
 check_admin_referer('moho-slide-crop');
 if ( $_POST['oitar'] > 1 ) {
 $_POST['x1'] = $_POST['x1'] * $_POST['oitar'];
 $_POST['y1'] = $_POST['y1'] * $_POST['oitar'];
 $_POST['width'] = $_POST['width'] * $_POST['oitar'];
 $_POST['height'] = $_POST['height'] * $_POST['oitar'];
 }

 $original = get_attached_file( $_POST['attachment_id'] );

 $cropped = wp_crop_image($_POST['attachment_id'], $_POST['x1'], $_POST['y1'], $_POST['width'], $_POST['height'], 600, 300);
 if ( is_wp_error( $cropped ) )
 wp_die( __( 'Image could not be processed.  Please go back and try again.' ), __( 'Image Processing Error' ) );

 $cropped = apply_filters('wp_create_file_in_uploads', $cropped, $_POST['attachment_id']); // For replication

 $parent = get_post($_POST['attachment_id']);
 $parent_url = $parent->guid;
 $url = str_replace(basename($parent_url), basename($cropped), $parent_url);

 // Construct the object array
 $object = array(
 'ID' => $_POST['attachment_id'],
 'post_title' => basename($cropped),
 'post_content' => $url,
 'post_mime_type' => 'image/jpeg',
 'guid' => $url
 );

 // Update the attachment
 wp_insert_attachment($object, $cropped);
 wp_update_attachment_metadata( $_POST['attachment_id'], wp_generate_attachment_metadata( $_POST['attachment_id'], $cropped ) );

 if(isset($_POST['ss_id'])){
 $slide = &$slides[$_POST['ss_id']];
 $slide['imgurl'] = $url;
 }else{
 $slide = array_pop($slides);
 $slide['imgurl'] = $url;
 array_push($slides, $slide);
 }
 update_option('slideshow', $slides);

 // cleanup
 $medium = str_replace(basename($original), 'midsize-'.basename($original), $original);
 @unlink( apply_filters( 'wp_delete_file', $medium ) );
 @unlink( apply_filters( 'wp_delete_file', $original ) );
 }
 call_step_1($slides);

補充說明：
在 WordPress 的 Custom Header 功能中，其設計為「頁面物件」
整個產生都是由物件輔助，主要理由是因為 Step 3 結束後返回呼叫 Step 1 來避免多餘的換頁。

註：call_step_1() 是弦也產生預設頁面（第一步）的函式，這樣才會減少一次換頁。

您可能也喜歡：

WordPress 購物車製作筆記(1)

WordPress MU + BuddyPress

PHP 中的 Function (函式) 數值傳遞測試（無解）

12月 ~ 1月程式隨手札記

无觅

稍微區分開來，檔首切割到「內容開始」
如果你的選單在內容之前，就該到選單把內容切掉。

不過，這樣說明似乎還不是很清楚。

我們先來看一下下面這段 HTML 的區段。

<html>
<head>
<title> Title </title>
</head>
<body>
  <div id="wrap">
    <div id="header"> 我是選單 </div> <!-- 以上為頁首 -->
    <div id="container"> 我是文章 </div> <!-- 此為內容 -->
    <div id="footer"> 我是版權 </div> <!-- 之後頁尾 -->
  </div>
</body>
</html>

其實這樣說明還是不太清楚，不過弦也超懶不想話圖拉！

簡單來說，你在你的頁面畫出兩條水平線。
內容（文章、主要部份）的地方以上是頁首。
反之，以下部份是頁尾，中間則是內容。

以弦也 V5 來看 Slideshow + Logo 屬於頁首。
而 文章 + 選單 + 側欄 屬於主體（選單分類在主體，是因為他屬於側攔，側欄又是次要內容。）
剩下的部份即為「頁尾」

好吧，其實這樣說明還是非常不清楚，不過得跟上進度摟～
（其實你隨意分段都行，不過頁首、頁尾是比較不常變動內容的區段）

再來，我們參考一下貳夢  V5 的 header 部份。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
<title><?php
 //Print Title
 wp_title( '-', true, 'right' );

 //Print Site Name
 bloginfo( 'name' );

 //If in Home Page, Print Description
 $site_description = get_bloginfo( 'description', 'display' );
 if ( $site_description && ( is_home() || is_front_page() ) )
 echo " - {$site_description}";

 // Add a page number if necessary
 if ( $paged >= 2 || $page >= 2 )
 echo ' | ' . sprintf( __( 'Page %s', '2ds' ), max( $paged, $page ) );

 ?></title>
<!-- YUI 3.0 CSS Reset -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
 //Load jQuery
 wp_enqueue_script("jquery");
 //Show Head Tags
 wp_head();
?>
</head>

<body>
 <div id="wrap"> <!-- 主框架 -->
 <div id="header"> <!-- 頁首 -->
 <div id="slideshow"> <!-- Slide Show -->
 <div id="slidebox">
 <?php
 if(is_home() || is_front_page()){
 $recent_post = wp_get_recent_posts( 5 );
 foreach( $recent_post as $key => $current_post ) {
 ?>
 <div <?php echo ($key != 0) ? 'style="display:none;"' : ''; ?>>
 <a href="<?php echo get_permalink($current_post['ID']); ?>" title="<?php echo $current_post['post_title']; ?>">
 <?php
 //This must be in one loop
 if(has_post_thumbnail($current_post['ID'])) {
 echo get_the_post_thumbnail($current_post['ID'], '2ds_thumbnails');
 } else {
 echo '<img src="'.get_bloginfo("template_url").'/images/slideshow_default.jpg" alt="預設圖片" />';
 }
 ?>
 </a>
 <div>
 <h3><a href="<?php echo get_permalink($current_post['ID']); ?>" title="<?php echo $current_post['post_title']; ?>"><?php echo $current_post['post_title']; ?></a></h3>
 <div>
 <?php
 $content = explode('<!--more-->', $current_post['post_content']);
 echo cut_word($content[0], 300);
 ?>
 </div>
 </div>
 </div>
 <?php
 }
 }else{
 $current_post = wp_get_single_post();
 ?>
 <div>
 <?php
 if(has_post_thumbnail($current_post->ID)) {
 echo get_the_post_thumbnail($current_post->ID, '2ds_thumbnails');
 } else {
 echo '<img src="'.get_bloginfo("template_url").'/images/slideshow_default.jpg" alt="預設圖片" />';
 }

 if($current_post){
 ?>
 <div>
 <h3><a href="<?php echo get_permalink($current_post->ID); ?>" title="<?php echo $current_post->post_title; ?>"><?php echo $current_post->post_title; ?></a></h3>
 <div>
 <?php
 $content = explode('<!--more-->', $current_post->post_content);
 echo cut_word($content[0], 300);
 ?>
 </div>
 </div>
 <?php
 }
 ?>
 </div>
 <?php
 }
 ?>
 </div>
 </div>
 <div id="logo"> <!-- Logo -->
 <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
 <<?php echo $heading_tag; ?> id="site-title">
 <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
 <?php bloginfo( 'name' ); ?>
 </a> <!-- 網誌標題（連結） -->
 </<?php echo $heading_tag; ?>>
 <span id="site-description"><?php bloginfo( 'description' ); ?></span> <!-- 網誌說明文字 -->
 </div>
 </div>
 <div id="container"> <!-- 主體 -->

超長，對吧！

不過我們只要在這篇學會三個重點即可。

重點一 ： 顯示網誌標題。
焦點放到這段原始碼。

<title><?php
 //Print Title
 wp_title( '-', true, 'right' );

 //Print Site Name
 bloginfo( 'name' );

 //If in Home Page, Print Description
 $site_description = get_bloginfo( 'description', 'display' );
 if ( $site_description && ( is_home() || is_front_page() ) )
 echo " - {$site_description}";

 // Add a page number if necessary
 if ( $paged >= 2 || $page >= 2 )
 echo ' | ' . sprintf( __( 'Page %s', '2ds' ), max( $paged, $page ) );

 ?></title>

上面這段是由WordPress預設風格所複製過來使用的。
其中你要學會的函式，就是 bloginfo 了！
bloginof( ‘Key’ );
而這個 Key 可以在 WordPress CodeX 或者 WordPress啦！ 找到。

在標題列顯示網誌名稱只要如下動作。

<title><?php bloginfo('name'); ?></title>

當然，之後你還得為你的頁首顯示標題。
（網站標題、Logo通常都在頁首。）

重點二：輸出頁首需要的語法

前面有一段語法中包涵了 wp_head() 這個函式。
其作用會 Load 一些 CSS 進入 WordPress, 像是本站的語法高亮，就是透過這個才能實踐。
大多數的 Plugin 需要透過這個去追加 JavaScript 來使用。

使用方法很簡單，只需要在 head 之間加入。

<?php wp_head(); ?>

就算是完成了！

重點三：讀取網誌的 Style.css 文件。

現今網站都使用 CSS 排版，沒有讀取的話，版面肯定會很慘。
（這邊直接複製 WordPress 預設版面的語法，其中包涵一些WP功能相依，這部份就不用管了！）

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <!-- 引入CSS的語法 -->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

發現了嗎？
上面都是使用 bloginfo 函式去讀取喔！
bloginfo 會儲存一些基本的 WP 資訊，只需要在有需要時去呼叫即可。

最後，稍微整理一下，製成一個簡單的 WP Header 檔吧！
檔名為 header.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" /> <!-- 設定編碼（以WP為準）-->
<title><?php bloginfo('name'); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <!-- Load CSS -->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
</head>
<body>
  <div id="wrap"> <!-- 主框架 -->
    <div id="header"> <!-- 頁首 -->
      <h1>
        <?php bloginfo('name'); ?>
        <span class="description"><?php bloginfo('description'); ?></div>
      </h1>
    </div>
    <div id="contanier">

一樣，弦也省略了宣告，還是要自己加上喔！
（這篇很明顯開始敷衍了！）

好！我們朝著簡陋的 WP 版面前進吧（喂
註：想做的精美只需要在後期自己慢慢修飾即可摟！

您可能也喜歡：
弦也式 WP 版面製作之一 – 工具篇	弦也式 WP 版面製作之二 – 切版與架構篇	弦也式 WP 版面製作之三 – Footer 檔尾	網誌新版面設計
无觅

那麼，開始吧！

版面的切版處理

這邊會簡單帶過，畢竟每個人作法不大相同。
只要有一個大方向即可。

我們的 Model – 貳夢之弦 V5 版面
（好吧，雖然V4非常精緻，不過在內文呈現真的美中不足，我整個想快點更換。）

這次弦也選用的是藍色/白色系的配色，主要還是之前說的「白底黑字」原則。
當然，其中已經做了很多針對網誌的排版調整，不過這邊是討論切版，就不多做討論了！

切版原則、說明（應該有高手更熟，下面是我的習慣）

1. 不需切下部份者不切
2. 盡可能重複利用圖片
   > 如弦也側欄的標題，皆是由藍色的長條組成（切下原因：有陰影處理）
3. 可用CSS設定者不切
   > 如版面背景是白色，僅需將頁首、頁尾切下即可
4. 避免大面積切割
   > 弦也頁首的漸層可以用圖片+背景色處理，因此不需要整片切割，只需要將圖片部份做好去背。
5. 小圖示集中處理
   > 如果有使用小圖示、或者有變化的背景（可重複利用）則切好放到同一張圖，用CSS對位即可

切版還要依照你的版面架構來做調整。
（如貳夢之弦 V4 是背景寬度隨頁面切換，因此都只集中切中央部份。）

切版完成後，不一定要馬上存檔，可以在建立架構時再決定是否做微調。

確立架構
每種版面的架構並不會完全相同，就 V5 和 V4 的比較來看。
V5 是由一個 Wrap 圖層包裹，而 V4 則是沒有 Wrap 圖層包裹。
（差異在 V5 背景只有上半部，而V4背景圖較多，切版下來後無法統一呈現。）

弦也的 V5 預定架構（註：其實還要加上 XHTML 宣告，不過弦也跳過了！）

<html>
<head>
<title>網頁名稱</title>
<!-- JS, CSS, Meta 資訊區塊 -->
</head>
<body>
  <div id="wrap"> <!-- 主框架 -->
    <div id="header"> <!--頁首 -->
      <div id="sideshow"> <!-- Sideshow 區域 -->
      </div>
      <div id="logo"> <!-- 網站 Logo -->
      </div>
    </div>
    <div id="container"> <!-- 主體 -->
      <div id="content"> <!-- 內容區 -->
      </div>
      <div id="menu"> <!-- 選單 -->
      </div>
      <div id="sidebar"> <!-- 側欄 -->
      </div>
    </div>
    <div id="footer"> <!-- 頁尾 -->
      <div id="ad"> <!-- 頁尾廣告區 --> </div>
      <div id="copyright"> <!-- 版權宣告 --> </div>
      <div id="aboutme"> <!-- 關於我 --> </div>
    </div>
  </div>
</body>
</html>

設計時可以加上註解，增加之後修改的方便性。

圖層的配置以「由上到下」並且「由左到右」的原則排列。
這樣一來，就可以避免事後移動位子的問題。
註：如果像是 V4 頁底有特別的錯位，這個排列就可以減少錯位時移動像素數的計算複雜度。

到了這裡，我想應該已經花上五、六個小時在製作了！
（如果你很用心的設計版面、切割版面）
不過，接下來可能還有長達數十小時的細部處理。

後面的文章會分別從 header.php, index.php, footer.php 等檔案做介紹。
當你的 Theme 架構檔案越多，你的 WP 版面功能就越強。
（因為如果沒有該檔案，那麼WP就會找 index.php 或預設版模來替代，你能做的變化就會減少。）

那麼，下次再見摟！

您可能也喜歡：

弦也式 WP 版面製作之三 – Footer 檔尾

弦也式 WP 版面製作之一 – 工具篇

弦也式 WP 版面製作之二 – Header 檔首

網誌新版面設計

无觅

雖然自己目前功力還不到家，不過能做出版面就算是不錯了！
尤其是有蠻多網友想做，卻不知道怎麼下手。
如果是這樣的話，可以先參考這篇的內容看看。

工欲善其事，必先利其器。
所以，在開始製作之前，我們得先準備好各種武器。

1. Google 搜尋引擎
   在你不知道該如何進行時，隨時都是你最好的幫手。
2. WordPress 啦！
   對岸的 WordPress 資源站，其最大幫助就是將 WP 官方的 Codex Docs 大量翻譯。
3. 一個好用的編輯器
   弦也愛用 Dreamweaver 和 Notepad++, 而你要用 NetBeans 都可，但是一定要你善用。
4. 優質的繪圖軟體
   要說的話，大概就是能讓你做設計的軟體。如 PhotoShop, Fireworks, Illustarator 等……
5. 各種瀏覽器
   FireFox, Chrome, IE7+ 這幾款主流，都要備好來測試。
6. 標記語言、程式語言的工具書
   如果你已經精通，那麼就沒有這個必要。不然，最好有 HTML, CSS, PHP 的參考書幫助你。
7. jQuery 的資料
   如果你想和弦也一樣做個簡單的 Slideshow, 或者其他特效，建議你使用 jQuery 輔助。
8. Web Server 或 *AMP 環境
   不論你用虛擬主機，或者像弦也搞個 LAMP 環境，還是用 WAMP 環境都行。
9. 其他
   如果你想在這個網誌版面上用上什麼，別忘記帶上！像是相片、色票等等

當這些備齊後，我們就可以開始摟！

不過，因為這篇只介紹工具，所以只能很唬爛的說明下去。

Google
再講下去也是廢話，一有不會馬上 Google it!
（弦也的 Slideshow 也是靠 Google 讀程式碼改出來的！）

WordPress La!
不用說你也知道，看中文絕對比看英文簡單。
雖然沒有完整的翻譯，但也好歹有個 70% 左右。
當你想像弦也一樣做個 Slideshow 或者 特殊的分類排版，那你就不能再繼續用預設的產生文章方式了！
（如弦也的 Slideshow 就是另外用程式碼產生，而非預設的方式。）

好用的編輯器
唔，這個其實攸關效率阿！
當你用著 Dreamewaver CS5 的時候，你會知道你大多數的 PHP 錯誤。
使用 Notepad++ 時，你可以很清楚的區分保留字、變數。
這對於製作版面這種費力的任務，有很大的幫助。

優質的繪圖軟體
即便你想走簡潔風，或者 CSS3 大師秀，你還是會需要他的幫助。
除非你百分之百不使用任何圖片元素在你的版面上。
Photoshop – 適合現代感的網頁設計（預設的功能上，比較適合）
Illustrator – 適合向量風格的設計（因為本身就是向量軟體阿！如果你擅長剪影，那麼成品會很美的！）
Fireworks – 本身就是做網頁設計的軟體，結合 PS 和 Ill 的特色。
其他還有什麼軟體，就看各位的私藏摟！

各種瀏覽器
先不論你偏好哪個，身為設計者，你必須先考慮你的讀者（訪客）
因此，一定要有足夠的測試確認各版本的瀏覽器都能正常使用。
假使你和弦也一樣認為 IE6 已經不合時宜，那也可以不用準備。
（但你得確保你的訪客幾乎不會使用IE6以及版面勉強可以閱讀。）

標記語言、程式語言的工具書
唔，如果你是第一次做，而且沒有足夠的 HTML, CSS, PHP 經驗，那麼最好備著。
弦也自己也有一本 CSS 手冊，不過因為已經很熟了，所以也沒什麼在使用。
（如果 PHP 不熟，也沒有版面上的特殊需求，可以跳過。）

jQuery 的資料
在省力方面，選用 jQuery 做特效真是個明智的選擇。
而且他也有 CDN (Google Code) 支援，以及 WordPress 內建。
就各方面來看，他會協助你在版面製作上很多。

網站環境
如果你已經有 WordPress 了，還是建議在本機測試後在上傳使用。
Windows 環境下可以選用 Appserv, XAMPP 等軟體。
在 Linux 環境，使用指令安裝 Apach, PHP, MySQL 即可。
（不過 Linux 環境得稍微注意檔案權限的問題。）

其他
像弦也的版面，就用到蠻多額外的元素。
如 Slideshow 預設圖，就是網路上的圖片素材。
Logo 上的字體、頁底的裝飾等等，都是網路素材。

當然，弦也還使用到了 Yahoo 的 CSS Reset 語法。
（非常建議使用 CSS Reset, 他會幫助你在各瀏覽器顯示的更齊一、優良。）

很好，一篇文章唬爛到此結束！
學測考完後雖然時間不多，不過弦也仍會繼續找時間把這套教學做完。
（網路上有很多大大都有很高超的教學，看我的最好參考其他大大的教學一起學習吧！）

您可能也喜歡：
弦也式 WP 版面製作之二 – 切版與架構篇	弦也式 WP 版面製作之二 – Header 檔首	弦也式 WP 版面製作之三 – Footer 檔尾	網誌新版面設計
无觅

不過，後面還有很多挑戰要對抗吧！
如：是否適合閱讀、設計和實際美觀上的差異、設計缺失等等……

我想，白底黑字真的會比較適合閱讀。

不過，目前的弦也還不夠能力設計更好的版面。
光是這個設計，從打版型到製作出成品，就花上了約十二小時。
也許大家聽起來不長，不過這也還只是「不完美版本」的時間。

弦也想，這個版面如果真的要完成，至少還要好幾天吧！

伴隨這次改版，網誌的名稱也改動了！
其中，算是有一些小故事。

當然，大家也別忘記去注意一下「關於」這個分頁。
因為弦也偷偷地更新摟！

為什麼會叫做「貳夢」呢？
其一是取其諧音「惡夢」
再來，就是弦也想表現的一些心情和感覺摟！

沒記錯，那時候還不太能調是高三面臨考試的壓力。
當然，即使我在怎麼能夠適應，也總得需要調適。
而我所追求的設計，倒是有點瓶頸。

想了很多次版面，也還是沒有一個所以然。
此時，剛好接觸到剪影的呈現風格。
我就有了一個「用夢一般」的方式呈現版面吧！

於是，「貳夢」就這樣產生了！

雖然這次的版面其實沒有很強烈的「夢」或者「惡夢」的感覺。
不過，倒是讓人感覺蠻穩定的。

也許下次我該挑戰更強烈的感覺吧！
白底黑字，下次的目標。
（大概，又會是半年之後……）

您可能也喜歡：
兩本設計新書入手	網誌新版面設計	架站機適應性	貳夢之弦 – 即將登場
无觅

如果情況良好，也許明天寫網誌之前就能開始啟用了吧！
不過，現在我們先來看看設計圖過過乾癮……

我想，成品和原圖多少會有差異的！
（在繪圖軟體裡面呈現的總是會比較好看些……）

總之，我們先來看看吧！

整體來看，是個非常精緻的版面呢！

不過，距離完成還有很長的一段路。
雖然弦也不是第一次製作WordPress版面了！

不過這次不但需求多，也有許多設定要做處理。
相較以往的製作，這次真的費時耗力。

目前預定的版本號為 1.0 版。
之後會隨著HTML, CSS, WordPress 發展而持續的修改。
我想是一個會用上好一陣子的網誌版面。

最快是預定明天就能上線使用。
最慢，也許要學測考完了！
明天還得把兩個東西做好處理，不然時間會有點不足。

接下來就是寒假，也要去做老爸的 Project, 不是那麼輕鬆。
只能稱現在這僅存的空閒時間，去努力摟！

但是，如果將訊息處理後 return 回去，後面的函式又可以繼續處理。
但，似乎沒有使用 & 去參照，到底是什麼情況呢？

弦也決定親身測試，這個神覓得東西！

測試 1 – 單純輸出

function do_func( $str ){
	call_user_func_array('op2', array($str));
	call_user_func_array('op3', array($str));
}

function op1( $str ){
	//Return to op2
	return do_func($str);
}

function op2( $str ){
	echo $str.'2';
}

function op3( $str ){
	echo $str.'3';
}

echo op1('hello');

結果：hello2hello3

測試2 – op2改為return

function op2( $str ){
	return $str.'2';
}

結果：hello3
看起來，此時的 hello2 已經被 hello3 蓋過去了！
再來測試 op3 也改為 return 時，是否會傳遞參數。

function op3( $str ){
	return $str.'3';
}

結果：空
看起來，似乎是不會做任何傳遞動作的！

加上參照看看！

function do_func( &$str ){
	call_user_func_array('op2', array($str));
	call_user_func_array('op3', array($str));
}

結果：空
看起來也不行，也許哪裡漏了些東西！

打開 function.plugin-api.php 看看。

function apply_filters($tag, $value) {
	global $wp_filter, $merged_filters, $wp_current_filter;

	$args = array();
	$wp_current_filter[] = $tag;

	// Do 'all' actions first
	if ( isset($wp_filter['all']) ) {
		$args = func_get_args();
		_wp_call_all_hook($args);
	}

	if ( !isset($wp_filter[$tag]) ) {
		array_pop($wp_current_filter);
		return $value;
	}

	// Sort
	if ( !isset( $merged_filters[ $tag ] ) ) {
		ksort($wp_filter[$tag]);
		$merged_filters[ $tag ] = true;
	}

	reset( $wp_filter[ $tag ] );

	if ( empty($args) )
		$args = func_get_args();

	do {
		foreach( (array) current($wp_filter[$tag]) as $the_ )
			if ( !is_null($the_['function']) ){
				$args[1] = $value;
				$value = call_user_func_array($the_['function'], array_slice($args, 1, (int) $the_['accepted_args']));
			}

	} while ( next($wp_filter[$tag]) !== false );

	array_pop( $wp_current_filter );

	return $value;
}

看起來我們的 call_user_func_array() 也沒有問題，在 -Press 中也沒有使用 & 做參照。
對 op1 做調整看看。

function op1( $str ){
	//Return to op2
	echo $str;
	do_func($str);
}

結果：hello
問題也不在 op1 身上，這倒是讓整個過程成了一個謎阿！

既然現在無解，就只好暫時放在一邊。
也許哪天做測試時，會測出 -Press 為什麼可以傳遞數值的原因！
（弦也自己寫的 Hook 也做不到，真是神奇！）

—
17:49 補充

原來，一個一直有一個盲點。
「程式的『循序』原則！」

因為 -Press 都用 Loop 去做，所以我們沒發現他不斷地 Replace $value 這個變數。
正解：

function do_func( $str ){
	for($i = 2; $i < 3; $i++){
	$str = call_user_func_array('op2', array($str));
	$str = call_user_func_array('op3', array($str));

	return $str;
}

這樣一來，就能不斷串接了！
（也可以避開一些用echo直接輸出的問題呢！）

但，我的設計到底去哪裡了（拭淚
不過我想，應該很快就有機會多多練習了～
（畢竟我現在除了看程式外，就去吸收設計方面的資訊。）

首先大概是十一、十二月左右，開始接觸 bbPress 吧！
那時剛好老師請我幫忙弄學校的 Project 因此又開始回溫 PHP 了！
（在此之前都是與 Java 為伍……）

而在 bbPress 的開發上，感受到了 -Press 系列（bbPress, WordPress）的 Plugin 系統強大。
與 Discuz 相比，我猜 Press 的運行速度會略慢（整個架構都是以 Plugin 為核心，需要做很多的 Function 處理）
不過在可變性的優勢，就是 Discuz 遠遠所不能及。

雖然 Discuz 的 Core 在 X1 推出後，也逐漸有越來越多的 Template Hook 可以插入區塊。
但相較 bbPress 的 Fliter 機制，就遜色很多。
（一個是自訂，一個是套用系統函式者就能調整。）

接下來就是一月初，老爸和我說完我將要做的 Project 後。
我接觸了兩個東西，一個是 BackPress 另一個是插花的 Conduit Toolbar 了！

首先來簡單過 Conduit Toolbar 的功能。
其整體架構很簡單，但多了 API 可運用（嚴格來說是可以插入網頁）
但，又有 JavaScript 與其他配，讓他多了更多變化（Refresh機制）

這個 Refresh 機制可以讓 Toolbar 刷新，只要搭配 PHP, Perl, ASP, JSP 等 CGI 程式就能做出變化。
（登入 > 刷新 > 請求網頁[Session/Cookie紀錄已登入] > 回應新頁面[因為登入關係顯示的圖示增加]）

最後就是 BackPress 這個部份（WordPress, bbPress 的 Core 技術）
整體上來看，其實是從 WordPress 將一些優秀的 Function, Class 抽取出來。
並且加以整合後發布的 PHP Library ，但其功能強大可以稱做一個小型的 Framework 了！

而弦也個人認為 BackPress 最有特色的地方莫過於其 Database 的強化。
原本 WP 僅支援單一資料庫，但在 BackPress 則追加了 Multi DB 的 Class 在其中。
而 Plugin API 也是一項優秀的處理。
（如同前面所述，效能可能稍差，但擁有極強的延展性。）

以上就是這一個半月在程式上的經歷。
希望往後還能繼續分享各種在程式、設計上的經驗給大家。