1. Hiện tại có một số member mạo danh BQT để giao dịch trên diễn đàn và đã LỪA ĐẢO khá nhiều tại chuyên mục Adwords... Mọi người cảnh giác và đọc bài: Giới thiệu giao dịch đảm bảo bởi @Admin

Hướng dẫn TỰ tạo Theme cho WP: Responsive Wordpress theme

Thảo luận trong 'Hỏi đáp, thảo luận code, themes cho Seo Blog' bắt đầu bởi lamvt, 15/5/13.

Lượt xem: 92,739
  1. lamvt

    lamvt Cựu Administrator

    Gia nhập:
    14/9/11
    Bài viết:
    973
    Đã được thích:
    1,123
    Web:
    How To Create Responsive Wordpress Theme From Scratch with Bootstrap - Twitter

    Ở bài hướng dẫn này mình sẽ hướng dẫn các bạn tự tạo cho mình 1 theme cho Wordpress mà có thể phù hợp với mọi trình duyệt và chạy tốt trên cả Destop - Laptop and Smartphone ( Responsive Wordpress Theme ) dựa trên Bootstrap - Twitter.

    Các bạn có thể lấy code để tham khảo

    [​IMG]


    Step 1: Chuẩn bị files and Folders
    Mở website của bạn bằng FTP hoặc filemanager nào đó và tạo thư mục "responsive_theme" trong 'wp-content/themes' .
    Ví dụ : http://www.joomres.com/wp-content/themes/responsive_theme/

    Tạo folder và files theo list sau:
    responsive_theme/header.php - This file will contain the code for the header section of the theme;
    responsive_theme/index.php - This is the main file for the theme. It will contain the code for the Main Area and will specify where the other files will be included;
    responsive_theme/sidebar.php - This file will contain the information about the sidebar;
    responsive_theme/footer.php - This file will handle your footer;
    responsive_theme/style.css - This file will handle the styling of your new theme;
    You can either create those files in your local with a simple text editor(like notepad for example) or Notepad Pluss and upload them to your theme folder.

    Step 2: Download Responsive Bootstrap - Twitter files


    Download bản mới nhất của Bootstrap và upload tất cả (including: css, img, js) vào theme folder

    Step 3: làm việc với các files



    nên sử dụng text editor Notepad Pluss để sửa hoặc code mới css hay php.
    a. The header.php file code
    Mã:
    
    lang="en">
     
     
     Bootstrap, from Twitter
     
     
     
    
     
     echo get_template_directory_uri(); ?>/css/bootstrap.css" rel="stylesheet">
     
     /css/bootstrap-responsive.css" rel="stylesheet">
    
     
     
    
     
    
     
    
     
    b. The index.php file code
    Mã:
    
    

    Hello, world!

    This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.

    Learn more »

    Posted on


               
          


    c. The sidebar.php file code


    Mã:
    
    
    
    d. The footer.php file code

    Mã:
    
    
    
    Bây giờ bạn có thể upload toàn bộ và mở login vào backend của website và setup new theme as default
    Kiểm tra kết quả của bạn bằng cách rreffresh trang chủ.
    Gặp sự cố các bạn có thể liên hệ hỗ trợ tại http://www.joomres.com Download file mẫu http://www.joomres.com/wp-content/themes/responsive_theme/responsive_wordpress_theme.zip

    Xem thêm chi tiết

    How to create responsive Prestashop theme with Twitter Bootstrap from scratch
    How to creat joomla template 3.0 step by step: Boostrap and responsive Joomla 3.0 template

    kietnhan99, newriver, banta and 2 others like this.
  • Vinataba

    Vinataba Top 9

    Gia nhập:
    6/3/11
    Bài viết:
    114
    Đã được thích:
    6
    Web:
    Bài viết khá hay cho bạn nào sử dụng WP.
    Bây giờ xu hướng theme responsive ngày càng phát triển, rất nhiều theme wp hỗ trợ responsive đẹp ;)
  • saokim

    saokim Top 8

    Gia nhập:
    18/1/13
    Bài viết:
    175
    Đã được thích:
    38
    Nơi ở:
    saokim.com.vn
    Web:
    Bài viết rất hay, lần sau bạn làm thêm một bài về tạo theme mobile cho wordpress nữa thì hay, đang cần mà chưa tìm thấy tài liệu học
  • vq_duy

    vq_duy Top 7

    Gia nhập:
    29/9/10
    Bài viết:
    1,172
    Đã được thích:
    80
    Web:
    cho mình hỏi chút bây giờ có thêm 1 cái gọi là boottrap của twitter , cái đấy áp dụng trong thiết kế themes như thế nào vậy bạn
  • chuquang

    chuquang Top 10

    Gia nhập:
    22/4/13
    Bài viết:
    23
    Đã được thích:
    4
    Web:
    Nhấn vào đây để mở rộng...
    Cái này em chưa hiểu lắm, Mình có thể dùng cái này để tự design themes do mình vẽ ra trên photoshop không?
    Last edited by a moderator: 11/4/14
  • banta

    banta Seo Newbie

    Gia nhập:
    16/5/13
    Bài viết:
    7
    Đã được thích:
    0
    Web:
    Cảm ơn bài viết của bạn nhiều lắm, mình đang cần cái này để tạo một trang web.
  • Nguyễn Hiển GoogleSearchBox

    Nguyễn Hiển GoogleSearchBox Top 8

    Gia nhập:
    26/11/10
    Bài viết:
    201
    Đã được thích:
    58
    Hi all !
    Hiện nay bên mình đang cần người thiết kế website tin tức bằng wordpress cho Team, bạn nào có khả năng thì vui lòng liên hệ với mình. ♥

    Giao diện đã có người thiết kế rồi, chỉ cần làm theo 1 số yêu cầu nhỏ. :D

    Quan trọng là bạn cần viết 1 plugin cho website theo yêu cầu, plugin đơn giản thôi, gọi cho mình để biết thêm chi tiết !\:D/

    Vui lòng gọi cho mình 0936458883 Nguyễn Hiển ;;)

    PS: yêu tiên các bạn ở Hn, làm cá nhân hay cty đều okie, nếu tốt mình làm thêm 2 cái diễn đàn nữa, cảm ơn !
  • mk_poor

    mk_poor Seo Newbie

    Gia nhập:
    17/5/13
    Bài viết:
    12
    Đã được thích:
    0
    Nơi ở:
    Hà Nội, Việt Nam
    Bài viết hay, nhưng mà phải tìm hiểu thêm nhiều nhiều!!!
  • mk_poor

    mk_poor Seo Newbie

    Gia nhập:
    17/5/13
    Bài viết:
    12
    Đã được thích:
    0
    Nơi ở:
    Hà Nội, Việt Nam
    Không hiểu nhiều cho lắm!!!
  • palletmynghe

    palletmynghe Top 9

    Gia nhập:
    20/4/13
    Bài viết:
    37
    Đã được thích:
    2
    Anh ơi, còn trường hợp hình ảnh hay css ảnh mình tối ưu kích thước sao anh!? tks anh!
  • lamvt

    lamvt Cựu Administrator

    Gia nhập:
    14/9/11
    Bài viết:
    973
    Đã được thích:
    1,123
    Web:
    Chính xác như ý bạn.
  • phuc123

    phuc123 Seo Newbie

    Gia nhập:
    13/4/14
    Bài viết:
    12
    Đã được thích:
    0
    may quá đúng cái mình đang cần :) thanks
  • sangnv8it

    sangnv8it Top 9

    Gia nhập:
    28/6/14
    Bài viết:
    231
    Đã được thích:
    10
    Nơi ở:
    Hà nội
    Web:
    Bài viết hay ! thanks bạn
  • Chính

    Chính Seo Newbie

    Gia nhập:
    22/11/14
    Bài viết:
    16
    Đã được thích:
    0
    Cảm ơn admin đã chia sẻ bài viết rất hay. Admin có thể ra nhiều hơn bài viết hướng dẫn tạo theme website. Hiện tại thì giao diện Responsive đang sử dụng khá phổ biến. Hỗ trợ tích ứng website trên cả điện thoại nữa. Vậy lại phải cày quốc thêm html5 để làm thôi
  • carot246

    carot246 Top 9

    Gia nhập:
    3/2/15
    Bài viết:
    235
    Đã được thích:
    4
    Nơi ở:
    Hồ Chí Minh
    Web:
    Mình củng đang cần cái này, đang làm 1 cái wp, bửa giờ xem nhiều video của Thạch Phạm, giờ xem những đoạn code trên mở mang thêm được nhiều kiến thức
  • namtvnd

    namtvnd Seo Newbie

    Gia nhập:
    14/6/15
    Bài viết:
    1
    Đã được thích:
    0
    em là người mù tịt về code nên không hiểu cho lắm , các bác tư vấn giúp em có nên đầu tư học lại lập trình web để đi làm tỷ lệ cược bet365_trò chơi điện tử bet 365_ở việt nam có thể chơi bet365 không? không ạ ?
  • Tại mình chưa bao giờ làm thử nên hơi thấy khó hiểu. Nhưng cách hướng dẫn của bạn thật sự chi tiết. Cảm ơn bạn
  • Em Đi Học

    Em Đi Học Seo Newbie

    Gia nhập:
    9/10/15
    Bài viết:
    9
    Đã được thích:
    0
    Web:
    em chả biết gì về bên này toàn chơi blogger thôi mà hây lỗi vs cẩ bị chặn chán quá ai hướng dẫn cụ thể cho em về WF với
  • manhongit

    manhongit Top 8

    Gia nhập:
    29/6/15
    Bài viết:
    192
    Đã được thích:
    35
    Web:
    Đang muốn làm cái wordpress xem thế nào. ÁP dụng luôn bài viết của anh xem sao
  • carot246

    carot246 Top 9

    Gia nhập:
    3/2/15
    Bài viết:
    235
    Đã được thích:
    4
    Nơi ở:
    Hồ Chí Minh
    Web:
    Wordpress mình thấy có nhiều giao diện đẹp mà toàn tốn phí, nếu mình xài giao diện bình thường, mình có thể can thiệp sâu và source để chỉnh theme theo ý của mình không? Mọi người cho mình ý kiến là có nên tạo web bán hàng bằng WP không?

  • Nội quy khi thảo luận:

    Dù bạn có cố tình spam bằng cách nào khi BQT diễn đàn phát hiện sẽ lập tức banned nick và xoá toàn bộ bài viết của bạn. Ngoài ra khi phát hiện ra Spam hãy gửi thông báo cho BQT diễn đàn. Hãy suy nghĩ trước khi hành động..!
    ✓ Khi muốn trả lời ai đó, bạn gõ @ cộng thêm nick diễn đàn của người đó phía sau @, giống như tag tên trên Facebook.
    ✓ Yêu cầu khi bình luận, bạn phải gõ chữ rõ ràng, không viết tắt, gõ tiếng Việt đầy đủ dấu câu.
    ✓ Nên dùng font chữ mặc định của diễn đàn, không tô màu lòe loẹt hay dùng size chữ quá lớn khi bình luận.
    ✓ Bài viết, comment... không được phép quảng cáo dịch vụ, rao vặt, pr... Loại trừ ở chuyên mục Rao vặt đã cho phép.
    ✓ Nghiêm cấm các chủ đề dạng: Cứu em với, help me, giật tít, câu view... dưới mọi hình thức.
    ✓ Tất cả các thành viên tham gia diễn đàn cần đọc kỹ Nội quy chung và nghiêm túc tuân thủ.


    Chia sẻ trang này

    Đang tải...