Thiết kế theme wordpress phần 7

28/12/2013 16:02 55899

• Thiết kế theme wordpress phần 6

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

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

• Thiết kế theme wordpress phần 8
• Giới thiệu khóa học làm chủ công nghệ Responsive Design
• Giới thiệu và hướng dẫn sử dụng code xem video haivl
• Dự án ebook thiết kế theme wordpress từ A->Z-Vì một cộng động yêu thích wordpress
• Lý do dự án về Ebook thiết kế theme wordpress ra đời
• Tản mạng về css
• Buổi tảng mạn về jquery
• Buổi tảng mạn về Php, mysql, apache, phpmyadmin, xampp
• Buổi tảng mạn về wordpress
• Kế hoạch html cho theme wordpress
• Thiết lập reset css, body, a cho file style và layout phần header của trang index

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

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

Mã html:

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

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:

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:

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

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ý 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:

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

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

(Còn tiếp..)