Hướng dẫn viết Wedget trong - viết theme trong wordpress

B1: Vào wp-content/themes, tạo cấu trúc theme như sau



B2: Mở file wp-content/themes/nhatnghe/style.css, khai báo đạon code comment sau



Lưu ý: nhatnghe là tên theme đang thiết kế

B3: Trang quản trị Wordpress, chọn "Appearance/Themes"



- Tìm và kích hoạt theme nhatnghe đang thiết kế



B4: Mở trang wp-content/themes/nhatnghe/index.php, trước </head>, chèn code nhúng css

PHP Code:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

- Trong thẻ body, viết code vẽ layout cho trang web

PHP Code:

<div id="wrapper">
     <div id="banner"></div>
    <div id="menu"></div>
    <div id="left"></div>
    <div id="content"></div>
</div>  

- Mở file wp-content/themes/nhatnghe/style.css, viết code định dạng theme



- Chuyển sang trang chủ, xem kết quả



B5: Chèn menu vào theme, trong div#menu, chèn code sau



Xem kết quả



B6: Mở file style.css, thêm các định dạng css cho menu



Xem kết quả



B7: Trong div#content, chèn code hiện Page/Post

PHP Code:

<?php if ( have_posts() ) : ?> 

<?php while ( have_posts() ) : the_post(); ?> 
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br><?php the_content(); ?> 
<?php endwhile; ?> 

<?php else: ?> 
<?php endif; ?>

Xem kết quả



B8: Tạo file functions.php để cấu hình vị trí các widget trong theme



B9: Mở file functions.php, khai báo vị trí tên cot_ben_trai_nhatnghe



B10: Vào trang quản trị Wordpress, Themes, Chọn theme nhatnghe. Kéo các widget muốn hiển thị vào Sidebat tên Cột bên trái




B11: MỞ nhatnghe/index.php, trong div#left, khai báo code hiện Sidebar tên cot _trai_nhat_nghe



Xem kết quả

__________________