Bài đăng

Đang hiển thị bài đăng từ Tháng 2, 2019

CSS + HTML Note 1

Hình ảnh
*****BODY - HEADER***** * Reset css: *{ margin: 0; pading:0; box-sizing: border-box;} * Thẻ body: - Font (family; size; weight) - Line-height: vd 1.7 --> 1.7 lần tiêu chuẩn - color: - padding: để cach vào bên trong xo với viền *Thẻ header: - height: 95vh; //95vh = 95% chiều cao của lớp bao bọc(body) - background-image: Có thuộc tính url('...') Sử dụng linear-gradient(to right bottom, màu 1, màu 2) - to right bottom là hướng trài sang phải, trên xuống dưới Kích vào màu 1, màu 2 để có thể set Opacity của nó. rgba(x,y,z,opacity). clip-path: polygon(0 0, 100% 0, 100% 75vh , 0 100%) - Tạo hình cho background - tứ giác theo tọa độ ; tham khảo trang bennettfeely.com/clippy. - bachground-size: cover // bao hết khu vực header. - background-position: top // co giãn nhưng luôn giữ theo vị trí top. *Logo: Dùng class "logo-box" - logo-box: postion: absolute -- Cần phải set header về position: relative // tương đối dựa theo div bảo (header); top: 40px; lef

Wordpress Udemy Day 7: CSS

Hình ảnh
- Tạo folder CSS trong folder Theme. - Trong folder CSS tạo 3 file: header.css, footer.css vs styles.css (khác với style.css mặc định bên ngoài) ** Nhúng các file css vừa tạo: - Sử dụng hàm wp_enqueue_style(): Hàm này được mặc định trong file functions.php thường bên dưới phần sidebar. /*Enqueue scripts and style*/ - Ta cũng có hàm wp_enqueue_scripts(): Để gọi các js file thường đặt trọng js folder. - Copy code trên codex về và sửa lại - Trước đó để thiết lập đường dẫn đến file dễ dàng, ta dùng hàm: get_template_directory_uri(); hàm này là hàm get nên cần có echo khi đưa vào thẻ php. Nối thêm folder dưới của theme và file để tạo đường dẫn. - Để ý ở dòng trên cùng ta có sử dụng hàm get_stylesheet_uti(). Hàm này có nhiệm vụ tạo đường dẫn cho các file style css sử dụng hàm wp_enqueue_style() được liệt kê bên dưới để wp có thể hiểu được. - Tiếp theo, ta edit các file css. ** Sử dụng @import url CSS method : Import CSS từ một Url. - Ví dụ ta muốn import css của header và styl

Wordpress Udemy Day 6: Building Custom Homepage

Hình ảnh
 - Khác biệt giữa Front-page.php; home.php vs Index.php. - Khi nào front-page.php được hiển thị bài viết mới nhất. front-page.php --> home.php --> index.php. Tức là, nếu không có trang front-page bài viết sẽ mặc định hiển thị lên Homepage. Front-page này được setting trong phần Cài đặt - Đọc. - home.php được set là mặc định cho Blog Page do đó nó thay thế cho các template về content đã tạo ở bài trước. ** Tạo HomePage. - Tạo front-page.php là template cho Home Page. - Ta không sử dụng home.php vì sẽ sử dụng template của content cho Blog Page. - Copy các code tương ứng từ các template như page-actors.php; hay page-trailers.php...đã tạo vào front-page.php để edit. - Tạo thành phần đầu tiên là Trailer cho Homepage, với số lượng trailer hiển thị là 1 như sau: * Hàm rewind_posts() và reset_postdata() - rewind_posts() : Sử dụng khi chúng ta muốn dùng lại query (ví dụ ở đây là trailer) nhưng với thuộc tính khác ví dụ không phải là 'posts_per_page' nữa trong cùng

Wordpress Udemy Day 5: Custom Side Bar

Hình ảnh
- Tìm kiếm vị trí của Side Bar trong file fuction.php - Copy để tạo thêm một Side Bar nữa tên là Sample. - Sample Side Bar sẽ hiển thị như sau: ** Dynamic_sidebar Fuction: - Sự khác biệt của get_sidebar() và dynamic_sidebar(): - Thêm Side Bar trong code của Page. - Sửa lại Side Bar đã tạo cho dễ css. Thay thế classname trong thẻ <section> Note: CSS sẽ được sửa trong các file php. ** Get_sidebar Fuction: - Tạo template sidebar-test.php trong folder template_parts. - Trong phần code của Page ở trên ta sửa dynamic_sidebar() thành get_sidebar('test'). Thuộc tính 'test' sẽ gọi template cho sidebar từ file sidebar-test.php. Đây là điểm khác biệt giữa 2 hàm này. - Trong template sidebar-test.php ta có thêm các dynamic sidebar. ** Tạo một Custom Sidebar để sử dụng: - Tạo thêm 2 sidebar cho 4 trang blog, review movies, actor và homepage bằng cách copy các đoạn code và chỉnh sửa. - Kết quả như sau: - Gọi các sidebar vừa tạo vào trong code