[Lập trình theme WordPress] Viết code cho header.php [NEW]



Khi tạo theme, chúng ta đã thiết lập sẵn các chức năng cần thiết trong theme mà chúng ta sẽ muốn nó sử dụng bằng cách viết mã vào tệp functions.php như một khai báo hàm. Ngay sau bước đó, chúng ta có thể tiến hành viết code cho từng template trong theme như header.php, footer.php, index.php,… Trong bài này, chúng ta sẽ bắt đầu viết code cho file header.php trước.

Ý nghĩa của header.php

Trong tệp này, chúng tôi sẽ khai báo các thẻ HTML cần thiết có trong tài liệu HTML tiêu chuẩn, chẳng hạn như , , ,… .Và đặc biệt là thẻ là một phần quan trọng. tốt nhất. Cũng trong dự án này, chúng tôi sẽ viết thêm mã để hiển thị tên trang web và menu cho tệp header.php này vì những thành phần đó chúng tôi đều muốn nó hiển thị trong mọi trang.

Bắt đầu viết mã

Bây giờ mở file header.php, không cần viết thẻ mở PHP, chúng ta sẽ khai báo nó bằng HTML với PHP lồng vào nhau như sau:

[html]


class = “ie8″>
>

[/html]

Đặc biệt, bạn nên chú ý đến hook wp_head (), đây là hook giúp WordPress hiểu đây là gắn thẻ khu vực của chủ đề của bạn để chủ đề có thể tự thêm các thành phần cần thiết, cũng như Các plugin khác muốn can thiệp vào khu vực này cũng sẽ phát hiện móc nối wp_head().

Tôi đã không thiết lập vì trong phần trước, chúng tôi đã thêm hàm <code>title-tag</code> vào chủ đề. Còn thẻ meta description và meta keyword thì bạn không cần thêm vì bạn có thể sử dụng các plugin như WordPress SEO by Yoast, nó sẽ tự thêm vào.</p> <p>Dưới đây, chúng tôi mở <body> gắn thẻ và thêm thẻ mẫu <code>body_class()</code> đi vào. Đây là hàm sẽ trả về các lớp biểu tượng cho mỗi trang trên thẻ body để nếu có CSS ​​tùy chỉnh cho mỗi trang, chỉ cần dựa vào các lớp biểu tượng này.</p> <p>Trước khi tiếp tục, vui lòng mở tệp index.php và thêm đoạn này để nó có thể tải tệp header.php.</p> <pre class="inline-code"><br> <?php get_header(); ?><br> </pre> <p>Ok, bây giờ chúng ta viết mã để hiển thị vùng tên trang web trên tiêu đề trong tệp <strong>functions.php. </strong>Tại sao phải viết trong tệp functions.php? Vì chúng ta sẽ không ghi trực tiếp vào tệp header.php vì nó rất lộn xộn và không gọn gàng. Vì vậy mình khuyến khích các bạn tạo một hàm riêng trong functions.php để thực hiện việc hiển thị tên trang web trên header.</p> <pre class="inline-code"><br> /**<br> @ Thiết lập hàm hiển thị logo<br> @ thachpham_logo()<br> **/<br> if ( ! function_exists( ‘thachpham_logo’ ) ) {<br> function thachpham_logo() {?><br> <div class="logo"> <p> <div class="site-name"><br> <?php if ( is_home() ) {<br> printf(<br> ‘<h1><a href="%1$s" title="%2$s">%3$s</a></h1>’,<br> get_bloginfo( ‘url’ ),<br> get_bloginfo( ‘description’ ),<br> get_bloginfo( ‘sitename’ )<br> );<br> } else {<br> printf(<br> ‘<p><a href="%1$s" title="%2$s">%3$s</a></p>’,<br> get_bloginfo( ‘url’ ),<br> get_bloginfo( ‘description’ ),<br> get_bloginfo( ‘sitename’ )<br> );<br> } // endif ?><br> </div><br> <div class="site-description"><?php bloginfo( ‘description’ ); ?></div></p> <p> </div><br> <?php }<br> }<br> </p></pre> <p>Trong đoạn trên, tôi đã sử dụng hàm <code>printf</code> với mục đích in các chuỗi dữ liệu đã được định dạng. Các tham số như% 1 $ s,% 2 $ s,% 3 $ s là mỗi tham số tương ứng với 3 hàm dữ liệu bên dưới nó, cụ thể:</p> <ul> <li><strong>% 1 $ s</strong>: get_bloginfo (‘url’)</li> <li><strong>% 2 $ s</strong>: get_bloginfo (‘mô tả’)</li> <li><strong>% 3 $ s</strong>: get_bloginfo (‘sitename’)</li> </ul> <p>Mục đích mình viết style này là để các bạn dễ xem và ở các phần sau chúng ta sẽ sử dụng nhiều hơn, lý do thì mình sẽ kể sau.</p> <p>Ok, bây giờ chúng ta quay trở lại tệp header.php và thêm hàm <code>thachpham_logo()</code> bên trong </p> <header> phần như bên dưới:</p> <pre class="inline-code"><br> <header id="header"><br> <?php thachpham_logo(); ?><br> </header><br> </pre> <p>Mã trong tệp functions.php có nghĩa là tên trang web sẽ được hiển thị với </p> <h1> trên trang chủ và trên các trang khác, nó sẽ được hiển thị với </p> <p> nhãn. Mục đích là để tối ưu nó cho chuẩn SEO. : D</p> <p>Và bây giờ đến màn hình menu, hãy chèn đoạn mã sau vào tệp functions.php:</p> <pre class="inline-code"><br> /**<br> @ Thiết lập hàm hiển thị menu<br> @ thachpham_menu( $slug )<br> **/<br> if ( ! function_exists( ‘thachpham_menu’ ) ) {<br> function thachpham_menu( $slug ) {<br> $menu = array(<br> ‘theme_location’ => $slug,<br> ‘container’ => ‘nav’,<br> ‘container_class’ => $slug,<br> );<br> wp_nav_menu( $menu );<br> }<br> }<br> </pre> <p>Tức là chúng ta sẽ tạo một hàm có tên là <code>thachpham_show_menu( $slug )</code> để hiển thị menu. Biến $ slug là tên slug của menu mà bạn cần gọi ra và nó sẽ tự động áp dụng tên slug đó làm lớp cho menu được hiển thị, dễ dàng sử dụng lại sau này.</p> <p>Sau đó, bạn chỉnh sửa mã <strong></p> <header></strong> trong tệp header.php tới đây:</p> <pre class="inline-code"><br> <header id="header"><br> <?php thachpham_logo(); ?><br> <?php thachpham_menu( ‘primary-menu’ ); ?><br> </header><br> </pre> <p><code>primary-menu</code> là menu slug mà chúng ta đã tạo ở bài trước.</p> <p>Bây giờ đi vào <strong>Giao diện -> Thực đơn</strong> và thêm một menu <strong>thực đơn chính</strong>tốt nhất nên chọn menu là Ngắn vì nó ngắn và dễ nhìn.</p> <div id="attachment_22840" style="width: 845px" class="wp-caption aligncenter"><img fifu-featured="1" aria-describedby="caption-attachment-22840" loading="lazy" class="wp-image-22840 size-full" src="https://thachpham.com/wp-content/uploads/2015/01/laptrinhtheme-setmenu.png" alt="[Lập trình theme WordPress] Viết code cho header.php [NEW]" width="835" height="704" title="[Lập trình theme WordPress] Viết mã cho header.php 15"></p> <p id="caption-attachment-22840" class="wp-caption-text">Đặt menu hiển thị</p> </div> <p>Và bây giờ bạn vào trang chủ của website sẽ thấy nó hiển thị như sau:</p> <p><img loading="lazy" width="910" height="554" class="aligncenter size-full wp-image-22841" src="https://thachpham.com/wp-content/uploads/2015/01/laptrinhtheme-finish-header.png" alt="laptrinhtheme-kết thúc-tiêu đề" title="[Lập trình theme WordPress] Viết mã cho header.php 16"></p> <p>Ok, vậy hãy xem phần này chúng ta đã viết xong mã cho tệp header.php. Đây là toàn bộ nội dung mã trong bài đăng này:</p> <p><strong>Toàn bộ tệp mã header.php</strong></p> <pre class="inline-code"><br> <!DOCTYPE html><br> <!–[if IE 8]> <html <?php language_attributes(); ?> class="ie8"> <![endif]–><br> <!–[if !IE]> <html <?php language_attributes(); ?>> <![endif]–> <p><head><br> <meta charset="<?php bloginfo( ‘charset’ ); ?>" /><br> <link rel="profile" href="http://gmgp.org/xfn/11" /><br> <link rel="pingback" href="<?php bloginfo( ‘pingback_url’ ); ?>" /></p> <p> <?php wp_head(); ?><br> </head></p> <p><body <?php body_class(); ?> > <!–Thêm class tượng trưng cho mỗi trang lên <body> để tùy biến–><br> <div id="container"><br> <header id="header"><br> <?php thachpham_logo(); ?><br> <?php thachpham_menu( ‘primary-menu’ ); ?><br> </header><br> </p></pre> <p><strong>Một số mã được thêm vào functions.php:</strong></p> <pre class="inline-code"><br> /**<br> @ Thiết lập hàm hiển thị logo<br> @ thachpham_logo()<br> **/<br> if ( ! function_exists( ‘thachpham_logo’ ) ) {<br> function thachpham_logo() {?><br> <div class="logo"> <p> <div class="site-name"><br> <?php if ( is_home() ) {<br> printf(<br> ‘<h1><a href="%1$s" title="%2$s">%3$s</a></h1>’,<br> get_bloginfo( ‘url’ ),<br> get_bloginfo( ‘description’ ),<br> get_bloginfo( ‘sitename’ )<br> );<br> } else {<br> printf(<br> ‘</p><a href="%1$s" title="%2$s">%3$s</a></p>’,<br> get_bloginfo( ‘url’ ),<br> get_bloginfo( ‘description’ ),<br> get_bloginfo( ‘sitename’ )<br> );<br> } // endif ?><br> </div><br> <div class="site-description"><?php bloginfo( ‘description’ ); ?></div></p> <p> </div><br> <?php }<br> }</p> <p> /**<br> @ Thiết lập hàm hiển thị menu<br> @ thachpham_menu( $slug )<br> **/<br> if ( ! function_exists( ‘thachpham_menu’ ) ) {<br> function thachpham_menu( $slug ) {<br> $menu = array(<br> ‘theme_location’ => $slug,<br> ‘container’ => ‘nav’,<br> ‘container_class’ => $slug,<br> );<br> wp_nav_menu( $menu );<br> }<br> }<br> </p></pre> <h3><span id="Phan_ket">Phần kết</span></h3> <p>Trong phần này, chúng ta đã học cách viết mã trong tệp header.php để có được một tiêu đề đơn giản. Ngoài ra, điều mình muốn truyền tải nhất trong bài viết này là kinh nghiệm tạo một hàm riêng để hiển thị một thứ gì đó thay vì viết code trực tiếp, vừa khó quản lý, khó tra cứu lại vừa không khoa học cho lắm. . Và từ phần này, chúng tôi sẽ sử dụng phương pháp này nhiều hơn nữa.</p> <div class="kk-star-ratings kksr-auto kksr-align-center kksr-valign-bottom" data-payload='{"align":"center","id":"22839","slug":"default","valign":"bottom","reference":"auto","class":"","count":"2","readonly":"","score":"3","best":"5","gap":"4","greet":"u0110u00e1nh giu00e1 nu1ed9i dung nu00e0y","legend":"3/5 - (2 bu00ecnh chu1ecdn)","size":"24","width":"82","_legend":"{score}/{best} - ({count} {votes})","font_factor":"1.25"}'> <div class="kksr-stars"> <div class="kksr-stars-inactive"> <div class="kksr-star" data-star="1" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" data-star="2" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" data-star="3" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" data-star="4" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" data-star="5" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> </p></div> <div class="kksr-stars-active" style="width: 82px;"> <div class="kksr-star" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> <div class="kksr-star" style="padding-right: 4px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </p></div> </p></div> </div> <div class="kksr-legend" style="font-size: 19.2px;"> <p> 3/5 – (2 phiếu bầu) </p></div> </div> <div class="serie-list"> <h4><span id="Tiep_tuc_doc_trong_bo_truyen">Tiếp tục đọc trong bộ truyện</span></h4> <p><span class="series-nav-left"></span><span class="series-nav-right"></span></div> <div class="post-tags"> <p> thiết kế chủ đề video hướng dẫn wordpress nâng cao </p></div> </p></div> <!-- Start Tags --> <div class="tags"></div> <!-- End Tags --> </div><!-- End Content --> <div class="related-posts"><div class="postauthor-top"><h3>Related Posts</h3></div> <article class="post excerpt "> <a href="https://wordpresstipsaz.com/sftp-la-gi-va-cach-su-dung-sftp-de-di-chuyen-du-lieu-tren-may-chu-linux-new/" title="sFTP là gì và cách sử dụng sFTP để di chuyển dữ liệu trên máy chủ Linux [NEW]" id="featured-thumbnail"> <div class="featured-thumbnail"> <img fifu-featured="1" width="210" height="150" src="https://thachpham.com/wp-content/uploads/2013/10/winscp-login-vps-2.jpg" class="attachment-schema-lite-related size-schema-lite-related wp-post-image" alt="sFTP là gì và cách sử dụng sFTP để di chuyển dữ liệu trên máy chủ Linux [NEW]" loading="lazy" title="sFTP là gì và cách sử dụng sFTP để di chuyển dữ liệu trên máy chủ Linux [NEW] 1"> </div> <header> <h4 class="title front-view-title">sFTP là gì và cách sử dụng sFTP để di chuyển dữ liệu trên máy chủ Linux [NEW]</h4> </header> </a> </article><!--.post.excerpt--> <article class="post excerpt "> <a href="https://wordpresstipsaz.com/4-cach-thiet-lap-tinh-nang-an-toan-cho-tre-nho-tren-windows-10-new/" title="4 cách thiết lập tính năng an toàn cho trẻ nhỏ trên Windows 10 [NEW]" id="featured-thumbnail"> <div class="featured-thumbnail"> <img fifu-featured="1" width="210" height="150" src="https://dieuhau-media-storage.s3-accelerate.amazonaws.com/2020/12/acc-family.png" class="attachment-schema-lite-related size-schema-lite-related wp-post-image" alt="4 cách thiết lập tính năng an toàn cho trẻ nhỏ trên Windows 10 [NEW]" loading="lazy" title="4 cách thiết lập tính năng an toàn cho trẻ nhỏ trên Windows 10 [NEW] 2"> </div> <header> <h4 class="title front-view-title">4 cách thiết lập tính năng an toàn cho trẻ nhỏ trên Windows 10 [NEW]</h4> </header> </a> </article><!--.post.excerpt--> <article class="post excerpt last"> <a href="https://wordpresstipsaz.com/5-xu-huong-seo-can-chuan-bi-cho-nam-2017-new/" title="5 xu hướng SEO cần chuẩn bị cho năm 2017 [NEW]" id="featured-thumbnail"> <div class="featured-thumbnail"> <img fifu-featured="1" width="210" height="150" src="https://dieuhau.com/wp-content/uploads/2017/02/SEO-trending-1024x576.jpg" class="attachment-schema-lite-related size-schema-lite-related wp-post-image" alt="5 xu hướng SEO cần chuẩn bị cho năm 2017 [NEW]" loading="lazy" title="5 xu hướng SEO cần chuẩn bị cho năm 2017 [NEW] 3"> </div> <header> <h4 class="title front-view-title">5 xu hướng SEO cần chuẩn bị cho năm 2017 [NEW]</h4> </header> </a> </article><!--.post.excerpt--> </div> <!-- You can start editing here. --> </div> </div> </article> <aside class="sidebar c-4-12"> <div id="sidebars" class="sidebar"> <div class="sidebar_list"> <div id="search-2" class="widget widget_search"><form method="get" id="searchform" class="search-form" action="https://wordpresstipsaz.com" _lpchecked="1"> <fieldset> <input type="text" name="s" id="s" value=""> <input type="submit" value="Search" /> </fieldset> </form> </div><div id="block-3" class="widget widget_block"><div class="wp-container-1 wp-block-group"><div class="wp-block-group__inner-container"><h2>Bài viết mới</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://wordpresstipsaz.com/lam-the-nao-de-xoa-tinh-nang-tu-dong-xoa-rac-trong-thu-muc-rac-new/">Làm thế nào để xoá tính năng tự động xóa rác trong thư mục Rác [NEW]</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://wordpresstipsaz.com/11-loi-email-marketing-ma-nguoi-dung-wordpress-nen-tranh-new/">11 Lỗi Email Marketing mà người dùng WordPress nên tránh [NEW]</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://wordpresstipsaz.com/10-ly-do-ban-khong-nen-tu-host-video-cua-chinh-minh-new/">10 lý do bạn không nên tự host video của chính mình [NEW]</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://wordpresstipsaz.com/lam-the-nao-sua-loi-upload-failed-to-write-file-to-disk-new/">Làm thế nào sửa lỗi Upload: Failed to write file to disk [NEW]</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://wordpresstipsaz.com/nhung-cach-don-gian-de-bao-ve-trang-wordpress-cua-ban-new/">Những cách đơn giản để bảo vệ trang WordPress của bạn [NEW]</a></li> </ul></div></div></div><div id="block-5" class="widget widget_block"><div class="wp-container-2 wp-block-group"><div class="wp-block-group__inner-container"><h2>Lưu trữ</h2><ul class=" wp-block-archives-list wp-block-archives"> <li><a href='https://wordpresstipsaz.com/2022/07/'>Tháng Bảy 2022</a></li> </ul></div></div></div><div id="block-6" class="widget widget_block"><div class="wp-container-3 wp-block-group"><div class="wp-block-group__inner-container"><h2>Chuyên mục</h2><ul class="wp-block-categories-list wp-block-categories"> <li class="cat-item cat-item-1"><a href="https://wordpresstipsaz.com/blog/">Blog</a> </li> </ul></div></div></div> </div> </div><!--sidebars--> </aside> </div> </div> <footer id="site-footer" role="contentinfo" itemscope itemtype="http://schema.org/WPFooter"> <!--start copyrights--> <div class="copyrights"> <div class="container"> <div class="row" id="copyright-note"> <span><a href="https://wordpresstipsaz.com/" title="">wordpresstipsaz.com</a> Copyright © 2022.</span> <div class="top"> <a href="//www.dmca.com/Protection/Status.aspx?ID=2968cbe5-7a7e-4bcb-935e-43e86744dddc" title="DMCA.com Protection Status" class="dmca-badge"> <img src="https://images.dmca.com/Badges/dmca_protected_sml_120l.png?ID=2968cbe5-7a7e-4bcb-935e-43e86744dddc" alt="DMCA.com Protection Status" /></a> <a href="#top" class="toplink">Back to Top ↑</a> </div> </div> </div> </div> <!--end copyrights--> </footer><!-- #site-footer --> <style>.wp-container-1 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-1 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-1 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style> <style>.wp-container-2 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-2 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-2 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style> <style>.wp-container-3 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-3 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-3 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style> <script type='text/javascript' id='toc-front-js-extra'> /* <![CDATA[ */ var tocplus = {"visibility_show":"show","visibility_hide":"hide","width":"Auto"}; /* ]]> */ </script> <script type='text/javascript' src='https://wordpresstipsaz.com/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2106' id='toc-front-js'></script> <script type='text/javascript' id='fifu-image-js-js-extra'> /* <![CDATA[ */ var fifuImageVars = {"fifu_lazy":"","fifu_woo_lbox_enabled":"1","fifu_woo_zoom":"inline","fifu_is_product":"","fifu_is_flatsome_active":"","fifu_rest_url":"https:\/\/wordpresstipsaz.com\/wp-json\/","fifu_nonce":"3242880637"}; /* ]]> */ </script> <script type='text/javascript' src='https://wordpresstipsaz.com/wp-content/plugins/featured-image-from-url/includes/html/js/image.js?ver=4.0.6' id='fifu-image-js-js'></script> </body> </html>