8 đoạn code hữu ích cho website

8 đoạn code hữu ích cho website

Functions.php là gì?

Bất cứ ai từng làm việc với source code WordPress, dù là chuyên hay không chuyên hẳn đều quá quen thuộc với cái tên functions.php. Giới thiệu luôn cho những ai chưa biết, đây là một file thần thánh bắt buộc phải có trong mọi plugin lẫn theme, trong đó chứa các hàm, action/filter cần thiết của theme/plugin và luôn được WordPress thực thi đầu tiên trước khi render thành giao diện hoàn chỉnh.

Do vậy, việc tuỳ chỉnh trang web WordPress không còn bị giới hạn bởi giao diện trên trang Admin nữa, mà với 32 đoạn code vô cùng hữu ích mà mình sẽ giới thiệu dưới đây, sẽ giúp ích hơn rất nhiều cho bạn khi mở rộng cũng như tuỳ biến chức năng website WordPress mà vẫn đảm bảo hạn chế sử dụng plugin.

Lưu ý

Nếu bạn chỉnh sửa file functions.php của theme, chỉnh sửa của bạn chỉ có tác dụng khi theme còn được kích hoạt. Trường hợp chuyển theme, nhất thiết phải copy những chỉnh sửa ấy sang file functions.php của theme mới nhé.

Có nhiều cách để chỉnh sửa file này. Sử dụng FTP, hoặc giao diện quản lý file của hosting mà bạn đang dùng chẳng hạn.

1. Xoá bỏ phiên bản WordPress khỏi source code website

Việc này nhằm cải thiện một chút mức độ bảo mật của Website WordPress, nhằm tránh việc kẻ xấu biết được phiên bản WordPress bạn đang dùng và tấn công dựa trên các lỗ hổng được documented từ trước. Thêm đoạn code này vào file functions.php (nên thêm vào cuối file)

 function wpb_remove_version() { return '';}add_filter('the_generator', 'wpb_remove_version');

2. Thay thế logo mặc định trong trang Admin thành logo của bạn

Chuẩn bị một file logo (tốt nhất là file PNG), kích thước 16 x 16px. Upload file logo này vào thư mục của theme (ví dụ: /public_html/wp-content/themes/<theme-của-bạn>/images/). Sau đó thêm đoạn code sau vào functions.php

function wpb_custom_logo() { echo ' <style type="text/css"> #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before { background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/custom-logo.png) !important; background-position: 0 0; color:rgba(0, 0, 0, 0); } #wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon { background-position: 0 0; } </style> ';}add_action('wp_before_admin_bar_render', 'wpb_custom_logo');

3. Thay đổi dòng chữ phía dưới cùng trang Admin

Mặc định dòng chữ này sẽ là “Cảm ơn bạn đã khởi tạo với WordPress. Phiên bản 4.7.3” (nếu bạn dùng WordPress tiếng Việt). Đôi lúc bạn muốn thay thế nó bằng dòng chữ có liên quan đến công ty bạn, vậy thì hãy thêm đoạn code này

function remove_footer_admin () { // ahihi echo '© 2017 <strong>Blog CODE</strong>. Thiết kế và phát triển bởi <a href="https://www.facebook.com/MyOwnGrave" rel="nofollow"><strong>Hùng Phong</strong></a> (aka <a href="https://www.instagram.com/my_own_grave/" rel="nofollow"><strong>my_own_grave</strong></a>). Hỗ trợ bởi <a href="https://wordpress.com/" rel="nofollow"><strong>Wordpress.com</strong></a>';}add_filter('admin_footer_text', 'remove_footer_admin');

4. Thêm một Panel mới vào trang Admin Dashboard

Giao diện trang Admin dashboard được chia ra thành nhiều Panel khác nhau, và may mắn thay là bạn cũng hoàn toàn có thể tự thêm một Panel của riêng mình vào trang Dashboard để làm trò mèo gì đó. Dưới đây chỉ là một ví dụ để bạn biết cách thêm Panel đơn giản nhất, còn chi tiết thì xem thêm ở WordPress Developer – Dashboard Widget API.

add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');function my_custom_dashboard_widgets() { global $wp_meta_boxes; wp_add_dashboard_widget('custom_help_widget', 'Theme Support', 'custom_dashboard_help');}function custom_dashboard_help() { echo '<p>Welcome to BlogCode Theme! Cần tui giúp gì hông? Gửi mail vô <a href="mailto:yourusername@gmail.com">đây</a> nhé :). Xem những bài viết về WordPress của tui tại <a href="https://blogcode.hungphongbk.com" target="_blank">đây</a></p>';}

5. Thêm kích cỡ ảnh uploaded cho WordPress

Mỗi khi bạn upload ảnh vào mục Phương tiện, mặc định WordPress sẽ tạo thêm ba phiên bản kích thước khác nhau của file ảnh gốc, khi chèn hình vào ảnh ta nên chọn kích thước tuỳ chỉnh này thay cho ảnh gốc nhằm giảm bớt dung lượng ảnh. 3 kích thước đó gồm:

  1. thumbnail – mặc định 150 x 150px
  2. medium – mặc định 300x x300px
  3. large – mặc định 640 x 480px

Trường hợp bạn muốn thêm một kích thước tuỳ chỉnh khác, chỉ việc làm như dưới đây

// Tham số đầu tiên là tên cho kích thước ảnh, như thumbnail, medium và large của mặc địnhadd_image_size( 'sidebar-thumb', 120, 120, true ); // WP sẽ crop ảnh khi uploadadd_image_size( 'homepage-thumb', 220, 180 ); // WP không crop ảnh, nhưng ảnh hiển thị ra sẽ fix cứng size 220 x 180pxadd_image_size( 'singlepost-thumb', 590, 9999 ); // Không crop, chiều rộng cố định 590px, chiều cao tuỳ vào tỉ lệ ảnh

Để hiển thị ảnh với kích thước tuỳ chỉnh trong theme của bạn, chèn code này vào bất cứ template file nào trong thư mục theme như index.php, single-post.php, archive.php, ...

<?php the_post_thumbnail( 'homepage-thumb' ); ?>

6. Thay đổi dòng chữ “Xem thêm” mặc định

Khi liệt kê nhiều post, WordPress sẽ tóm tắt nội dung post trong vài chục từ và kết thúc bằng link “…Xem thêm” dẫn đến nội dung đầy đủ của post. Để thay đoạn “…Xem thêm” này bằng một dòng chữ khác tuỳ ý bạn, sử dụng đoạn code này

function modify_read_more_link() { return '<a class="more-link" href="' . get_permalink() . '">...muốn đọc tiếp hơm? Vô đây coi nè :v</a>';}add_filter( 'the_content_more_link', 'modify_read_more_link' );

7. Tự động link ảnh đại diện của bài viết đến nội dung

Khi hiển thị hình ảnh trên Website, đôi lúc bạn click vào hình ảnh và trình duyệt lại dẫn đến đường dẫn của ảnh để xem kích thước đầy đủ. Giả sử ảnh này là ảnh đại diện của một bài viết nào đó, và bạn muốn người dùng được dẫn đến bài viết khi click vào ảnh, thì đây là tips cho bạn

function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) { if (! is_singular()) {  $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>'; return $html; } else {  return $html; }}add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );

8. Cho phép WordPress upload nhiều kiểu file hơn

Mặc định WordPress giới hạn định dạng file được upload, xem tại đây. Để upload được file khác, ví dụ bản vẽ photoshop hoặc file ảnh SVG chẳng hạn, thêm đoạn code này

function my_myme_types($mime_types){ $mime_types['svg'] = 'image/svg+xml'; //Adding svg extension $mime_types['psd'] = 'image/vnd.adobe.photoshop'; //Adding photoshop files return $mime_types;}add_filter('upload_mimes', 'my_myme_types', 1, 1);

Bài viết được dựa trên nội dung của WP Beginner – 32 Extremely Useful Tricks for the WordPress Functions File, có kết hợp với một số tips dựa trên kinh nghiệm của riêng mình

32 đoạn code vô cùng hữu ích cho website WordPress của bạn (phần 1)

Bình luận

bình luận

Share this post