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.

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 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

 

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

Như đã hứa thì hôm nay mình sẽ hướng dẩn các bạn cách viết 1 theme bằng bootstrap.Nếu các bạn chưa biết Bootstrap là gì thì có thể xem ở bài viết  Giới thiệu và hướng dẫn cách sử dụng Bootstrap 

Mình sẽ hướng dẩn các bạn làm theme giống như theme mà nqdung.info đang sử dụng.

nqdung

Mình cũng xin nói sơ lại về Twiter Bootstrap 1 chút xíu  😀 Tương tự như  960 Grid System, Bootstrap cũng chia độ rộng của màn hình hiển thị của trình duyệt thành 12 cột (Bao nhiêu cột thì tùy bạn,bạn hoàn toàn có thể custom lại nó)

– Tại sao lại sử dụng Bootstrap và các CSS Framework khác

Twitter-Bootstrap-Tutorials

Nếu bạn đã quen với việc sử dụng các CSS Framework thì bạn sẽ thấy tốc độ design 1 trang web sẽ giảm đáng kể.Việc sử dụng  CSS Framework giúp chúng ta tránh việc lặp đi lặp lại các thao tác như reset các thẻ,style button…

Như mình đã giới thiệu ở trên , Twitter Bootstrap giúp chúng ta giảm thiểu thời gian thiết kết html và css.Twitter Bootstrap đị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.Twitter Bootstrap còn hổ trợ Responsive design một cách làm giao diện đa thiết bị rất được ưu chuộng trong thời gian gần đây.

Lúc đầu mới làm quen các bạn sẽ hơi khó khăn trong việc custom lại bootstrap 1 chút nhưng dùng nhiều sẽ quen và có khi còn “ghiền”  ấy chứ :byebye:

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

Làm theme cho WP không quá khó như các bạn nghĩ đâu,chúng ta chỉ cần 1 số kiến thức cơ bản như :

  1. HTML/CSS cơ bản
  2. PHP cơ bản : cách viết hàm,sử dụng mảng…
  3. Cách sử dụng WordPress căn bản như Posts, Pages, Widget

Không quá khó đúng không ? Nào chúng ta cùng đến bước tiếp theo.

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.
  • 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 thì dùng ZendServer.
  • Firefox bản mới có cài Developer Toolbar và Firebug hoặc Google Chrome.Mình khuyên dùng Firefox + Firebug…

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.
  • 404.php – Hiển thị nội dung khi xảy ra lổi 404
  • 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.

Có thể có nhiều hơn nhưng cơ bản thì cần bao nhiêu đây thôi…Giời thì chúng ta bắt đầu thôi.Trước tiên là cài đặt các bước cơ bản cái đã  :brick:

Đầu tiên thì chúng ta sẽ tìm hiểu 1 chút về theme của wordpress.Tất cả các theme của WordPress đều nằm trong /wp-content/theme

theme 1

 

 

 

 

 

 

Sau đó chúng ta tiến hành tải và copy các thư mục của bootstrap vào thư mục theme của chúng ta ở đây là thư mục nqdung.info.Đồng thời chúng ta cũng tiến hành tạo ra các file liệt kê phía trên và đây là kết quả của chúng ta:

 

theme 2

Giờ thì chúng ta cần làm thêm 1 số thao tác nữa:

Thêm đoạn này vào đầu file style.css:

Đoạn trên có nhiệm vụ là khai báo tên theme,tác giả,phiên bản….Chúng ta có thể vào Appearance -> Theme  để kiểm tra xem nhé

theme 3

Giờ thì chúng ta có thể active theme lên rồi ! kakak  😀

Chúng ta thêm đoạn CSS này vào file style.css đây là đoạn css canh lề của wordpress thôi..

Cơ bản là đã xong rồi đó ! Chúng ta sẽ tiếp tục thực hiện các công đoạn còn lại vào bài viết tiếp theo nhé !

Bài viết của mình có 1 số là copy từ Thachpham.com vì nó giống nhau và vì Thạch viết hay hơn nên copy qua luôn :keke: :byebye:

Những gì chúng ta có được sau bài này

Link tải

[WordPress] Đếm tổng số Posts, Pages, Categories, Tags, Comments cho WordPress Themes

wp-codesnippets

Đôi lúc  chúng ta cần lấy tổng số bài viết hay tổng số page,chuyên mục, tag,hay commnet của trang web để làm thống kê hay gì đó  😀

Bài viết này mình viết để làm tiền đề cho việc làm theme wordpress dùng bootstrap mà sắp tới mình sẽ thực hiện.

Lấy tổng số bài viết

Lấy tổng số pages

Lấy tổng số categories

Lấy số  Tags

Lấy tổng số comments

Giờ chúng ta tổng kết lại kết quả nhé !

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