Monthly Archives: 四月 2012

css內的大於與加號

大於的用法

用法一:把多個同樣層級的子元素一起加上同個樣式
參考文章:http://null.wehan.net/511

如果沒用大於,假設#all內的h1~h6都要加同樣的顏色,寫法會是
#all h1,#all h2,#all h3,#all h4,#all h5,#all h5{color:#fff;}

如果用大於可以改寫成
#all > h1,h2,h3,h4,h5,h6{colorL#fff;}

要注意到的是,這個大於只針對子元素。如果hx跟#all的關係不是子元素、而是孫元素,就不會被套用。

實做後有誤,後來仔細想想,加了逗號(,)的項目基本上就跟前面的> 沒有關係了,所以這個寫法本身有問題。有沒有比較好的寫法要再想想。不過剛剛熊熊想到,如果要針對不同元素下同一屬性,加 class不就好了 …..囧

用法二:只針對相同標籤、但屬於子元素者加樣式、孫元素不加
參考文章:http://www.cnblogs.com/image/archive/2010/11/15/1877735.html
因為只針對子元素,所以假設原始碼為
<ul>
<li>A</li>
<li>B</li>
<li>C
<ul>
<li>C-1</li>
</ul>
</li>
</ul>

<div>
<p><span></span></p>
<span></span>
<span></span>
</div> 

如果寫法是
ul li{color:#fff;}
div span{color:#fff;}
所有 li 都會是白色,所有span都會是白色,但是如果改寫成
ul > li{color:#fff;}
div > span{color:#fff;}

只有在ul div下第一層的 li 第二、三個span會是白色,li p底下的 li span不會被影響。
我終於知道為什麼 wordpress 寫選單的時候會大量使用到大於符號了….

我原本寫的範例錯了。不能使用同樣標籤,不然孫元素會繼承子元素的的樣式,因此失去用 > 過濾的機制。

加號的用法
參考文章:http://null.wehan.net/479

加號指兄弟節點,等於把樣式只套用在+之後指定的兄弟節點上, +之前的則不套用該樣式

wordpress 套用 templatemonster 樣板流程整理

這是以 wordpress 架站,跟 templatemonster 購買版型後的套板流程。之前寫在杉語網頁設計的部落格上。這裡留一份備份囉。

  1. 先安裝好基本的wp
  2. 裝完之後把mySQL先匯出備份
  3. 把樣板上傳到ftp,傳到themes資料夾、把樣板裡面的​uploads傳到wp-content資料夾裡
  4. 把plugin上傳上去並且啟用
  5. 把買來的樣板裡面的mySQL先複製一份出來,然後用文字編​輯器打開,把裡面的your_website_url_here用搜尋取代​改成你的網址,例如 http://www.firtalks.com.tw/ ,如果你在安裝wp的時候有把資料庫的前綴詞做修改,則要多一步把wp_找出來修改成你設定的前綴詞。然後存檔
  6. 到phpadmin把剛剛改過的mySQL匯入

大概這樣就可以先把樣板裝起來了。
簡單的樣板mySQL可以不用灌,不過有的樣板有用到自定資料內​容的,
或是有的有使用到「選單」設定的,
不灌裝起來會跟原來的有落差,
為了避免自己在那裡找到底問題出在哪,
建議還是先灌進去,再自己去後台研究資料對應會比較省時間。

不灌mySQL會有落差的原因大概有兩個

  1. 樣板內有自定的post-type:因為不灌就沒有這個資料,所以自然顯示就會有問題
  2. 樣板內有使用自定選單:等於他的下拉選單不是在分頁設定子母關係就會自動出現,要到選單內再設定,外加css寫法可能是用指定ID的作法寫,因此會發生自己新增的選單有顯示,但是樣式怪怪的狀況。

大概是這樣~

WordPress架站實務案例(三)

在前公司用Wordpress架過三個站,都是使用 templatemonster 的付費版型。有一個站因為沒續約,已經消失了就不寫囉,紀錄一下另外兩個。這個部份當初都有寫在杉語網頁設計的網站上,不過這內容原本就是我寫的啦,這裡保留一份順便加新的註解~

案例一:友敍企業有限公司
網址:http://usea.com.tw/
說明:
這個版型使用了很多的jQuery效果,像是右欄的相片展示,工程實績裡的照片展示。還有上方下拉選單。但是下拉選單在套用的時候發現原來的樣板在這個部分並沒有跟後台作完全的串接,當分類刪除,自己新增的分類沒辦法增加到下拉選單中。

考慮到未來客戶使用的擴充便利性,因此將原來有JQuery效果的下拉選單刪除,使用原始樣板的模組替代,CSS的部份自行重寫。工程實績的部份在原始樣板中也沒有跟資料庫串接,是純手工排版的。

註解:
事後想想,應該不是下拉選單沒有整合,而是那個樣板要使用 WP 內的「選單」去設定,但是當時只知道分頁在預設版型的情況底下,下拉選單都會自動新增。那時候對「選單」的設定不熟,所以才會做那樣的調整。

案例二:原宏企業
網址:http://www.yuanhorn.com.tw/
說明:
調整的地方主要有

  1. 首頁只保留表頭SlideShow與邊欄商品資料連結,
  2. 將SlideShow的高度做調整。
  3. 網站字體大小CSS調整
  4. 前台樣板中文化調整
  5. 將商品加註文字直接寫入到樣板內。

註解:
這個套版比較麻煩的地方是後來客戶希望可以調整商品列表內、每個商品的圖片尺寸。我原本以為是直接做在列表頁的樣板內,後來用圖片尺寸搜尋才發現不是,是寫在另外一個負責壓圖的程式檔案內。

WordPress架站實務案例(二)

案例:Joyhsu career
網址:career.joyhsu.com

這是我的個人介紹與作品集網站,以往都是作成靜態 html ,但是一但有新作品要放,維護上很麻煩,所以這次也使用 wordpress 來架站。這個更改的幅度相對於 ikuk 小很多,使用 wp 的人應該一看就可以看出來是用預設版型 Twenty Eleven 來修改的。

修改流程如下

1.單欄式設定
使用  Twenty Eleven 的好處就是後台可以直接設定成單欄式,這樣首頁邊欄就會消失囉

2.塞內容
因為首頁要改的比較多,所以先放著,我先把要放在分頁的內容塞進去,並且自訂 css 樣式完成內容排版

3.改首頁
把文章的 loop 程式拿掉, require 自訂的 html 進去,主要是放圖片slide(沒錯,我使用跟 ikuk同一個 slide 效果,這個效果名字是 nivo-slider,相當好用喔!)

4.改列表頁
因為我主要是要用這個來整理作品,但是作品呈現用部落格文章條列方式並不適合,所以這個案例在列表頁改動的比較多。我使用 Page Links To 這個外掛,把頁面先指向特定的文章分類,然後改動 category.php ,原本文章列表內有段原始碼為
<?php get_template_part( ‘content’, get_post_format() ); ?>
等於預設他是去取得一個 post_format ,一樣我不知道這個format要去哪改XD,所以直接把這段原始碼標註起來,然後手動加入以下原始碼
<div>
<article>
<a href=”<?php the_permalink(); ?>” title=”<?php printf( esc_attr__( ‘Permalink to %s’, ‘twentyeleven’ ), the_title_attribute( ‘echo=0’ ) ); ?>” rel=”bookmark”><img src=”<?php echo get_post_meta($post->ID, “small-image”, $single = true); ?>”/></a>
<div>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php printf( esc_attr__( ‘Permalink to %s’, ‘twentyeleven’ ), the_title_attribute( ‘echo=0’ ) ); ?>” rel=”bookmark”><?php the_title(); ?></a></h2>
</div>
</article>
</div>

作品集小圖的部份我是自己做,而不是由程式自動縮,所以我使用 wp 的自訂欄位, 命名為small-image,並且用 <?php echo get_post_meta($post->ID, “small-image”, $single = true); ?>  讓小圖顯示在列表頁內。其他的是參考 content-page.php ,把我要的部份(文章標題跟文章連結)相關的碼拷貝過來用。

排版的部份就是 css 慢慢調整囉!

5.塞作品
然後就是瘋狂塞作品進去啦,後來舊的作品想說就維持放在舊的作品集內,用連結過去的就好,日後新的再更新。

WordPress架站實務案例(一)

案例:愛煮家
網址:www.ikuk.com.tw

本站使用 WordPress 架設,這算是我第二次使用自製版形。有三次是使用付費版型,一次是使用 WP 預設版形做小幅度修改,其他幾次就純粹使用 WP 預設版形寫部落格。別的案例晚點再整理成一篇。

紀錄一下這次修改的內容。主要是針對版型套用時需要調整到的細節做描述,關於網址申請、網站空間購買這類架站基本工作就不贅述,網路上已經有很多相關資訊囉。

ikuk 整個製作流程如下

1.塞文章、首頁調整
由於一開始先要趕在 3/30 先做出一個網站,只有一個禮拜的時間。當時跟客戶說我們先把基本的版面架起來,版型後面再修。因此先把文章內容一個一個填進去、大概做了一個首頁版型。這個時候調整的比較多是首頁 index.php 、頁尾 footer.php 、頁首 header.php 這三個檔案。樣式檔不用說一定是要調整的。

首頁的部份,主要是使用自製的頁面做替換。因此把 index.php 內文章的程式刪掉, require 自製的 html 檔進去。頁首頁尾則是搭配陽春版版型的樣子,有需要增加 id 或 class 的部份就手動加進去,然後把 style.css 根據想要的版型做調整。

2.分頁與文章版型調整
ikuk 的主要內容都是用分頁作成的,只有食譜的部份是使用部落格。我是使用 WP 預設版型 Twenty Eleven 來做修改的,原因是他分頁有單欄的選擇。但他有個問題,就是部落格預設也是單欄。在網路上找到的方法不是很合這次專案的使用(會連同分頁一起被改成兩欄式),於是手動把 sidebar 放到文章內,這裡修改了 single.php ,在裡面加入 <?php get_sidebar(); ?> 。由於這個佈景主題的分頁跟文章的檔案是分開的,所以不用怕改了文章分頁版也一起被更動。

花比較多時間的部份是各分頁的排版,因為不同系列的商品版型分配略有不同。這個部份我是直接在各分頁內容寫 html ,自訂 div ,並且自己另外寫了一個 page_style.css (當然,也要自己改 header.php 把這個樣式 link 進去),用這樣的方式來自行調整排版,為了讓整個內容版面可以完全由自己控制,我把原本的標題用 css 設定為隱藏。等於只有在表頭下拉選單才看的到那個標題,內容的部份看到的完全是自訂內容。

3.版型調整
基本的骨架做出來之後,就回過頭來調整版型囉,一開始先用 PSD 排好讓客戶選擇。確定好要使用的樣子之後,把圖片切一切上傳,回去改 style.css 。

這時候因為內容都已經有塞好了,內頁版面除了表頭表尾修改外,內容動的幅度比一開始少很多。反而是首頁的樣式花了比較多時間調整,因為我想把一個 slide 的效果做在背景上,一樣用 require 的方式置入 html 。

但問題比較大的是首頁跟內頁的表頭表尾要的樣子完全不一樣,怎麼辦?這點只要可以改表頭、在 index 使用的表頭內把 body 加入新的 class ,就可以用 css 設定處理。理想狀況應該是想辦法把 <?php get_header(); ?> 看有沒有辦法作成 <?php get_header2(); ?> 這類的。如果 WP 原來是直接使用 require 的方式的話,這個部份不會太難改,但是他不是用這個方法, WP 為了擴充性,用了很多 hook ,然後用互相呼叫的方式來引用,但是我對這種方法並不熟悉,以至於我也不知道要怎麼才能另外改一個新的表頭,並且用類似 <?php get_header(); ?> 的方式讓 index.php 使用。

所以呢,我直接把 header.php 的 code 拷貝,貼到 index.php 取代掉 <?php get_header(); ?> 。然後自己手動加 class 在 body 上,讓他跟內頁有所區分。

我想這其實不是一個很好的方法,原因是之後要是 header 有改動, index.php 這頁要自己手動再去把有的更動另外更新上去,像是我後來放 google 分析碼就要兩邊都改。但是這個網站算是要先快速架站做出第一版,未來要另外走客制化。所以這個部份可以處理的過就好。

首頁調整的比較多的還有 CSS ,主要是選單的部份,因為新的版型設計的時候,我使用了圖片文字,但是因為有下拉選單,以至於第一層選單使用圖片文字時,第二層選單會跟著繼承樣式,所以必須要再把原本的設定重寫一次。

大致上的流程是這樣,實際修改的內容很瑣碎,就是不斷的調整 css 跟寫新的樣式,這部份就不細寫囉。

IE6、IE7的z-index bug

問題描述:

假設三個div, 依序為A、B、C,裡面個包一個div,分別為A1、B1、C1。如果設定position:absolute在A1跟C1上。且A1設定z-inde:2,C1設定z-index:1,在FF正常顯示下,A1會壓在C1之上。

但在IE6、IE7底下,當C1設定position之後。他們會自動給C一個z-index,且C因為排在A之後,所以C以內的區塊z-index永遠壓在A之上,不管A 或A以內的z-index正值設定多大都一樣。

解決方式:

  1. 把C設定z-index為負值。但這個作法有個很大的壞處,就是C裡面的超連結全部都會被遮蔽,以至於無法使用。
  2. 因為通常會出現這個問題,是在表頭的下拉選單會被底下的蓋住,所以更好的作法是表頭設定position:relative;並且加上z-index:2;或更大的數值,後面那個一定要加,不然一樣沒效。這樣底下的區塊超連結也會不被遮蔽。這個原理跟利用margin設定製作圖div覆蓋效果 所提到的是相同的。