Chào các bạn, trong phần này mình sẽ hướng dẫn chuyên sâu một chút cho Nevo theme, thực ra cũng không có gì phức tạp lắm. Hãy cùng bắt đầu nhé!
Adding CSS
CSS là tùy chỉnh bằng code cho theme giúp bạn tự do copy theo ý muốn mà không phụ thuộc vào giao diện mà tác giả làm sẵn cho bạn.
Vậy, muốn add CSS thì phải làm thế nào?
Sử dụng plugin Simple Custom CSS and JS
Cách đơn giản nhất là sử dụng plugin. Nếu như bạn chép thẳng vào additional CSS của theme mà không dùng child theme thì khi update bản mới, tùy chọn của bạn sẽ bị mất.
Đây là link tải plugin: https://wordpress.org/plugins/custom-css-js/
Sử dụng plugin WP Codebox.
Đây là một plugin trả phí và chất lượng cao. Mình thường dùng plugin này và cài cho tất cả các site khách hàng của mình.

Mình đánh giá đây là plugin tiện lợi, nhiều tính năng nâng cao, giúp bạn tùy chỉnh, thêm bớt, quản lí code dễ dàng.

Sử dụng child theme, add CSS vào additional CSS hoặc file Style.css
Để sử dụng child theme, bạn có thể dùng plugin để tạo child theme riên cho mình.
Bạn có thể tham khảo plugin này tại đây: https://wordpress.org/plugins/child-theme-configurator/
Hoặc bạn cũng có thể tạo thủ công 1 folder: trong đó có 3 file: function.php, style.css và screenshot.png. Trong đó, mình sẽ chỉnh file style.css như sau:
/*
Theme Name: Quick Site
Theme URI: https://quicksite.vn/
Description: Được thiết kế bởi David Ha
Author: David Ha
Author URI: https://quicksite.vn/
Template: nevo
Version: 0.1
*/CSSVà file function.php
<?php
/**
* Nevo child theme functions and definitions.
* Add your custom PHP in this file.
*/PHPQuá đơn giản phải không nào! Vậy chúng ta bắt đầu học cách sử dụng nâng cao nhé!
Local google font
Tại sao lại phải local Google font mà không sử dụng API, đơn giản là vì gọi font từ bên thứ 3 phải phụ thuộc vào host bên google, mà tốc độ của nó không bao giờ bằng hosting của bạn được. Chưa kể là nó sẽ add thêm nhiều request làm chậm website.
Đầu tiên, chúng ta dùng code này để disable toàn bộ google font đi:
<?php
add_action('template_redirect', 'nevo_disable_google_fonts');
function nevo_disable_google_fonts() {
ob_start('nevo_disable_google_fonts_regex');
}
function nevo_disable_google_fonts_regex($html) {
$html = preg_replace('/<link[^<>]*\/\/fonts\.(googleapis|google|gstatic)\.com[^<>]*>/i', '', $html);
return $html;
}PHPSau đó, chúng ta vào child theme tạo 1 folder là font và truy cập vào đường link này: https://gwfh.mranftl.com/fonts
Chọn font bạn cần, bạn chỉ cần tick vào ô Latin và Vietnamese là được. Mình lấy 400, 500, 600, 700, 800, 900 và italic. Tùy thuộc vào nhu cầu của bạn.
Sau đó bạn chọn “Morden Browsers” và tải file ZIP về. Upload vào thư mục child theme của bạn.
Ví dụ của mình là Quicksite/font/abcxyz tên font. Thì mình sẽ bỏ tên font đi và copy đường dẫn vào ô trở trên để nó generate CSS giúp mình.
Đây là CSS mình có:
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: url('https://cdn.quicksite.vn/wp-content/themes/Quicksite/font/nunito-v25-latin_vietnamese-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}PHPĐường dẫn mà mình lấy là đoạn này: https://cdn.quicksite.vn/wp-content/themes/Quicksite/font/
Sau đó, bạn copy CSS vào và ra ngoài chỉnh font như bình thường. Như vậy là bạn đã local thành công font của mình rồi.
Add field thông tin liên lạc và mạng xã hội cho author box
Để add file thông tin liên lạc và mạng xã hội cho web của bạn, bạn dùng code như sau:
<?php
//Extend user social profiles
add_filter( 'user_contactmethods', 'nevo_user_social_profiles' );
if ( !function_exists( 'nevo_user_social_profiles' ) ):
function nevo_user_social_profiles( $contactmethods ) {
$social = nevo_get_user_social();
foreach ( $social as $soc_id => $soc_name ) {
if ( $soc_id ) {
$contactmethods[$soc_id] = $soc_name;
}
}
return $contactmethods;
}
endif;
//Get array of social options
if ( !function_exists( 'nevo_get_user_social' ) ) :
function nevo_get_user_social() {
$social = apply_filters( 'nevo_modify_user_social',
array(
'facebook' => 'Facebook',
'twitter' => 'Twitter',
'instagram' => 'Instagram',
'pinterest' => 'Pinterest',
)
);
return $social;
}
endif;PHPSau đó bạn vào User (Thành viên) và điền thông tin như bình thường.
Tự động dùng tên ảnh làm ALT khi upload vào media
Code này rất tiện dụng để generate ALT tự động và tốt cho SEO.
<?php
// Automatically set the image Title, Alt-Text, Caption & Description
add_action( 'add_attachment', 'aita_image_meta_title_alt' );
function aita_image_meta_title_alt( $post_ID ) {
// Check if attachment is an image
if ( wp_attachment_is_image( $post_ID ) ) {
// Get file name and clean it from non-alphanumerical characters
$my_image_title = get_post( $post_ID )->post_title;
$my_image_title = preg_replace( '%\s*[-_\s]+\s*%', ' ', $my_image_title );
// Convert to capital letter the first letter of each word
$my_image_title = ucwords( strtolower( $my_image_title ) );
// Create an awway with the image meta tags
$my_image_meta = array(
'ID' => $post_ID,
'post_title' => $my_image_title,
//'post_excerpt' => $my_image_title,
//'post_content' => $my_image_title,
);
// Set the Alt Text tag
update_post_meta( $post_ID, '_wp_attachment_image_alt', $my_image_title );
// Set the title of the image
wp_update_post( $my_image_meta );
}
}
PHPSử dụng SMTP không cần plugin
Đầu tiên bạn add code này vào file function.php hoặc dùng plugin quản lý code add vào.
<?php
//* Add SMTP Email Function
add_action( 'phpmailer_init', 'my_phpmailer_smtp' );
function my_phpmailer_smtp( $phpmailer ) {
$phpmailer->isSMTP();
$phpmailer->Host = SMTP_server;
$phpmailer->SMTPAuth = SMTP_AUTH;
$phpmailer->Port = SMTP_PORT;
$phpmailer->Username = SMTP_username;
$phpmailer->Password = SMTP_password;
$phpmailer->SMTPSecure = SMTP_SECURE;
$phpmailer->From = SMTP_FROM;
$phpmailer->FromName = SMTP_NAME;
}
PHPSau đó bạn vào wp-cofig.php và thêm đoạn này vào và cấu hình:
//* SMTP Email Settings
define( 'SMTP_username', 'tên địa chỉ email của bạn' );
define( 'SMTP_password', 'mật khẩu' );
define( 'SMTP_server', 'hosting gửi mail bạn đang dùng' );
define( 'SMTP_FROM', 'gửi mail từ địa chỉ nào' );
define( 'SMTP_NAME', 'tên bạn muốn hiển thị' );
define( 'SMTP_PORT', '465' );
define( 'SMTP_SECURE', 'ssl' );
define( 'SMTP_AUTH', true );
define( 'SMTP_DEBUG', 0 );PHPOk, như vậy là mình đã hướng dẫn xong phần 9 rồi. Chúc các bạn may mắn và thành công nhé!









