Dù bận rộn rất nhiều công việc nhưng tôi không bỏ lỡ cơ hội để nâng cấp blog của mình bằng phiên bản chung kết Wordpress 2.5 vừa mới chính thức công bố được 1h trước đó.

Sau 6 tháng cuối cùng Wordpress 2.5 ra đời. Vừa vào Wordpress.org tôi rất ngạc nhiên bởi trang chủ của Wordpress.org cũng thay đổi bằng giao diện hoàn toàn mới và trước mắt mình một Wordpress.org rất nhà nghề và đẹp mắt.

Trước khi công việc cho blog của mình, tôi có dạo qua một số một số blog để tìm hiểu thêm thông tin về phiên bản Wordpress 2.5 chung kết được biết:

• Wordpress 2.5 được bắt đầu từ phiên bản Wordpress 2.3
• Wordpress 2.5 ra đời sau 185 ngày làm việc mệt nhoài của chung đội phát triển Wordpress.org
• Wordpress 2.5 được nhào nặn và thay đổi 364 files với 54008 vấn đề được bổ xung và 29136 bị loại bỏ.
• Và đây là bảng thông kê chi tiết và changelog của Wordpress 2.5

Công việc của tôi bây giờ là:

Download Wordpress 2.5 final

và cài nâng cấp blog của mình (Hướng dẫn cài đặt nâng cấp Wordpress).

Bạn nào bắt đầu hoàn toàn mới với Wordpress đọc hướng dẫn này

Nanowings sẽ cập nhật thông tin

Wordpress công bố một số screenshots và cho download WP 2.5 RC1 website của mình tại đây

Download Wordpress 2.5 Release Candidate 1

Wordpress cơ bản đã hoàn thành, nhưng chưa chính thức công bố, WP mong đợi phản hồi của bạn trong quá trình thử WP 2.5 RC1.

The software is basically done and stable, and could be released today, but we’d like to incorporate feedback from a wider audience before making it available to the general public. After a few days of your feedback we’ll set a final release date. Personally, I can’t wait.

UPGRADING

Nanowings vừa nâng cấp chạy thử trên localhost, xem screenshot:

Bạn muốn thử?

Đơn giản chỉ cần làm các bước sau:

1. Download, sau đó trong thư mục wordpress copy chèn thay thế toàn bộ files trên localhost của bạn (mình thì không copy đè thư mục wp-content), bạn phải điền thông tin trong file wp-config-sample.php và save đổi tên thành wp-config.php

2. Truy cập admin bằng địa chỉ http://www.trangcuaban.com/wp-admin/ Wordpress 2.5 đòi hỏi nâng cấp Database, chỉ cần làm 2 bước theo hình sau:

sau đó

3. Vui vẻ với testing nhé!

Looking for the excellent free magazine style Wordpress themes? Would you like making your Wordpress a pretty good look as Content Management Systems (CMS)? Of course, there are so many great free magazine style Wordpress themes helping you to do with it.

I present you my over 10 top favorite of excellent free Magazine Style Wordpress themes for professional Blogging. One of them used for my Blog. Here we go!

1.

Overstand Theme by FakeBlog.de

Live Demo | Download

2.

BranfordMagazine by DER PRINZ

Live Demo | Download

3.

Four wonderful themes by Justin Tadlock

Option theme: A too-many-options-to-count quality WordPress theme. It is highly customizable with multiple home page sections, widgets, and much more. This is what WordPress themes should be like.

Live Demo | Download

Structure Theme: A theme for news-magazine sites with a blog-friendly option too. It includes built-in video and image features that easily allow you to customize your site. There are content blocks that you can place virtually anywhere on the page.

Live Demo| Download

Vision Theme: A theme for news/magazine sites. It includes built-in video features that easily allow you to add videos to your site.

Live Demo | Download

Newspaperize – A 910px, fixed-width, widget-ready theme. Its focus is for news blogs and sites. The template makes it easy to get a lot of information to the user as quickly as possible, but in a stylish way.

Live Demo | Download

4.

The Morning After by Themasterplan.in

The Morning After is a magazine-style theme for WordPress created by Arun Kale. The theme was created based on a brief survey on the WordPress forums about what people would want to see in a unique magazine-style theme.

Live Demo | Download

5.

Mimbo by Darrenhoyt.com

Mimbo – is a magazine-style Wordpress theme which makes extensive use of WP’s template tag system to create a non-traditional layout. It contains no images and only minimal CSS styling. Mainly it exists as a clean, grid-based starter layout for designers to install and style to their own liking

Live Demo | Download

6.

The Massive News WordPress by Wpelements.com

Massive News WordPress theme is a premium theme for a not so premium price, FREE. Massive News is a two column Widget enabled theme which is very clean, fully customizable and very simple to use.

Demo | Download

7.

WordPress Grid Focus by 5thirtyone.com

WordPress Grid Focus is a three column WordPress theme created and distributed free of any dependance of WordPress plugins. Convenient navigation bars can be found at the top and bottom of pages in order to provide your visitors with ample opportunity to continue exploring. Category archives are presented via a JavaScript shelf which can be found at the top of the page.

Demo | Download

Có rất nhiều bạn hỏi tôi làm thế nào để tạo được một Archive Page cho Wordpress như trang nanowings đã tạo cho mình tại đây. Tôi viết bài này với hướng dẫn một cách ngắn gọn, nhưng dễ hiểu để bạn có thể tự tạo cho blog của mình một Archive Page theo ý muốn.

Thực chất Archive Page là một Template của Wordpress, chính Wordpress hỗ trợ tính năng này chúng ta chỉ cần khai thác nó nữa mà thôi.

Trong tất cả các themes của Worpress đều bao gồm 1 file là archive.php, nhưng file này hầu hết bỏ trống hoặc được tác giả viết rất sơ sài. Bây giờ ta có thể bổ xung và tăng tính năng truy tìm thông tin cho bạn đọc trong file này nhé.

1.

Trước tiên, bạn hãy mở archive.php bằng text editor mà bạn yêu thích, tôi thì mở bằng TextPad, nếu theme chưa có archive.php bạn có thể tạo nó bằng cách tạo một file text mới sau đó save as nó dạng .php (đặt tên đầy đủ trước khi save là archive.php)

2.

Dòng đầu tiên trong archive.php bạn hãy điền đoạn mã sau:

<?php
/*
Template Name: My Archive Page
*/

?>

<?php get_header(); ?>

3.

Tiếp theo là bước tạo nội dung trang archive.php, bằng cách bạn add đoạn code tiếp theo đó

<?php while(have_posts()) : the_post(); ?>
<h2>Archive Page</h2>
<ul>
<?php
$myarchive = get_posts(’numberposts=100&offset=0);
foreach($myarchive as $post) :
?>
<li><?php the_time(’F j, Y’) ?> | <a href=”<?php the_permalink(); ?>”><? php the_title(); ?></a></li>
<? php endforeach; ?>
</ul>
<?php endwhile; ?>

Đoạn mã này cho phép truy xuất toàn bộ 100 bài đã đăng trong blog của bạn, giống như trang archive nanowings đã tạo, xem demo trang của nanowings.

4.

Dòng cuối cùng trong archive.php, bạn add

<?php get_footer(); ?>

5.

Bây giờ bạn hãy upload file archive.php lên host theme của bạn, viết 1 trang lưu trữ và liên kết archive page bạn vừa tạo, bằng cách vào Admin\Write\Page đặt tiêu đề cho trang (tôi đặt Archive Page), sau đó liên kết Template bằng cách ở thẻ Page Template bên phải Write page bạn hãy chọn Template cho trang này là My Archive Page (Xem hình).

Chúc thành công!

Cách sử dụng:

Hãy làm theo trình tự sau

1. Download file .zip. Trong file zip bao gồm 2 files timy-lastestheadlines.php và limit-post.php.
2. Upload timy-lastestheadlines.php lên theme bạn đang sử dụng (/wp-content/theme/yourtheme),
3. Upload limit-post.php plugin lên /wp-content/plugin/, sau đó active trong Dashboard.
4. Tiếp theo, copy đoạn mã css sau và paste bất kỳ trong style.css và thay đổi width cho phù hợp với theme của bạn (Mặc định: width: 288px; ) .

   /*Timy Latest Headlines*/
   .timy-lastestheadlines{width: 288px;/*Thay giá trị width cho phù hợp với sidebar theme của bạn*/
   display:block;float:left;font-family:Verdana,Tahoma,Arial;margin: 5px 0;padding:0 5px;background:#252E35;border:#FD5CA0 1px solid;}
   .timy-lastestheadlines h2 {font-size:20px;color:#B0CE26;margin:5px 0;padding:0 0;}
   .timy-entry h3 {font-size:14px;font-weight:bold;margin:3px 0;padding:0 0;letter-spacing:-1px;}
   .timy-entry p {color:#4B4B4B;font-size:10px;margin:3px 0;padding:0 0;}
   .timy-entry p a {color:#4B4B4B;}.timy-entry a {color:#C49500;}
   .timy-entry a:hover {color:#2E92D1;background:none;}
   .timy-excerpt p{overflow:hidden;color:#D2D2D2;font-size:11px;margin:5px 0;padding:0 0;}
   .timy-excerpt p a {color:#2E92D1;font-size:10px;text-decoration:none;}
   

5. Add đoạn mã sau vào sidebar.php, nơi bạn muốn hiển thị.

   <div>
   <ul>
   <li><?php include(TEMPLATEPATH . '/timy-lastestheadlines.php'); ?></li>
   </ul>
   </div>
   

Bạn đã làm xong.

Download

[download#4]

Screenshot

Bạn có thể lưu lại comment ở trang này nếu muốn trao đổi với nanowings.

timy-lastestheadlines sử dụng plugin limit-post, bản quyền thuộc về tác giả Alfonso Sánchez-Paus Díaz y Julián Simón de Castro

Gravatars sẽ hỗ trợ trong Dashboard của Wordpress 2.5, users được quyền sử dụng chức năng này trong cấu hình và profile của mình trong bảng quản trị theo đường dẫn Settings/Reading. (click vào thumbnail để xem hình lớn)

Avatars sẽ có trong Wordpress 2.5 cũng không có nghĩa là bắt buộc phải thêm avatar trong theme, nếu chúng ta không muốn sử dụng hiển thị avatar cho theme của mình và cho users.

Nhưng cũng nên tìm hiểu về nó chút xíu:

Hàm sử dụng add avatar vào theme có dạng get_avatar và trả giá trị là ảnh avatar với thẻ html <img>

Định dạng hàm get_avatar trong theme của Wordpress 2.5 sẽ là

function get_avatar( $id_or_email, $size = ‘64′, $default = ” )

Dùng ID hoặc địa chỉ email của tác giả và comment users để nhận dạng ($id_or_email), với cỡ avatar tùy ý ($size = ‘64′) (ở đây 64px) và đường dẫn url tới hình avatar ($default = ”).

Chi tiết hàm get_avatar() bạn xem theo link bên dưới.

Tin từ weblogtoolscollection.com và boren.nu

Khai báo biến

<?
$email = $comment->comment_author_email;
$default = ""; // link to your default avatar (liên kết chỉ vào thư mục chứa ảnh avatars trên server)
$size = 40; // size in pixels squared (cỡ avatar, có thể thay đổi cho phù hợp)
$grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=
" . md5($email) . "&default=" . urlencode($default) . "&size=" . $size;
?>

Gravatars sẽ nhận dạng và truy xuất hình ảnh avatar thông qua biến $email, tức là địa chỉ email của người viết comment.

Upload Image

Chỉ cần upload image lên server của bạn với kích thước 40px (kích thước có thể thay đổi được bằng cách thay giá trị ở biến $size), nếu người viết comment không có avatar ở www.gravatar.com, hoặc để avatar mặc định bất kỳ.

Điền mã HTML

Tiếp theo add mã HTML sau vào bất kỳ chỗ nào bạn muốn hiển thị, chẳng hạn như trên sidebar.

<img src="<?=$grav_url ?>" height="<?=$size ?>" width="<?=$size ?>" alt="User Gravatar" />

Bạn nên đọc comments của bài viết How to Setup Gravatars for your Blog – Plugin Free! để tìm hiểu thêm.

tác giả biểu hiện cảm xúc không thể thiếu ở mỗi bài viết, nếu smiley đó hiển thị lệch lạc hoặc bị bao bọc bởi đường viền thì smiley đó trở thành buồn cười thật, đúng không bạn?

Làm cách nào loại bỏ đường viền và đặt chúng đúng vị trí dòng trong câu… mình chỉ small tip sau là bạn làm được việc đó, có thể bạn biết hoặc chưa biết

Bạn add code sau vào trong style.css là xong:

img.wp-smiley{

margin: 0 0;

padding:0 0 0 0;

border:none;

background:none;

}

(thay giá trị padding để đặt chúng đúng dòng, boder: none; loại bỏ viền và background:none; không có nền)

Bạn đã làm xong

Vậy hiện tại có bao nhiêu related post plugins được viết cho Wordpress, nanowings đưa ra danh sách sau:

1. Similar Post plugin của rmash.com
2. Related Entries của wasabi
3. Terong Related Links của erwin@terong và
4. Simple Tags của herewithme.fr

Mục đích của các plugins trên là đều hiển thị bài viết liên quan hay bài viết tương tự cùng chủ đề sau mỗi bài viết trên blog của bạn.

Bây giờ là lựa chọn của bạn!

Trong khuôn khổ bài viết này nanowings không đi sâu vào từng plugin, mà đề cập đến plugin duy nhất đó là SIMPLE TAGS của herewithme.fr.

Bởi vì,

• Simple Tags là kết hợp tuyệt vời giữa việc hiển thị từ khóa (tags), cho phép liên kết bài viết liên quan (related post) với các từ khóa đó và hơn thế nữa.
• Do vậy, càng ít plugins bao nhiêu thì blog của bạn sẽ truy cập nhanh hơn, giảm được tải cho server bạn đang host, ít nhất blog của bạn ít hơn 1 plugin.
• Tự động chọn bài viết liên quan theo từ khóa (tag) (ví dụ các bài viết có cùng từ khóa Wordpress sẽ được SIMPLE TAGS tự động chọn làm bài viết liên quan cùng chủ đề Wordpress), không như những plugin khác phải chọn thủ công.
• Sau khi lựa chọn và tìm hiểu thì Simple Tags đối với mình là plugin hay nhất hiện nay và đang được sử dụng trên blog của nanowings.
• Simple Tags được tác giả cập nhật và nâng cấp thường xuyên, vì vậy vấn đề bảo mật blog đảm bảo hơn.

Chú ý: Simple Tags chỉ tương thích với Wordpress 2.3+

Hướng dẫn cách sử dụng (chỉ cho bài viết liên quan)

Cũng giống như các plugin khác bạn phải làm các công việc tuần tự sau

1. Download và giải nén “Simple tags”, sau đó tải lên thư mục “plugins” host của bạn (/wp-content/plugins/)
2. Kích hoạt plugin trong dashboard
3. Trong Wordpress Admin, bạn hãy vào tags > tags options để lựa chọn và đặt cấu hình và nhớ save.

Cách sử dụng hàm st_related_posts() của Simple Tags cho bài viết liên quan

Tiếp theo, bạn hãy copy đoạn mã sau và dán vào sau bài viết trong file single.php

<div>
<h2>Bài liên quan:</h2>
<ul>
<?php st_related_posts(''); ?>
</ul>
</div>

Hàm st_related_posts(”") cho phép hiển thị tiêu đề bài liên quan và mỗi bài cho biết có bao nhiêu ý kiến sau tiêu đề. Bạn có thể sắp xếp hoặc hiển thị bài liên quan theo ý muốn bằng cách add thêm các parameter trong (’ ‘) .

Ví dụ, bạn muốn hiển thị 20 bài liên quan

<?php st_related_posts('number=20'); ?>

Xem thêm ý nghĩa của các parameters đó tại đây

Vấn đề tiếp theo là bạn phải đặt từ khóa (tag) cho mỗi bài viết làm sao để có thể hiển thị bài viết liên quan.

Đối với cách sử dụng hiển thị Tags và các chức năng khác, nanowings không đề cập trong bài viết này, nhưng trong quá trình sử dụng gặp sự cố bạn có thể trao đổi với nanowings bằng cách để lại comment.

Tìm hiểu và xem hướng dẫn bằng Sreenshots về Simple Tags theo liên kết này.

Chẳng biết bắt đầu từ đâu đây, bởi vì quả thực rất đơn giản để tạo date stamp cho Wordpress, mà tôi lại rất thích nó mỗi lần mang CSS ra nghịch ngợm và trang trí. Tạo date stamp cũng là bài học đầu tiên của tôi về CSS, đến bây giờ lại được dùng lần nữa cho Wordpress và viết bài này trên blog của mình chia sẻ cách tạo nó.

Vị trí của date stamp thường được đặt bên trái tiêu đề trong single.php, hoặc bên phải tùy vào sở thích của người làm.

Bạn có thể hình dung calendar icon & date stamp qua một số mẫu sau:

Bắt tay vào việc nhé!

Chỉ cần 3 bước để tạo:

Bước 1: Tạo background (hay calendar icon)

Dùng photoshop tạo 1 hình nền cho date stamp, bước này chú ý đến kích cỡ của image, thường có độ lớn 46×50, độ lớn phụ thuộc vào kích thước và độ cao tiêu đề bài của single.php, tìm thấy bằng cách xem font-size <hx></hx> là bao nhiêu (x=có thể là 1,2,3..tùy vào từng theme mà tác giả đặt cho nó) . Bước làm này thực sự khó khăn với ai chưa làm quen với Photoshop, nhưng đừng lo bởi trên kho tàng Internet vô vàn những thứ ta cần đến đều miễn phí và hướng dẫn cách làm qua các bài tutorial, tôi xin giới thiệu một số địa chỉ để các bạn tham khảo cách làm bằng photoshop hoặc tải chúng về.

Xem tutorial tạo calendar icon

Calendar Icon – Photoshop tutorial

Bài khác về Calendar icon

Và một bài nữa 

Hoặc download miễn phí.

Download mẫu 1

Download mẫu 2

Bước 2: Điền code

Điền code sau vào single.php, vị trí điền tùy chọn, tôi thì đặt trước tiêu đề bài viết trong single.php

<div class="date-stamp">
<div class="month"><?php the_time('M') ?></div>
<div class="day"><?php the_time('d') ?></div>
</div>

Bây giờ tìm hiểu ý nghĩa của đoãn mã trên

<div class=”date-stamp”> – bắt đầu một box – hay <div> – với tên là date-stamp

<div class=”month”> – box có tên month, nằm trong box date-stamp

<div class=”day”> – box có tên day, nằm trong box date-stamp

<?php the_time(’M') ?> – Sử dụng php hàm the-time(’M') truy xuất giá trị của tháng, ở đây là M (ký hiệu cho Month), hiển thị sẽ là ví dụ FEB.

<?php the_time(’d') ?> – Sử dụng php hàm the-time(’d') truy xuất giá trị của ngày, ở đây là d (ký hiệu cho Day), hiển thị sẽ là 2 chữ số ví dụ 28.

Bạn có thể lựa chọn cách hiển thị ngày và tháng bằng cách xem thêm ở www.php.net

</div> – thẻ đóng box.

Bước 3: Now! Trang hoàng date-stamp bằng CSS

Bước này yêu cầu bạn biết chút xíu (rất chút xíu) về CSS. Mã CSS có thể khác nhau, bởi vì nó phụ thuộc vào độ lớn của calendar icon (background), theme của bạn và của tôi, vì vậy không thể nói trước nếu bạn làm giống như bài này mà sao không thành công, nhưng về cơ bản đoạn mã CSS của tôi như sau:

/*CSS DATE STAMP BOX*/
.date-stamp{
float: left;
display: inline;
margin: 0 10px 0 0;
padding: 0 0;
background: url(images/calendar-icon.png)  no-repeat;
}

.month{
color: red;
font-family: Verdana, Tahoma, Arial;
font-size: 15px;
margin: 0 0;
padding: 0 0;
}

.date{
color: blue;
font-family: Veranda, Tahoma, Arial;
font-size: 11px;
margin: 0 0;
padding: 0 0;
}

Dĩ nhiên đoạn mã này được add thêm vào style.css và nhớ bỏ calendar-icon.png trong thư mục images theme của bạn.

đây là kết quả

Chúc bạn có theme ưng ý!