Tổng Hợp Code Chức Năng Website WordPress

Tổng hợp một số code cho Theme Flatsome và cũng có thể tương thích với các mẫu theme wordpress khác !

Bổ Xung Chức Năng Web WP

Các code liên quan tới bảo mật, ẩn hiện một vài chức năng như bình luận, tối ưu bài viết…

Lưu ý: Các code này mình tổng hợp lưu tại đây để mình sử dụng trong các dự án web của mình, nếu ai ngó qua thấy hợp lý thì xài …thoải mái nhé !

Thay thế plugin classic editor

Bình thường cài wordpress từ 5.0 trở đi thì sẽ ko còn phiên bản nhập liệu kiểu cũ nữa! Thay vào đó là kiểu nhập liệu theo Block Editor / Gutenberg

Ai chưa quen & nên phải cài thêm plugin classic editor

Code thay thế plugin classic editor

Với Block editor

add_filter('use_block_editor_for_post', '__return_false');

Với Gutenberg

add_filter('gutenberg_can_edit_post_type', '__return_false');

Ah quên, thêm code trên vô file: funtion.php trong theme nhé ^^

Xóa khoảng trống

//Xóa khoang trang do trinh soan thao
function remove_auto_p_tinymce($in) {
$in['forced_root_block'] = "";
$in['force_p_newlines'] = true;
return $in;
}
add_filter( 'tiny_mce_before_init', 'remove_auto_p_tinymce' );
//Ket thuc

Toàn tập về 301

301 là gì ? nếu chửa biết thì ngó qua bài Status code Http

Nói chung thì 301 là siêu quan trọng trong Web & SEO . Bởi khi có những thay đổi để tránh nguy cơ bị lỗi 404 hay mất thứ hạng SEO trong công cụ tìm kiếm thì giải pháp 301 là chuẩn men nhất !

Vài vấn đề về 301 trong WP

  • Nếu sửa link bài viết đã tồn tại thì nên 301 ngay. Có thể xài plugin 301 để hỗ trợ. Hoặc xài Yoast SEO Pro thì nó có sẵn chức năng Redirect tự động luôn.

Permalink là cấu trúc link một web bất kỳ, Thường khi cài đặt mới thì admin đã lựa chọn 1 cấu trúc chuẩn để sử dụng. Tuyệt đối ko sửa cấu trúc link ! Đó là cảnh báo rõ ràng trong setting permalink

Nhưng, đời không như là mơ ! Có lúc vẫn phải làm điều cấm kỵ trên ! Bởi nhiều lý do…abc…xyzzzz

Thì lại phải nhớ về 301 nhé. Redirect toàn bộ link cũ về link cấu trúc mới. Làm thế nào thì tùy hoàn cảnh.

  • Ví dụ web: www.domain.com/postname/
  • Tôi muốn sửa thành: www.domain.com/category/postname/  ?

Phương án 1

1- vô Setting / permalink  >>sửa theo cấu trúc mới

2- Cài đặt: Permalink Redirect

Gần như là xong. Chỉ cần điển cấu trúc link cũ vào ô Old Permalink Structures là xong !

Phương án 2

Code to file .htacess

Code Redirect 301 Http - Htpps

Đây là giải pháp thay thế: Plugin Really Simple SSL

Thêm code dưới vô file .htacess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

ngược lại gỡ bỏ Https to Http

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} ^443$
RewriteRule ^(.*)$ http://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

tạo breadcrumb vs yoast seo

Một vài theme ko hỗ trợ Breadcrumb 🙁 Nên chúng ta phải tự túc thêm breadcrumb bằng tayyyy. Có thể thêm code nếu bạn rành, ko thì xài plugin, nếu bạn đang xài YoastSEO Pro thì sao ko dùng tính năng Breadcrumb của chính nó ?

YoastSEO có nhiều cái hay …ho..

^^ YoastSEO có nhiều cái hay thiệt đó !

Với YoastSEO Free là bạn có thể xài khá OK

  • Hỗ trợ tối ưu bài viết, tối ưu từ khóa
  • Gợi ý điều hướng link bài viết liên quan

YoastSEO PRO sẽ hỗ trợ thêm tính năng Premium

  • Báo lỗi từ Google Search Console
  • Tạo Redirect cho các lỗi liên lết 301, 410,…
  • Khi bạn xóa bài, hay sửa bài viết, sửa link nó sẽ tự động gợi ý redirect link luôn
  • …thêm gợi ý từ khóa mở rộng…
  • Tạo breadcrumb… chi tiết dưới
  • …vân…vân & mây…mây… 😉

YoastSEO PRO có phần tọa breadcrumb và chỉ cần chèn code theo hướng dẫn của yoast là ok. Tuy nhiên có vài thứ chưa được đẹp đẽ cho lắm ~ nên cần cân chỉnh lại chút xíu ~

Như blog này nhé: Theme Flatsome chỉ hỗ trợ breadcrumb cho trang sản phẩm, not support for blog ! vậy nên mình phải tối ưu thêm >> chính xác hơn là quay tayyy thêm breadcrumb !

NHƯNG cho theo code nguyên bản của Yoast bị vẹo quá nên cần thêm dòng nữa

Code:

<div class="page-title-inner flex-row medium-flex-wap container">
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>');
}
?>
</div>

Breadcrumb hỗ trợ SEO tốt hơn !

Tất nhiên rồi, breadcumb là một thanh điều hướng thông minh. Giống như bạn đang đi trên đường , các biển chỉ đường sẽ cho bạn biết bạn đang ở đâu, sắp đi tới đâu, quay lại chỗ cũ thế nào ?

  • Breadbcrum là như vậy ! Sẽ chỉ cho người đọc biết mình đang ở đâu? Thuộc chuyên mục nào?
  • Breeadcrumb sẽ giúp người đọc không “lạc đường” trong website nhiều nội dung, nhiều chuyên mục khác nhau !
  • Những web có Breadcrumb sẽ được Google đánh giá cao hơn web tương tự mà không có ? Chắc chắn rồi !

Nên chốt lại là có Breadcrumb sẽ hỗ trợ SEO tốt hơn ^^

P/s: Web này là xài YoastSEO PRO – Theme Flatsome / Breadcrumb code như bài viết này !

Loại Bỏ URL Box Comment

Code giúp loại bỏ ô URL trong hộp bình luận mặc định của WP

/*************** Remove URL of Comment Box ***************/
add_filter('comment_form_default_fields', 'unset_url_field');
function unset_url_field($fields){
if(isset($fields['url']))
unset($fields['url']);
return $fields;
}

Chạy nhiều domain trên 01 web

Đầu tiên phải tiến hành add domain vô Host. Trỏ IP trong DNS domain về Host. Có thể xài plugin: Multiple Domain

Giải pháp Canonical Link để tránh trùng lặp nội dung khi website của bạn có nhiều domain cùng trỏ về

Thêm code dưới đây vô file function.php

Nếu chưa rõ Canonical là gì thì xem: Thuật Ngữ SEO

Code chức năng import ảnh bằng copy & paste

Giải pháp copy một bài viết có hình ảnh từ web khác về website của mình ? Mà không phải saved ảnh rồi upload hình ảnh lên ?

Một giải pháp cực hay thay thế một vài plugin nào đó ~ khá đắt tiền !

Code dưới đây có khả năng sẽ giúp giản hóa công việc nhờ việc web sẽ tự động import hình ảnh sau khi copy/paste vào bài viết. Việc còn lại chỉ là edit bài viết cho đẹp rồi >> Publish !

Code >>Copy >> Paste in Function file.Code trên sẽ chèn vô file function trên theme nhé

//========================================
class Auto_Save_Images{
function __construct(){
add_filter( 'content_save_pre',array($this,'post_save_images') );
}
function post_save_images( $content ){
if( ($_POST['save'] || $_POST['publish'] )){
set_time_limit(240);
global $post;
$post_id=$post->ID;
$preg=preg_match_all('/<img.*?src="(.*?)"/',stripslashes($content),$matches);
if($preg){
foreach($matches[1] as $image_url){
if(empty($image_url)) continue;
$pos=strpos($image_url,$_SERVER['HTTP_HOST']);
if($pos===false){
$res=$this->save_images($image_url,$post_id);
$replace=$res['url'];
$content=str_replace($image_url,$replace,$content);
}
}
}
}
remove_filter( 'content_save_pre', array( $this, 'post_save_images' ) );
return $content;
}
function save_images($image_url,$post_id){
$file=file_get_contents($image_url);
$post = get_post($post_id);
$posttitle = $post->post_title;
$postname = sanitize_title($posttitle);
$im_name = "$postname-$post_id.jpg";
$res=wp_upload_bits($im_name,'',$file);
$this->insert_attachment($res['file'],$post_id);
return $res;
}
function insert_attachment($file,$id){
$dirs=wp_upload_dir();
$filetype=wp_check_filetype($file);
$attachment=array(
'guid'=>$dirs['baseurl'].'/'._wp_relative_upload_path($file),
'post_mime_type'=>$filetype['type'],
'post_title'=>preg_replace('/.[^.]+$/','',basename($file)),
'post_content'=>'',
'post_status'=>'inherit'
);
$attach_id=wp_insert_attachment($attachment,$file,$id);
$attach_data=wp_generate_attachment_metadata($attach_id,$file);
wp_update_attachment_metadata($attach_id,$attach_data);
return $attach_id;
}
}
new Auto_Save_Images();
//========================================

Code này được một bạn Share trên Facebook Group Flatsome VN

How to Fix 404 on AMP pages after deactivating the AMP plugin

Tâm hư: sau khi xài AMP thì thấy NHANH QUÁ ! nhưng không hiệu quả hơn trong SEO & không tối ưu được cho quảng cáo adsense ! ..v.v.. Mình đã quyết định bỏ AMP

Vì mình đang xài Plugin Yoast SEO PRO nên có tính năng tạo các chuyển hướng REDIRECT

Các làm thì có thể tạo từng chuyển hướng 301 đơn lẻ từng link một. Nhưng thủ công quá. Hãy dùng tính năng: Regular Expression redirects 

Ví dụ link một web của mình có AMP nè : domain.com/amp/postname.html

Cần chuyển về link cũ: domain.com/postname.html

Regular expression:

amp/(.*).html

To URL:

/$1.html

Có web thì AMP nằm cuối link, thì bạn chỉ cần đảo vị trí cho phù hợp. Hoặc link của bạn không có .html thì bỏ đi thôi !

Đã thử nghiệm thành công 99% :)) Còn trang chủ thì tạo thêm một cái 301 nữa nhé !

Ngoài ra các BRO còn có code thêm vào file .htacess Nhưng mình không thấy ngon lắm !

Responsive Bảng tính trong bài viết

Một số trường hợp bảng tính table không được tương thích tốt với màn hình nhiều kích cỡ. Nên post bài viết có bảng báo giá này nọ, bảng tính các loại… thì nên check trên các kích thước màn hình coi sao nhé!
Có thể thêm code dưới đây:

<div style="overflow-x:auto;">
- bảng tính -
</div>

Hoặc bạn có thể xài một số plugin hỗ trợ cho TABLE

Thay đổi Permalink giữ nguyên thứ hạng, tránh lỗi 404

Mình thấy cần thay đổi pernalink một website để tối ưu tốt hơn trong SEO. Sau khi thử chức năng redirect 301 có trong YoastSEO Pro vẫn không OK, tìm hiểu chức năng Regex thì chưa ra… !

Lưu ý: việc thay đổi Permalink trong web là tối lỵ, nên nghiên cứu kỹ trước khi thiết lập permalink, để tránh phải thay đổi sau khi web đã publish , index,…

Giải pháp tránh lỗi 404 khi thay đổi pernalink

  1. Nếu website ít bài viết thì có thể thực hiện bằng tay là tạo các Redirect 301 trong YoastSEO Pro / Hoặc 1 số plugin Redirect 301 khác..
  2. Nếu website có nhiều bài viết thì hãy dùng plugin: Permalink Redirect Plugin 2.0.5 >>Set up Old link >>tức là link cũ & Update là xong ! (plugin này download theo link trên nhé, ko có trong wordpress.org

Code Làm Nút Gọi - Chat - Zalo

Code Làm Nút Gọi – Chat – Zalo … thay plugin

Add code dưới vô Footer Scripts  trong theme FS nhé:

<style>.float-contact {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 99999;
}
.chat-zalo {
background: #8eb22b;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-face {
background: #125c9e;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.float-contact .hotline {
background: #d11a59!important;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-zalo a, .chat-face a, .hotline a {
font-size: 15px;
color: white;
font-weight: 400;
text-transform: none;
line-height: 0;
}
@media (max-width: 549px){
.float-contact{
display:none
}
}</style>
<div class="float-contact">
<button class="chat-zalo">
<a href="http://zalo.me/098xxxxx">Chat Zalo</a>
</button>
<button class="chat-face">
<a href="http://m.me/thenaynhe82">Chat Facebook</a>
</button>
<button class="hotline">
<a href="tel:098xxxxx">Hotline: 098xxxxx</a>
</button>
</div>

Điều chỉnh kích thước màn hình hiển thị nút gọi này từ dòng @media . Hiện tại chỉ hiển thị nút gọi trên desktop
Nguồn từ bạn giuseart.com

P/s: Với các theme ko có theme option / footer scripts thì chúng ta cần tìm file footer.php

Rồi add code trên vô giữa thẻ đóng </body></html>

Redirect from www to non www

Thêm code vô .htacess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.thenaynhe.com$
RewriteRule (.*) http://thenaynhe.com/$1 [R=301,L]
</IfModule>

Redirect from non www to www

Thêm code vô .htacess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_HOST} ^thenaynhe.com$
RewriteRule (.*) http://www.thenaynhe.com/$1 [R=301,L]
</IfModule>

301 Domain to Domain

Đây là ví dụ một domain trỏ về thenaynhe.com

Thêm code vô .htacess / sửa domain của bạn trong code dưới nha

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^(.*)$ http://thenaynhe.com/$1 [R=301,L]
</IfModule>

404 to homepage

Code thay thế plugin 404 to homepage. Thêm code dưới vô file 404 trong theme. Theme ko có file 404 thì tạo file mới add code vô ! chưa bít 404 là gì ?

<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: ".get_bloginfo('url'));
exit();
?>

bảo mật worrdpress

Phần này tôi tổng hợp các giải pháp, các mẹo nhỏ,..để tăng tính bảo mật cho web wp

  1. Nên cài tối thiểu 01 plugin bảo mật như ithemesecurity hoặc Wordfence …
  2. Thay đường dẫn mặc định domain.com/wp-admin
  3. Dùng plugin Captcha để hạn chế Bots spam

ẩn hiện editor theme

Giải pháp ẩn hiện chức năng editor theme trong phần Appearance . Các bản cập nhật WP thì chức năng này luôn bị tắt đi.

Đây cũng là một phần của bảo mật, nhằm tránh người dùng vào chỉnh sửa giao diện tùy ý ~ Tất nhiên, là vì trong web có thể có nhiều user và khi ta không kiểm soát hết thì nên đóng chức năng lại. Cũng như web khi bàn giao khách hàng mà họ không có chuyên môn thì cũng nên đóng chức năng này lại !

Tìm code dưới trong file: wp-config.php (trong host / server nhé)

define( ‘DISALLOW_FILE_EDIT’, true);

  • True – Đã khóa theme editor
  • False – Mở theme editor

Thế nhé ^^

the nay nhe

bảo mật file wp-config

..tiếp tục cập nhật..

gợi ý

Chặn Hotlink

Hotlink chính là link trực tiếp đến trang web của người khác lấy các file về sử dụng trên website, có thể là file hình ảnh, video, tài liệu … Hotlink là một giải pháp cho những blog tạm, không chắc chắn và những ai hay đi copy bài người viết của các trang web khác. Hotlink sẽ làm tốn một lượng băng thông rất lớn vì các site khác lấy file trực tiếp từ host của bạn. Sau đây là cách mà bạn ngăn chặn việc đó bằng file .htaccess

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?your-site.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?your-other-domain.com [NC]
RewriteRule .(jpg|jpeg|png|gif)$ http://i.imgur.com/g7ptdBB.png [NC,R,L]

sửa lại phần your-site là tên trang web của bạn. Your-other-domain là trang web bạn cho phép hotlinking. Nếu bạn chỉ muốn duy nhất website của bạn hiển thị hình ảnh thì có thể bỏ dòng này đi

Chú ý: có những hạn chế nhất định khi sử dụng tính năng này là : Khi share bài viết web lên MXH abc.. sẽ có nguy cơ 403 hình ảnh !

P/s: Một số nhà cung cấp Host / server có tính năng Hotlink Protection sẵn trong Cpanel,. Và ta chỉ cần vô bật tính năng này lên là xong !

Disavow Link

Dưới đây là file để up vô mục từ chối liên kết của Googel Console (trước kia là Webmaster Tools)

Cấu trúc viết trong file name: disavow_links.txt

# Two pages to disavow
http://thenaynhe.com/seo/nay-no.html
http://thenaynhe.com/marketing/chien-luoc.html# One domain to disavow
domain:thenaynhe.com

Chỉ dẫn Google về Disavow Link

Trong hầu hết các trường hợp, Google có thể đánh giá liên kết nào đáng tin mà không cần hướng dẫn bổ sung, vì vậy phần lớn trang web sẽ không cần phải sử dụng công cụ này.

Bạn chỉ nên từ chối các liên kết ngược nếu:

  1. Bạn cho rằng bạn có một số lượng đáng kể các liên kết spam, giả mạo, chất lượng thấp trỏ đến trang web của mình,
  2. Các liên kết này đã dẫn đến thao tác thủ công hoặc có thể sẽ dẫn đến thao tác thủ công trên trang web của bạn. >>tham khảo tại đây

Disavow Link tại đây

Htacess

Đôi khi nghịch ngợm nghí ngoáy WP mà bị:

404 Not Found
The resource requested could not be found on this server

Lúc này cần xem lại file .htacess còn hay mất? có thể do chỉnh chọt này nọ mà nó lộn tà xộn lên thì xóa cmn đi, rồi làm lại với code mặc định dưới he !

Code mặc định của file .htaccess WordPress:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Leave a Reply

Your email address will not be published.