Viết CSS cho theme WordPress – phần 1

[Lập trình theme WordPress] Thêm chức năng Theme Options

Tiếp phần này, mình sẽ hướng dẫn các bạn làm một việc rất quan trọng để quyết định theme của bạn có đẹp hay không, đó là viết CSS cho theme để nó ra được giao diện hoàn chỉnh. Và ở bài mở đầu mình đã có yêu cầu bạn chuẩn bị kiến thức HTML cơ bản và CSS cơ bản vì trong các phần CSS mình sẽ không nói về các vấn đề cơ bản như cú pháp, các thuộc tính cơ bản,…mà chỉ tập trung vào những gì quan trọng mà thôi.

Tham khảo:

Trước khi bắt đầu bài này, đó là mình khuyến khích bạn đã theo serie này đến đây rồi thì viết cái gì thì bạn nên làm cái đó, vì mục đích mình viết serie này là để giúp bạn hiểu cách làm được một theme. Còn theme đó có đẹp hay không thì do kỹ năng Front-end Development của bạn như CSS, Javascript, jQuery,….Mình trả lời độc giả thường xuyên nên mình cũng đoán được phần nào thói quen xem tutorial của nhiều bạn nên mình nhắc trước hờ như vậy để bạn biết.

Nếu bạn muốn làm một theme chuyên nghiệp hơn, thì hãy chắc chắn bạn đã hiểu hết serie này, cùng với việc cải thiện kỹ năng CSS sẽ giúp bạn làm tất cả những gì bạn muốn.

Ok, chúng ta bắt đầu vào nội dung chính nhé. Và tất cả những đoạn CS mà chúng ta sẽ làm là viết vào file style.css trong theme, chèn bên dưới các đoạn comment khai báo thông tin theme.

Thêm Reset CSS

Reset CSS là tên chung để chỉ các đoạn CSS có chức năng đưa các giá trị của một số thành phần HTML về giá trị ban đầu. Bởi vì mỗi trình duyệt nó sẽ có một số quy tắc để xử lý CSS riêng nên nếu không reset CSS thì giao diện của bạn có thể sẽ không hiển thị tốt trên các trình duyệt.

Do vậy, bạn hãy chèn đoạn dưới đây vào file style.css nhé:



/*! normalize.css v1.0.0 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbrViết CSS cho theme WordPress - phần 1{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}


Đừng quan tâm nó là cái gì và đừng hiểu nó làm gì luôn, cứ chèn vào đi rồi sau này muốn sửa style gì thì cứ khai báo lại là được.

Giao diện sau khi reset CSS.

laptrinhtheme-resetcss

Viết CSS cho các thuộc tính quan trọng

Ban đầu, chúng ta sẽ cần thiết lập một số thuộc tính CSS cho các phần tử quan trọng trong website như kiểu chữ, màu chữ, màu liên kết,….Chúng ta có đoạn sau:


/*---:[GLOBAL CSS]:---*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
	font-size: 100%;
	font-family: Helvetica Neue, Arial, sans-serif;
	font-color: #333333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img {
        max-width: 100%;
        height: auto;
}
a {
	color: #F6591C;
	text-decoration: none;
}
	a:hover, a:visited, a:active {
		color: #FF3F00;
		text-decoration: underline;
	}
input,input[type="submit"],button {
	border: 1px solid #C8C8C8 !important;
	padding: 5px 10px;
}
h1 {
	font-size: 2.2em;
}
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1.8em;
}
h4 {
	font-size: 1.55em;
}
h5 {
	font-size: 1.3em;
}
table, table tr, table td {
	border: 1px solid #e7e7e7;
        padding: 8px;
}

Ở đoạn này, chúng ta sẽ thiết lập một số giá trị cho giao diện của mình như kích thước size chữ, màu chữ và các màu liên kết. Các bạn lưu ý ở chỗ phần tử img, mình đặt max-width: 100% nghĩa là dù ảnh có to cách mấy thì nó sẽ không thể tràn ra khỏi cái khung mẹ của nó được, còn height: auto nghĩa là chiều dài của hình ảnh sẽ căn theo kích thước gốc của ảnh để ảnh hạn chế bị méo mó.

CSS chia cột website

Như lúc code theme này, chúng ta phân rõ trang ra làm 2 cột đó là cột hiển thị nội dung #main-content và #sidebar. Và tất cả thành phần trong website được bao bọc trong một vùng chọn là #container. Vậy thì bây giờ, chúng ta sẽ viết CSS thiết lập chiều rộng của theme ở vùng chọn #container:


/*---:[WEBSITE COLUMNS]:---*/
#container {
	width: 1024px;
	margin: 0 auto;
	background :#ffffff;
	border: 1px solid #D1D1D1;
	padding: 10px 25px;
}
.content {
	overflow: hidden;
}
#main-content {
	width: 620px;
	float: left;
	margin-right: 10px;
}
#sidebar {
	width: 320px;
	float: right;
	margin-left: 20px;
	padding-left: 20px;
}

Chỗ này nghĩa là mình sẽ đặt chiều rộng của website với kích thước là 1024px cho toàn website và đặt khoảng cách bên trong khung (padding) là 10px với top và bottom, 25px cho left và right vì #container là nó bao quát toàn bộ nội dung trong website.

Kế tiếp là mình sẽ cho chiều rộng của khung #main-content là 620px rồi nhảy qua trái với thuộc tính float: left, sau đó phần #sidebar sẽ có chiều rộng là 300px, cũng nhảy qua trái với float: left, còn dư 30px thì mình cho nó làm khoảng cách bên ngoài (margin) ở lề trái. Điều quan trọng là do #main-content và #sidebar là hai thẻ div nên khi nó float, thẻ nằm bao bọc nó phải tiến hành clear float, ở đây mình dùng cách clear float đó là sử dụng thuộc tính overflow để kiểm soát nội dung bị tràn tràn khỏi box, mình sẽ có bài phân tích cụ thể vào dịp khác.

Bây giờ ta có giao diện website thế này:

laptrinhtheme-finish-columnscss

Được rồi, bây giờ chúng ta sẽ viết CSS cho từng thành phần trên website từ trên xuống dưới, từ trái sang phải nhé.

Viết CSS cho tiêu đề website ở header

Bây giờ việc đầu tiên là hãy viết lại cái header cho website đẹp hơn một chút (không bao gồm banner). Ta có đoạn CSS như sau:


/*---:[LOGO]---*/
.logo {
	margin-bottom: 30px;
	line-height: 2;
}
.logo .site-name {}
.logo .site-name h1 {
    margin: 0;
    font-size: 0;
}
.logo .site-name a {
    color: rgb(0, 100, 212);
    font-size: 32px;
    font-weight: bold;
}
.logo .site-description {
	margin-top: -1em;
	color: rgb(111, 111, 111);
	font-family: Time New Roman,serif;
	font-size: 1.04em;
	font-style: italic;
}

Lúc này, cái tên website của bạn ở header sẽ chuyển sang màu xanh và mô tả website sẽ chuyển sang màu xám, kiểu chữ có chân và in nghiêng.

laptrinhtheme-finish-logocss

Nếu bạn muốn sử dụng logo dạng ảnh riêng của bạn thì hãy chờ đến cuối serie, sẽ có bài hướng dẫn làm theme option để thiết lập hiển thị logo hình ảnh hoặc chữ tùy thích, còn nếu bạn vẫn muốn dùng CSS thì có thể viết cái vùng chọn .logo .site-name a thành thế này:


.logo .site-name a {
    display: block;
    width: 220px; /*chiều rộng của logo*/
    height: 90px; /*chiều cao của logo*/
    background: url('link của logo') left top no-repeat;
    text-indent: -969696px;
}

Kết thúc phần 1 của CSS

Viết CSS tới đây thì chắc cũng khá dài rồi nhỉ, do vậy mình xin kết thúc phần 1 tại đây và ở phần sau chúng ta sẽ viết tiếp CSS cho các thành phần khác, để tránh việc cô đọng quá nhiều nội dung cho người đọc.

Nguồn: Viết CSS cho theme WordPress – phần 1 | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage & coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben & tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Kẻ thay thế Cloudflare đáng dùng nhất
ADS PRO – Plugin trả phí để chèn quảng cáo đáng mua nhất
Tác giả

Bình luận

Jamesboymn

sexual dysfunction in men https://canadaedwp.com cheap pills online

You got a very great website, Gladiola I discovered it through google. https://heartischemiamed.com buy heart ischemia drugs over the counter

Leave a Message

Registration isn't required.

NguyenLp LarTheme