Trong quá trình xây dựng website bằng wordpress, chắc hẳn các bạn đã gặp rất nhiều trường hợp tiêu đề bài viết quá dài dẫn tới việc hiển thị trên giao diện bị xô lệch rất xấu, không cân đối. Bài viết này Mạnh sẽ hướng dẫn các bạn sửa lỗi này một cách đơn giản nhất.
Tại tất cả vị trí trong theme, khi muốn hiển thị tiêu đề bài viết thì ta dùng hàm “the_title()” của wordpress được lập trình trong file “/wp-includes/post-template.php“, việc này là đương nhiên, khi bạn xem toàn bộ bài viết đó. Tuy nhiên, tại các vị trí khác của website như trang chủ, trang danh sách bài viết, khu vực bài viết liên quan, bài viết mới,… giao diện sẽ chỉ hiển thị đẹp và cân đối khi tiêu đề bài viết được giới hạn ở độ dài ký tự nhất định.
Mình đã lướt qua rất nhiều hướng dẫn của các bạn ở trên internet, hầu như là copy của nhau nhưng phương pháp mất nhiều tác vụ xử lý, gây khó cho các bạn không hiểu về lập trình khi muốn thay đổi việc này. Một số bạn chọn cách tìm kiếm cac plugin có sẵn đề cài đặt và điều chỉnh mà không cần biết lập trình. Việc này sẽ làm hệ thống website sẽ có thể nặng thêm, xử lý mất thời gian hơn.
Vì vậy, Mạnh sẽ hướng dẫn các bạn sửa lỗi này rất đơn giản mà không phải thay đổi hàm the_title() ở các vị trí cần hiển thị, ảnh hưởng tới cả việc cấu hình website, thay đổi giao diện sau này khi bạn muốn. Bạn chỉ cần thực hiện với 3 bước như sau:
Bước 1:
– Truy cập vào thư mục wp-includes của website nơi lữu trữ file post-template.php mà bạn cần tìm (/wp-includes/post-template.php)
– Mở file post-template.php trong thư mục wp-includes của website ra
Bước 2:
– Tìm tới dòng 42 có Function the_title(…)
– Tiếp tục chuyển tới dòng 48 và thêm đoạn code bên dưới vào, mình giới hạn độ dài của tiêu đề là 30 ký tự. Bạn có thể thay đổi tùy ý vào giao diện phù hợp:
// Neu khong phai xem bai viet thi hien thi title ngan – Duc Manh
// Rieng Mobile thi luc nao cung hien thi full title
if (!is_single() AND !wp_is_mobile()) {
$title = html_entity_decode($title, ENT_QUOTES, “UTF-8”);
$limit_title = “30”; // Thay bang so ban muon
$pad_title = “…”;
if (strlen($title) >= ($limit_title + 3)) {
$title = mb_substr($title, 0, $limit_title).$pad_title;
}
}
– Khi đó bạn có code hoàn thiện Function the_title(…) đầy đủ như sau, bạn có thể chọn cách thay thế toàn bộ Function the_title(…) này cũng được:
function the_title( $before = ”, $after = ”, $echo = true ) {
$title = get_the_title();
if ( strlen( $title ) == 0 ) {
return;
}
// Neu khong phai xem bai viet thi hien thi title ngan – Duc Manh
// Rieng Mobile thi luc nao cung hien thi full title
if (!is_single() AND !wp_is_mobile()) {
$title = html_entity_decode($title, ENT_QUOTES, “UTF-8”); // Xu ly font chu tieng Viet
$limit_title = “30”; // Thay bang so ban muon
$pad_title = “…”;
if (strlen($title) >= ($limit_title + 3)) {
$title = mb_substr($title, 0, $limit_title).$pad_title;
}
}
$title = $before.$title.$after;
if ($echo) {
echo $title;
} else {
return $title;
}
}
Bước 3:
– Lưu lại file post-template với định dạng font chữ UTF-8 thay vì ANSI
– Nếu làm ở máy tính cá nhân thì bạn cần Upload đè file post-template vào thư mục wp-includes của website.
* Lưu ý:
– Hàm fix ở trên này loại trừ thiết bị di động nhé các bạn. Vì trên thiết bị di động giao diện của website sẽ được bố trí các nội dung theo chiều dọc, rất ít theo chiều ngang vì màn hình nhỏ. Do đó, khi hiển thị đầy đủ tiêu đề bài viết cũng không ảnh hưởng gì cả.
– Nếu bạn muốn trên thiết bị di động vẫn rút gọn tiêu đề như trên máy tính thì bạn bỏ đoạn “ AND !wp_is_mobile() ” đi là được nhé!
Vậy là bạn có thể thưởng thức website của mình với tiêu đề được rút gọn trong danh sách, giúp giao diện đẹp mắt, gọn gàng hơn. Cho dù sau này bạn có cài đặt plugin hay module nào khác, đổi giao diện,… thì function the_title() cũng không bị thay đổi.
Chúc các bạn thành công.