Tạo nút cuộn trang bằng Javascritp đơn giản, nhẹ nhàng, tình cảm

Trong bài viết trước, mình đã giới thiệu với các bạn cách tao nút cuộn back to top chỉ bằng CSS rất đơn giản. Cách làm đó có một nhược điểm đó là ít tùy biến và khi lên đầu trang nó sẽ kèm theo một cái dấu "#" ở trong URL của trang. Nếu bạn nào thích tùy biến nhiều hơn thì dùng JQuery sẽ có nhiều hiệu ứng đẹp. Nếu bạn nào chỉ muốn đơn giản, nhẹ nhàng, tình cảm thì thử dùng Javascript xem sao nhé.

• Tạo menu phụ cố định cho web trên giao diện mobile
• Tối ưu tốc độ tải trang cho wordpress 100/100 Googlespeed Insights
• Tối ưu giao diện để blogspot chuẩn SEO
• Xây dựng giao diện mobile cho blogspot

Tạo nút cuộn trang bằng Javascritp đơn giản

Mô tả

Phần này mình nói luôn để các bạn hiểu nút cuộn làm bằng Javascript thì nó sẽ khác gì với CSS. Điểm khác biệt lớn nhất là khi cuộn trang nó sẽ không có thêm cái ký tự "#" ở trong URL và chúng ta có thể điều chỉnh để nút cuộn trang này ẩn hiện theo ý muốn. Giống như kiểu chúng ta phải kéo xuống đến đâu đó thì nút cuộn mới hiện ra chẳng hạn.
Nếu nút cuộn trang này phù hợp với mong muốn của bạn thì hẵng làm nhé. Nếu không phù hợp thì đừng thử lại mất thời gian ra (vọc code mất thời gian lắm =_=).

Tạo nút cuộn trang bằng Javascritp đơn giản, nhẹ nhàng, tình cảm

Code của em nó đây:

<a id="nutbacktotop" href="javascript:void(0)" title="Back to Top"><img src="https://nhatbanonline.net/wp-content/uploads/2019/03/back-to-top.png" alt="Quay lại đầu trang"/></a>
<script>
//Khi người dùng cuộn chuột thì gọi hàm scrollFunction
    window.onscroll = function() {scrollFunction()};
    // khai báo hàm scrollFunction
    function scrollFunction() {
        // Kiểm tra vị trí hiện tại của con trỏ so với nội dung trang
        if (document.body.scrollTop > 2000 || document.documentElement.scrollTop > 2000) {
            //nếu lớn hơn 2000px thì hiện button
            document.getElementById("nutbacktotop").style.display = "block";
        } else {
             //nếu nhỏ hơn 20px thì ẩn button
            document.getElementById("nutbacktotop").style.display = "none";
        }
    }
    //gán sự kiện click cho button
    document.getElementById('nutbacktotop').addEventListener("click", function(){
        //Nếu button được click thì nhảy về đầu trang
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    });
   </script>

Còn đây là CSS của thẻ <a> bên trên

#nutbacktotop {position:fixed;bottom:10px;right:10px;z-index: 1000;}

Những chỗ có màu đỏ các bạn chú ý nhé. Phần link là link của nút cuộn trang, các bạn tự thiết kế up lại rồi thay link nhé. Còn chỗ có số 2000 thì cũng giải thích rõ trong coder rồi, khi các bạn kéo trang xuống 2000px thì nút cuộn trang nó mới hiện. Các bạn chỉnh số này cho phù hợp theo sở thích nhé.

Code trên các bạn có thể copy vào chỗ footer hoặc header thì tùy. Còn bạn nào mà chưa biết chèn code vào đâu thì xem qua bài viết Thêm bài viết liên quan trong wordpress không dùng plugin nhé. Trong bài này mình đã hướng dẫn khá chi tiết với hình ảnh rõ ràng rồi đó. Mình mới làm trên wordpress và cũng chưa thử với blogspot nhưng chắc là không vấn đề gì đâu. Bạn nào rảnh thử rồi comment bên dưới nhé. Còn demo của nút bấm này thì các bạn vào trang Nhật Bản Online theo link https://nhatbanonline.net để xem nhé.

Chúc các bạn thành công! Nếu không thành công thì ới mình, nếu biết mình sẽ giải đáp cho.

Tạo menu phụ cố định cho web trên giao diện mobile

Chào các bạn, hiện nay trải nghiệm người dùng đang được những người làm website quan tâm. Mỗi người đều có những ý kiến khác nhau về trải nghiệm người dùng. Tuy nhiên, quan trọng nhất vẫn là sở thích của mỗi người. Ngày hôm nay mình sẽ hướng dẫn các bạn cách tạo menu phụ cố định cho web trên giao diện mobile.

• Thêm bài viết liên quan trong wordpress không dùng plugin
• Xây dựng giao diện mobile cho blogspot
• Tối ưu tốc độ tải trang cho wordpress trong Googlespeed Insights

Tạo menu phụ cố định cho web trên giao diện mobile

Ý tưởng

Chả là có người xem web thường xuyên thấy khó chịu về việc không tìm thấy menu nó ở chỗ mô. Rồi thì là và mà tại sao không làm cho cái menu nó fix luôn ở trên đi bla bla bla. Vấn đề là làm vậy nó sẽ che mất một ít nội dung và nhìn cũng không đẹp lắm. Tuy nhiên có người lại thích như vậy nên mình sẽ hướng dẫn các bạn một cách làm cực kỳ đơn giản. Các bạn có thể dùng để hiển thị menu hay thông tin liên hệ đều được. Đặc biệt, cách này có thể áp dụng cho blogspot hay wordpress đều ok và rất nhẹ nhàng không làm web bị năng khi tải trang.

Code tạo menu phụ cố định cho web trên giao diện mobile

Code HTML

<div class="fixmenu">
<input type="button" id="btn1" value="Menu" style="width: 25%; height: 50px;"/>
<div id="menudichvu" class="an">
<a class="dichvu" href="#">Dịch vụ 1</a>
<a class="dichvu" href="#">Dịch vụ 2</a>
<a class="dichvu" href="#">Dịch vụ 3</a>
<a class="dichvu" href="#">Dịch vụ 4</a>
<a class="dichvu" href="#">Dịch vụ 5</a>
<a class="dichvu" href="#">Dịch vụ 6</a>
</div>
        <script language="javascript">
var x = document.getElementById("menudichvu");
            document.getElementById("btn1").onclick = function () {
if (x.className === "an") {
                document.getElementById("menudichvu").style.display = 'block';
x.className ="hien";
} else {
document.getElementById("menudichvu").style.display = 'none';
x.className ="an";
}
            };
        </script>
</div>

Code CSS

#menudichvu {display:none;}
a.dichvu {display:block; background:#dedbdb;color: black;margin-bottom:2px;text-align:center;padding: 15px 5px 15px 5px;text-decoration:none}
a:hover.dichvu {background:#a3a3a3;color:white;}
#menudichvu {background-color:#63687a;min-height: 180px;}
.fixmenu {display:none;position: fixed;top: 15px;left: 0;width: 100%;z-index: 1000;}
#btn1 {margin-left: 79%;}
@media only screen and (max-width:800px) {
.fixmenu {display:block;}
}

Các bạn paste đoạn html vào trước thẻ </body>. Còn đoạn CSS các bạn chèn vào trong trước </b:skim> (đối với blogspot) hoặc chèn vào trong file style.css (đối với wordpress).

Chỉ vậy thôi là xong, có thể với các giao diện khác nhau nó sẽ bị xô lệch đi chút ít, các bạn sửa một chút kích thước trong CSS là được. Các bạn có thể chỉnh CSS cho đẹp hơn hoặc sử dụng nó như môt tiện ích khác trên website chứ không nhất thiết là phải dùng làm menu nhé. Đây là kết quả của mình:

Tạo menu phụ cố định cho web trên giao diện mobile

Thêm bài viết liên quan trong wordpress không dùng plugin (có thumb)

Một trong những cách giúp wordpress nhẹ nhàng hơn chính là hạn chế dùng plugin. Thường các bạn vẫn hay sử dụng plugin để thêm phần bài viết liên quan vào wordpress rất tiện lợi. Tuy nhiên, hôm nay mình sẽ hướng dẫn các bạn thêm bài viết liên quan trong wordpress không dùng plugin.

• Cơ bản về SEO dành cho "gà"
• Tối ưu tốc độ tải trang cho wordpress 100/100 Googlespeed Insights

Thêm bài viết liên quan trong wordpress không dùng plugin

Thêm bài viết liên quan trong wordpress không dùng plugin

Bước 1: xác định nơi chèn code và CSS

Vì không dùng plugin nên chắc chắn các bạn cần phải chèn code thì mới hiển thị được bài viết liên quan. Tuy nhiên nhiều bạn không biết phải chèn code vào chỗ nào. Vấn đề này không khó nhưng cũng không dễ. Các bạn phải xác định được 2 file để chèn code đó là file có vị trí mà bạn muốn chèn và file CSS.
Ví dụ, bạn muốn chèn bài viết liên quan vào cuối bài viết (post). Bạn phải tìm được file nguồn (file chứa code) của post. Sau đó lại tìm xem phải chèn code vào chỗ nào trong file đó để nó hiển thị không bị lỗi và hiển thị đúng vị trí. Đầu tiên, để tìm được file code, các bạn đăng nhập vào trang admin nó sẽ có giao diện cơ bản như sau:

Trong thanh công cụ bên tay trái, các bạn chọn giao diện -> sửa

Trong trang "sửa" các bạn chọn theo mũi tên như hình dưới và chọn đúng giao diện mà các bạn đang dùng để chỉnh sửa rồi nhấn vào nút chọn bên cạnh. Giờ chúng ta đã đến được phần quản lý file giao diện.

Ở khung bên phải, các bạn chú ý tìm file style.css và file bạn cần chèn code. Nếu các bạn muốn chèn vào chuyên mục thì tìm file archive.php, nếu muốn chèn vào bài viết thì tìm file single.php hoặc content-single.php. Tuy vào từng giao diện sẽ có tên khác nhau nên các bạn "mò" trong này nhé.
Sau khi đã tìm được file, các bạn click vào file đó nó sẽ ra nội dung ở khung bên cạnh. Các bạn sẽ chèn code vào trong khung đó.

Bước 2: Chèn code và CSS

Sau khi xác định được file để chèn code, các bạn thử thêm vài ký tự rồi lưu lại và test thử xem vị trí đó có đúng vị mà bạn cần chèn code không. Sau khi xác định được, các bạn chèn đoạn code sau và lưu lại:

<hr/>
<h3><span style="color:#ff5115; font-size:22px;"><strong>Bài viết cùng chủ đề:</strong></span></h3><hr/>
<?php $args = array('post_status' => 'publish','numberposts' => '6','category__in' => wp_get_post_categories($post->ID),'orderby'=> 'rand');
    $recent_posts = wp_get_recent_posts($args); ?>
<div class="fixnoidung">
<?php foreach ($recent_posts as $recent) { ?>
<div class="fixhienthi">
<?php echo get_the_post_thumbnail( $recent["ID"],'medium', 'thumbnail').'<a href="' . get_permalink($recent["ID"]) . '">' . $recent["post_title"] . '</a>';?>
</div>
<?php } ?>
<div style="clear:both;"> </div>
</div>
<?php wp_reset_postdata(); ?>

Các bạn vào file style.css và chèn đoạn CSS sau để nó hiển thị cho đẹp (chèn xuống cuối cùng nhé):

.fixnoidung {width: 97%;}
.fixhienthi {width: 31%; border: 1px solid #d1d0d0; border-radius:5px; float: left; margin-left: 2%;margin-bottom: 10px; padding: 5px; min-height:250px}
.fixhienthi a {color:black;}
.fixhienthi img {margin-bottom:10px}
@media only screen and (max-width:800px) {
.fixhienthi {width: 48%;min-height:220px}
}

Các bạn chú ý dòng màu đỏ ở code nhé: dòng này có một số thông số các bạn cần biết:

• 'post_status' => 'publish' : lấy các bài viết đã đăng để hiện thị, nếu không có cái này nó thậm chí sẽ lấy cả các bài nháp chưa đăng để hiện thị.
• 'numberposts' => '6': Số bài viết hiển thị, các bạn có thể điều chỉnh số lượng tùy ý.
• 'category__in' => wp_get_post_categories($post->ID): đoạn này là điều kiện để hiển thị các bài liên quan trong cùng chuyên mục. Nếu bỏ đoạn này đi nó sẽ hiển thị các bài viết mới nhất kể cả không cùng chuyên mục.
• 'orderby'=> 'rand': hàm này để hiển thị bài viết một cách ngẫu nhiên. Các bạn không thích có thể bỏ đi.

Bước 3: Kiểm tra và fix

Sau khi chèn code các bạn có thể F5 lại trang để xem kết quả. Tuy nhiên, đôi khi trang của bạn có cài cache, khi đó bạn sửa CSS nó sẽ không hiển thị ngay. Vì thế, một là các bạn xóa cache rồi F5 lại trang hoặc nhấn Shift + F5 để không bị load cache CSS nữa. Mình có làm trên một trang tin tức về nước Nhật và kết quả là đây :

Thêm bài viết liên quan trong wordpress không dùng plugin

Khi các bạn chèn code vào có thể bị lỗi khiến lúc lưu file không được. Có nhiều nguyên nhân gây lỗi như bạn copy thiếu dấu ngoặc } hay dấu ' đấy ; gì đó. Cũng có thể chỗ bạn paste code vào không đúng gây lỗi. Vì thế, nếu test bạn nên chèn code thử vào cuối cùng của file.

Chú ý: để thêm bài viết liên quan trong wordpress không dùng plugin, mình đã tham khảo khá nhiều bài hướng dẫn và thấy không phải đoạn code nào chèn vào cũng hiển thị. Do vậy, mình không dám chắc 100% hướng dẫn trên của mình sẽ thành công nhưng tỉ lệ thành công là rất cao đấy vì mình đã thử qua vài web và thấy ổn.

Tối ưu tốc độ tải trang cho wordpress 100/100 Googlespeed Insights

Muốn cải thiện tốc độ tải trang cho wordpress có điểm số cao trước tiên phải tối ưu hình ảnh. Hạn chế plugin, sử dụng cache, ... Và sau đây là một số điểm chính để có thể cải thiện đáng kể chỉ số dành cho các bạn.

• Thêm bài viết liên quan trong wordpress không dùng plugin

1. Sử dụng plugin Autoptimize và WP Faster Cache

Cài 2 plugin này các bạn sẽ có đầy đủ chức năng nén Gzip, nén CSS, JS ... Tuy nhiên, hai plugin này có nhiều chức năng tương tự, vì thế mà các bạn đừng để trùng chức năng nhé.

2. Hạn chế các widget gây nặng giao diện (càng đơn giản càng tốt)

Nếu có thể, một vài chức năng nên sử dụng code chèn trực tiếp vào wordpress chứ dừng dùng plugin. Ví dụ như nút back top chỉ cần 1 dòng lệnh CSS đơn giản là ok không cần phải cài plugin làm gì cho mệt cả.

3. Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên

Thêm function sau vào trong file function.php của giao diện gốc

/*function to add async to all scripts*/
function js_async_attr($tag){
# Add async to all remaining scriptsreturn
str_replace( ' src', ' async="async" src', $tag );}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Nếu không dùng async các bạn có thể thay bằng defer

/*function to add async to all scripts*/
function js_async_attr($tag){
# Add async to all remaining scriptsreturn
str_replace( ' src', ' defer="defer" src', $tag );}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

 Theo mình test thì dùng async điểm số được 99/100 còn dùng defer thì được 100/100 luôn. Tuy nhiên khi mình vào trong quản trị widget trong admin thì thấy có nhiều chỗ hơi bị lỗi. Những widget văn bản không mở ra sửa nội dung được (lỗi khác nữa thì chưa biết) nên nếu không phải chỉnh gì về giao diện thì các bạn cứ tối ưu code cũng được còn nếu mà chỉnh gì về giao diện thì tạm thời bỏ đi nhá.

4. Nâng cao lưu vào bộ nhớ cache trong trình duyệt

Cái này thường báo lỗi https://www.google-analytics.com/analytics.js (2 giờ). Mình đã thử nhiều cách nhưng vẫn không ăn thua. Cuối cùng đành dùng thủ thuật để đánh lừa google rằng mình không có file này.
Đầu tiên các bạn gỡ mã theo dõi Analytic trên trang đi. Vào file header.php và thêm đoạn code sau vào trước thẻ </header>

<?php if (!isset($_SERVER['HTTP_USER_AGENT']) || stripos($_SERVER['HTTP_USER_AGENT'], 'Speed Insights') === false): ?>
<!-- Copy mã Google Analytics của bạn vào đây -->
<?php endif; ?>

Copy, paste đoạn mã theo dõi của google Analytic vào chỗ <!-- Copy mã Google Analytics của bạn vào đây --> vậy là Ok.

5. Giảm thời gian phản hồi của máy chủ

Cái này không làm gì được khác đâu, nâng cấp máy chủ khác tốt hơn hoặc đổi máy chủ khác đi là ok. Bình thường thì nếu code không quá nặng nó cũng không báo cái này đâu.

6. Tối ưu hóa hình ảnh

Không cần hình ảnh quá to làm gì cả. Nếu web tin tức bình thường thì ảnh chiều rộng khoảng 450 - 500px là được (không to không nhỏ). Sau khi resize ảnh theo kích thước nhất định các bạn hãy nén ảnh lại trước khi up lên web. Thường mình dùng phần mềm Caesium, phần mềm này hoàn toàn miễn phí, rất nhẹ và rất dễ sử dụng. Các bạn dùng Caesium để giảm dung lượng ảnh theo ý muốn. Ảnh có chiều rộng khoảng 500px giảm cho dung lượng ảnh còn khoảng 50kb là ok.

Với 6 bước trên chắc chắn điểm số của trang sẽ trên 80. Nếu bạn làm kỹ càng hơn sẽ được tầm 99/100. Check một số bài viết có thể lên được 100/100 như của mình đấy.

Chúc các bạn thành công!

Bouns: để tốc độ truy cập tốt hơn bạn có thể tham khảo disable wp-cron.php hoặc giảm thời gian autosave để tiết kiệm dung lượng bộ nhớ trong cơ sở dữ liệu.