Categories
Uncategorized

Cách chỉnh sửa giao diện wordpress

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:

  1. Tuỳ chỉnh CSS
  2. Tạo Breadcumbs
  3. 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.

Image for post

Ảnh feature

Bạn ấn chuột phải vào ảnh chọn Kiểm tra( Inspect)

Image for post

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:

Image for post

Để 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.

Image for post

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;

}

Image for post

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.

Image for post

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 "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";        the_category(' &nbsp;&nbsp;|&nbsp;&nbsp; ');            if (is_single()) {                echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";                the_title();            }    } elseif (is_page()) {        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";        echo the_title();    } elseif (is_search()) {        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;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ó.

Image for post

FAQ — HTML5 Responsive FAQ

Sau khi cài đặt, nó sẽ xuất hiện ở đây:

Image for post

Chọn HTML5 FAQ và add FAQ để tạo câu hỏi:

Image for post

Thêm câu FAQ mớ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.

Image for post

Và đây là thành quả:

Image for post

Add vào trong CMS

Image for post

Thành quả hiển thị lên page

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.