Tắt tính năng tự động định dạng nội dung autop khi soạn thảo

Hôm nay có một bạn đã nhờ mình chỉnh sửa lại theme vì một lý do là bạn ấy chèn textarea và bài viết nhưng khi xem bài viết thì WordPress lại tự động chèn thẻ <br /> và thẻ <p> và nội dung như hình dưới

wordpress tu dong chen the br vao noi dung
TÍnh năng Autop của WordPress tự động chèn thẻ br và p và nội dung

Tại sao WordPress Editor lại chèn thẻ br và p vào nội dung

Lý do là vì autop – bộ lọc giúp định dạng lại nội dung văn bản được nhập vào khung soạn thảo.Điều này giúp cho nội dung xuất ra sẽ có định dạng đúng chuẩn, nhưng cũng mang lại khá nhiều rắc rối như ví dụ ở trên, và có thể dẩn đến giao diện mà bạn sử dụng sẽ loạn hết cả lên.

Tắt bộ lọc autop như thế nào

Chỉ bằng một đoạn code đơn giản bạn sẽ có thể tránh những phiền toái của bộ lọc này.Để tắt bộ lọc autop bạn chỉ cần thêm đoạn code này vào file functions.php của theme bạn đang sử dụng.

Đoạn code nhỏ bé remove_filter này có thể giúp bạn tránh đi những phiền phức trên bằng cách loại bỏ bộ lọc ra khỏi nội dung.Nếu blog của bạn sử dụng nhiều giao diện khác nhau và bạn không muốn tốn công thêm đoạn code trên thì có thể tạo một plugin bằng cách cho đoạn code bên dưới vào một file bất kỳ và lưu lại ở thư mục wp-content/plugins

Sau khi thêm thì bạn chỉ cần vào Plugin và Active nó lên thôi.

Kết luận

Bài viết ngắn này hi vọng là có thể giúp bạn giải quyết được vấn đề.Nếu có bất cứ thắc mắc hay câu hỏi gì liên quan đền bài viết mong các bạn để lại comment bên dưới , mình sẽ trả lời nhanh nhất có thể.Chúc các bạn thành công !

Thêm phân trang cho WordPress không cần dùng plugin

Trong WordPress thì phân trang giúp bạn có thể giới hạn số lượng bài viết xuất hiện để người dùng dễ dàng theo dõi cũng như không tốn nhiều tài nguyên của server.Mặc định WordPress cũng có phân trang nhưng theo dạng bài trước, bài sau chỉ có tiến hoặc lùi nên sẽ khó khăn cho người dùng khó xác định mình đang ở trang nào trên website của bạn.

Mặc định bạn sẽ thấy phân trang dạng này nếu bạn dùng theme mặc định thì sẽ như thế này

Phân trang mặc định của WordPress
Phân trang mặc định của WordPress

Hoặc tùy theo theme sẽ có chỉnh sửa khác nhau
default-wordpress-pagination-2

Đối mới mình cũng như nhiều bạn khác thì dạng phân trang mặc định này không thích được đẹp và tiện dụng lắm.Nhưng một số trường hợp sẽ thích nếu blog hoặc website của bạn có nhiều nội dung cập nhật và bạn muốn người đọc chú ý đến những bài viết mới hơn.Hầu hết mọi người sẽ đổi từ mặc định sang phân trang dạng số cho WordPress.Bài viết này sẽ giúp bạn làm điều này mà không cần dùng tới plugin.

Thêm phân trang dạng số cho WordPress

Sau khi thực hiện theo bài hướng dẩn này bạn sẽ có phân trang tương tự như thế này:

custom-wordpress-pagination

Bạn cũng có thể sử dụng plugin WP-Pagenavi để thêm phân trang dạng này.Nhưng nếu bạn muốn làm một theme cho riêng mình thì và muốn tùy chỉnh phân trang theo ý mình thì có thể làm theo bài hướng dẩn này.Bài viết sau mình sẽ hướng dẩn bạn cách sử dụng plugin này.Còn bây giờ chúng ta bắt đầu làm việc thôi.

Bạn thêm 2 hàm trên vào file functions.php trong theme của bạn.Bây giờ bạn có thể sử dụng hàm phân trang này tại những file sau: index.phparchive.php,search.php hoặc bất cứ đâu bạn cần phân trang nhưng sẽ có một số vấn đề nếu bạn dùng custom query.Nesu dùng custom query mình nghĩ bạn nên dùng plugin để dễ dàng sử dụng hơn.

Giờ bạn chỉ cần thêm đoạn code phía dưới vào nơi bạn muốn phân trang hoặc thay thế cho phân trang mặc định nếu bạn edit lại theme.

 

Sau khi thêm vào thì bạn đã có thể sử dụng rồi.Nhưng vẩn còn xấu nên cần style css cho nó 1 chút.

 

Kết luận

Qua bài viết này bạn đã có thể phân trang cho theme của mình rồi.Các kỹ thuật nâng cao hơn bạn có thể tìm hiểu thêm ở WordPress Codex.Hi vòng bài viết ngắn này sẽ giúp ích cho các bạn.Nếu có thắc mắc hoặc yêu cầu gì cho mình bạn cứ để lại comment và mình sẽ cố gắng giải đáp nhanh nhất có thể.Chúc các bạn thành công !

Cách sửa lổi required field entry-title,Update,hCard WordPress

Nếu bạn có sử dụng Google Structured Data Testing Tools đôi lúc bạn sẽ gặp phải lổi này:
Error: Missing required field “entry-title”.
Error: Missing required field “updated”.
Error: Missing required hCard “author”.
Đây là lổi do thiếu một số thành phần của định dạng dữ liệu HatomEntry.Vậy nếu bị lổi này thì có ảnh hưởng gì đến Website của bạn không ? Đến lúc này bản thân mình cũng chưa biết nó có ảnh hưởng gì đến SEO hay không nhưng nếu Website bạn đang dính lổi này thì sẽ xuất hiện trong Google Master Tool và theo mình thì nên fix thì sẽ tốt hơn.
Wordpress sẽ tự sinh ra một thẻ hentry nếu bạn sử dụng đoạn code dưới đây:

Và đây là kết quả khi thêm:

Nhiều bạn sẽ nói rằng sao không xóa hàm post_class đi để không còn lỗi nữa.Đây cũng là một cách nhưng nó cũng có nhiều trở ngại vì một số trường hợp cần những class này ví dụ bài viết của bạn sẽ hiển thị khác khi có thumbnail thì chúng ta cần thêm class css has-post-thumbnail.

Các thẻ cần thiết của hAtom

Đầu tiên là thẻ Hentry

Đây là thẻ cần thiết vì nếu không có thì Google Structured Data Testing Tools sẽ không báo lỗi.Bạn cần kiểm tra xem trang web của mình có class này chưa bằng cách view source rồi search từ “hentry”.

Tiếp đến là thẻ Entry-title :

Bạn cần thêm class entry-title và tiêu đề bà viết ở single.php

Updated dành cho vị trí hiển thị thời gian viết bài hoặc thời gian sửa bài gần đây nhất

Với tác giả bạn cần thêm class author và vcard như đoạn code dưới đây:

Bây giờ là đến nội dung bài viết, chúng ta cần 1 thẻ entry-content

Cách sửa lổi required field entry-title,Update,hCard WordPress

Để sứa lổi này bạn có thể vào code của theme và thêm các class như hướng dẩn phía trên.Nhưng nếu bạn không hiểu rõ cấu trúc theme của wordpress hoặc bạn không biết về php, html thì bạn có thể dùng đoạn code dưới đây.Đoạn code này  sẽ giúp bạn fix được lỗi mà không cần đụng nhiều đến code.

Bạn cần thêm đoạn code này vào dưới cùng trong file functions.php.Và chúng ta cùng kiểm tra kết quả nào:

sua loi hatom trong wordpress
Với đoạn code này thì trong nội dung bài viết sẽ xuất hiện thêm một đoạn với tiêu đề, thời gian upadte và tác giả bạn có thể trang trí bằng css để hiển thị đẹp hơn hoặc bạn có thể ẩn luôn để không ảnh hưởng đến cấu trúc của site bạn

Trên đây là bài viết hướng dẩn bạn sửa lổi thiếu hatom trên WordPress.Nếu bạn có thắc mắc hay có cách hay hơn mong bạn sẽ góp ý cho mình bằng cách bình luận phía dưới.Chúc các bạn thành công !

15 mẫu thiết kế Web đẹp bằng Bootstrap nên xem

15 mau theme bootstrap dep nen xem

Twitter Bootstrap bao gồm các mã HTML và CSS cơ bản cho Typography, forms, buttons … và nhiều thành phần khác của website. Nó giúp chúng ta giảm thiểu thời gian thiết kế HTML và CSS, định nghĩa sẵn các class CSS công việc của chúng ta chỉ là sử dụng các class đó vào mục đích của mình. Ngoài ra, Twitter Bootstrap còn hỗ trợ Responsive Design. Và hôm nay, mình sẽ giới thiệu một vài website mẫu dùng Twitter Bootstrap đẹp mắt, dễ gây ấn tượng cho người xem.

SerpBook

bootstrap-website-1

ThinSlices

bootstrap-website-2

Uberflip

bootstrap-website-3

Pear Analytics

bootstrap-website-4

SugarSync

bootstrap-website-5

Jumpstart UI

bootstrap-website-6

Atmail

bootstrap-website-7

Jetstrap

bootstrap-website-8

Learndot

bootstrap-website-9

Memrise

bootstrap-website-10

Brandwatch

bootstrap-website-11

Roxanne Koranda

bootstrap-website-12

Monitor Backlinks

bootstrap-website-13

NTFY

bootstrap-website-14

Disrupt University

bootstrap-website-15

Trên đây là 15 mẫu thiết kế web bằng Bootstrap với thiết kế khá độc đáo bạn có thể học hỏi khác nhiều từ những trang này.Nếu bạn có vấn đề gì hoặc có thắc mắc cứ để lại comment tại bài viết này nhé !

Lấy url của trang hiện tại(current url) bằng javascript và jQuery

Có rất nhiều cách để có thể lấy được url của trang hiện tại trên website.Nhưng thông dụng nhất vẩn là dùng Javascript hoặc jQuery.Hôm nay mình xin giới thiệu chi tiết về các thuộc tính cũng như những hàm của javascript và jQuery giúp chúng ta có thể lấy được current url.

window.location là một hàm chỉ đọc(read-only) sẽ trả về giá trị là Location object bao gồm những thông tin về vị tri hiện tại trên Website.

Để hiểu rõ hơn chúng ta cùng xét qua một ví dụ:
http://www.test.com:8082/index.php#tab2?foo=123
Đầu tiên chúng ta sẽ get url ở trang hiện tại bằng javasrcript:

Còn dưới đây là jQuery:

Với bài hướng dẩn ngắn này hi vọng sẽ giúp ích cho các bạn trong lúc thiết kế cũng như lập trình web.Nếu có thắc mắc hoặc yêu cầu gì bạn cứ comment ngay tại bài viết này mình sẽ giải đáp nhanh nhất có thể.

Thay đổi thư mục upload hình ảnh mặc định của WordPress

Khi sử dụng WordPress thì mặc định hình ảnh sẽ được chuyển vào upload nằm trong thư mục wp-content.Vì một lý do nào đó bạn không muốn hình ảnh sẽ up vào thư mục đó mà chuyển sang một thư mục nào đó mà bạn thích.

Bạn cần thêm đoạn code dưới đây vào file wp-config.php nằm cùng cấp với thư mục wp-admin,wp-includes.wp-content.

Và bạn cần chắc chắn rằng đã thêm vào phía dưới đoạn

Nếu như thư mục myimages chưa tồn tại thì WordPress sẽ tự động tạo ra thư mục đó nằm trong thư mục wp-content với quyền ghi.Mặc khác bạn có thể tạo luôn thư mục đó bằng cách dùng FTP hoặc CPanel.

thay doi thu muc upload hinh anh trong wordpress

Như vậy là bạn đã hoàn thành công việc.Nếu bạn mở thư mục mới lên sẽ thấy mặc định WordPress sẽ phân loại hình ảnh theo ngày tháng năm.Nếu bạn muốn tất cả hình ảnh sẽ được upload vào một thư mục duy nhất thì hãy và trang admin chọn Setting->Media và chọn bỏ check vào dòng Organize my uploads into month- and year-based folders Từ lúc này hình ảnh khi bạn thêm vào bài viết sẽ chuyển hết vào một thư mục. Điều này giúp cho đường dẩn để file hình ảnh đẹp hơn nhưng nếu bạn có quá nhiều hình thì việc tìm kiếm hoặc sửa đổi hình ảnh bằng FTP hay CPanel cũng khá vất vả.

5 plugin tạo shortcode tuyệt vời cho WordPress

Như ở bải trước mình đã giới thiệu với các bạn shortcode là gì và cách tạo shortcode cho WordPress đơn giản.Cách này phù hợp với những bạn có những shortcode riêng dành cho theme hoặc plugin của mình.Còn đối với người dùng thông thường thì mình khuyến khích các bạn sử dụng plugin shortcode.Vì những lý do sau:

  • Bạn không cần đụng gì đến code.Chỉ cần cài đặt plugin là có thể sử dụng ngay.
  • Hổ trợ nhiều shortcode thuận tiện cho việc sử dụng.
  • Dễ dàng tùy chỉnh như màu sắc, font chữ, kích thước,…

Bài viết hôm nay mình sẽ giới thiệu đến các bạn 5 plugin cho phép thêm shortcode vào bài viết đẹp và thuận tiện nhất.

Shortcodes Ultimate

shortcodes-ultimate

Chi tiết

Shortcodes Ultimate là plugin tạo shortcode được download nhiều nhất trên WordPress với hơn 700.000 lượt down.Nó có thể thay đổi toàn bộ nội dụng bài viết của bạn với những shortcode mà nó cung cấp.

Cho phép bạn dễ dàng tạo buttons, tabs, boxes, sliders, responsive videos các thành phần HTML khác một cách nhanh chóng.

Plugin này có tính năng tạo shortcode với hơn 50 mẫu shortcode có sẳn, responsive design,CSS3,cho phép bạn tùy chỉnh CSS,tùy chỉnh widget và API phong phú.

Nếu bạn đăng ký Shortcodes Ultimate  Premium bạn sẽ có thêm hơn 15 shortcode mở rộng, trên 60 skin và có thể tạo shortcode của riêng mình bằng công cụ Shortcode Creator. 

 

WordPress Shortcodes

wordpress-shortcodes

Chi tiết

WordPress Shortcodes cũng là một plugin tạo shortcode nổi tiếng không kém với 150,000 lượt download từ trang chủ WordPress.org.

Cũng có chức năng tạo shortcode nhưng plugin này tối ưu cho SEO hơn.Với hơn 26 shortcode cho phép bạn xem trước kết quả và cho phép bạn tùy chỉnh CSS.

Shortcoder

shortcoder

Shortcoder cho phép bạn tạo ra những shortcode với HTML và Javascript để chèn vào bài viết hoặc page.

Plugin này rất hữu ích nếu bạn muốn chèn quảng cáo,hoặc chèn video, audio,.. vào bài viết.Điểm đặc biết của plugin này là nếu bạn không còn muốn sử dụng một đoạn shortcode nào đó trên toàn bộ các bài viết hoặc page trên website có thể hủy một cách đơn giản.

Easy Bootstrap Shortcode

easy-bootstrap-shortcode

Chi tiết

Một plugin tạo shortcode dùng Bootstrap CSS Framework.Hiện tại thì mình cũng đang dùng nó.Nếu bạn bỏ ra thêm $15 nữa thì bạn có thêm rất nhiều shortcode với hiệu ứng đẹp mắt.

Simple Shortcodes

simple-shortcodes

Chi tiết

Đúng với tên gọi của nó nếu bạn không thích những hiệu ứng màu mè, chỉ cần dùng những tính năng shortcode cở bản thì đây là plugin bạn nên cài đặt cho web của mình.

Plugin cho phép bạn thêm thông báo, button chèn cột trong bài viết và các page.Và chỉ có thế.

Tổng kết

Trên đây là 5 plugin tạo shortcode thông dụng cho wordpress mà bạn có thể tham khảo.Sử dụng cái nào còn tùy thuộc vào theme và sở thích của bạn.Chúc các bạn có những bài viết trang trí đẹp mắt.

Nếu có thắc mắc hoặc ý kiến góp ý xin để lại comment bên dưới mình sẽ cố gắng trả lời các bạn nhanh nhất có thể.

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

Plugin Jquery phong cách so sánh hình ảnh – twentytwenty

Dạo gần đây nhiều người đặt câu hỏi về tính năng so sánh hình ảnh xưa và nay trên Zing.vn là dùng plugin gì ?Hôm nay mình xin giới thiệu đến các bạn plugin tạo hiệu ứng tương tự bằng Jquery.

twentytwenty là một plugin với tính năng so sánh và chỉ ra sự khác nhau giữ hai hình ảnh.Plugin này tạo một thanh ở giữa hình giúp bạn có thể kéo qua lại để so sánh giữa tâm hình phía trên và tấm hình phía dưới như hình phía dưới.

plugin so sanh hinh anh giong zing.vn

Cách sử dụng plugin twentytwenty

Download

Đầu tiên bạn phải download plugin này về.Chú ý đây là plugin jquery chứ không phải là của wordpress nhé.Plugin twentytwenty dành cho WordPress mình sẽ giới thiệu ở bài viết sau.

Sau khi đã có file thì bạn tiến hành giải nén và làm theo những bước sau

Chèn file CSS và JS của twentytwenty và thẻ head

Bạn cần tạo thêm cấu trúc HTML theo mẫu sau

Cần chèn thêm file jquery.event.move.js để sử dụng được sự kiên ‘movestart’, ‘move’ and ‘moveend’.

Sau khi hoàn thành các bước trên chúng ta tiến hành gọi plugin làm việc

Như vậy là đã hoàn thành rồi.Bạn chạy thử file vừa làm xem như thế nào.Nếu gặp lổi hay có gì thắc mắc xin để lại comment để mình giải đáp nhé.Chúc các bạn thành công !

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.