TwentyTwenty – Plugin tạo hiệu ứng after và before cho WordPress

Như bài trước mình có đề cập đến plugin jquery TwentyTwenty với hiệu ứng so sánh hình ảnh độc đáo thì hôm nay mình xin tiếp tục giới thiệu plugin này nhưng dành cho CMS WordPress.

Mình sẽ không giới thiệu nhiều về plugin này vì ở bài trước mình đã đề cập đến.Ở bài này mình chỉ hướng dẩn cách sử dụng plugin này trong khi soạn thảo bằng WordPress.

Plugin này sử dụng vô cùng đơn giản.Bạn chỉ cần upload hai tấm ảnh có kích thước giống nhau.Khi chèn vào bài viết bạn phải chắc chắn hai tấm ảnh có kích thước hoàn toàn giống nhau.Bạn chỉ cần chèn shortcode [TwentyTwenty] trước tấm ảnh đầu tiên và [/TwentyTwenty] phía dưới tấm hình thứ hai.

TwentyTwentyShortcode

Plugin sẽ tự động tạo 1 thanh trượt có thể di chuyển qua lại.Bạn sẽ thấy hình ảnh trước và sau khi kéo chuột qua lại.

TwentyTwentyBefore

TwentyTwentyAfter

Plugin này rất thích hợp với những bạn yêu nhiếp ảnh hay retouch lại ảnh của mình và muốn người dùng có thể so sánh bước ảnh trước khi làm và sau khi làm.

Nếu bạn gặp vấn đề gì hãy để lại bình luận tại bài viết này mình sẽ cố gắng giải đáp tất cả.Chúc các bạn thành công.

Dowload TwentyTwenty

Cách thêm Shortcode WordPress không cần dùng plugin

Có lẽ đôi lúc bạn bắt gặp một bài viết nhưng có thêm tab ở giữa bài,hay những button download đẹp hay slider hình ảnh.Vậy làm sao để làm được như vậy.Trong bài viết này mình sẽ giới thiệu đển các bạn Shortcode trong wordpress cũng như cách tạo shortcode đơn giản như thế nào?

Shortcodes là gì?

Shortcodes cung cấp cho bạn một cách đơn giản để tùy chỉnh nội dung website của bạn.Có nghĩa là thay vì bạn phải thêm 1 đoạn HTML ,CSS,js phức tạp để có một hiệu ứng thì với shortcodes bạn chỉ cần một vài dòng. Ví dụ về một cách dùng shortcode: Bình thường nếu muốn thêm video bạn cần phải thêm iframe hoặc embed ví dụ như đoạn code dưới đây:

[code language=”html”]<iframe src=”http://www.youtube.com/embed/mBYdzw0ulNA” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>[/code]

Với shortcode thì ngắn gọn và đơn giản hơn nhiều:

[code language=”php”]

[/code]

Cách tạo shortcode trong wordpress

Bạn có thể dùng plugin để có những shortcode cơ bản mình sẽ giới thiệu 1 số plugin tạo shortcode thông dụng.Còn bài này mình sẽ hướng dẩn thêm bằng code vào plugin hoặc theme của bạn.Có 2 cách để dùng shortcode một là kiểu tag đơn ([nqd])và tag đôi([nqd][/nqd])

Sau khi theme bạn có thể sử dụng như sau:

Khi thêm [nqd] trong bài viết sẽ hiển thị Nội dung muốn hiển thị thêm vào đây.Mình sẽ giải thích một số thành phần trong đoạn code trên để bạn hiểu.

  • $atts : đây là biến chứa các tham số bạn truyền vào.
  • $content: Nội dung bên trong thẻ shortcode ví dụ : [nqd]$content[/nqd] nếu bạn dùng kiểu tag đơn thì không có biến $content.

Đây là cách sử dụng không có tham số.Nếu có tham số bạn khai báo như sau code dưới đây:

Ở đây tại sao mình lại dùng $name,$address,$company và chúng ở đâu ra.Mình sẽ giải thích ở đây hàm extract trong PHP sẽ biến chỉ mục của 1 mảng thành những biến trung tên với tên chỉ mục của mảng.Ở đây ta có một mảng với chỉ mục là name, address, company nên sẽ sinh ra những biến tương tự.

Cách sử dụng của đoạn shortcode trên là [nqd name=”Nguyễn Quốc Dũng” address=”Gò Vấp, TP Hồ Chí Minh” company=”FBS”]

Trên đây mình đã giới thiệu qua về shortcode và cách tạo cũng như cách sử dụng shortcode trong WordPress.Nếu có thắc mắc gì cứ để lại comment tại bài viết này mình sẽ trả lời nhanh nhất có thể những thắc mắc của bạn.

Làm sao kiểm tra table tồn tại trong WordPress Database chưa ?

Một số plugin khi cài đặt yêu cầu phải cài thêm một số bảng để lưu dữ liệu.Những bảng mở rộng này có thể lưu trử hình ảnh,link download, hay bất cứ thông tin gì cần thiết cho plugin có thể hoạt động được.Những bảng cần cho plugin sẽ được tạo khi bạn kích hoạt plugin Nhưng bạn sẽ kiểm tra như thế nào nếu plugin đã kích hoạt rồi.Hoặc trong theme bạn viết cần tạo bảng mà bạn không biết chắc là đã tồn tại bảng này chưa.

Đoạn code dưới đây sẽ giúp bạn làm điều này

Một đoạn code nhỏ nhưng giúp ích rất nhiều cho lập trình WordPress vì nếu bạn xóa 1 bảng không tồn tại sẽ gây ra lổi… Sử dụng như thế nào là còn tùy ở bạn, nếu có bất cứ thắc mắc nào vui lòng để lại bình luận mình sẽ giải thích kỹ hơn nhé !

Hiển thị thời gian theo thời gian hiện tại

Nếu bạn là một developer thì đôi lúc bạn sẽ gặp phải vấn đề là không muốn hiển thị ngày tháng dạng thông thường, vừa khô khan vừa khó nhớ nữa.Cũng giống như bài viết cách đổi số sang dạng 1k mà mình vừa giới thiệu đến các bạn thì ở bài viết này mình cũng xin hướng dẩn các bạn cách thức hiển thị ngày tháng 1 cách thân thiện hơn.

Bạn sẽ thấy cách hiển thị này tương tự với các mạng xã hội như Facebook, Google +,…

hien thi thoi gian than thien nhu Facebook

Có nhiều cách để thực hiện việc này nhưng giới hạn ở bài viết này mình chỉ xin giới thiệu 2 cách mà mình biết

Dùng hàm human time diff

Đây là một hàm của wordpress giúp bạn nhanh chóng tạo ra dạng hiển thị thời gian như vậy

Chỉ cần để dòng lệnh bên trên vào nơi bạn muốn hiển thị là được.

Dùng hàm tự code

Nếu bạn không muốn dùng hàm có sẳn thì có thể dùng đoạn code bên dưới.Lọi ích của việc dùng code là bạn có thể tùy chỉnh lại cho phù hợp với nhu cầu của bạn cũng như của website của bạn.

Nếu website bạn không phải dùng mã nguồn WordPress thì cũng có thể dùng hàm này để hiển thị.Cách dùng hàm này như sau
[code language=”php”] time_stamp(get_post_time(‘U’, true)); [/code]
Vậy là xong rồi ! Nếu có bất cứ thấc mắc gì các bạn cứ để lại bình luận mình sẽ cố gắng giúp các bạn.

Tổng hợp cách ẩn Admin Bar trong WordPress

Mặc định thì khi đăng nhập vào website wordpress thì trên đầu trang web sẽ xuất hiện một thanh màu đen được gọi là Admin Bar. Có tác dụng giúp thành viên có thể sửa bài, xem thông tin cá nhân,viết bài mới,…tùy thuộc vào quyền hạn của thành viên.Với những site nhiều thành viên thì Admin Bar sẽ không còn cần thiết vì thường sẽ có một bảng control panel riêng cho thành viên.

adminbar

Trong bài viết này mình sẽ hướng dẩn các bạn cách ẩn Admin Bar cho thành viên đơn giản:

Ẩn Admin Bar bằng code

Bạn muốn ẩn Admin bar với thành viên , trừ Admin thì thêm đoạn code này vào file function.php

Còn muốn ẩn với tất cả thành viên bao gồm cả Admin thì bạn thêm đoạn này

 Ẩn Admin Bar bằng plugin

Nếu không muốn đụng đến code thì bạn có thể dùng plugin thay thế bằng những plugin sau :

Disable WP Admin Bar Removal

disable WP Admin Bar Removal

Plugin này đơn giản chỉ cho phép chọn ẩn hay hiện Admin Bar.

Admin Bar Disabler

Admin Bar Disabler

Plugin cho phép bạn ẩn đối với từng nhóm thành viên.Khuyên dùng cho những website có phân quyền cho từng nhóm user.

Còn rất nhiều plugin có chức năng tương tự nhưng mình nghĩ đoạn code ngắn phía trên sẽ hữu dụng hơn.Bạn có thể tìm thêm bằng cách search từ khóa “Hide Admin Bar”.

Tổng hợp 9 plugin tạo Breadcrumbs cho WordPress

Như ở bài viết trước mình đã đề cập đến lợi ích của Breadcrumbs với website.Không thể phủ nhận sự cần thiết của nó đối với website.Nếu website hoặc blog của bạn có nhiều nội dung thì bạn nên sử dụng 1 trong những plugin mà mình giới thiệu trong bài viết này.

Đọc thêm :Thêm Breadcrumbs vào WordPress không cần Plugin

Ở bài trước mình đã hướng dẩn các bạn cách thêm Breadcrumbs cho wordpress mà không cần dùng plugin.Nhưng nhiều bạn không muốn đụng đến code mà thích dùng plugin nên hôm nay mình viết bài này để giới thiệu đến các bạn những plugin giúp các bạn tạo ra 1 Breadcrumbs đơn giản và hiệu quả.

Nhưng trước tiên mình sẽ nói đến lợi ích của việc sử dụng Breadcrumbs cho website của bạn:

Hoạt động như thanh điều hướng thứ 2

Tạo ra sự thuận tiện cho người dùng nếu họ muốn đến 1 pages cụ thể hoặc 1 danh mục (category) một cách nhanh chóng.Nó là một yếu tố quan trọng đối với người đọc vì blog thân thiện và dể sử dụng sẽ thu hút họ quay trở lại.

Giúp xác định được vị trí của độc giả

Đây là điều quan trọng vì nó giúp người dùng xác định được mình đang ở đâu trên website của bạn.Không tạo cho họ cảm giác bị lạc lỏng giữa hàng trăm hoặc đến hàng ngàn bài viết.

Hổ trợ SEO

Breadcrumbs giúp tạo ra các liên kết nội bộ bằng những từ khóa có liên quan với nhau.Các công cụ tìm kiếm hiện nay rất chú trọng đến các dữ liệu có cấu trúc và bạn có thể xem 1 ví dụ mình họa việc dùng Breadcrumbs

ho tro rich snippetts

Và đây là một kết quả không dùng Breadcrumbs

loi ich khi dung breadcrumbs

Phần link trong kết quả tìm kiếm đẹp hơn, gọn hơn và khi người dùng click vào thì nó dẩn trực tiếp đến trong trường hợp này là category.

Bên trên là những lợi ích khi bạn thêm Breadcrumbs vào website của bạn, còn bây giờ mình xin giới thiệu đến các bạn 9 plugin có thể giúp bạn làm được những điều trên:

1- Breadcrumb NavXT

Đây là một plugin hoàn hảo cho bạn.Bạn có thể tùy chỉnh nhiều thứ bên trong plugin này để đáp ứng được như cầu sử dụng của bạn.Một ưu điểm của Breadcrumb NavXT nữa là phần quản lý trong admin rất đơn giản.

1- Breadcrumb NavXT

2- WordPress SEO by Yoast

Nếu bạn đang sử dụng Plugin SEO này thì bạn có thể kích hoạt tính năng Breadcrumbs trong phần setting và copy đoạn code đến nói mà bạn muốn hiển thị

wordpress-seo

bat tinh nang Breadcrumbs trong SEO by Yoat

Sau khi check vào Enable Breadcrumbs bạn chỉ cần copy đoạn code sau để vào nơi bạn muốn hiển thị trên theme của mình.

[code language=”php”]
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb(‘&lt;p id="breadcrumbs"&gt;’,’&lt;/p&gt;’);
}
[/code]

 3- Instant Breadcrumbs

Khi sử dụng plugin này , bạn không cần phải chính sửa bất cứ gì trong theme của bạn.Nó sẽ dùng Primary Menu để thể hiện Breadcrumbs.Plugin này thích hợp với những bạn không am hiểu nhiều về code.

Instant Breadcrumbs

4- Breadcrumbs Everywhere

Đây là một plugin hổ trợ cho BuddyPress.Bạn chỉ cần chèn 1 dòng code vào thôi.

Breadcrumbs Everywhere

Thêm một số hình ảnh về plugin này

Breadcrumbs Everywhere buddypressBreadcrumbs Everywhere buddypress group Breadcrumbs Everywhere buddypress setting 

5- Breadcrumb Trail

Breadcrumbs Trail

Một plugin cũng khá hay.Sắp tới mình sẽ thêm nó vào theme hiện tại mình đang dùng.

6-  RDFa Breadcrumb

RDFa Breadcrumbs

Plugin này hổ trợ thêm nhiều ngôn ngữ trên thế giới.

7- SEO BreadCrumb

SEO Breadcrumbs

Plugin này thì cho phép bạn tùy chỉnh thêm dạng hiển thị là list

8- Full Breadcrumb

Plugin Breadcrumb này cho bạn tùy chọn khá nhiều.

9- WPshore Breadcrumbs

Plugin đơn giản hổ trợ tạo Breadcrumb

Với những plugin trên bạn hoàn toàn có thể tạo ngày cho website của mình một Breadcrumb đơn giản và hổ trợ tốt cho SEO.

Thêm Breadcrumbs vào WordPress không cần Plugin

Breadcrumbs là một thành phần quan trọng của website nó giúp người dùng có thể biết được họ đang ở đâu trong website của bạn cũng tăng khả năng điều hướng và tính dễ sử dụng cho khách hàng.Có rất nhiều cách để tạo ra Breadcrumbs cho wordpress dùng plugin cũng có hay code cũng có.Hôm nay mình sẽ giới thiệu đến các bạn cách tạo ra Breadcrumbs( vụn bánh mỳ) cho WordPress mà không cần dùng Plugin.Như thế này :

dieu huong nguoi dung voi breadcrumb

Các tính năng của Breadcrumbs này như sau:

  • Hiển thị đầy đủ liên kết đến trang hiện tại: Ví dụ bài viết của chúng ta nằm trong danh mục con thì breadcrumbs sẽ giống như sau

Trang chủ »Danh mục» Danh mục con »Đăng Tiêu đề

  • Hiển thị ngắn gọn :

Trang chủ » Danh mục con »Đăng Tiêu đề

  • Nó cũng áp dụng cho Page và subPage.Ví dụ ta có Page với 3 cấp thì Breadcrumbs sẽ hiển thị như sau :

Trang chủ » Page Level 1 » Page Level 2 » Page Level 3

  • Những nơi mà Breacrumbs có thể được gắn:
    • Phân trang (nqdung.info/page/2).
    • category archive;
    • tag archive;
    • daily archive;
    • monthly archive;
    • yearly archive;
    • author archive;
    • single post page;
    • single page;
    • attachment page;
    • search results;
    • 404 error page.
  • Thêm số trang nếu như đang ở danh mục và số trang nhiều hơn 2.
  • Có thể tùy chọn dấu phân cách ở giữa.Mặc định là ».
  • Tùy chỉnh được dòng text cho link của trang chủ.
  • Quan trọng nhất là hổ trợ Google Rich Snippets.()

Code như sau :

Bạn chỉ cần thêm đoạn code này vào file function.php của theme bạn đang dùng.Sau đó thêm đoạn code này vào nơi bạn muốn hiển thị là ok rồi.

Chống spam comment đơn giản bằng Growmap Anti Spambot Plugin

plugin chong spam comment

Trong bài CommentLuv – Gia tăng lượt bình luận cho WordPress mình đã có nói đến sự quan trọng của comment trên một website,nhưng cũng có nhiều người lợi dụng nó để spam.Hiện nay có rất nhiều phần mềm cho phép bạn spam comment lên các website, diển đàn và mình cũng từng bị 1 lần.Trong vòng 1 tháng site của mình có hơn 10k comment nhưng nó không có giá trị gì cả.Có rất nhiều plugin có tác dụng chống spam comment nhưng mình thích nhất là Askimet và Growmap Anti Spambot Plugin,nếu kết hợp cả 2 thì bạn có thể phần nào yên tâm rồi đó.Askimet thì bài viết sau mình sẽ nói chi tiết hơn.Hôm nay mình sẽ nói về G.A.S.P.

G.A.S.P hoạt động như thế nào ?

Plugin này sẽ tạo ra một checkbox khi người dùng comment phải check vào thì mới gửi được comment.Đây là một cách đơn giản để tránh bot spam và cũng tránh phiền phức cho người dùng như gõ captcha.Tuy không thể ngăn chặn hết nhưng cũng có hiệu quả nhất định.

chong spam cho wordpress

Cài đặt và cấu hình G.A.S.P

Bạn cài đặt plugin xong vào phần Settings > G.A.S.P để thiết lập.G.A.S.P  cho phép bạn thay đổi các dòng thông báo của plugin nhưng bạn chỉ cần chú ý các thiết lập dưới đây:

phan thiet lap quan trong cua GASP

Maximum nunber of URL allowed in comment : Cho phép người dùng chèn tối đa bao nhiêu link vào comment.0 có nghĩa là chèn bao nhiêu cũng được.

Maximum nunber of words allowed in name field: Bạn cho phép người dùng nhập bao nhiêu ký tự vào ô name khi comment.

Tổng kết

Tuy GASP có thể giúp tăng chất lượng bình luận trên blog của bạn nhưng nó không phải là toàn năng nên khi cài vào đôi lúc bạn vẩn có thể thấy những comment lạ.Và plugin chỉ hổ trợ chứ không thay thế bạn được, bạn nên thường xuyên check comment trên blog của mình để tăng sự tương tác với người dùng.

CommentLuv – Gia tăng lượt bình luận cho WordPress

CommentLuv

Như bạn cũng đã biết Comment hay bình luận là một trong những thứ quan trọng nhất đối với một blogger vì nó thể hiện sự quan tâm của người đọc dành cho website của bạn.

Làm thế nào để thu hút comment ở blog của bạn ?

Đối với blog sử dụng WordPress thì khi bạn đến comment thì sẽ có một textbox cho bạn nhập địa chỉ website của bạn.Và khi bạn comment thì bạn sẽ có một backlink nofollow tại blog đó.Việc cho phép link từ website khác xuất hiện trên site của bạn giúp cho người đọc , bình luận có cơ hội quảng bá website của họ đến người khác khi tìm kiếm thông tin trên site của bạn, và bạn cũng có thể thu hút thêm nhiều lượt bình luận trên blog của mình.Đôi bên cùng có lợi.Nếu phần comment blog của bạn chưa cho nhập URL thì bạn nên chỉnh sửa lại điều này. :sure:

Continue reading “CommentLuv – Gia tăng lượt bình luận cho WordPress”

NQD Flat – Theme đơn giản cho blog cá nhân

NQD Flat là theme mình viết cách đây cũng khá lâu.Hôm nay share ra không phải là tự cao gì mà do một bạn yêu thích nó nên mình quyết định share ra cho mọi người cùng dùng.Theme này không có gì đặc biệt cả, do viết cho mình dùng nên mình thường hardcode hết nên bạn nào muốn dùng lại thì phải chỉnh sửa hơi nhiều đấy.

Continue reading “NQD Flat – Theme đơn giản cho blog cá nhân”