Thủ Thuật WordPress : Cách chèn nhạc vào blog WordPress không dùng plugin.

(Thủ Thuật WordPress) – Nhiều lúc bạn muốn chèn nhạc vào bài viết của mình nhưng loay hoay mãi chẳng biết làm sao.Trong wordpress thì không thấy có chức năng chèn nhạc vào bài viết.Vậy phải là thế nào để chèn được nhạc vào bài viết ? có nhiều plugin cho phép chèn nhạc vào bài viết.Nhưng bài này Harry sẽ chỉ cho các bạn không dùng plugin mà vẫn chèn được nhạc vào bài viết wordpress.

chen nhac vao bai viet wordpress Thủ Thuật WordPress : Cách chèn nhạc vào blog WordPress không dùng plugin.

Trước tiên bạn phải upload nhạc của mình lên các trang chia sẽ.Làm sao để có link-bai-hat.mp3 là được.Có nhiều trang nhé bạn có thể dùng : Soundcloud. Với trang này thì bạn phải đăng kí rồi up nhạc lên ( các bước bạn tự nghiên cứu nhé.Nó cũng dễ làm ^_^)

C1. Sau khi bạn upload xong thì nó sẽ tạo ra đoạn mã embed để chúng ta chèn vào bài viết của mình.Với cách này thì bạn mất công phải download , rồi up load lên.Cũng mất nhiều thời gian quá.:D

C2. Với bạn đã có link .mp3 sẵn.Bài này Harry sẽ dùng link này

http://qns.vn/Upload/Chuongtrinh/QnS%201140%20(24.03.2013)_upload%20by%20quick_vocam.mp3

Đây là link quick and snow show 1140 harry dùng idm bắt được.

Ở trình soạn thảo bài viết bạn chuyển sang dạng Text để chèn đoạn mã sau dưới dạng html nơi mà bạn muốn xuất hiện

<audio width=”300″ height=”32″ style=”font-size: 13px; line-height: 19px;” preload=”auto” autoplay=”autoplay” controls=”controls” src=”http://qns.vn/Upload/Chuongtrinh/QnS%201140%20(24.03.2013)_upload%20by%20quick_vocam.mp3″>
</audio>

Bạn để ý trong đoạn mã trên có các thông số :

- preload=”auto” : bạn có muốn load lại khi nghe hết bài hay không.

- autoplay=”autoplay” :  Khi link được mở thì bài hát tự động play bạn không cần phải nhấn nút.

- src=”link.mp3″ : thay link bài hát của bạn.

Và bây giờ nhấn public nào . Nghe thử bài hát của Harry dùng cho bài viết này ở dưới nhé.Bạn nào chưa làm được thì comment tại đây luôn nhé.Cách nà cũng áp dụng với các blog mã nguồn khác bạn nhé.

Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Vậy là cuối cùng  cũng đến thời điểm mình giới thiệu serie này, phải nói là đây là một serie hướng dẫn WordPress mà mình đã ấp ủ khá lâu rồi nhưng do chưa có cơ hội và đủ kinh nghiệm để giới thiệu sớm đến mọi người. Nhưng bây giờ thì điều đó đã được thực hiện, đã sẵn sàng giới thiệu đến mọi người một serie hướng dẫn mang tên Tự thiết kế theme WordPress với 960 Grid từ đầu tới cuối, miễn sao bạn có thể tự làm một theme đơn giản như ảnh dưới.

lightbox[8032]“>13 Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Trong bài này mình sẽ chưa vội đưa các bạn vào nội dung hướng dẫn ngay mà mình sẽ nói qua một số điều cũng như cho mọi người biết những gì chúng ta cần chuẩn bị.

 

Giới thiệu 960 Grid và vì sao nên dùng?

Trước khi đọc thì bạn nên tải bộ 960 Grid System về máy trước cái đã rồi cất nó ở một nơi nào đó trước đi và nên xem qua 2 bài dưới đây để hiểu thêm về 960 Grid.

960 Grid là một CSS Framework hỗ trợ bạn chia layout website nhanh chóng với độ rộng chuẩn là 960px (có thể chỉnh hơn tại đây). 960 Grid hỗ trợ nhiều nhất là layout dạng lưới với 24 cột và tối thiểu là 12 cột. Thường thì chúng ta sẽ sử dụng loại 12 cột để làm một giao diện website đơn giản, nhưng nếu bạn muốn có nhiều cột hơn để tinh chỉnh theme nâng cao thì có thể sử dụng loại 16 hay 24 cột.

Ban đầu bạn có thể hơi lạ lẫm khi làm việc với CSS Framework nhưng thực ra cũng dễ dùng lắm và bạn sẽ nhanh chóng quen thôi nếu bạn đã có kiến thức về CSS, ít nhất là sau tut này bạn sẽ hiểu được cách dùng ^^. Ở đây mình xin nói qua về việc áp dụng 960 Grid lên theme mà chúng ta sẽ làm.

lightbox[8032]“>2 Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Toàn bộ theme chúng ta sẽ sử dụng 12 cột với tổng chiều rộng là 960px, trong đó có 20px lề biên. Nghĩa là nội dung toàn bộ website của chúng ta sẽ có kích thước 940px.

  • Phần header chia ra làm 2 khung. Khung hiển thị logo sẽ có 5 cột và khung hiển thị menu là 8 cột.
  • Phần menu dưới header chỉ 1 khung và dĩ nhiên, khung đó có luôn 12 cột.
  • Phần nội dung chia làm 2 khung. 8 cột cho phần hiển thị nội dung bài viết bên trái và 4 cột hiển thị sidebar bên phải.
  • Phần Footer Widget chia làm 3 khung và mỗi khung có 4 cột.

Bạn thấy không, do chúng ta sử dụng loại 12 cột nên tất cả các thành phần ở trong theme luôn có tổng là 12 cột. Và mỗi phần như vậy mình sẽ luôn có một thẻ div để tạo khung 12 cột cho nó. Nếu bạn vẫn chưa hiểu lắm về các cột trong theme chúng ta sắp sửa làm thì có thể xem ảnh này, mỗi cột màu đỏ mình tính là 1 cột.

Lý do mà trong bài cơ bản này mà lại sử dụng một thứ đáng lẽ không nên dùng ở bước cơ bản là vì nó sẽ giúp bạn tiết kiệm rất nhiều thời gian để thiết kế website do việc phân chia các cột sẵn, chỉ việc lấy ra và sử dụng thôi thay vì phải đặt kích thước cho mỗi thành phần rồi float trái, float phải khá phiền phức, nhưng nếu bạn là người mới thì đừng nên lạm dụng quá. Nếu bạn sử dụng cái này quen rồi thì việc thiết kế website sẽ trở nên nhẹ nhõm đi rất nhiều, giúp bạn tập trung nhiều hơn vào WordPress thay vì các thành phần này.

Kiến thức nền tảng

Như bài Học gì để thiết kế theme WordPress mình đã chỉ ra rõ những gì cần học nếu muốn tự làm theme WordPress. Thực ra nếu bạn theo dõi series này thì sẽ không cần trang bị nhiều đến như vậy đâu nhưng ít nhất bạn cũng nên chuẩn bị các kiến thức cơ bản nhất như:

  • Cách sử dụng WordPress căn bản như Posts, Pages, Widget,….Xem thêm bộ video hướng dẫn WordPress của mình.
  • Kiến thức HTML cơ bản, có thể phân biệt giữa ID và Class, thành thạo một số tag thông dụng như div, a, p, ul ol li,….
  • CSS căn bản đủ dùng, trong series này sẽ không có nhiều khái niệm phức tạp nhưng ít nhất bạn cũng biết float, background, color, margin, padding và quan trọng là cách sử dụng vùng chọn (Selector).
  • PHP căn bản, đủ để hiểu được đâu là hàm, biến, mảng, giá trị và những toán tử cơ bản.

Chỉ vậy thôi, liệt kê ra thấy nhiều nhưng mình nghĩ là những ai đang ở đây thì đã biết hết rồi cả đấy. Không tin ư, cứ theo dõi thì biết.

Công cụ cần chuẩn bị

Khi tiến hành thiết kế theme WordPress hoặc theo dõi serie này thì bạn nên cài đặt sẵn một số công cụ sau vào máy.

  • Một IDE hoặc Editor cần thiết như Notepad++, phpDesigner, Aptana Studio, CodeLobster. Ở đây mình sẽ sử dụng CodeLobster, vì sao thì đọc ở đây.
  • Một phần mềm tạo localhost dưới máy tính để cài WordPress như XAMPP, WAMPP, InstantWP, DesktopServer. Mình khuyến khích bạn nên dùng DesktopServer hoặc InstantWP cho gọn.
  • Firefox bản mới có cài Developer Toolbar và Firebug hoặc Google Chrome. Nên dùng luôn cả 2.
  • 1 ly cà phê kèm thêm gói thuốc (nếu bạn hút thuốc).  beauty Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Nếu bạn đã chuẩn bị đủ và sẵn sàng rồi thì bây giờ bắt tay vào được rồi đấy.

Cấu trúc một theme WordPress đơn giản

Thông thường thì một theme WordPress thông thường sẽ có các file sau.

  • style.css – Khai báo thông tin theme như tên tác giả, tên theme và các code CSS có trong theme.
  • index.php – Hiển thị nội dung của trang chủ.
  • header.php – Hiển thị phần header của theme.
  • single.php – Thiết lập cấu trúc một trang hiển thị nội dung bài viết (Post)
  • footer.php – Hiển thị phần chân trang của theme.
  • archive.php – Thiết lập cấu trúc hiển thị danh sách bài viết trong category, tag, archive.
  • page.php – Thiết lập cấu trúc hiển thị nội dung của một Page.
  • sidebar.php – Thiết lập cấu trúc hiển thị sidebar của theme.
  • functions.php – Là nơi lưu trữ các functions mà chúng ta sẽ sử dụng trong theme.
  • screenshot.png – ảnh đại diện cho theme, ảnh này phải mang tên là screenshot và bắt buộc phải là định dạng .png.

Nó có thể có thêm nhiều file khác nữa tùy thuộc vào từng nhu cầu, nhưng mình sẽ nói ở một phần khác nên ở đây chúng ta chỉ làm quen với cấu trúc đơn giản thôi. Rồi, đọc thì là vậy nhưng ngay bây giờ chúng ta sẽ tiến hành tạo tự tạo các file này và viết code cho nó. Bạn nên gõ lại code nhé chứ đừng copy vì mục đích mình viết ra đây là giúp bạn nhớ được các code.

Tạo thư mục và file cần thiết

Bây giờ bạn vào thư mục wp-content/themes tạo một thư mục mới với tên bất kỳ. Ở đây mình đặt tên thư mục này là thachpham.

32 Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Và trong thư mục này bạn nên tạo thêm các file và thư mục sau (có thể để trống):

42 Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Bạn nên nhớ là file screenshot.png có thể là ảnh bất kỳ nhé, miễn sao bạn phải đặt ảnh đó tên là screenshot.png. Tiếp theo đó, bạn copy file text.css960.css của 960 Grid System trong thư mục 960 Grid/code/css vào thư mục style trong theme của mình.

Bây giờ bạn mở file style.css lên và viết đoạn CSS sau vào.

1
2
3
4
5
6
7
8
/*
Theme Name: TP Theme
Description: Theme WordPress đơn giản.
Author: Thạch Phạm
Version: 1.0
*/

Đoạn trên là thành phần bắt buộc phải có trong mỗi theme, mục đích là khai báo các thông tin cần thiết của theme, dĩ nhiên bạn có thể sửa thành tên và link website của mình. Bây giờ lưu lại và vào Appearance -> Theme sẽ thấy ảnh và tên theme mà bạn vừa tạo.

32 Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Bạn thích thì cứ nhấp Activate để kích hoạt theme lên, nhưng nó sẽ chưa hiển thị gì đâu vì bạn đã làm gì đâu mà.  ah Thiết kế theme WordPress cơ bản với 960 Grid – Phần 1

Bây giờ bạn viết thêm đoạn code này vào file style.css để đưa tất cả thuộc tính của CSS về giá trị bằng 0 hết để có thể hiển thị giống nhau trên cùng một trình duyệt, người ta hay gọi bước này là Reset CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@media screen {html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 font-family: inherit;
 vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
 outline: 0;
}
body {font:12px/2 "Helvetica Neue",Helvetica,Arial,sans-serif;}
a {text-decoration:none;}
ol, ul {
 list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: separate;
 border-spacing: 0;
}
caption, th, td {
 text-align: left;
 font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: "";
}
blockquote, q {
 quotes: "" "";
}
.zoomer:active {top:0;}
article,aside,figure,footer,hgroup,menu,nav,section {display:block;}
.group:after {visibility: hidden; display:block; font-size:0; content: ""; clear:both; height:0;}
}/*--End Reset Screen--*/

Rồi. Tới đây coi như kết thúc khâu chuẩn bị mà bạn nên làm trước tiên khi tiến hành thực hiện một dự án theme WordPress bất kỳ. Nhưng khoan, bài có vẻ hơi dài rồi nên mình tạm kết thúc phần 1 tại đây nhé và mình sẽ viết tiếp phần 2 vào 1, 2 ngày nữa thôi. Lý do là mình dành thời gian cho những ai chưa quen với 960 Grid có thời gian tìm hiểu thêm về nó để sang các phần tiếp theo chúng ta sẽ dễ dàng làm việc hơn.

Thủ thuật WordPress – Cách chèn nofollow cho link menu wordpress

Một số menu không cần thiết bạn nên để Nofollow như menu : liên hệ , gửi bài viết của họcWordPress.Mục đích yêu cầu google không index những link này.Nếu bạn cũng muốn chèn nofollow cho link ở menu như trên thì hãy làm theo các bước đơn giản sau đây.Bạn cũng có thể xem cách thiết lập nofollow cho bất kì liên kết nào của wordpress .

Thêm Nofollow cho link menu wordpress

B1.Bạn cần login vào tài khoản admin của website. Và đi đến Appearance> Menu.

B2.Ở mà hình phía trên bên phải bạn thấy có dấu mũi tên Screen Option bạn click vào đó.

chen nofollow cho menu wordpress Thủ thuật WordPress – Cách chèn nofollow cho link menu wordpress

chèn nofollow cho menu wordpress

B3.Khung sổ ra bạn chọn Link Relationship (XFN)

B4. Khi thêm một Menu mới bạn add thuộc tính nofollow cho Link Relationship(XFN)

chen nofollow cho menu wordpress 2 Thủ thuật WordPress – Cách chèn nofollow cho link menu wordpress

chèn nofollow cho menu wordpress

Và cuối cùng kiểm tra lại bằng addon Seoquake check xem menu bạn đã chèn thêm thuộc tính nofollowchưa.

Thử xem menu của Học WordPress như thế nào nhé.

Các bạn có thắc mắc gì vui lòng bình luận ở dưới nhé.

Tối ưu hóa thẻ meta Description trong theme WordPress

Không nhỡ rõ mình đã đọc ở đâu một câu rất hay, meta Keyword không quan trọng bằng meta Description và meta Title trong việc SEO. Tuy nhiên, với hầu hết các theme của WordPress, thẻ meta Description (Desc) không được hiển thị tại vị trị tốt nhất. Và ngay cả khi mọi người sử dụng Plugin All in one Seo, vị trí của thẻ Desc vẫn không được cải thiện là bao.

meta description se 400x278 Tối ưu hóa thẻ meta Description trong theme WordPressTối ưu hóa thẻ meta description

Chúng ta cùng thử phân tích 1 ví dụ nhé:

Code của Nhanweb.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Nguyen Duy Nhan – Blog học tập, chia sẻ kiến thức lập trình và quản trị website, kiếm tiền qua mạng</title>
<meta name="description" content="Blog học tập, chia sẻ kiến thức lập trình và quản trị website, kiếm tiền qua mạng" />
thẻ Title và thẻ Description được đẩy lên đầu nhằm giúp các Bot tìm kiếm dễ dàng đọc và nhanh chóng index site cũng như các bài viết mới.

Code của as247.vui360.com/blog/ (Không phải site mình nhá)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="keywords" content="" /><meta name="description" content="" /><title>.:As*** - As247:.</title><link rel="alternate" type="application/rss+xml" title="RSS 2.0 - all posts" href="http://as247.vui360.com/blog/feed/" /><link rel="alternate" type="application/rss+xml" title="RSS 2.0 - all comments" href="http://as247.vui360.com/blog/comments/feed/" /><link rel="pingback" href="http://as247.vui360.com/blog/xmlrpc.php" /><!-- style START --><link rel="stylesheet" href="/ http://as247.vui360.com/blog/wp-content/themes/as247/style.css" type="text/css" media="screen" /><!--[if IE 6]><link rel="stylesheet" href="http://as247.vui360.com/blog/wp-content/themes/as247/ie6.css" type="text/css" media="screen" /><![endif]--><!-- style END --><!-- script START --><script type="text/javascript" src="http://as247.vui360.com/blog/wp-content/themes/as247/js/menu.js"></script><script type="text/javascript" src="http://as247.vui360.com/blog/wp-content/themes/as247/js/util.js"></script><!-- script END --><link rel='stylesheet' id='NextGEN-css'  href='http://as247.vui360.com/blog/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0' type='text/css' media='screen' />
    <link rel='stylesheet' id='shutter-css'  href='http://as247.vui360.com/blog/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css?ver=1.3.2' type='text/css' media='screen' />
    <link rel='stylesheet' id='sociable-front-css-css'  href='http://as247.vui360.com/blog/wp-content/plugins/sociable/sociable.css?ver=3.1.3' type='text/css' media='all' />
    <link rel='stylesheet' id='wp-downloadmanager-css'  href='http://as247.vui360.com/blog/wp-content/plugins/wp-downloadmanager/download-css.css?ver=1.50' type='text/css' media='all' />
    <link rel='stylesheet' id='wp-pagenavi-css'  href='http://as247.vui360.com/blog/wp-content/themes/as247/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
    <script type='text/javascript' src='http://as247.vui360.com/blog/wp-includes/js/l10n.js?ver=20101110'></script>
    <script type='text/javascript' src='http://as247.vui360.com/blog/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
    <script type='text/javascript' src='http://as247.vui360.com/blog/wp-content/plugins/collapsing-links/collapsFunctions.js?ver=1.7'></script>
    <script type='text/javascript'>
    /* <![CDATA[ */
    var shutterSettings = {
    	msgLoading: "L O A D I N G",
    	msgClose: "Click to Close",
    	imageCount: "1"
    };
    /* ]]> */
    </script>
    <script type='text/javascript' src='http://as247.vui360.com/blog/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js?ver=1.3.2'></script>

<script type='text/javascript' src='http://as247.vui360.com/blog/wp-includes/js/swfobject.js?ver=2.2'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://as247.vui360.com/blog/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://as247.vui360.com/blog/wp-includes/wlwmanifest.xml" />
<link rel='index' title='.:As*** – As247:.' href='http://as247.vui360.com/blog/' />
<meta name="generator" content="WordPress 3.1.3" />
<script type='text/javascript' src='http://as247.vui360.com/blog/wp-includes/js/tw-sack.js?ver=1.6.1'></script>
	<script type="text/javascript">
	// ajax_login_widget settings
	var alw_timeout = 0;
	var alw_redirectOnLogin = '';

	// constants
	var alw_base_uri = 'http://as247.vui360.com/blog';
	var alw_success = '1';
	var alw_failure = '0';

	</script>
	<script type="text/javascript" src="http://as247.vui360.com/blog/wp-content/plugins/ajax-login-widget/ajax_login_widget.js"></script>

<!-- All in One SEO Pack 1.6.13.3 by Michael Torbert of Semper Fi Web Design[321,360] -->
<meta name="Description" content="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">

<meta name="keywords" content="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />

<link rel="canonical" href="http://as247.vui360.com/blog/" />

<!-- /all in one seo pack -->

Blog này sử dụng plugin như hầu hết chúng ta vẫn dùng, tuy nhiên, thẻ Desc lại nằm tại vị trí quá tệ.

Vậy sử dụng cách nào để giải quyết? Mình sẽ giới thiệu 1 cách để các bạn có thể khắc phục nhược điểm trên. Đó là tạo Meta Desc thông qua excerpt trong bài viết

Bạn chèn vào vị trí bạn muốn đặt thẻ Desc trong header.php như sau:

<?php
if (is_singular()):
global $post;
setup_postdata($post);
?>
<meta name=”description” content=”<?php the_excerpt_rss(); ?>” />
<?php endif; ?>

Lúc này, content=”<?php the_excerpt_rss(); ?>” sẽ truy vấn giá trị bạn nhập trong ô excerpt trong bài viết để làm Description.

Bạn có thể tích hợp thê

Hướng dẫn tăng tốc WordPress từ A đến Z

tang toc Hướng dẫn tăng tốc WordPress từ A đến Z

Có một mối lo khá phổ biến của những người sử dụng hosting quốc tế đó là tốc độ trong nước không được tối ưu mặc dù vẫn biết chất lượng cũng như khả năng bảo mật của nó rất tốt. Nhưng nếu bạn đang sử dụng WordPress thì không thành vấn đề gì trong bài này mình sẽ hướng dẫn bạn cách tăng tốc blog WordPress đầy đủ từ cơ bản đến nâng cao nhằm giảm tải tối đa cho máy chủ cũng như tiết kiệm thời gian tải trang cho người dùng, đây là yếu tố rất quan trọng để bạn có thể cải thiện pageview, giảm tỷ lệ Bounce Rates trên blog.

 

Sử dụng bộ nhớ đệm – Cache

Trong các cách tăng tốc blog WordPress thì không thể không kể đến bước này vì nó sẽ giúp bạn giảm đến 70% gánh nặng cho máy chủ cũng như thời gian tải trang. Bạn có thể thấy đối với các dịch vụ hosting chất lượng như Justhost, Hostgator, Siteground đều tích hợp sẵn plugin WP Super Cache sau khi bạn cài đặt blog thông qua công cụ cài đặt nhanh.

Nếu bạn sử dụng VPS, Dedicated Server thì cache lại càng trở nên quan trọng hơn bao giờ hết.

Xem thêm:

+ Hướng dẫn cấu hình WP Super Cache tối ưu.+ Hướng dẫn cấu hình W3 Total Cache cho VPS/Dedicated Server 

Mỗi blog chỉ nên dùng 1 plugin cache để tránh xảy ra xung đột.

Sử dụng Minify

Minify là công nghệ nén cache và làm nhẹ các thành phần CSS và Javascript trên website. Thông thường một website chúng ta có rất nhiều file CSS và Javascript khác nhau nhưng với công nghệ này nó sẽ nén tất cả lại thành 1 file duy nhất, sau đó sẽ loại bỏ các khoảng trắng, note để tập tin đó trở nên nhẹ hơn. Sau khi làm nhẹ xong, Minify sẽ làm một công việc quan trọng khác đó là tạo một bản lưu cache trên host để giảm thiểu tối đa truy vấn gửi đến máy chủ để thực thi các tập tin CSS hay Javascript đó.

Trên WordPress, bạn có thể dùng 3 plugin sau đây:

  • WP Minify (Thạch Phạm khuyên dùng)
  • Better WordPress Minify
  • W3 Total Cache (Đây là plugin tạo Cache ,có tích hợp Minify)

Khi sử dụng Minify, bạn cũng nên hạn chế sử dụng các plugin chứa nhiều Javascript trên blog vì có một vài plugin Javascript sẽ bị xung đột với Minify.

Làm nhẹ CSS

Thông thường, mỗi file CSS thường có chứa nhiều các thành phần không quan trọng như note, khoảng trắng, code trùng lặp, thừa ký tự,…v.v..Điều này gây ra trở ngại không nhỏ đến tốc độ của website, vì vậy hãy làm nhẹ tất cả file CSS có trong website của bạn bằng cách sau đây:

Truy cập vào CleanCSS.Com

Copy nội dung của các file CSS có trong website vào ô CSS input, hoặc nhập URL dẫn đến file CSS tại ô CSS form URL.

lam nhe css Hướng dẫn tăng tốc WordPress từ A đến ZỞ phần Code Layout bên cạnh các bạn nên thiết lập như sau

lam nhe css 2 Hướng dẫn tăng tốc WordPress từ A đến ZSau đó nhấn nút Process CSS bên dưới và bạn sẽ nhận được một code CSS mới, kèm theo đó là nó sẽ cho bạn biết đã được giảm xuống bao nhiêu phần trăm so với kích thước cũ. Bây giờ bạn chỉ việc copy đoạn CSS mới đó vào file ban nãy bạn copy để thay thế là được.

Cứ làm như vậy cho các file CSS khác. Cái này bạn đừng nên đòi hỏi plugin gì cả vì không có plugin nào làm tốt công việc này bằng cách thủ công đâu.

Nếu sau khi nén mà theme bị lỗi, thì bạn lấy code CSS gốc sau đó nén lại với Compression (code layout) là Standard.

Nén/giảm dung lượng hình ảnh

Data Compression Hướng dẫn tăng tốc WordPress từ A đến ZNếu blog bạn hay sử dụng nhiều hình ảnh giống như mình thì không thể bỏ qua bước nén hình ảnh này để làm nhẹ blog hơn để tải nhanh hơn. Bạn có thể chọn 2 cách nén là nén trực tiếp trên máy tính và nén bằng plugin.

Về nén trực tiếp trên máy thì bạn có thể dùng phần mềm FILEMinimizer Picture.

Còn muốn nén tự động bằng plugin thì các bạn có thể dùng WP Smush.It, EWWW Image Optimizer. Sau khi cài đặt, mỗi lần upload ảnh lên nó sẽ tự động nén cho bạn. Hoặc có thể sử dụng Bulk Optimize trong phần Media để nén tất cả hình ảnh có trên host.

Nén Gzip - Gzip File Compression

Nén Gzip sẽ làm giảm thiểu tối đa thời gian phản hồi bằng cách giảm dung lượng tải về từ giao thức HTTP.  Nó có thể nén các thành phần tĩnh trên website như CSS, Javascript, HTML nhưng trên lý thuyết và 1 số trường hợp, nó có thể làm việc cùng với XML và JSON. Các thành phần khác như hình ảnh, tài liệu PDF..v.v..có thể không cần sử dụng gzip vì bản thân nó đã được nén sẵn.

gzip compression Hướng dẫn tăng tốc WordPress từ A đến Z

Kích hoạt gzip bằng htaccess

Đối với máy chủ Apache

mod_pagespeed là một Apache module được phát triển bởi Google nhằm hỗ trợ nén trang. Hiện tại có một vài nhà cung cấp như Dreamhost, Godaddy đã áp dụng module này vào máy chủ của họ để tối ưu hóa nhanh hơn. Nếu hosting của bạn đang sử dụng chưa kích hoạt sẵn module này thì bạn cần phải kích hoạt thủ công bằng cách thêm nội dung sau vào file .htaccess ở thư mục gốc.

ModPagespeed on
# using commands,filters etc

 

Nhưng đáng buồn là không phải shared hosting nào cũng hỗ trợ mod_pagespeed module. Nếu host bạn không hỗ trợ nó thì có thể dùng mod_deflate để thay thế (Apache 1.3.x sử dụng mod_gzip nhưng từ Apache 2.x trở đi thì nó sử dụng mod_deflate để thay thế).
<ifModule mod_deflate.c>
                AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xmlapplication/xhtml+xml text/css text/javascript application/javascript application/x-javascript
            </ifModule
Đối với máy chủ Nginx

Nếu máy chủ của bạn đang sử dụng Nginx Webserver thì chèn đoạn sau vào file .htaccess

server {
    gzip on
    gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon; 
Nén gzip bằng file header.php

Nếu hosting của bạn không hỗ trợ cả mod_pagespeed và mod_deflate lẫn mod_gzip thì có thể sử dụng PHP để thực hiện nén gzip. Cách này áp dụng cho cả Apache và Nginx. Chèn code sau vào file header.php

<?php 
if ( substr_count( $_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip' ) ) {
    ob_start( "ob_gzhandler" )
}
else {
    ob_start()
}

?>

 

Sử dụng Browse Caching

Hãy tưởng tượng như thế này, khi bạn vào một website bất kỳ thì trình duyệt phải bắt buộc tải về tất cả thành phần có trong một website để có thể phân tích và hiển thị nó. Và mỗi lần truy cập trình duyệt đều cần phải làm công việc này, khá mất thời gian nếu bạn thường xuyên vào một website nào đó.

Vậy giải pháp Browse Caching có nghĩa là nó sẽ tạo ra bản bộ nhớ đệm của một website và lưu nó vào máy, kể từ các lần truy cập sau trình duyệt sẽ mang dữ liệu trong bộ nhớ đệm này ra thực thi mà không cần phải tải lại một lần nào nữa.

Đối với máy chủ Apache

Apache sẽ đảm nhận chức năng này với 2 module mod_expires và mod_headers.

Để kích hoạt nó bạn chèn đoạn nội dung sau vào file .htaccess

# BEGIN Expire headers 
<ifModule mod_expires.c>
    ExpiresActive On 
    ExpiresDefault "access plus 5 seconds"
    ExpiresByType image/x-icon "access plus 2592000 seconds"
    ExpiresByType image/jpeg "access plus 2592000 seconds"
    ExpiresByType image/png "access plus 2592000 seconds"
    ExpiresByType image/gif "access plus 2592000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
    ExpiresByType text/css "access plus 604800 seconds"
    ExpiresByType text/javascript "access plus 216000 seconds"
    ExpiresByType application/javascript "access plus 216000 seconds"
    ExpiresByType application/x-javascript "access plus 216000 seconds"
    ExpiresByType text/html "access plus 600 seconds"
    ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers 
# BEGIN Cache-Control Headers 
<ifModule mod_headers.c>
    <filesMatch ".(ico|jpe?g|png|gif|swf)$">
        Header setCache-Control "public"
    </filesMatch>
    <filesMatch ".(css)$">
        Header setCache-Control "public"
    </filesMatch>
    <filesMatch ".(js)$">
        Header setCache-Control "private"
    </filesMatch>
    <filesMatch ".(x?html?|php)$">
        Header setCache-Control "private, must-revalidate"
    </filesMatch>
</ifModule>
# END Cache-Control HeaderS
Đối với máy chủ Nginx

Chèn nội dung sau vào file .htaccess

location ~* .(jpg|png|gif|jpeg|css|js){
    expires 1h; 
}

Tiết kiệm dung lượng MySQL Database

Các bạn cũng biết là bây giờ WordPress có thêm tính năng tự động lưu các bản nháp bài viết sau mỗi thời gian nhất định. Điều này có thể rất tiện dụng cho bạn nhưng nó lại làm kích thước cơ sở dữ liệu của bạn phình to ra nếu như các bạn không thường xuyên dọn dẹp nó. Còn nếu bạn lười dọn dẹp thì tắt nó luôn cho lành.

Khai báo đoạn code này trong file wp-config.php

define('WP_POST_REVISIONS', false );

Tối ưu database

Trong một thời gian dài, database của bạn sẽ sinh ra một số thành phần rác được lưu vào đó sau mỗi lần thực thi lệnh từ máy chủ. Vì vậy không có gì quý hơn là hãy chủ động dọn dẹp nó sau một thời gian nhất định. Mình thường dọn database khoảng 1 tuần 1 lần. Bạn có thể sử dụng các plugin sau đây để dọn dẹp database:

  • WP Optimize
  • Yoast Optimize DB
  • WP DB Manager 

Ngoài ra, có một lưu ý là khi bạn cài plugin bất kỳ vào thì nó sẽ tự động sinh ra một cột dữ liệu trong table wp_options, nhưng khi tháo plugin ra thì các cột dữ liệu này vẫn giữ nguyên. Vì vậy mỗi lần tháo plugin, tốt nhất bạn nên dùng thêm plugin Clean Options để xóa các cột dữ liệu không còn sử dụng.

Sử dụng CDN – Content Devilery Network

Nếu blog bạn có nhiều hình ảnh, video, bla bla…thì sử dụng CDN là cách để cải thiện tốc độ cũng như giảm tải cho máy chủ tốt nhất.

Xem ngay: CDN là gì? Hướng dẫn sử dụng MaxCDN.

Ngoài MaxCDN ra thì còn có một số nhà cung cấp sau:

  • Amazon S3
  • Amazon CloudFront
  • Media Template CDN
  • FreeCDN

Nhưng thông thường các dịch vụ CDN luôn có giá hơi đắt, thích hợp sử dụng trên các blog lớn hoặc website quy mô tầm trung trở lên.

Đó là một số cách để tăng tốc blog WordPress trở nên tối ưu nhất. Bây giờ việc còn lại là kiểm tra tốc độ website. Các bạn có thể dùng một số công cụ miễn phí dưới đây để kiểm tra tốc độ website.

  • GTmetrix
  • Pingdom Tools
  • Google Page Speed Test
  • WhichLoadFaster
  • WebPageTest

Hy vọng sau bài hướng dẫn này các bạn sẽ có thể tăng tốc blog WordPress của mình lên tốt hơn.

Cách đặt từ khoá để tối ưu SEO On-Page

Quy trình SEO On-Page phụ thuộc vào rất nhiều vào các từ khoá nằm trong nội dung, nếu trước kia chúng ta có thể thả càng nhiều từ khoá càng tốt vào nội dung thì bây giờ “trò chơi” ấy đã dường như không đạt hiệu quả cao nhất nữa, mà nguyên nhân là do các bản cập nhật của Google ngày càng thông minh và gắt gao hơn, và nhất là ai ai cũng biết cách SEO thì khả năng cạnh tranh ngày càng lớn.

Tuy nhiên về mặt tích cực thì có nhiều cái vẫn không thay đổi, điển hình là bạn phải trình bày và sắp xếp nội dung như thế nào để Google có thể xác định được từ khoá của nội dung. Trên thực tế nhiều chuyên gia SEO ngày càng tập trung hơn vào việc xây dựng backlink có chất lượng (SEO Off-page) để nhằm cạnh tranh với các trang có thứ hạng cao, tuy nhiên nếu bạn vừa mới bắt đầu một dự án thì việc tối ưu SEO On-page là một việc vô cùng quan trọng để mang lại hiệu quả cao mà thời gian lên top cũng rút ngắn hơn rất nhiều, nguyên nhân chính là do website bạn có tuổi đời thấp nhưng lại tập trung vào việc xây dựng backlink thì Google dễ duyệt vào danh sách spam.

“SEO is always a two part process, there’s off-page SEO and on-page SEO. Here, I’m only talking about on-page SEO (about using your desired keywords properly inside your content). If you want a more general advice, you’ll have to go to one of many SEO blogs out there”

Nhưng việc gì cũng có giới hạn riêng của nó, Google khuyến khích bạn tăng cường tối ưu On-page không có nghĩa là bạn được phép lợi dụng các từ khoá để thao túng máy tìm kiếm, bạn cần cân nhắc một điều quan trọng trước khi lên kế hoạch SEO On-Page.

Giữ cho văn bản thật tự nhiên

Đây là trường hợp phổ biến nhưng cũng dễ dàng mắc sai lầm nhất ở quy trình SEO On-page, đôi khi

Keyword Density là chỉ số biểu diễn tỷ lệ mật độ một từ khóa nào đó có trong văn bản và biểu diễn bằng đơn vị % (phần trăm).

Google bây giờ cũng vậy, họ giống như những giáo viên kiểm tra trình độ viết văn, một khi văn bản của bạn không còn được tự nhiên do lặp đi lặp lại từ khóa quá nhiều thì họ sẽ đánh giá thấp, ngược lại nếu bạn đặt từ khóa thích hợp, sử dụng các cụm từ khóa liên quan để văn bản thêm cuốn hút và từ ngữ thêm phong phú thì họ sẽ đánh giá cao.

Có rất nhiều người cho rằng một nội dung văn bản muốn đạt thứ hạng cao với từ khóa đó thì phải có Keyword Density từ 2% trở lên và tốt nhất là 5%. Nhưng đối với bản thân mình, mật độ từ khóa (hay còn gọi là tần suất lặp lại của từ khóa) là không quan trọng trong văn bản cho lắm và chỉ cần 0,5% là đủ, còn lại là mình sẽ “đầu tư” vào các vị trí khác tốt hơn để tránh văn bản không giữ được vẻ tự nhiên.

Vậy mình sẽ đặt từ khóa ở đâu và sử dụng nó như thế nào?

Vị trí đặt từ khóa để tăng cường SEO On-Page

Thẻ Title – Tiêu đề

Đây là vị trí quan trọng cũng như cơ bản nhất để giúp máy tìm kiếm xác định được nội dung hay còn gọi là hiểu được bạn đang nói đến vấn đề gì để xếp hạng đúng với từ khóa của bạn ý. Dù ít hay nhiều thì trên tiêu đề nội dung của bạn phải có ít nhất 1 từ khóa quan trọng và được nằm trong cặp thẻ <h1> là tốt nhất.

Cách sử dụng thì quá đơn giản, hãy đặt từ khóa vào tiêu đề và viết nó với khoảng 65 ký tự. Nó giống như thế này.

Cách SEO On-page hiệu quả để lên top Google

Tips: Tiêu đề bắt đầu bằng từ khóa chính sẽ có thứ hạng cao hơn khi bạn đặt nó ở giữa hay ở cuối tiêu đề.

Thẻ Meta description – Thẻ mô tả nội dung

Thành phần quan trọng thứ 2 để xác định website có được thứ hạng cao hay không đó là cách sử dụng thẻ mô tả (<meta description>) để chèn từ khóa và viết mô tả cho nội dung. Ngoài một từ khóa chính nằm ở title thì bạn cũng nên viết từ khóa đó vào thẻ mô tả ít nhất một lần.

Trong WordPress có chức năng viết thẻ mô tả cho trang chủ blog nhưng lại không thể tự viết thẻ mô tả riêng ở mỗi trang nội dung (post, page) nếu như theme bạn không hỗ trợ hoặc bạn không sử dụng plugin. Vì vậy mình gợi ý bạn 3 plugin SEO miễn phí khá tốt có hỗ trợ viết thẻ tiêu đề (title) và thẻ mô tả (meta description) cho từng trang nội dung.
WordPress SEO by Yoast
SEO Ultimate
All in One SEO Pack

Lưu ý: Thẻ meta description bạn chỉ nên viết khoảng 140 ký tự để không bị cắt bớt khi hiển thị ở kết quả tìm kiếm.

Tiêu đề phụ – Subheading

Các tiêu đề phụ (<h1> – <h6>) trong bài viết không chỉ giúp bài viết bạn trở nên chuyên nghiệp, gọn gàng mà còn rất có lợi cho SEO nữa. Thẻ tiêu đề phụ nhằm để sắp xếp các phần trong bài viết của bạn theo thứ tự ưu tiên từ cao tới thấp. Ví dụ như bạn đang viết tới phần SEO On-Page thì bạn nên chia bài viết ra làm 3 phần phụ được biểu diễn bởi 3 tiêu đề phụ VD:

mình lấy thẻ h2 cho phần chính (SEO-Onpage) và thẻ h3 cho các phần như Mật độ từ khóa, tối ưu thẻ title,..v..v..Và nếu các bạn có thêm nhiều phần nhỏ khác nữa thì có thể sử dụng thêm thẻ h4, h5, h6. Nhưng tại sao lại không sử dụng thẻ h1? Bởi vì thẻ h1 được đặt ở tiêu đề, hiện nay các themes WordPress thường làm theo cấu trúc này.

Còn vấn đề đặt từ khóa ở thẻ tiêu đề phụ thì cũng không có gì quá phức tạp, có thể bạn nên lặp 1 từ khóa chính một phần trong các thẻ tiêu đề phụ để nhằm tăng độ ưu tiên cho từ khóa, vì bản thân Google sau khi lấy dữ liệu từ thẻ title, meta description thì tiếp theo nó sẽ dựa vào các thẻ tiêu đề phụ này để xác định nội dung trong bài viết.

Thẻ alt cho hình ảnh

Không phải ai cũng nhận ra rằng thẻ alt trên hình ảnh lại có tác dụng tích cực như thế nào, nhiệm vụ chính của nó là khi hình ảnh trên nội dung của bạn bị lỗi không thể hiển thị được hay bị xóa đi từ máy chủ thì nội dung trong thẻ alt sẽ hiển thị thay cho biểu tượng thông báo ảnh bị lỗi. Tuy nhiên ở thời điểm hiện tại thì các trình duyệt đã không còn hiển thị thẻ alt trong ảnh nữa, nhưng ít nhiều gì thì nó vẫn còn có tác dụng xác định xem ảnh này đang nói về cái gì, các công cụ kiểm tra SEO hay các người làm SEO chuyên nghiệp hiện nay vẫn sử dụng thẻ alt như một thói quen bắt buộc khi chèn ảnh vào nội dung. Vì vậy nếu bạn đã chăm chút nội dung của mình thật tối ưu để nhằm đạt thứ hạng cao thì tội vạ gì lại không tiện tay chèn từ khóa mô tả vào thẻ alt chứ.

Đó là một vài kinh nghiệm của mình trong việc đặt từ khóa để hỗ trợ SEO On-page tốt hơn. Nhưng dù có tối ưu hóa thế nào đi chăng nữa thì bạn cần nên tránh 1 vấn đề quan trọng đó là không nên lặp lại từ khóa quá nhiều để văn bản thiếu tự nhiên, và cũng giảm nguy cơ bị thuật toán Chim cánh cụt (Google Penguin) hỏi thăm. Hy vọng nó sẽ giúp ích cho các bạn trong việc viết bài.
Nguồn: Cách đặt từ khóa để tối ưu SEO-Onpage – Công ty thiết kế website chuyên nghiệp HVNsoft

Cách sửa lỗi hiển thị tiếng Việt trong WordPress

Lỗi này có lẽ không quá phổ biến vì nếu bạn cài đặt blog WordPress bình thường thì sẽ không bao giờ gặp, vì mặc định WordPress sử dụng bảng mã UTF-8 nên nó hỗ trợ rất tốt trên tiếng Việt. Nhưng thi thoảng vẫn có người hay gặp các trường hợp bị lỗi font chữ do cài thêm plugin hay viết bài mới, cách sửa thì cũng không có gì là khó khi bạn chỉ cần đổi lại charset của database là nó sẽ hiển thị bình thường, nhưng nếu bạn có nhiều table bị lỗi như thế thì sửa rất mất công. Trong bài này mình sẽ giới thiệu một plugin giúp bạn đổi charset cho tất cả các table có trong database.

Trước khi bắt đầu thì mình nói sơ qua về 2 kiểu lỗi tiếng Việt thông dụng:

  1. Bị lỗi khi cài một plugin mới vào.
  2. Bị lỗi khi nhập thêm một cái gì đó vào database, ví dụ bạn cài thêm một plugin điền thông báo chẳng hạn. Thì khi cài nó sẽ không bị lỗi mà sẽ bị lỗi sau khi bạn nhập thông báo vào.

Cách sửa lỗi hiển thị tiếng Việt trong blog WordPress

Đầu tiên bạn cài đặt plugin Convert WP Database to UTF-8 vào.

dbutf8converter Cách sửa lỗi hiển thị tiếng Việt trong WordPress

Sau đó bạn vào Plugins ⇨ UTF-8 DB Converter. Khi vô đó, bấm vào nút Start Converting để bắt đầu convert.

Lưu ý: Trước khi convert nên backup database trước để phòng có bất trắc.