Tự động lấy ảnh đầu tiên bài viết làm ảnh thumb

Có nhiều cách để hiển thị ảnh thumb của bài viết ra trang chủ, trang chủ đề .... Mình xin giới thiệu các bạn các cách mà mình biết được.

1. Sử dụng plugins:

Auto Post Thumbnail tải về tại: http://wordpress.org/plugins/auto-post-thumbnail/

(Mình chưa sử dụng plugins này, các bạn cứ tải về cài đặt thử nhưng chắc sẽ thành công :D )

2. Sử dụng timthumb.php kết hợp với code:

Mình thích sử dụng cách này nhất vì hiển thị ảnh đẹp (không bị bóp méo).

 - Đầu tiên bạn mở file function.php thêm vào đoạn code sau:

function catch_that_image() {

  global $post, $posts;

  $first_img = '';

  ob_start();

  ob_end_clean();

  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);

  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image

    $first_img = "đường dẫn ảnh thumb thay thế nếu như bài viết không có ảnh";

  }

  return $first_img;

}

Các bạn nhớ thêm sau thẻ <?php nhe

- Tiếp theo các bạn vào https://code.google.com/p/timthumb/ để tải file timthumb.php về và để ngang hàng với file index.php trong theme wordpress của bạn muốn sử dụng.

 - Tạo một folder có tên là cache ngang hàng với file timthumb.php

 - Bước này sẽ hiển thị ảnh thumb của bài viết tại trang chủ, trang chủ đề, trang tags ...

<img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo catch_that_image(); ?>&w=452&h=250" border="0" />

Chép đoạn code trên và dán vào vị trí thích hợp để hiển thị ảnh thumb. Các bạn có thể chỉnh chiều dài, rộng của ảnh cho phù hợp với giao diện đang sử dụng.

*Nếu bạn không muốn sử dụng timthumb.php, tuy nhiên ảnh sẽ bị méo mó nhìn không được đẹp thì các bạn có thể dùng đoạn code sau:

<img src="<?php echo catch_that_image(); ?> width="rộng" height="cao" />

Còn nhiều cách hiển thị thumb auto khác, tuy nhiên phức tạp nên mình tạm không nghiên cứu. Các bạn có cách nào hay hơn có thể chia sẻ với mình.

Chúc các bạn thành công!

Read More

Code chuyển trang đẹp cho wordpress

Có nhiều plugins hỗ trợ công tác chuyển trang cho wordpress, ngay cả bản thân wordpress cũng đã hỗ trợ phần chuyển trang. Nhưng để cho bắt mắt và tiện dụng trong công tác tìm kiếm duyệt website, thu hút lượng page views cho site. Mình trích lượt đoạn code trong một theme mà mình có share cho các bạn.
1. Đầu tiên các bạn mở file funtions.php thêm vào code:
/********************************************************************
Page Navi
********************************************************************/
function depvn_pagination($pages = '', $range = 9){
$showitems = ($range * 2)+1;global $paged;
if(empty($paged)) $paged = 1;

if($pages == ''){
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages){
$pages = 1;
}
}

if(1 != $pages){
echo "<div class='pagination'><span class='textpage'>TRANG</span>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='.get_pagenum_link($paged – 1).'>&lsaquo;</a>";

for ($i=1; $i <= $pages; $i++){
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
}
}

if ($paged < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a>";
if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
echo "</div>\n";
}
}

if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
Các bạn thêm vào sau thẻ <?php nhe.
2. Mở style.css thêm vào code:
.pagination {
clear: both;
padding: 10px 20px 10px 20px;
position: relative;
font-size: 11px;
line-height: 13px;
}
.pagination {
clear: both;
padding: 10px 20px 10px 20px;
position: relative;
font-size: 11px;
line-height: 13px;
}

.pagination span, .pagination a {
display: block;
float: left;
margin: 2px 2px 2px 0;
padding: 6px 9px 5px 9px;
text-decoration: none;
width: auto;
color: #000;
background: #FF6600;
}

.pagination a:hover{
color: #D20045;
background: #000;
}

.pagination span.textpage {
background: #FF6600;
color: #000;
}

.pagination .current{
padding: 6px 9px 5px 9px;
background: #000;
color: #D20045;
}
3. Chèn vào vị trí mà các bạn muốn:
<div class="pagination">
                    <?php depvn_pagination($additional_loop&max_num_pages); ?></div>
4. Kết quả: 

Read More

Sửa lỗi: WordPress Memory Exhausted

Đây là lỗi mà các bạn có thể bắt gặp khi bạn thực hiện các thao tác ảnh hưởng đến dữ liệu site: cài đặt plugins hay xóa hàng loạt bài viết, thư viện... Thông thường lỗi sẽ giống như sau:

Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 2348617 bytes) in /home4/xxx/public_html/wp-includes/plugin.php on line xxx

hình ảnh:

Lỗi này là do bạn thực hiện thao tác vượt quá giới hạn memory cho phép của host, để giải quyết vấn đề này trong bài viết này mình sẽ đưa ra một cách giải quyết đơn giản nhất nhưng hiệu quả.

Đầu tiên các bạn mở file wp_config.php thêm vào dòng code sau:

define('WP_MEMORY_LIMIT','64M');

Xong save lại, và thử lại thao tác các bạn làm vừa gặp lỗi. Nếu vẫn gặp lỗi thì các bạn nên liên lạc với nhà cung cấp host, họ sẽ vào file php.ini trên host để tăng giới hạn memory. Nếu như bạn biết cách nào khác, các bạn vui lòng comment bên dưới để mình có thể học hỏi và chia sẽ.

Chúc các bạn thành công!

Read More

Chuyển từ site joomla sang wordpress

Thích tìm tòi và khám phá những cái mới là sở thích của mình. Hôm nay mình sẽ post bài hướng dẫn các bạn chuyển từ site đang sử dụng joomla sang wordpress.
     Đầu tiên, các bạn cài đặt wordpress, mã nguồn tải tại wordpress.org phiên bản mới nhất. Sau khi bạn có một site wordpress việc tiếp theo là bạn tìm và cài đặt plugins  FG Joomla to WordPress.
    Sau khi cài đặt và active plugins FG Joomla to WordPress các bạn vào Tools » Import  » Joomla (FG) để đi đến trang như sau:

Tiếp theo là bạn điền thông tin website joomla và dữ liệu. Các thông tin này các bạn có thể vào mục Global Configuration >Server của site joomla để lấy thông tin, hoặc vào file configuaration.php.
Hoàn thành bước này các bạn chuyển qua mục "Behavor", nếu muốn chuyển các dữ liệu hình ảnh, video thì các bạn tick vào Force media import
Cuối cùng các bạn lick vào nút: “Import content from Joomla to WordPress”
Tùy vào dữ liệu site của bạn có thể mất vài phút để quá trình chuyển tiếp thực hiện. Khi chuyển thành công sẽ có hình sau:

Đến đây, có lẽ các bạn nghĩ đã hoàn thành nhưng vẫn còn vài bước hoàn thiện. Việc tiếp theo là chỉnh sửa các link out hỏng. Vào plugins FG Joomla to Wordpress di chuyển xuống cuối vào lick vào nút Modify internal link.

Các lỗi thường gặp trong quá trình chuyển dữ liệu:
 - Hầu hết các lỗi gặp phải là: Fatal error: Allowed memory size of ****** bytes exhausted. 
để fix lỗi này các bạn vui lòng xem bài kế tiếp hoặc vào đây
 - Nếu bạn thấy báo database connection errors bạn phải kiểm tra kỹ thông tin dữ liệu nhập và chắc chắc rằng bạn đang đăng nhập với quyền admin.
- Lỗi ít gặp là các hình ảnh và video không thực hiện được, vấn đề này do host và bạn phải enabled hàm allow_url_open trong file php.ini

Chúc các bạn thành công và đừng quên lick +1 hoặc share bài viết cho bạn bè nhe.
(Siêu tầm và dịch lại)

Read More

Hiển thị bài viết dạng rút gọn cho wordpress

Một số theme miễn phí mà các bạn sử dụng nó có ít hàm hỗ trợ việc rút gọn bài viết hiển thị trên trang chủ. Đối với các bạn mới làm quen với wordpress thì đây là việc khó khăn. Mình sẽ hướng dẫn các bạn tùy chỉnh hiển thị bài viết trên trang chủ một cách đẹp mắt:
1. Không sử dụng code:
 - Trong quá trình soạn thảo bài đăng mới thông thường các bạn mới làm quen với wordpress sẽ không để ý đến nút "Insert more Tag" hoặc nhấn phím tắt Alt+Shift+T. Các bạn muốn ngắt bài viết ở vị trí nào thì cứ để trỏ chuột ở vị trí đó và lick vào nút "Insert more tag".

2. Sử dụng code để tùy chỉnh:
Khi sử dụng code để tùy chỉnh thì các bạn không cần phải lick vào nút Insert more tag mỗi khi soạn thảo bài viết.
 - Mở file funtions.php thêm vào đoạn code sau thẻ <?php:

function the_content_limit($max_char, $more_link_text = '', $stripteaser = 0, $more_file = '') {

    $content = get_the_content($more_link_text, $stripteaser, $more_file);

    $content = apply_filters('the_content', $content);

    $content = str_replace(']]>', ']]&gt;', $content);

    $content = strip_tags($content);

   if (strlen($_GET['p']) > 0) {

      echo "";

      echo $content;

      echo "";

   }

   else if ((strlen($content)>$max_char) && ($espacio = strpos($content, " ", $max_char ))) {

        $content = substr($content, 0, $espacio);

        $content = $content;

        echo "";

        echo $content;

        echo "...";

        echo "&nbsp;<a href='";

        the_permalink();

        echo "'>"."</a>";

        echo "";

   }

   else {

      echo "";

      echo $content;

      echo "";

   }

}

- Mở file index.php hoặc các file các bạn muốn tùy chỉnh thay đoạn code
<?php the_content(''); ?>
thành đoạn code: <?php the_content_limit('140'); ?> 
- Đến đây thì nội dung bài viết hiển thị ngoài trang chủ của bạn chỉ là dòng trích dẫn nội dung text của bài viết mà không có tiêu đề, ảnh đại điện, dòng chú thích...
 - Công việc tiếp theo là hiển thị tiêu đề bài viết, ảnh đại diện và dòng chú thích...
   + Hiển thị tiêu đề: chép code <a title="<?php the_title(); ?>" class="thumb" href="<?php the_permalink(); ?>"> phía trên code <?php the_content_limit('140'); ?> 
   + Hiển thị ảnh đại diện: có nhiều cách để thể hiện ảnh đại diện ra trang chủ tùy vào mục đích site..., mình sẽ post bài hướng dẫn sau.
   + Hiển thị dòng chú thích cho bài viết (Người đăng, ngày xuất bản, bình luận....):
<?php _e('Gửi bởi:', ''); ?> <?php the_author_posts_link(); ?> <?php _e('ngày:', ''); ?> <?php the_time('j/n/Y g:i'); ?>--- <?php comments_popup_link('Gửi bình luận', '1 bình luận', 

    '% bình luận', 'comments-link', 'Mục bình luận đóng'); ?>

Lưu ý: Các bạn phải thêm css để code hiển thị đẹp mắt hơn nhe!

Chúc các bạn thành công!

Read More

Sử dụng Cufont làm đẹp site P3

Tích hợp cufont vào wordpress

Việc tích hợp Cufon vào WordPress thực chất là tích hợp vào theme mà bạn đang dùng. Để có thể tiếp tục, bạn cần xác định được WordPress của bạn đang sử dụng theme nào. Trong bài viết này, Việt Coding sử dụng theme mặc định của WordPress 3.1.2 là twentyeleven.

Theme twentyeleven mặc định của WordPress

Trong theme này có sẵn thư mục js (nếu không có bạn có thể tạo thư mục với tên bất kỳ) nên Việt Coding chỉ việc copycufon-ui.js và UTM_Flamenco_400.font.js vào.

Tiếp theo, chúng ta mở tập tin functions.php và chèn đoạn mã sau vào cuối :

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

/* Cufon */   function init_cufon() { ?>     <script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/cufon-yui.js"></script>     <script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/UTM_Flamenco_400.font.js"></script>           <script type="text/javascript">         Cufon.replace('h1.entry-title, h3.widget-title, #site-generator');     </script> <?php }   add_action('wp_head', 'init_cufon');

Các bạn hãy lưu ý ở dòng code

?

1	Cufon.replace('h1.entry-title, h3.widget-title, #site-generator');

h1.entry-title là title của post WordPress
h3.widget-title là title sidebar
#side-geneator là dòng credit của phần footer của WordPress

Việt Coding sẽ áp Cufón vào 3 phần trên. Các bạn lưu ý là chỉ nên áp vào các tiêu đề lớn, không nên quá lạm dụng vào các text khác. Mặt khác, đối với từng theme, bạn phải xác định được các phần mà bạn định áp Cufón vì với theme này có thể là h1, h2,… chứ không phải lúc nào cũng là h1.entry-title. Các bạn nhớ lưu ý điểm này nhé !

Save functions.php lại, refresh trang và xem kết quả:

Read More