[Lập trình theme WordPress] Viết CSS cho theme – Phần 2 [NEW]



Ở phần viết CSS trước, chúng ta đã cùng nhau tìm hiểu các bước thêm CSS cần thiết cho theme và chia cột theme theo ý muốn. Tiếp tục phần này mình sẽ hướng dẫn các bạn tiếp tục CSS cho website để hiển thị tốt hơn, cụ thể hơn trong bài này mình sẽ nói qua việc thêm CSS và Javascript để menu trên website của bạn hiển thị đẹp mắt. hơn.

Trong khuôn khổ loạt bài này, có lẽ mình sẽ không viết qua CSS làm sao để có menu thả xuống vì nếu hướng dẫn và giải thích rất dài dòng, nếu không cẩn thận mình sẽ bị chuyển sang CSS làm nội dung của mình. . loạt bị loãng. Vì vậy trong loạt bài này, mình sẽ hướng dẫn các bạn tích hợp Menu SuperFish vào chủ đề WordPress của bạn bằng cách chèn các đoạn mã Javascript và CSS của nó vào chủ đề.

Tại sao sử dụng SuperFish Menu?

Menu SuperFish là một plugin cho jQuery giúp bạn tạo menu thả xuống nhiều cấp, đơn giản nhưng trông tuyệt vời và dễ sử dụng. Nếu bạn đã từng viết CSS của riêng mình cho menu, bạn sẽ thấy rằng đôi khi quá trình này có thể tẻ nhạt, vì vậy tôi thường sử dụng các plugin jQuery hoặc các Khung CSS bên ngoài để tạo menu.

Với SuperFish, bạn chỉ cần viết thêm một vài CSS nếu muốn tùy chỉnh màu sắc và bố cục của chủ đề. Nếu không, chỉ cần tích hợp tập lệnh của nó vào trang web, khai báo lớp SuperFish Menu vào chủ đề và nó sẽ chạy trơn tru.

Các bước tích hợp SuperFish Menu vào WordPress

Trước hết, hãy vào thư mục chủ đề, tạo một thư mục khác có tên là js và một thư mục được gọi là css trong đó.

Sau đó tải mã nguồn của SuperFish tại đây. Nếu bạn giải nén nó, bạn sẽ thấy các thư mục có tên quận, thí dụ, src, kiểm tra TRA.

[Lập trình theme WordPress] Viết CSS cho theme – Phần 2 [NEW]

Các thư mục sau khi giải nén superfish-master.zip

Đi tới thư mục src trong đó bạn sẽ thấy hai thư mục css và js vào thư mục / src / css và sao chép tệp superfish.css vào thư mục css trong chủ đề.

Sau đó vào thư mục / src / js và sao chép tệp superfish.js vào thư mục js trong chủ đề. Và cũng trong thư mục js của chủ đề, bạn tạo một tệp có tên custom.js.

Sau khi đảm bảo trong theme có hai thư mục js và css, trong hai thư mục đó có file SuperFish thì chúng ta sẽ tiến hành chèn vào theme bằng hàm thachpham_styles () mà chúng ta đã làm ở bước chèn CSS vào chủ đề.

Bạn mở tệp functions.php ra, tìm phần này:


/**
@ Chèn CSS và Javascript vào theme
@ sử dụng hook wp_enqueue_scripts() để hiển thị nó ra ngoài front-end
**/
function thachpham_styles() {
/*
* Hàm get_stylesheet_uri() sẽ trả về giá trị dẫn đến file style.css của theme
* Nếu sử dụng child theme, thì file style.css này vẫn load ra từ theme mẹ
*/
wp_register_style( ‘main-style’, get_template_directory_uri() . ‘/style.css’, ‘all’ );
wp_enqueue_style( ‘main-style’ );
}
add_action( ‘wp_enqueue_scripts’, ‘thachpham_styles’ );

Bên trong nội dung thachpham_styles (), chúng ta khai báo thêm một số đoạn như sau để chèn hai tệp SuperFish .css và .js:

/*
* Chèn các file CSS của SuperFish Menu
*/
wp_register_style( ‘superfish-css’, get_template_directory_uri() . ‘/css/superfish.css’, ‘all’ );
wp_enqueue_style( ‘superfish-css’ );

/*
* Chèn file JS của SuperFish Menu
*/
wp_register_script( ‘superfish-js’, get_template_directory_uri() . ‘/js/superfish.js’, array(‘jquery’) );
wp_enqueue_script( ‘superfish-js’ );

/*
* Chèn file JS custom.js
*/
wp_register_script( ‘custom-js’, get_template_directory_uri() . ‘/js/custom.js’, array(‘jquery’) );
wp_enqueue_script( ‘custom-js’ );

Và đây là toàn bộ nội dung của hàm thachpham_styles () sau chủ đề:


/**
@ Chèn CSS và Javascript vào theme
@ sử dụng hook wp_enqueue_scripts() để hiển thị nó ra ngoài front-end
**/
function thachpham_styles() {
/*
* Chèn file style.css chứa CSS của theme
*/
wp_register_style( ‘main-style’, get_template_directory_uri() . ‘/style.css’, ‘all’ );
wp_enqueue_style( ‘main-style’ );

/*
* Chèn các file CSS của SuperFish Menu
*/
wp_register_style( ‘superfish-css’, get_template_directory_uri() . ‘/css/superfish.css’, ‘all’ );
wp_enqueue_style( ‘superfish-css’ );

/*
* Chèn file JS của SuperFish Menu
*/
wp_register_script( ‘superfish-js’, get_template_directory_uri() . ‘/js/superfish.js’, array(‘jquery’) );
wp_enqueue_script( ‘superfish-js’ );

/*
* Chèn file JS custom.js
*/
wp_register_script( ‘custom-js’, get_template_directory_uri() . ‘/js/custom.js’, array(‘jquery’) );
wp_enqueue_script( ‘custom-js’ );
}
add_action( ‘wp_enqueue_scripts’, ‘thachpham_styles’ );

Bây giờ, hãy kiểm tra xem ngoài chủ đề, nó có tất cả các tệp CSS và JS mà bạn vừa chèn vào hay không.

Tiếp tục, bạn tìm hàm thachpham_menu () trong functions.php, thêm một tham số vào biến mảng $ menu như sau (xem dòng in đậm):


$menu = array(
‘theme_location’ => $slug,
‘container’ => ‘nav’,
‘container_class’ => $slug,
‘items_wrap’ => ‘<ul id="%1$s" class="%2$s sf-menu">%3$s</ul>’,
);

Vì Menu SuperFish cần đầu tiên

    thẻ trong menu để có lớp sf-menu để nó hiển thị CSS tốt, tham số items_wrap trong hàm wp_nav_menu () sẽ cho phép thay đổi cấu trúc của

      nhãn.

      Và cuối cùng chèn phần sau vào tệp custom.js để kích hoạt Menu SuperFish.


      jQuery(document).ready(function() {
      jQuery(‘nav.primary-menu ul.sf-menu’).superfish();
      });

      Tuy nhiên, có thể bị vỡ khung do menu có float, vì vậy chúng ta nên tiến hành xóa float cho menu có giả lớp: sau. Chèn phần sau vào tệp style.css:


      /*—:[PRIMARY MENU]:—*/
      .primary-menu:after {
      display: table;
      content: " ";
      clear: both;
      }

      Kết quả là chúng tôi có:

      laptrinhtheme-finish-superfish

      Kết quả sau khi chèn Menu SuperFish

      Thêm một chút CSS và nó sẽ khác:


      .primary-menu ul{
      border: 1px solid #000000;
      -moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
      -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
      box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
      background: #565656;
      background: -moz-linear-gradient(#565656 0%, #323232 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
      background: -webkit-linear-gradient(#565656 0%, #323232 100%);
      background: linear-gradient(#565656 0%, #323232 100%);
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      width: 100%;
      }
      .primary-menu ul li,
      .primary-menu ul li ul li {
      -moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
      -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
      box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
      background: #565656;
      background: -moz-linear-gradient(#565656 0%, #323232 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
      background: -webkit-linear-gradient(#565656 0%, #323232 100%);
      background: linear-gradient(#565656 0%, #323232 100%);
      }
      .primary-menu ul li a {
      color: #f7f7f7;
      border-top: none;
      border-left: none;
      }
      .primary-menu ul li a:hover,
      .primary-menu ul li.sfHover {
      background: #555555;
      }
      .primary-menu ul li ul {
      width: auto;
      }

      Kết quả:

      laptrinhtheme-finish-custommenu

      CSS đầy đủ trong phần này:


      /*—:[PRIMARY MENU]:—*/
      .primary-menu:after {
      display: table;
      content: " ";
      clear: both;
      }
      .primary-menu ul{
      border: 1px solid #000000;
      -moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
      -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
      box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
      background: #565656;
      background: -moz-linear-gradient(#565656 0%, #323232 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
      background: -webkit-linear-gradient(#565656 0%, #323232 100%);
      background: linear-gradient(#565656 0%, #323232 100%);
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      width: 100%;
      }
      .primary-menu ul li,
      .primary-menu ul li ul li {
      -moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
      -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
      box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
      background: #565656;
      background: -moz-linear-gradient(#565656 0%, #323232 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
      background: -webkit-linear-gradient(#565656 0%, #323232 100%);
      background: linear-gradient(#565656 0%, #323232 100%);
      }
      .primary-menu ul li a {
      color: #f7f7f7;
      border-top: none;
      border-left: none;
      }
      .primary-menu ul li a:hover,
      .primary-menu ul li.sfHover {
      background: #555555;
      }
      .primary-menu ul li ul {
      width: auto;
      }

      Phần kết

      Vậy là dần dần theme của chúng ta cũng đã dần được hình thành, sau khi làm xong menu thì coi như chúng ta đã bớt được một gánh nặng mà đối với mình – viết CSS cho menu là sợ nhất. Sau khi thực hiện xong bước này, bạn sẽ cảm thấy ổn, trong các phần tiếp theo chúng ta sẽ tiến hành viết cho các thành phần con bên trong website và cả cho WordPress.

      Đánh giá nội dung này

      Tiếp tục đọc trong bộ truyện