Chào các bạn, trong bài này, mình sẽ hướng dẫn các bạn các bước cài đặt và tùy chỉnh giao diện cho wordpress.
Ở bài viết này, mình sẽ chia thành 3 phần:
- Tuỳ chỉnh CSS
- Tạo Breadcumbs
- Cài đặt plugin tạo danh sách FAQ
1. Tuỳ chỉnh CSS
Đầu tiên xác định dòng thông tin bạn muốn chỉnh sửa. ví dụ ở đây mình muốn chỉnh css cho ảnh feature.
Bạn ấn chuột phải vào ảnh chọn Kiểm tra( Inspect)
Khi có cửa sổ mới sẽ xuất hiện và cho ta thấy được thẻ html chưa dòng này. Khi vào chỉ vào thẻ này thì ảnh/dòng thông tin các bạn đã chọn sẽ sáng lên:
Để chỉnh được css thì đầu tiên bạn phải xác định được thẻ chứa nội dung cần chỉnh. Theo như cách trên bạn có thể thấy thẻ chứa nội dung cần chỉnh sửa css là thẻ img, nếu thẻ đó có chứa class thì nên dùng thẻ class để việc điều chỉnh css càng chính xác.
Khi chỉnh css cho các bạn nên xác định càng chuẩn xác thẻ chứa nội dung cần chỉnh sửa càng tốt, việc này sẽ giúp hạn chế gây ảnh hưởng đến những thẻ giống với thẻ cần chỉnh sửa.
Nếu thẻ cần chỉnh sửa không có thuộc tính class, bạn phải thuộc tính này ở thẻ bọc của thẻ cần chỉnh sửa, như trong ví dụ này thuộc tính class nằm ở thẻ bọc <div></div>:
<div class=”baby-feature-image” >…</div>
Các bạn có thể lấy thêm 1 thuộc tính class nằm ở thẻ bọc thẻ div, trong ví dụ là thuộc tính class=”post-159” nằm ở thẻ <article></article>. Việc này nhằm xác định chính xác thẻ cần chỉnh sửa.
Khi đã có được tên thẻ, tên class chứa thẻ, các bạn bắt đầu viết chỉnh sửa css cho thẻ mình cần chỉnh.
Có 2 cách để chèn code chỉnh sửa css:
Cách 1: chèn code vào file style.css nằm trong theme của website
Cách 2: Bạn vào Appearance(Giao diện) -> Customize(Tuỳ chỉnh) → Cdditional CSS(CSS bổ sung) và chèn code ở đây.
Code có dạng
. class-ngoài .class-trong thẻ{
Phần này là code tuỳ chỉnh css
}
Nếu bạn lấy tên class để xác định nơi cần chỉnh sửa thì khi viết code phải có dấu `.` ở trước
Nếu là id thì có dấu `#` ở trước
Còn nếu là thẻ thì chỉ cần viết tên thẻ.
Về phần code thì sẽ có một vài thuộc tính cơ bản:
Width: chiều dài, đơn vị px hoặc %
Height: chiều cao, đơn vị px hoặc %
Font-size: kích cỡ chữ, đơn vị px
Font-family: font chữ
Font-weight: kiểu chữ, có các kiểu: bold, bolder, light, lighter..
Margin: căn lề, đơn vị px, gồm 4 giá trị: margin-left, margin-right, margin-top, margin-bottom: lần lượt trái, phải, trên, dưới.
Padding: thêm khoảng trống, đơn vị px, cũng có 4 giá trị giống margin.
Background-color: màu nền
Color: màu chữ
Ví dụ bạn muốn thay đổi kích thước ảnh phía trên thành dài 300px và rộng 215px thì code sẽ là:
.post-159 .baby-feature-image img{
Width:300px;
Height:215px;
}
Chèn code và lưu, khi bạn kiểm tra lại hình ảnh, kích thước ảnh đã được thay đổi.
Vậy là bạn đã hoàn thành chỉnh sửa giao diện (CSS) của trang web rồi đấy.
2. Tạo breadcumbs
Chèn đoạn code sau vào file function.php
function get_breadcrumb() { echo '<a href="'.home_url().'" rel="nofollow">Home</a>'; if (is_category() || is_single()) { echo " » "; the_category(' | '); if (is_single()) { echo " » "; the_title(); } } elseif (is_page()) { echo " » "; echo the_title(); } elseif (is_search()) { echo " » Search Results for... "; echo '"<em>'; echo the_search_query(); echo '</em>"'; }}
Chèn đoạn code này xong, để breadcrumb hiện trên giao diện, bạn chèn thêm đoạn code dưới đây vào nơi mà bạn muốn breadcrumb hiển thị:
<div class=”breadcrumb”><?php get_breadcrumb(); ?></div>
Sau đó bạn có thể tuỳ chỉnh css như bước 1 cho breadcrumb vừa tạo để cho đẹp.
3. Cài đặt pluhin tạo FAQ — HTML5 Responsive FAQ
Trong phần này, mình sẽ xài plugin HTML5 Responsive FAQ, các bạn tiến hành tìm kiếm tên plugin và activate nó.
Sau khi cài đặt, nó sẽ xuất hiện ở đây:
Chọn HTML5 FAQ và add FAQ để tạo câu hỏi:
Sau đó chọn “Publish”, vậy là bạn đã tạo xong FAQ cơ bản. Tạo xong nó sẽ hiện ra một đoạn code để bạn chèn vào trang mong muốn.
Ví dụ: [hrf_faqs title=’My Awesome Title’ ] với phần title là nội dung mà bạn muốn hiển thị trước khi tới phần các câu FAQ.
Bên cạnh đó, bạn có thể tạo/chọn categories cho câu hỏi để nhóm câu hỏi.
Và đây là thành quả:
Vậy là bạn đã biết những cách cơ bản về chỉnh sửa giao diện wordpress, chúc bạn thành công.