search

Tiêu đề hình ảnh wordpress

Ngày đăng: 21/12/2022
Trả lời: 0
Lượt xem: 89

  • công nghệ
  • Lập trình
  • WordPress
Hướng dẫn viết Theme WordPress toàn tập phần 2

1156

Show

Facebook

liên kết

điện báo

lục mục lục

Bài viết được sự cho phép của tác giả Trần Anh Tuấn

Ở bài trước chúng ta đã setup mọi thứ và cũng xem qua Design luôn rồi. hôm nay chúng ta sẽ bắt đầu viết theme WordPress và phần đầu tiên đó chính là Header và Banner của Design

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Các hình ảnh-icons trong Design mình lấy toàn bộ và upload lên Drive các bạn có thể nhấn vào đây để tải về sử dụng trong quá trình viết theme WordPress nhé

# Setup cơ bản

Trước khi vào công việc chính, các bạn cần cài đặt một số Plugins sau để hỗ trợ cho việc viết theme WordPress nhé. Những plugin đó là Trường tùy chỉnh nâng cao, Giao diện người dùng loại bài đăng tùy chỉnh, Hỗ trợ SVG

Tiếp theo kiểu mở tệp của bạn. css lên các bạn xóa hết mã đi, chỉ để quay lại phần ghi chú thôi sau đó vào trang này sao chép đoạn mã đặt lại CSS rồi dán vào tệp style. css đã được. Lúc này kiểu tệp. css sẽ trông như thế này. Về reset CSS là gì các bạn có thể tìm hiểu nó tại đây nha

/*!
Theme Name: Maker
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
......
*/
/*reset css below*/
reset css paste here

Tiếp theo các hàm bạn mở tệp. php lên và sao chép các dòng bên dưới dán vào bên dưới cùng. Đoạn mã này có chức năng cho phép chúng ta thêm lớp vào thẻ 

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
4, hoặc thẻ 
/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
0 trong Menu mà tí nữa chúng ta sẽ thực hiện thông qua hàm wp_nav_menu

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );

Một lưu ý nữa là sau khi các bạn cài đặt xong các Plugin rồi thì đừng quên vào Admin Dashboard chọn Thư viện sau đó nhấn Tải lên -> Chọn tệp -> Chọn hết toàn bộ cấu hình các bạn đã tải về khi cạo rồi

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

# tiêu đề

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Như trong Design thì chúng ta thấy có Logo bên trái và Menu ở bên phải. Logo mặc định WordPress được cung cấp tại mục Tùy biến (Customize) nhưng làm sao để lấy nó ra và hiển thị ở vị trí mà ta mong muốn thì mình sẽ hướng dẫn sau. Còn Menu thì rất đơn giản, các bạn vào Dashboard -> Giao diện -> Menu

Các bạn sẽ thấy giao diện có một Menu có tên là Menu 1. Các bạn thêm các Mục vào Menu này để nó đủ bộ như Thiết kế luôn nhé, chọn Liên kết tự tạo rồi nhấn Thêm vào menu. Đừng quên đánh dấu Primary và nhấn menu Lưu nhé

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Bây giờ các bạn mở tiêu đề tệp. php lên sẽ thấy rất nhiều đoạn code phức tạp mà lúc chúng ta tải về nó đã có sẵn rồi, các bạn xóa sạch từ khúc 

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
1  quay xuống luôn nha sau đó các bạn dán vào đoạn code của mình bên dưới đây


 

  
  
  'menu-1',
   'container'    => 'nav',
   'container_class'  => 'menu',
   'menu_class'    => 'menu__list',
   'link_class'        => 'menu__link',
   'list_item_class'   => 'menu__item'
  ) );
 ?>

Đoạn mã 

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
2 sẽ lấy ra ID của Logo mặc định của trang web mà mình đã nói khi ngụy tạo. Sau đó mình sử dụng hàm 
/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
3 để lấy thông tin của logo hình đó thông qua ID của nó

Và 

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
4 sẽ trả về một mảng gồm nhiều thông tin và ở phần tử đầu tiên tức là 0 trong mảng là đường dẫn hình ảnh mà chúng ta cần mình cho nó vào thẻ 
/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
5

Đoạn 

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
6 nó sẽ nằm trong địa chỉ trang chủ của trang web chúng ta để khi người ta nhấn vào logo sẽ quay về trang chủ

Hàm 

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
7 các bạn có thể tìm hiểu kỹ hơn tại đây. Chức năng của nó là lấy ra Menu mà chúng ta đã tạo. Khi bạn tải xuống từ Underscore về mặc định sẽ có một cái tên Menu là Menu 1 và có slug tương ứng là menu-1

Chỗ 

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
8 sẽ lấy ra menu theo id, slug hoặc tên mà chúng ta muốn, ở đây là Menu có sên là menu-1, 
/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
9 là thẻ 

 

  
  
  'menu-1',
   'container'    => 'nav',
   'container_class'  => 'menu',
   'menu_class'    => 'menu__list',
   'link_class'        => 'menu__link',
   'list_item_class'   => 'menu__item'
  ) );
 ?>
0 bọc ngoài Menu, 

 

  
  
  'menu-1',
   'container'    => 'nav',
   'container_class'  => 'menu',
   'menu_class'    => 'menu__list',
   'link_class'        => 'menu__link',
   'list_item_class'   => 'menu__item'
  ) );
 ?>
1 là lớp của thẻ 

 

  
  
  'menu-1',
   'container'    => 'nav',
   'container_class'  => 'menu',
   'menu_class'    => 'menu__list',
   'link_class'        => 'menu__link',
   'list_item_class'   => 'menu__item'
  ) );
 ?>
0 ở đây là 

 

  
  
  'menu-1',
   'container'    => 'nav',
   'container_class'  => 'menu',
   'menu_class'    => 'menu__list',
   'link_class'        => 'menu__link',
   'list_item_class'   => 'menu__item'
  ) );
 ?>
3 nghĩa là lúc chạy 


 

  
  
  'menu-1',
   'container'    => 'nav',
   'container_class'  => 'menu',
   'menu_class'    => 'menu__list',
   'link_class'        => 'menu__link',
   'list_item_class'   => 'menu__item'
  ) );
 ?>
5 là lớp dành cho thẻ 

 

  
  
  'menu-1',
   'container'    => 'nav',
   'container_class'  => 'menu',
   'menu_class'    => 'menu__list',
   'link_class'        => 'menu__link',
   'list_item_class'   => 'menu__item'
  ) );
 ?>
6 bên trong thẻ 

 

  
  
  'menu-1',
   'container'    => 'nav',
   'container_class'  => 'menu',
   'menu_class'    => 'menu__list',
   'link_class'        => 'menu__link',
   'list_item_class'   => 'menu__item'
  ) );
 ?>
7 riêng 

 

  
  
  'menu-1',
   'container'    => 'nav',
   'container_class'  => 'menu',
   'menu_class'    => 'menu__list',
   'link_class'        => 'menu__link',
   'list_item_class'   => 'menu__item'
  ) );
 ?>
8 và 

 

  
  
  'menu-1',
   'container'    => 'nav',
   'container_class'  => 'menu',
   'menu_class'    => 'menu__list',
   'link_class'        => 'menu__link',
   'list_item_class'   => 'menu__item'
  ) );
 ?>
9 thì mặc định không có nên chúng ta phải thêm mã vào hàm. php mà mình đã đề cập ở giai đoạn mình nói các bạn copy code vào dưới cùng file functions. php đấy

Lúc này giao diện vẫn chưa có gì ngoài cái Menu bao gồm các liên kết thô sơ mà chúng ta đã tạo và Logo chưa hiện ra do chúng ta chưa biến. Tiếp theo đây chúng ta sẽ setup và bắt đầu code CSS cho nó đẹp ra nhé

  10 chủ đề Sublime Text tốt nhất

  Hướng dẫn lập trình chủ đề woocommerce từ a đến z

# Phong cách. css

Về phần CSS thì tạm thời mình sẽ sử dụng biến mã màu để dễ dàng thay đổi và tùy chỉnh về sau. Lưu ý là biến trong CSS không hỗ trợ IE nếu sau này bạn cần hỗ trợ cho IE thì vào thay thế biến bằng mã màu lại là được rồi

Đơn vị mình sử dụng sẽ là REM và PX, Font Family of Design này là Lato cho nên mình sẽ lên Google Fonts lấy về rồi chèn vào đầu thẻ trong tiêu đề tệp. php. Mình mã chay không dùng thư viện gì cả

Mình thiết lập một số biến cho mã màu như chủ đạo, màu chữ cũng như là 

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
30 cho trang web. Và mình thấy nội dung nằm giữa độ rộng là 
/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
31 được sử dụng lại nhiều lần nên mình đặt một lớp có tên là 
/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
32 để tái sử dụng

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
3

Pause time we are results as hình

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Ây chà chà cái logo is not have. Đừng lo lắng, các bạn nhấn vào Giao diện -> Tùy biến biến -> chọn Nhận định dạng trang web  -> Chọn logo -> Tải tệp lên -> Chọn tệp logo-dark -> Tải lên -> Sau đó nhấn chọn và Bỏ cắt

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Các bạn sẽ nhận được kết quả như hình. The is we are doing done the section Menu. Tiếp theo bên dưới là phần phức tạp hơn một chút đó là Biểu ngữ vì nó được kết hợp với một Plugin mà chúng ta đã cài đặt từ lúc đầu, đó chính là Trường tùy chỉnh nâng cao

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

# Ảnh bìa

Biểu ngữ Giao diện nhìn vào thì dễ dàng ta thấy có những phần linh hoạt thay đổi như tấm nền bên phải, hình nền dưới dạng sóng lượn dưới cùng, tiêu đề nhỏ phía trên rồi đến tiêu đề to, đoạn văn bản nhỏ dài

Ngoài ra còn có 2 hình tròn mờ nữa nhưng nó có thể làm bằng CSS nên chúng ta không cần phải tạo các trường, đơn giản chỉ cần thêm hai lớp cho chúng mà thôi

Như vậy tổng cộng có 7 chỗ có thể dễ dàng thay đổi vì vậy chúng ta cần tạo một nhóm Trường dành cho Biểu ngữ và để tạo Trường tùy chỉnh trong WordPress thì plugin hỗ trợ mạnh mẽ nhất đó chính là Trường tùy chỉnh nâng cao

Trước khi đi vào việc tạo Trường tùy chỉnh thì việc chúng ta cần làm trước đó là tạo tên tệp là content-banner. php trong thư mục gốc để code cho phần Banner. Tiếp theo các bạn đã tạo tên tệp là page-home. php rồi dán mã dưới đây vào

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
7

Sau đó các bạn vào Dashboard chọn Trang -> Thêm trang mới với tên là Trang chủ. At the Giao diện các bạn chọn là Trang chủ -> Đăng nhập

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Sau đó các bạn vào Cài đặt chọn Đọc và chọn Trang chủ các bạn chọn Trang chủ(trang vừa tạo ở trên) và nhấn Lưu thay đổi

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Tiếp theo chúng ta chèn nội dung file content-banner vào file page-home. php bằng hàm 

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
33 (đã có đoạn mã trên). Sau đó các bạn mở file content-banner. php up và mã HTML tạm thời như sau

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
9

Trên đây chỉ là dữ liệu giả mình nhập sẵn mà thôi, nhưng chúng ta muốn nó linh động có thể dễ dàng thay đổi, cập nhật và lưu trong WordPress. Để làm điều đó chúng ta phải tạo Trường tùy chỉnh

# ACF

Để tạo Custom Fields các bạn chọn vào phần Custom Fields trong Dashboard sau đó chọn Add new để thêm mới, ở giao diện hiện tại các bạn điền tiêu đề Custom Fields ở đây mình để làm Banner

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Như đã phân tích ở trên tổng cộng chúng ta có 7 Trường bao gồm 4 Trường Văn bản và 3 Trường Hình ảnh. Để tạo Field Text, các bạn nhấn vào Add Field nó sẽ hiện ra như hình dưới đây. Các bạn điền vào như mình nhé

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Tương tự như vậy, bạn sẽ tạo thêm ba Trường khác với cấu trúc như hình trên nhưng Nhãn Trường khác là được, còn Tên Trường sẽ tự động lấy theo Nhãn Trường khi bạn nhập vào. Các bạn làm giống mình dưới đây

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Còn các trường Hình ảnh thì khác ở chỗ chúng ta sẽ chọn Loại trường là Hình ảnh và chọn kết quả trả về là Mảng hình ảnh

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Tương tự các bạn tạo cho hai Fields cho hình còn lại như mình dưới đây nhé

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Tiếp theo là phần hiển thị các Trường tùy chỉnh này ở bất kỳ trang nào, tất nhiên là Trang chủ rồi. Các bạn để ý phần Location, các bạn thiết lập theo hình dưới đây nhá. Sau đó đừng quên nhấn nút Lưu bên phải nhé

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Sau đó các bạn quay về trang Home mà các bạn đã tạo khi độn, các bạn sẽ thấy các Trường tùy chỉnh nằm trong nhóm Biểu ngữ mà chúng ta đã tạo như hình

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Thế là xong bước sử dụng ACF đơn giản, tiếp theo đây là cách làm sao để khi chúng ta cập nhật vào các Trường đó thì nó sẽ lưu lại và hiển thị bên ngoài

# Cách lấy dữ liệu từ ACF

Để lấy dữ liệu từ ACF ra và hiển thị trong mã, chúng ta sẽ gọi chúng ra thông số qua hàm 

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
34 mà ACF cung cấp, ở đây tên trường là cái tên mà lúc chúng ta tạo trong ACF(Field Name chứ không phải Field Label

Bây giờ mình sẽ áp dụng chúng vào trong file content-banner. php luôn nhé. The you open file content-banner. php up và chèn đoạn mã dưới đây vào cùng

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
1

Sau đó chúng ta chỉ việc gọi nó ra mà thôi. Ta has full code at file content-banner. php as after

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
2

Hiện tại không có gì vì chúng ta chưa thêm gì ở trang chủ cả. Giờ mở trang chủ lên sau đó tại Banner, các bạn nhập thông tin đại diện vào thử xem. Mình input as this for same Design luôn

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

tada. We are results as mong đợi nhé

Tiêu đề hình ảnh wordpress
Tiêu đề hình ảnh wordpress

Nhưng mà chưa đẹp cho lắm vì ta chưa CSS cho nó nhỉ. Và đây là đoạn CSS sẽ làm cho nó đẹp lên, các bạn có thể tham khảo ý kiến ​​của mình hoặc tự code nhé. Làm xong các bạn tải lại xem kết quả có đẹp không nhé

/*Adding class to menu item - li tag */
function add_menu_list_item_class($classes, $item, $args) {
if($args->list_item_class) {
$classes[] = $args->list_item_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_list_item_class', 1, 3);

/*Adding class to link menu item - a tag */
function add_menu_link_class( $atts, $item, $args ) {
if($args->link_class) {
$atts['class'] = $args->link_class;
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );
3

# Tạm dừng

Phù. The is done part 2. Sắp tết luôn rồi. Hướng dẫn viết Chủ đề cực hay các bạn ạ, lỡ phóng lao rồi phải theo lao thôi kaka. Code rất nhiều và tùy chỉnh cũng rất nhiều nên nhiều khi không biết viết sao cho các bạn dễ hiểu để làm được. Nhưng thôi cứ cố gắng, hi vọng được các bạn ủng hộ

Chúc các bạn ăn tết vui vẻ và học tập tốt nhé. Có gì không hiểu hay thấy mình làm sai chỗ nào đó hay thắc mắc đừng quên bình luận góp ý giúp mình nha. Ngoài ra mình có upload source code lên Github, các bạn muốn tham khảo đối chứng thì nhấn vào đây nhé

programming wordpress

Bài Viết Liên Quan

Chứng minh một nhận định văn học lớp 9 năm 2024
Chứng minh một nhận định văn học lớp 9 năm 2024

mẹo hay Học Tốt Học
Sau động từ là loại từ gì năm 2024
Sau động từ là loại từ gì năm 2024

là ai
Chương trình khách hàng thân thiết vinaphone plus là gì năm 2024
Chương trình khách hàng thân thiết vinaphone plus là gì năm 2024

là ai Hỏi Đáp Là gì Tổng đài VinaPhone vinaphone.com.vn đăng nhập My VNPT VinaPhone 4G VinaPhone Portal
Bài 59 toán 8 tap 1 trang 62 năm 2024
Bài 59 toán 8 tap 1 trang 62 năm 2024

mẹo hay
Lego con 1 x 1 with top groove năm 2024
Lego con 1 x 1 with top groove năm 2024

mẹo hay Top List Top
As a more complete picture nghĩa là gì năm 2024
As a more complete picture nghĩa là gì năm 2024

là ai Hỏi Đáp Là gì Ngôn ngữ Nghĩa là gì
Cho bé sơ sinh nằm thế nào cho đúng cách năm 2024
Cho bé sơ sinh nằm thế nào cho đúng cách năm 2024

mẹo hay Hỏi Đáp Thế nào Mẹo Hay Cách
Thiên an môn mau me giờ lỗi thời lăm rồi năm 2024
Thiên an môn mau me giờ lỗi thời lăm rồi năm 2024

mẹo hay
Công việc của kế toán công nợ khách sạn năm 2024
Công việc của kế toán công nợ khách sạn năm 2024

mẹo hay
Phụ thu phòng đơn khách sạn tiếng anh là gì năm 2024
Phụ thu phòng đơn khách sạn tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh
Văn bằng 2 tiếng anh đại học sư phạm hcm năm 2024
Văn bằng 2 tiếng anh đại học sư phạm hcm năm 2024

mẹo hay Học Tốt Học Tiếng anh Đại học
Kế hoạch phát triển bản thân là gì năm 2024
Kế hoạch phát triển bản thân là gì năm 2024

là ai Hỏi Đáp Là gì
Câu ghép chính phụ nộ dung tác phầm văn học năm 2024
Câu ghép chính phụ nộ dung tác phầm văn học năm 2024

mẹo hay Học Tốt Học
49 văn cao p.năng tĩnh tp nam định năm 2024
49 văn cao p.năng tĩnh tp nam định năm 2024

mẹo hay
Chu kỳ kinh doanh của doanh nghiệp là gì năm 2024
Chu kỳ kinh doanh của doanh nghiệp là gì năm 2024

là ai Hỏi Đáp Là gì
1 c o có 2 hóa đơn được không năm 2024
1 c o có 2 hóa đơn được không năm 2024

mẹo hay
Hướng dẫn dùng thanh toán bằng thẻ visa trên paypa năm 2024
Hướng dẫn dùng thanh toán bằng thẻ visa trên paypa năm 2024

mẹo hay Mẹo Hay Hướng dẫn
Caán bộ thẩm định tiền là thẩm định gì năm 2024
Caán bộ thẩm định tiền là thẩm định gì năm 2024

là ai Đi thẩm định
Làm hướng dẫn viên du lịch thi khối nào năm 2024
Làm hướng dẫn viên du lịch thi khối nào năm 2024

mẹo hay Mẹo Hay Hướng dẫn
Lỗi failure reading sector không khởi động được năm 2024
Lỗi failure reading sector không khởi động được năm 2024

mẹo hay HDD Regenerator CrystalDiskInfo Grub rescue proxmox

Quảng Cáo

Có thể bạn quan tâm

Khi nhân viên nghỉ ngang xử lý như thế nào năm 2024
3 ngày trước . bởi FascinatedBasis
Nhân khẩu nông nghiệp là gì năm 2024
3 ngày trước . bởi HistoricalSomewhere
Bài tập tiếng anh lớp 9 mai lan hương năm 2024
3 ngày trước . bởi UnreliableAesthetics
Quyết định 4068 qđ-byt năm2023 thay thế quyết định nào năm 2024
3 ngày trước . bởi ComplimentaryObscurity
Kê khai thuế tncn của văn phòng đại diện năm 2024
3 ngày trước . bởi PrejudicedLodging
Bộ nhận dạng thương hiệu tiếng anh là gì năm 2024
3 ngày trước . bởi KosherEvacuation
Bài tập 2 toán lớp 11 trang 17 năm 2024
3 ngày trước . bởi UnregulatedFluke
P e trung bình ngành mía đường năm 2024
3 ngày trước . bởi MelancholyProbation
Quần size 30 là size gì năm 2024
3 ngày trước . bởi EnragedHousing
Lỗi không tạo được mục lục trong word 2010 năm 2024
3 ngày trước . bởi CoerciveStoryteller

Toplist được quan tâm

#1
Top 9 review kem chống nắng cho bà bầu 2023
6 tháng trước
#2
Top 5 tiếng anh lớp 2 unit 7 trang 46 2023
6 tháng trước
#3
Top 10 tải: mẫu the nhân viên trên excel 2023
6 tháng trước
#4
Top 7 tuyển dụng nhân viên chốt đơn tại nhà 2023
6 tháng trước
#5
Top 7 mẫu nhà 2 tầng chữ l 100m2 mái bằng 2023
6 tháng trước
#6
Top 4 truyện ngắn về quê hương lớp 2 2023
6 tháng trước
#7
Top 6 sơ đồ bộ máy nhà nước thời hồ 2023
6 tháng trước
#8
Top 8 trước việc nhật đảo chính pháp, đảng ta có chủ trương gì mới 2023
6 tháng trước
#9
Top 7 dân số đông đã đem đến cho nước ta 2023
6 tháng trước

Quảng cáo

Xem Nhiều

Căn hộ city land nguyễn văn lượng bàn giao chưa năm 2024
1 tuần trước . bởi UninformedSediment
Kế toán trưởng và trưởng phòng kế toán năm 2024
4 ngày trước . bởi GhostlyStaging
Lỗi app cant your a pc dragon ball xenoverse 2 năm 2024
2 ngày trước . bởi CloudlessHelper
Sửa lỗi ảnh không mở được sau khi khôi phục năm 2024
5 ngày trước . bởi UnwantedDigger
Bộ nhận dạng thương hiệu tiếng anh là gì năm 2024
3 ngày trước . bởi KosherEvacuation
Kê khai thuế tncn của văn phòng đại diện năm 2024
3 ngày trước . bởi PrejudicedLodging
Hội thánh phúc âm ngũ tuần là gì năm 2024
3 ngày trước . bởi DecoratedDiagnosis
Bãi nổi sông hồng có những loại cat nào năm 2024
1 tuần trước . bởi LiturgicalFluke
Bài8 sgk toán 6 tập 2 trang 75 năm 2024
1 tuần trước . bởi PrimHumility
As a more complete picture nghĩa là gì năm 2024
4 giờ trước . bởi ClumsyReinstatement

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 MarketingBlog Inc.