Rất hân hạnh chào đón các bạn đã đến thăm Blog này!
- Nếu các bạn đang cần trao đổi về thiết kế quảng cáo, thiết kế web, thiết kế đồ họa.. - Nếu các bạn muốn tự tìm hiểu một phần mềm đồ họa , muốn tìm kiếm vài hình clipart nào đó...- Nếu các bạn đang muốn tự tay mình thiết kế một tấm thiệp, một tờ lịch bàn cho "hoàng tử hay "công chúa" ở nhà...- Nếu các bạn đang cần một sự giúp đỡ, tư vấn về nghề Thiết kế nói chung và các phần mềm đồ họa nói riêng...
Đây có thể là nơi các bạn đang tìm kiếm - Tomnhien Design Blog?!
Hãy tham quan một vòng các Nhãn (Label) mà bạn quan tâm và đừng ngần ngại post những thắc mắc, góp ý hoặc những yêu cầu của bạn. Xin cám ơn!
Widget ready là khu vực trong theme ta có thể bổ sung các tính năng cho Wordpress mà không phải edit/add code các file .php. Nó thường nằm bên trái, phải (hoặc cả hai với theme 3 cột) của khu post bài. Ở khá nhiều site, ta cũng thường thấy ở khu footer (phần dưới cùng của site) – các widget video, links…. Ở đây ta có không gian rộng rãi hơn cho các widgets có chiều ngang lớn, không thể add được vào các sidebar trái phải. Hoặc đơn giản hơn ta có thêm chỗ cho các widget cần thiết khi các sidebar đã hết chỗ.
Trong bài này ta tìm hiểu cách tạo thêm 3 vùng “widget ready” ở footer, có thể edit được trong admin area của wordpress . Tôi dùng theme default Kubrick cho bài viết này.
Step 1 Create the CSS
Việc đầu tiên cần làm là tạo vùng footer trong CSS . Open file style.css của theme bằng Notepad hoặc edit code của WP và thêm vào phần code sau đây, ta gọi là subfooter:
- #subfooter {
- width:730px;
- margin-left:15px;
- margin-right:15px;
- height:300px;
- background-color:#d5d6d7;
- clear:both;
- }
-
- #subfooter .widget {
- width:240px;
- height:300px;
- float:left;
- }
-
- #subfooter .widget .inner {
- padding:10px;
-
- }
Đoạn code trên tạo ra một vùng gọi là subfooter, a widget class, trong HTML code, ta sẽ add thêm 3 cái widget class với thuộc tính canh trái (float:left); nó sẽ được canh trái liền kề nhau.
-
Step 2 The HTML
Open file footer.php và thêm vào đoạn code sau, trước thẻ
- <div id=“subfooter”>
-
- <div class=“widget”><div class=“inner”>
- Widget 1
- div>div>
-
- <div class=“widget”><div class=“inner”>
- Widget 2
- div>div>
-
- <div class=“widget”><div class=“inner”>
- Widget 3
- div>div>
-
- div>
Bây giờ trang Blog của bạn sẽ tương tự như thế này:
-
Step 3 Making it widget ready
Hiện giờ nó vẫn chưa có tính năng “widget ready”, nghĩa là ta phải edit/add code thủ công mỗi widget qua file footer.php . Bây giờ ta sẽ làm thêm tính năng “widget ready” để có thể add/edit widgets từ Widgets page trong Admin area. Open file functions.php bằng code editor.
Ta sẽ thấy ở phần trên của functions.php như sau:
- if ( function_exists(‘register_sidebar’) )
- register_sidebar(array(
- ‘before_widget’ => ‘
- ‘after_widget’ => ‘ ’,
- ‘before_title’ => ‘
’,
- ‘after_title’ => ‘’,
- ));
', 'after_title' => '
', ));Thay đổi như sau:
- if ( function_exists(‘register_sidebar’) )
- register_sidebar(array(
- ‘before_widget’ => ‘
- ‘after_widget’ => ‘ ’,
- ‘before_title’ => ‘
’,
- ‘after_title’ => ‘’,
- ));
- register_sidebar(array(‘name’=>’subfooterleft’));
- register_sidebar(array(‘name’=>’subfootercenter’));
- register_sidebar(array(‘name’=>’subfooterright’));
', 'after_title' => '
', )); register_sidebar(array('name'=>'subfooterleft')); register_sidebar(array('name'=>'subfootercenter')); register_sidebar(array('name'=>'subfooterright'));Code này sẽ đăng ký 3 sidebars gọi là subfooterleft, subfootercenter and subfooterright tương ứng với các widgets: trái (left), giữa (center) và phải (right) trong subfooter.
Step 4 Adding the Widgets
Để thêm vào những widgets, vào admin area và click the Design > Widgets tabs. ta sẽ thấy một a drop down menu là “Sidebar”, click vào nó và ta sẽ có thêm 3 options:
Chọn một trong những subfooter options và chọn Show, nó sẽ cho phép ta add widgets ở cột trái của trang, chỉ nên thêm một widget vào mỗi vùng subfooter . Click Save Changes.
Bây giờ trang của ta sẽ tương tự như thế này:
-
Step 5 Making it neater
Nó đã hoạt dộng ngon lành nhưng vẫn còn chưa đẹp.
Thêm đoạn code sau vào file style.css.
- #subfooter li {
- list-style-type: none;
- list-style-image: none;
- }
-
- #subfooter li ul {
- padding-left:0px;
- font-size:12px;
- }
-
- #subfooter a {
- padding:5px;
- width:90%;
- text-decoration:none;
- clear:both;
- display:block;
- }
-
- #subfooter a:hover {
- background-color:#1a6198;
- color:#FFFFFF;
- }
-
Result
Và bây giờ ta đã có a widget ready subfooter.
You can download all the files here in .zip format.
Nguồn: http://help-developer.com/
Your Language
0 comments: