• fans
  • 1036 reader
  • followers
Tạo WordPress Theme Phần 8 – Featured và Single Page
  • Tutorial Details
  • Độ khó: Trung bình
  • Thời gian: 30 phút
  • File size: < 300mb
  • Yêu cầu: PHP Căn bản
Có 12 bài viết trong series WordPress ThemeHiển thị

Sau một thời gian bị gián đoạn do bận làm lại giao diện cho trang web. Đến hôm nay phần tiếp theo trong Series tạo WordPress Thêm mới được hoàn thành. Trong phần này tôi sẽ hướng dẫn bạn tạo phần Featured và làm trang single.php. Phần Featured sẽ là phần hiển thị những bài post quan trọng và trang Single.php có trách nhiệm hiển thị bài post ở dạng một trang đơn lẻ.

Một phần rất quan trọng nữa trong bài này bạn sẽ học được trong bài này là cách sử dụng query_post trong WordPress. Đây là một tính năng mạnh mẽ nhất của WordPress. Nó cho phép bạn biến WordPress thành một CMS thực sự chứ không chỉ đơn thuần là một Blog Platform. Bạn cũng nên phân biệt được sự giống và khác nhau giữa query_post() và WP_Query().

Nói ngắn gọn nhất thì query_post() dùng để “thêm thắt, chỉnh sửa” Loop chính. Còn WP_Query() dùng để tạo ra một Loop thứ hai trên cùng một trang. Bạn có thể tham khảo thêm về phần này trên trang chủ của WordPress.

Thời lượng: 32:23

Download định dạng .avi chất lượng cao: MediaFire part 1, MediaFire part 2

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • Ưng Hoàng Phúc

    AI có thể giúp mình sao mình làm giao diện wordpress, khi click vào read more thì nó bị vỡ mất cái thẻ div ấy, vì dụ trong phần div class=”post-item” và trong phần Admin của wordpress mình thêm một post mới thì đã giới hạn được nội dụng mình muồn hiển thị (dùng ) anh Admin cung cấp. nhưng khi click vào phần link –read more– trong phần thiết kế thì nội dung nó không hiển thị hết, nếu mình không có height cho thẻ div đó nó còn lần sang cả phần footer mới hiển thị hết nội dung…hic..Help Me….

  • http://anhdong.vn Tuấn Nguyên

    Em hiểu rồi anh, thực ra là em xóa đúng trong file index.php của theme em đang dùng, nhưng ở trong Cpanel em lại chỉnh trang chủ hiển thị theo Page. Lúc này khi vào trang chủ em cứ tưởng là file index.php nhưng thực tế là trang page được load trước. Em đã fix được rồi.

    Còn 1 vấn đề nữa em muốn hỏi anh là, trong trang index.php em có chèn 1 cái banner làm bằng javascript (hiệu ứng chuyển ảnh) có kích thước là 920px x 360px, bên dưới nó là div content bao gồm bài viết bên trái và menu bên phải. Em có dùng hàm padding-left và padding-right để cân chỉnh cho 2 cái div bài viết và cái div menu vào giữa để đều với cái banner bên trên. Khi để ở độ phân giải màn hình là 1280 x 800 thì trang web rất đều và đẹp, nhưng khi em chỉnh lại độ phân giải 1204 x 768 thì cái menu chạy xuống dưới còn cái bài viết thì tự động thụt qua phải, nhìn rất xấu. Khi chỉnh được ở độ phân giải này thì độ phân giải kia lại bị lỗi và ngược lại. Có cách nào để fix được lỗi này không anh ?
    Cũng nói về vấn đề trên, khi định dạng css em để nguyên và thay lại cái banner javascript bằng hiệu ứng khác thì lại bình thường, độ phân giải nào cũng đều và đẹp. Nhưng khổ nỗi là em chỉ thích cái banner javascipt mà làm theme bị lỗi.
    Mong anh giúp em fix cái lỗi này!!!

  • http://www.izwebz.com Demon Warlock

    Chắc chắn là em làm sai ở đâu rồi hoặc theme em xóa là theme khác. Chứ xóa trang index.php đi rồi thì làm gì còn trang nào hiện được nữa. Kiểm tra kỹ lại xem sao.

  • http://anhdong.vn Tuấn Nguyễn

    xóa get_header ở index.php trong theme nhưng khi vào trang chủ thì trang vẫn load bình thường như chưa có gì xảy ra. Em ko hiểu chỗ này. Mong anh giải thích giúp em. Cảm ơn anh nhiều !!!

  • http://anhdong.vn Tuấn Nguyễn

    Anh DW cho em hỏi cái này chút. Cảm ơn anh !!!

    Tại sao em xóa toàn bộ code trong file index.php và lưu lại nhưng trang của em vẫn chạy bình thường là sao anh,

    Chỉ khi xóa ở page.php thì mới mất hết định dạng
    Xóa ở single.php thì trang vẫn load bình thường

    Anh DW giải thích giúp em vấn đề trên, cảm ơn anh nhiều!

  • Vernon_blue

    bác DW ơi. Link file 2 bị die rùi. E down mãi mà k được. bác up lại đi. Thanks bác nhìu!

  • hangvu

    Demon Warlock ơi. thuộc tính last-child của tag div không có tác dụng thì em phải làm sao ?

  • mr.daklak

    sau khi unclude phần featured vào và để để phần post-item không hiện thị các post trong featured ta thêm vào <?php query_posts('cat=-8')?. xảy ra vấn đề là khi thêm dòng php đó vào thì khi click vào category nào nó cũng hiện lên tất cả các post giống như trỏ về home chứ không chỉ hiện thị các post trong category đó.
    em mới mở bản demo của anh xem và thấy điều này cũng xảy ra.

    • http://www.izwebz.com Demon Warlock

      Ý chú nói mới để ý à nha. Hà hà! anh thiếu cái này chú cho vô là được
      `__abENT__lt;?php query_posts($query_string __abENT__#46; __abENT__apos;cat=-8__abENT__apos;);?__abENT__gt;` là ổn.

      thêm cái $query_string vào đằng trước là được.

      • http://www.trantam.net Bình Tâm

        Sorry anh D.Warlock, ngay dòng này

        phải thêm vào “&” trước cat thì mới ok.

        bạn nào lỗi ngay phần này thì sửa lại nhé!

        Các bài viết của anh hay lắm, hi vọng anh sẽ tiếp tục chia sẽ với tụi em.
        Thanks anh!

      • Trần Đạt

        anh ghi code gì mà em đọc không ra, em bị lỗi không bấm vào category được, nó hiển thị giống trang chủ không ah? anh làm ơn giúp em đi, em mò hoài mà nó không ra cám ơn anh Demon

  • http://www.douong.net Bryan Nguyen

    bro DW cho em hỏi chút… là vì em đang cố lắm để tích hợp cái Lightbox vào theme của mình… nhưng nó lại không tài nào hoạt động cả… cũng đã Googling chán chê rồi mà vẫn không được!

    bro có cách nào giải quyết được vụ này giúp đệ không ạ? xD

  • http://www.douong.net Bryan Nguyen

    Sau 1 thời gian táy máy, vọc qua một số tut của DM, mình cũng đang dựng em http://www.douong.net bằng WP! :D
    Vào khoe phát :”)

  • http://www.izwebz.com Demon Warlock

    À cái đó là nằm trong nguyên lý Page Hierarchy của WordPress. WordPress khi được tạo lên nó đã có nguyên lý hoạt động như sau:

    Khi mà không có trang single.php thì nó sẽ lấy trang index.php làm trang để hiển thị. Nếu bạn xem những video trước khi làm file single.php thì bạn sẽ thấy.

    Thông tin thêm về Page Hierarchy ở link dưới đây.

    https://codex.wordpress.org/images/1/18/Template_Hierarchy.png

  • http://microsoft.com KKKK

    Chào Demon, bài tut của anh khá hay, tôi hơi thắc mắc là ở trang index.php không hề nhắc tới single.php, nhưng tại sao khi click vào title hoặc thumbnail của bài post thì wordpress lại hiểu là sẽ dùng trang single.php ?

    Tôi thấy 1 số theme trên mạng, họ không dùng tên single.php mà lại dùng các tên khác, ví dụ như pages.php, tương tự như theme tutorial của Demon thì khi click vào title bài post , wordpress vẫn hiểu và sử dụng trang pages.php như 1 trang để trình bày 1 bài viết duy nhất. Có bất cứ khai báo nào để wordpress hiểu được sẽ dùng trang single.php hay pages.php không ?

  • http://www.izwebz.com Demon Warlock

    Ui chời! học code cũng phải tự mày mò nữa chứ em. Những bước căn bản anh đã hướng dẫn hết ở bài này rồi và cả bài sử dụng content slider nữa. Còn muốn áp dụng vào cái khác thì chắc phải tự vận động một chút.

  • John

    anh DW, anh có thể hướng dẫn làm cái featured như izweb dc ko vậ

  • binbin

    e đánh đúng rùi nhưng vẫn ko được.Em đành dùng cái nút thêm thẻ more ở trong wordpress nó cũng tương tự như vậy,chắc cũng được rùi,thanks a !:)

  • http://www.izwebz.com Demon Warlock

    Em kiểm tra lại xem đã gõ đúng như anh hướng dẫn trong video chưa? hoặc download source code về rồi so sánh.

  • binbin

    Anh DW và mọi người ơi! Giúp e tý.E làm tới phần giới hạn số dòng để hiển thị lên trong chỗ featured,a DW nói thêm vào mà seo e làm nó cứ hiện ra nguyên bài viết chứ ko có hiện 1 phần bài viết,mong mọi người va a DW giúp dùm!

  • daklak

    tag “” đó anh.

  • daklak

    anh ơi ! khi tạo new post em có để tag nhưng sao khi trang chủ nó vẫn hiện thị toàn bộ nội dung.

  • nhtera

    Lấy đâu ra lịch post , bạn làm ngang như đài truyền hình vậy .
    Lúc nào rảnh thì anh DW mới làm và còn nhiều công đoạn lắm lắm mới ra được TUT .Nên cứ thế mà chờ thôi , bao giờ có thì sẽ có :D

  • Danienloc

    Khà khà đợi mãi để săn tut này,hôm ni vô thì anh em đã “chén” sạch rầu (_”_) hahaha. Thank anh DW nhiều lém,hi vọng video tiếp sẽ nhanh chóng đc phát hành ^^. À anh có thể cho anh em cái lịch anh post bài này đc hok ạ,em mong đợi lắm mà công việc thì bận hok biết anh post bài mới từ lúc nào ^^ Nếu đc vậy cảm ơn anh nhiều lắm ^^ Chào cả nhà !

  • http://www.izwebz.com Demon Warlock

    @hochoi và Deeds: Ok tut sau sẽ có :D

  • học hỏi

    @Deeds : bạn thử chỉnh trong filetype của IDM thêm vào chữ FLV xem
    mình vẫn down ầm ầm mà

    Anh DW ơi
    anh làm cái TUT về Rewrite URL trong PHP được ko anh
    em nghe nói mà chưa làm được

    • http://tradehn.net Deeds

      @học hỏi: Mình thử rồi ko được vì mình vốn để flv luôn từ đầu:D. Nhưng đến lúc mình vừa down xong 2 file chất lượng cao thì bật lại nó lại bình thường :D
      Anh DW mấy video sau hướng dẫn cách styling comment form giống của anh nhá ;)) đẹp quá :D

  • Nevermore

    Em down về mà ghép lại không được anh ơi. Có bro nào bị giống tớ không thế.
    À em góp ý tí: Cái phần form comment của anh, khi kik vào ô comment thì nó dư ra 1 khoảng trắng, chuối thế :) .

  • http://tradehn.net Deeds

    Anh à, video sau hướng dẫn thêm về cách style comment form nữa nhá :D.

    • shrimp2t

      HÌ đợi mãi mới thấy ra :(( .Thank Anh em có xem qua phần này rồi :D đợi mãi video của Anh không thây ra nên phải động thủ tí cho nó “máu”. À mà Em cũng mạn phép xin phát biểu tí hiểu biết của em về theme WordPress (WP) nha :Trong 1 theme WP thông có 1 sô file chính sau :index.php (Nhất thiết phải có cho 1 theme) , header.php, sidebar.php, footer.php (3 file này có thì có mà ko có cũng dc nếu mà file index.php có lời gọi mấy file này = các hàm như get_header, get_sidebar,get_footer. còn 1 số file khac như functions.php là file chứa các hàm do người dùng định nghĩa (có hay ko có đều được. Nếu có thì file này xẽ dc đọc đầu tiên ko thi thì cứ thử thì biết :D file này sẽ dc WP tự đọng gọi vào . từ file function này mình có thể theme thắt các tính năng trong trang ADMIN của WP :D còn các file khác chưa thử . nếu có sai thì chỉ giáo hộ mình nha :D.). Tiếp theo là 1 số file khác như :page.php (file này có nhiệm vụ hiện thị nội dung cảu muc PAGE trong trang Admin :D tất nhiên với điều kiện bạn cho nó hiển thị nội dung ra :D). , file single.php thì Anh DW đã nói roài .sau đó nữa là file :comments.php (file này chứa phần comments và form comment đc gọi thông qua hàm comments_tempalte(); nếu file này ko có trong thư mục theme thì nó sẽ lấy từ thư mục theme default ),tiếp theo là file :search.php (file này thương chưa phần search form….).. tiếp theo là file 404.php file này nên và cần có . có thể tùy chỉnh cách báo lỗi 404 “pro” nhât …. trên đây là tí ý kiến của Em
      thanks .

  • http://tradehn.net Deeds

    Ơ mà cái video online anh để đuôi nó là gì sao hôm nay IDM nhà em ko down được nữa nhỉ =.=’ Mọi khi em chỉ cần down cái online video là đủ rồi … Down cái high qual lâu quá !

  • http://tradehn.net Deeds

    Chiến thôi :D

  • http://www.fam.vn Minh Phuong

    Chao anh em hoi phan: khi next hoac previous o trang chu cua em ko duoc

    khi em bo phan: o trang index.php thi van dung duoc binh thuong

    anh tra loi som giup em nha

    thank anh!

  • http://www.izwebz.com Demon Warlock

    Lỗi là lỗi gì em? không download được? không ghép file được? không xem được? anh thử download lại vẫn bình thường.

  • Nevermore

    Hình như part 2 bị lỗi rồi anh DW, anh làm ơn up lên lại giùm tụi em.

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives