Tạo widget cố định đơn giản với Q2W3 Fixed Widget

Hôm nay mình xin giới thiệu với các bạn một plugin đơn giản mà hiệu quả trong việc tạo 1 widget cố định khi bạn lăn chuột.Bạn có thể search Google sẽ ra hàng đống bài hướng dẩn tạo 1 widget cố định bằng javascript và css.Tuy cũng có kết quả tương tự nhưng bạn sẽ tốn rất nhiều thời gian đặc biệt là những bạn không rành về code lắm.Nên hôm nay mình giới thiệu đến các bạn plugin này,bạn có thể quên đi các đoạn code lằng nhằng phức tạp, chỉ việc cài đặt và sử dụng Q2W3 Fixed Widget. 

co dinh widget o sidebar don gian nhat

Continue reading “Tạo widget cố định đơn giản với Q2W3 Fixed Widget”

Hướng dẩn cách tạo Sitemap trong WordPress

Sau khi hoàn thành website và bắt đầu có bài viết thì bạn cần quảng bá website đến mọi người để họ biết và truy cập vào website của bạn.Nhưng trước khi bắt đầu công việc quảng bá thì bạn cần phải làm một việc vô cùng quan trọng nhưng lại cực kỳ đơn giản.Đó là tạo sitemap cho website của bạn.

Vậy Sitemap là gì ?

google-sitemap Sitemap hiểu nôm na là một bản đồ thu nhỏ website của bạn, nó liệt kê tất cả các liên kết có trong site của bạn.

Continue reading “Hướng dẩn cách tạo Sitemap trong WordPress”

Giải quyết vấn đề “Remove query strings from static resources”

Remove query strings from static resource

Đôi lúc bạn sẽ gặp phải trường hợp báo query string giống như vầy đối với những file javascript hay css ?ver= 2.3.7  vậy nếu thêm chuổi query như thế có ảnh hưởng gì không ? Nếu như thêm chuổi query như vậy thì không lưu cache lại được.Nếu bạn có sử dụng  http://gtmetrix.com/ thì nó sẽ báo cho bạn Remove query strings from static resources 

Continue reading “Giải quyết vấn đề “Remove query strings from static resources””

Viết plugin hiển thị thông tin tác giả bên dưới bài viết

Ngày nay thì blog không còn là 1 trang cá nhân nữa, nhiều blog đã cho các người khác đăng ký làm Guest Blog để viết bài và đăng lên blog của mình.Hôm nay mình sẽ hướng dẩn các bạn cách viết một plugin đơn giản để hiển thi thông tin của tác giả bên dưới mổi bài viết của họ.
Continue reading “Viết plugin hiển thị thông tin tác giả bên dưới bài viết”

[WordPress] Rewrite URL với Timthumb tối ưu SEO hình ảnh

Như các bạn đã biết timthumb là một thư viện resize hình ảnh nhỏ gọn , sử dụng đơn giản nên có nhiều theme dành cho wordpress sữ dụng nó.Nhưng vì URL của nó không thân thiện cho lắm dạng như vầy http://nqdung.info/wp-content/themes/nqd-bootstrap/timthumb.php?src=http://nqdung.info/wp-content/uploads/2013/04/Java_training.png&w=70&h=70&q=70 nó không được đẹp và cũng không thân thiện với Search Engine nên các bạn cảm thấy ngại khi dùng Timthumb vào các dự án của mình phải không ? Nhưng đừng lo,hôm nay mình sẽ giới thiệu cho các bạn cách để có đường dẩn thân thiện cho dang như vầy  http://nqdung.info/media/resize/70×70/r/nqdung.info/wp-content/uploads/2013/04/Java_training.png ngắn gọn hơn và nhìn dễ chịu hơn rồi.Nào bây giờ chúng ta cùng thực hiện nhé ! Continue reading “[WordPress] Rewrite URL với Timthumb tối ưu SEO hình ảnh”

[Thủ thuật] Giới thiệu về Open Graph, cách sử dụng và khắc phục khi lổi

Có lẽ các bạn đã nghe đến từ này nhiều rồi.Đây là một giao thức giúp cho các mạng xã hội sẽ lấy được nhiều thông tin hơn để hiển thị cho người dùng xem ví dụ :

facebook

 

Khi mình post một link lên facebook thì face sẽ có cái ô preview này với các thông tin như tiêu đề,hình ảnh,mô tả…Nếu website của mình ko có các thẻ Open Graph thì sao ? Không sao cả,vì lúc đó nó vẩn lấy được nhưng không theo ý của mình thôi  🙁 Continue reading “[Thủ thuật] Giới thiệu về Open Graph, cách sử dụng và khắc phục khi lổi”

[WordPress] Tối ưu hóa kết quả tìm kiếm trong WordPress

WordPress đã xây dựng tính năng tìm kiếm cho chúng ta .Nhưng tính năng tìm kiếm của WordPress là tìm tất cả mọi thứ có thể và hiển thị kết quả không như ta mong muốn.Sau đây mình sẽ hướng dẩn các bạn một số đoạn code đơn giản giúp hoàn thiện chức năng tìm kiếm hơn

Chuyển hướng đến bài viết nếu chỉ có một kết quả

Khi bạn tìm kiếm thì kết quả trả về sẽ được hiển thị bằng file search.php theo cấu trúc mà bạn định sẳn trong file này.Nhưng nếu chỉ có 1 kết quả thì sao ? Nó vẩn hiện bình thường như những kết quả tìm kiếm thông thường.Nhưng nếu bạn muốn điều hướng người dùng đến kết quả tìm kiếm này luôn thì sao ?( Chứ hiện 1 cái ra cũng như không ) Đoạn code sau đây sẽ giúp bạn làm được điều đó: Continue reading “[WordPress] Tối ưu hóa kết quả tìm kiếm trong WordPress”

[WordPress Theme] Hướng dẫn làm theme wordpress bằng Bootstrap – Phần 4

Hôm nay chúng ta sẽ tiếp tục với series làm theme cơ bản với bootstrap .Như bài trước mình đã có nói là hôm nay chúng ta sẽ làm việc với file archive.php một file đa năng của WordPress.Tại sao mình lại nói là đa năng ? Vì 1 mình nó có thể thể hiện dữ liệu cho nhiều file khác nhau.Hiển thị category,tag,archive,author trên cùng file này luôn.Bạn hoàn toàn có thể tách ra thành các file như tag.php,categories.php,author.php nếu bạn muốn hiển thị khác.Ở đây mình chỉ dùng 1 file thôi vì các thành phần đều hiển thị giống nhau.Wordpress cung cấp các hàm cho chúng ta nhận diện mình đang ở đâu vì dụ is_home() hàm này trả về true khi đang ở index
Continue reading “[WordPress Theme] Hướng dẫn làm theme wordpress bằng Bootstrap – Phần 4”

[WordPress Theme] Hướng dẫn làm theme wordpress bằng Bootstrap – Phần 3

Làm việc với file single.php và comment.php

Tiếp theo chúng ta sẽ làm việc với file Single.php.  Nói sơ qua file single thì khi chúng ta xem 1 bài viết chi tiết thì file này sẽ đc gọi ví dụ như chúng ta vào đường dần này [WordPress Theme] Hướng dẫn làm theme wordpress bằng Bootstrap – Phần 2 chẳng hạn thì WP sẽ gọi file single.php và hiển thị nội dung của bài viết đó lên.
Continue reading “[WordPress Theme] Hướng dẫn làm theme wordpress bằng Bootstrap – Phần 3”

[WordPress Theme] Hướng dẫn làm theme wordpress bằng Bootstrap – Phần 2

Chúng ta đã chuẩn bị 1 số thứ cần thiết đề làm việc rồi ! Giờ tiếp tục làm việc thôi  :doubt:

Chúng ta sẽ bắt đầu từ file header.php,footer.php,index.php trước.

Bạn hãy tưởng tượng những phần nào không thay đổi ở tất các các trang thì chúng ta sẽ đưa nó vào 2 file header.phpfooter.php

Giờ chúng ta sẽ bắt đầu với file header.php trước:

Đây là những thông số bắt buộc nếu bạn muốn có 1 theme đúng chuẩn.Ngoài phần head chúng ta cần thêm logo và menu cho wordpress.

Chúng ta sẽ thêm đoạn code bên dưới và mình sẽ giải thích sau:

Đầu tiên là menu để hiển thị menu thì chúng ta cần thêm đoạn code này vào file functions.php

Vì chúng ta sử dụng bootrap nên chúng ta cần style menu của wordpress lại

đây là đoạn khai báo rằng chúng ta sẽ style menu lại bằng  function BootstrapNavMenuWalker() .Ta sẽ thêm hàm này vào file functions.php như sau:

 

Bây giớ chúng ta sẽ vào Appearance -> Menus để thêm 1 menu vào vị trí main_top mà chúng ta vừa tạo.

theme 4

Giờ chúng ta chạy thôi ! kaka  :byebye:

Uả sao trắng tinh vầy nè   :oh:

Hjhj ! do chúng ta có gọi header ra đâu mà có cái gì  :brick:

Chúng ta cần thêm đoạn này vào index.php nữa thì mới có cái mà xem  :surrender:

khi chúng ta gọi hàm get_header() thì wordpress sẽ include file header.php vào.Nhưng không phải file nào cũng chơi kiểu này được đâu.Không có vụ file abc.php vào gọi hàm get_abc() đâu nhé ! đây là 1 số hàm mà wordpress hổ trợ

get_header();

get_footer();

get_sidebar();

…Không nhớ nữa  :sweat: chỉ nhớ 3 cái hay xài thôi

ra rồi ! mừng quá ! giờ chúng ta cần trang trí 1 chút chứ nhìn xấu quá !

Nhìn cũng được được rồi đó!

Giờ mình làm cái footer trước đi rùi cái index làm sau.Chúng ta thêm đoạn code này vào file footer.php

Các bạn nhớ là ở file header.php chúng ta đã mở 1 số thẻ như body,<div id=”container”>,<div class=”row”> mà chưa đóng thì ở file footer chúng ta cần đóng lại đề cho giao diện hiển thị đúng(Đôi lúc không đóng mà nó cũng hiển thị đúng :waaaht: ) Chúng ta sẽ trang trí footer bằng đoạn CSS sau :

Thêm đoạn <?php get_footer() ;?> vào file index.php và cùng kiểm tra nào !

theme 5

Tới đây chúng ta đã có được 1 cái header và footer rồi ! Chúng ta thêm phần hiển thị bài viết mới nhất ở trang index.php nữa là xong phần trang chủ.

WordPress cung cấp cho chúng ta 1 số hàm đề lấy dữ liệu ra như :

  • have_post –  kiểm tra xem còn dữ liệu không
  • the_post –  set các giá trị có các hàm còn lại
  • the_permalink –  lấy link của bài biết
  • the_title – tiêu đề của bài viết
  • the_tags – lấy tags của bài viết
  • the_category – lấy danh mục của bài viết
  • ….

Còn rất nhiều hàm mà wordpress cung cấp cho chúng ta.Ngoài ra chúng ta có thể viết thêm các hàm của bản thân mình trong file functions.php 

Một điều chú ý nữa là wordpress sẽ lấy số post mà mình cấu hình trong admin để xuất ra.Các bạn vào Setting > Reading để chỉnh nhé(mặc định nó là 5)

Đây là code của trang index.php.Nếu các bạn copy đoạn này vào file index.php của các bạn sẽ bị lổi do mình có sử dụng 1 số hàm riêng nữa ví dụ như :

time_stamp() để xuất ra là bài viết viết cách hiện tại bao lâu ví dụ như : cách đây 1 tiếng….

 

 _substr() dùng để lấy n ký tự đầu tiền của nội dung bài viết

catch_that_image()  lấy ra hình đầu tiên trong bài viết.Mình sẽ giải thích lý do tại sao mình lại dùng hàm này: Mổi post mình sẽ kiểm tra xem có Set featured image không nếu có thì dùng featured image còn không thì mình sẽ lấy hình đầu tiên của bài viết.Và để sử dụng được Featured Image thì chúng ta cần thêm đoạn add_theme_support ( ‘post-thumbnails’ ); vào file functions.php.

Chúng ta tiếp tục với phân trang,phân trang thì mình cũng style theo bootstrap nên sẽ dùng hàm iz_pagination

iz_pagination có nội dung như sau:

Cơ bản thì file index.php của chúng ta chỉ có thế 😀 Giờ thì style css cho nó đẹp 1 chút

Chúng ta cùng xem kết quả nào

theme 9

Giờ thì chúng ta tiếp tục với sidebar.php

Muốn sử dụng sidebar để kéo widget được thì chúng ta cần khai báo như sau trong file functions.php

Để cho sidebar phù hợp với theme mình đang làm nên mình custom nó lại đôi chút

before_widget và after_widget là dùng để bao nội dung của widget bên trong,tương tự before_title và after_title cũng vậy

vì ở index chúng ta đã gọi hàm get_sidebar() nên giờ chúng ta sẽ mở file sidebar.php và thêm đoạn code dưới đây:

Chúng ta cần lưu ý là  dynamic_sidebar(‘sidebar_widget’) chúng ta sẽ truyền cái ID của của sidebar mà chúng ta đã tạo ở function ở dây của mình là sidebar_widget

Bây giờ chúng ta sẽ test thử nhé .vào Appearance -> Widgets thêm 1 widget bất kỳ và xem kết quả nào.

theme 7

Kết quả của chúng ta đây.Chỉ việc style CSS cho nó 1 chút là đẹp lên liền :*

Giờ xem tổng thể kết quả cái nào  :boss:

Ý chưa được còn 1 chút nữa .làm luôn cái nút đọc thêm đã

Đây là css mình lấy của ThachPham.com keke

Cùng ngắm kết quả nào

theme 8

Chúc các bạn thành công ! Có gì thắc mắc xin để lại comment mình sẽ giải đáp nhanh nhất có thể cho các bạn.
Code của bài viết này ! Các bạn nên gõ lại như thế sẽ hiểu hơn về cách thức hoạt động của wordpress

Link tải