︿
✖ CLOSE

WordPress佈景主題製作【style.css】

3 個月 之前│
Jin

本系列文章是要介紹 WordPress 佈景主題製作之一的style.css檔案,style.css 關係到整個網站的排版及設計,必須先了解想呈現的畫面架構之後再建立,或者是從已經現有的檔案開始著手會比較容易。

CSS跟頁面必須要一起搭配撰寫才能呈現樣子,這裡的部份只會講解 style.css 宣告連結的方法,以及style.css 起始架構、放置 reset.css 的方法,至於其他頁面的呈現會再各別放置對應的CSS語法,或者等此系列文章撰寫完畢再提供基本資料檔案。

已經有 css及 html 的概念再處理 style.css 會比較簡單,可以先觀看以下幾篇研究一下css及html的結構。

放入 header.php 檔案語法

首先你必須要在 header.php 放置 style.css 連結檔案,請將下方連結內容放在 header.php 檔案內的 <head>…</head> 裡面。

<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: nashiyoi
Theme URI: nashiyoi.com
Author: the Jin
Author URI: nashiyoi.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系列文章事項
文章版本:
第 1.0 版本,此WordPress系列教學純屬個人經驗,若有錯誤會重新修正並加上版本號碼,目前會持續調整樣式、整理佈景語法,最終版本會以最終版本告知(預計此系列文章會在12月前完成)。

▪ 相關文章