Thiết kế theme wordpress phần 7

Chúng ta tiếp tục bài hôm nay, ở bài trước chúng ta đã tạo xong phần theme option trong admin wordpress, để chứa các đường link rss, link facebook…

Bây giờ chúng ta sẽ gọi nó ra ở phần theme, để gọi ra theme bạn mở file header.php lên và thay thế mã html của nó bằng các mã dưới đây

Gọi theme option

Tôi xin giải thích sơ qua các lệnh trên:

  • get_option(”): là hàm của wordpress dùng trong việt lấy các giá trị từ bảng  wp_option (nếu prefix là wp)
  • get_template_directory_uri(): là đường dẫn tuyệt đối của theme đang sử dụng

Bây giờ chúng ta sẽ xem kết quả nào đăng nhập vào admin và nhấp vào theme option

Cập nhật theme option

Bạn cung cấp các link rss, link facebook…và ra trang chủ xem kết quả

Kết quả gọi theme option

Okie vậy là kết thúc phần sử dụng theme option để lưu các đường link rss và mạng xã hội

Chúng ta sẽ đi tiếp việc tạo searchform

Hình search form

Mã html:

Mã html của search form

Để tạo search form trong wordpress bạn mở file searchform.php và gõ vào các lệnh sau:

Mã php của search form

Tôi xin giải thích sơ qua file searchform.php:

  • File này có nhiệm vụ tạo một form tìm kiếm trong wordpress
  • echo esc_url(home_url(‘/’)): dùng để ra ký tự /

Để hiển thị form tìm kiếm ngoài theme bạn mở file header.php lênh và gõ vào các lệnh sau:

Gọi search form

Chỉ việc dùng một hàm mà wordpress đã cung cấp đó là get_search_form(), hàm này có tác dụng giống inclue vào vậy

Và khi người dùng gõ vào từ khóa và nhấp tìm kiếm thì file search.php sẽ được gọi để xủa lý truy vấn và trả về kết quả

Nội dung của file search.php tôi sẽ nói sau, giờ chúng ta sẽ đi tiếp, đó là tạo thanh menu top 2

Hình ảnh:

Hình thanh menu top 2

Mã html (phần đóng khung đỏ):

Mã html của menu top 2

Về cách để tạo một menu top 2 tôi sẽ không giải thích rõ như lần tạo menu top 1 (nếu bạn chưa xem thì nên xem lại bài Thiết kế theme wordpress phần 5 

Bạn mở file functions.php và thực hiện việc đăng ký với admin wordpress:

Đăng ký menu top 2

Để đăng ký với wordpress admin chúng ta thêm vào ‘menutop2’ =>__(‘Menu top 2’)

Bây giờ chúng ta sẽ custom css cho li (class=”top_menu”), lại mở file functions.php lên và thêm vào các lệnh sau:

[php]
class add_class_to_ul_li1 extends Walker_Nav_Menu {
function start_lvl( &$output, $depth ) {
$indent = ( $depth > 0 ? str_repeat( “\t”, $depth ) : ” ); // code indent
$class_names = ‘submenu’;
$output .= “\n” . $indent . ‘

      ‘ . “\n”;

 

      }

 

      function start_el( &$output, $item, $depth, $args ) {

 

      global $wp_query;

 

      $indent = ( $depth > 0 ? str_repeat( “\t”, $depth ) : ”); // code indent

 

      $depth == 0 ?

 

    $output .= $indent . ‘


  • :
    $output .= $indent . ‘
  • ‘;
    $attributes = ! empty( $item->attr_title ) ? ‘ title=”‘ . esc_attr( $item->attr_title ) .'”‘ : ”;
    $attributes .= ! empty( $item->target ) ? ‘ target=”‘ . esc_attr( $item->target ) .'”‘ : ”;
    $attributes .= ! empty( $item->xfn ) ? ‘ rel=”‘ . esc_attr( $item->xfn ) .'”‘ : ”;
    $attributes .= ! empty( $item->url ) ? ‘ href=”‘ . esc_attr( $item->url ) .'”‘ : ”;
    $depth == 0 ?
    $item_output = sprintf( ‘%1$s<a%2$s>%3$s%4$s%5$s%6$s’,
    $args->before,
    $attributes,
    $args->link_before,
    apply_filters( ‘the_title’, $item->title, $item->ID ),
    $args->link_after,
    $args->after
    ) :
    $item_output = sprintf( ‘%1$s<a%2$s>%3$s%4$s%5$s%6$s’,
    $args->before,
    $attributes,
    $args->link_before,
    apply_filters( ‘the_title’, $item->title, $item->ID ),
    $args->link_after,
    $args->after
    );
    $output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
    }
    }
    [/php]

Để gọi nó ra ngoài theme, chúng ta mở file header.php lên và thêm vào các lệnh sau:

Mã php của menu top 2

Vùng khoanh màu đỏ thứ nhất là tạo ra cái home có hình ngôi nhà, còn vùng thứ hai là tạo ra menu top 2

Vậy là chúng ta đã tạo xong menu top 2, để thử kết quá bạn vào admin wordpress và truy cập vào menus tạo một menu để add vào menu top 2

Add menu vào menu top 2

Tôi xin tạm dừng tại đây

(Còn tiếp..)

5/5 (16 Đánh giá)

Gửi Phản Hồi
Chọn đánh giá của bạn
0 Bình Luận
Thông tin người gửi
Anh Chị


Form đăng ký nhận bài mới

Đăng ký nhận bài viết mới

Khi mình đăng bài mới bạn sẽ nhận nó qua Email


Super-flatsome

Hướng dẫn thiết kế theme

Các functions thường dùng

  • Hotline: 0912 889 416

  • Fcwordpress trên facebook Fcwordpress trên Twitter Fcwordpress trên youtube

Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net

Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress

0912889416