作者簡介
【架構篇】WordPress 佈景主題製作【style.css】
WordPress 佈景主題製作之一的 style.css 檔案，也就是放置一般所謂的 CSS 語法的位置，整體來說 CSS 是關係到設計及排版最重要的一部分，如果說 WordPress 沒有 CSS 的話幾乎沒辦法呈現正常網頁的形態給使用者，基本上來說建議是必須要先設計好呈現的網頁畫面之後再陸續建立網站會比較實際。
這部份個人就有深切之痛，當初本站沒規劃好設計網站版型，後來改來改去花費了超多時間，所以一開始沒想好後續的流程會越來越麻煩跟複雜，建議先做好規劃一次到位的設計。
此外 CSS 跟 HTML 要一起搭配撰寫才能呈現網頁畫面，這裡的部份只會講解 WordPress 的 style.css 宣告連結的方法，以及 style.css 起始架構語法，以及放置 reset.css 教學，至於其他頁面的呈現會再各別放置對應的 CSS 語法，或者等此系列文章撰寫完畢再提供所有檔案。
放入 header.php 檔案語法
使用 style.css 之前，你必須要在 header.php 放置 style.css 連結檔案，請將下方連結內容放在 header.php 檔案內的 <head>…</head> 裡面。
請參考：WordPress 佈景主題製作【header.php】
<link target="_blank" rel="noopener" href="<?php echo esc_url( get_template_directory_uri() ) ?>/style.css" media='all' rel="stylesheet" type="text/css"/>佈景前的註解宣告說明
需要在 style.css 最上方加入一個註解宣告，包含佈景名稱、作者、版權聲明…等等資訊，來告訴別人本站的佈景資訊及資料。
/*
Theme Name: 佈景名稱
Theme URI: 佈景網址
Author: 作者
Author URI: 作者網站
Description: 佈景說明
Version: 佈景版本
License: 版權聲明
License URI: 版權網址
Tags: 標籤
Text Domain: 佈景主題使用其他語言時，可用來自行定義。
其他說明～
*/不過基本上來說，如果沒有要將佈景主題分享出去的，可以放作者、網址、版權聲明…幾個資訊就可以了。
此為示範：
/*
Theme Name: IN MAG
Theme URI: ingtt.com
Author: the Jin
Author URI: ingtt.com
Description: 這是個人的佈景主題。
Version: v1.0
License: MIT
*/注意事項：License 部分全請依照個人需求填寫。
接著是建議加入的部份，加入 reset.css 的 code 放置下方。
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
加入 WordPress 基本核心語法，大多是圖片對齊使用的語法。
/* 圖片無設定 */
.alignnone {
margin: 5px 20px 20px 0;
}
/* 置中 */
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
/* 靠右 */
.alignright {
float:right;
margin: 5px 0 20px 20px;
}
/* 靠左 */
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
/* 圖片靠右 */
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
/* 圖片無設定 */
a img.alignnone {
margin: 5px 20px 20px 0;
}
/* 圖片靠左 */
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
/* 圖片置中 */
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
/* 註解 */
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%;
padding: 5px 3px 10px;
text-align: center;
}
/* 註解無設定 */
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
/* 註解靠左 */
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
/* 註解靠右 */
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
/* 圖片註解 */
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
/* 註解說明 */
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
/* 文字標籤－輔助 */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #eee;
clip: auto !important;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
關於WordPress系列文章事項
文章版本：第 2.0 版本，WordPress 系列教學純屬個人經驗，若有錯誤會重新修正並加上版本號碼，目前會持續調整樣式、整理佈景語法，目前版本已調整為先教學基本架構再教學設計樣式，之後會以最終版本告知。
相關文章
