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

Thảo luận trong 'Chia sẻ Theme, Code' bắt đầu bởi lamvt, 14/12/14.

Đã xem: 2,054

  1. lamvt Khách

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


    <!DOCTYPE html>
    <html <span class="IL_AD" id="IL_AD9">lang</span>="en">
    <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="/<?php <span class="IL_AD" id="IL_AD6">echo</span> get_template_directory_uri(); ?>/css/bootstrap.css" rel="<span class="IL_AD" id="IL_AD3">stylesheet</span>">
    <link href="/<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
    <link href="/="<?php echo get_template_directory_uri(); ?>/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="/<?php echo get_template_directory_uri(); ?>/js/html5shiv.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
    </head>

    <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
    <div class="container-fluid">
    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="brand" href="#"><?php bloginfo('name'); ?></a>
    <div class="nav-collapse collapse">
    <p class="navbar-text pull-right">
    Logged in as <a href="#" class="navbar-link">Username</a>
    </p>
    <ul class="nav">
    <?php wp_list_pages(array('title_li' => '', 'exclude' => 4)); ?>
    </ul>
    </div><!--/.nav-collapse -->
    </div>
    </div>
    </div>
    b. The index.php file code

    Mã:


    <?php get_header(); ?>
    <div class="container-fluid">
    <div class="row-fluid">
    <div class="span3">
    <?php get_sidebar(); ?>
    </div><!--/span-->
    <div class="span9">
    <div class="hero-unit">
    <h1>Hello, world!</h1>
    <p>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.</p>
    <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
    </div>
    <div class="row-fluid">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="span4">
    <h2><?php the_title(); ?></h2>
    <h4>Posted on <?php the_time('F jS, Y') ?></h4>
    <p><?php the_content(__('(more...)')); ?></p>
    <hr>
    </div>
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div><!--/row-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div><!--/span-->
    </div><!--/row-->

    <hr>
    <?php get_footer(); ?>
    </div><!--/.fluid-container-->

    c. The sidebar.php file code

    Mã:


    <div class="well sidebar-nav">
    <ul class="nav nav-list">
    <li class="nav-header"><?php _e('Categories'); ?></li>
    <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
    <li class="nav-header"><?php _e('Archives'); ?></li>
    <?php wp_get_archives('type=monthly'); ?>
    </ul>
    </div><!--/.well -->
    d. The footer.php file code

    Mã:


    <footer>
    <p>&copy; Company 2013. Developed by <a href="http://joomres.com" title="Responsive templates">Responsive templates</a> | <a href="http://joomquery.com" title="Responsive templates">JoomQuery</a></p>
    </footer>

    </div><!--/.fluid-container-->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/<?php echo get_template_directory_uri(); ?>/js/jquery.js"></script>
    <script src="/<?php echo get_template_directory_uri(); ?>/js/bootstrap-transition.js"></script>
    <script src="/<?php echo get_template_directory_uri(); ?>/js/bootstrap-alert.js"></script>
    <script src="/<?php echo get_template_directory_uri(); ?>/js/bootstrap-modal.js"></script>
    <script src="/<?php echo get_template_directory_uri(); ?>/js/bootstrap-dropdown.js"></script>
    <script src="/<?php echo get_template_directory_uri(); ?>/js/bootstrap-scrollspy.js"></script>
    <script src="/<?php echo get_template_directory_uri(); ?>/js/bootstrap-tab.js"></script>
    <script src="/<?php echo get_template_directory_uri(); ?>/js/bootstrap-tooltip.js"></script>
    <script src="/<?php echo get_template_directory_uri(); ?>/js/bootstrap-popover.js"></script>
    <script src="/<?php echo get_template_directory_uri(); ?>/js/bootstrap-button.js"></script>
    <script src="/<?php echo get_template_directory_uri(); ?>/js/bootstrap-collapse.js"></script>
    <script src="/<?php echo get_template_directory_uri(); ?>/js/bootstrap-carousel.js"></script>
    <script src="/<?php echo get_template_directory_uri(); ?>/js/bootstrap-typeahead.js"></script>
    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

    >>>XEM THÊM: Xét nghiệm và chẩn đoán ung thư phổi
     
    lamvt, 14/12/14
    #1
    Đang tải...
    nam lim xanh

    Bình Luận Bằng Facebook

Bài viết liên quan

Chia sẻ trang này