2 plugin giúp blog của bạn có phong cách magazine

20/05/2009 // 34 phản hồi // Xem: 1,422 lượt // Chuyên mục: Thiết kế web, Wordpress // Thẻ: , , .

Hiện nay có một sô bạn đọc thắc mắc làm thế nào để tạo được một layout bao gồm: ảnh minh họa, tiêu đề, trích dẫn một phần bài viết.

Hình ảnh chỉ mang tính chất minh họa ^^

Hình ảnh chỉ mang tính chất minh họa ^^

Thật ra việc này Hutek đã làm cho webzine rồi nhưng phần ảnh minh họa Hutek lại dùng js có tên là phpThumb để crop ảnh cho đúng kích thước yêu cầu nhưng js này có một nhược điểm là không thể crop hình ở các site ngoài được mà chỉ crop được hình trên host mình thôi. Chính vì vậy khá nhiều bạn có mong muốn Webzine có thể hỗ trợ lấy thumbnail từ bên ngoài. Mình cũng đang xem xét và có thể sẽ đưa vào trong phiên bản 0.3 còn trong bài viết này mình sẽ hướng dẫn các bạn cách tạo một layout như vậy để các bạn có thể áp dụng vào cho blog hoặc theme của mình.

Thực ra để làm được điều này cũng khá đơn giản. Bạn chỉ cân 2 plugin là Get the image của Justin Tailock và plugin thứ 2 là Limit Posts của Alfonso Sánchez

Plugin Get the image có nhiệm vụ tạo ảnh minh họa còn plugin Limit post có nhiệm vụ chỉ lấy ra một số ký tự nhất định của bài viết.

Plugin Get the image tương đối mạnh, nó có thể lấy ảnh từ file attach, từ custom field hoặc scan trong bài viết và lấy ảnh ra. Thứ tự ưu tiên là custom field rồi đến attach, cuối cùng mới là scan. Như vậy là có thể đáp ứng được hết các yêu cầu của các bạn làm blog hiện nay. Phần tính năng chi tiết các bạn có thể tìm hiểu thêm ở blog của Justin, ở đây mình chỉ hướng dẫn cách kết hợp hai plugin này với nhau để tạo được layout như yêu cầu ở trên thôi. Dưới đây là toàn bộ đoạn code đầy đủ để có thể tạo được một layout như hình minh họa

<div class="magazine">
//đoạn này là để lấy ảnh
 
 true, 'custom_key' =&gt; array( 'thumb' ), 'default_size' =&gt; 'medium', 'width' =&gt; '200', 'height' =&gt; '200', 'image_class' =&gt; 'thumb','image_scan' =&gt; true  ) ); ?&gt;
 
/*****************************************
Trong đó: attachment: sử dụng attach hay không (true or false)
custom_key: tên của custom key chứa đường dẫn ảnh
default_size: kích thước ảnh file attach mà bạn muốn lấy
width,height: kích thước của ảnh (đơn vị px)
image_class: thêm class cho ảnh để bạn có thể tha hồ quản lý bằng css
image_scan: nếu không có ảnh từ custom_key và attach thì sẽ tự động scan ảnh trong bài viết đưa vào, kích thước và class như trên
******************************************/
//Tiêu đề của bài viết
<h2><a title="&lt;?php the_title_attribute(); ?&gt;" rel="bookmark" href="&lt;?php the_permalink(); ?&gt;"></a></h2>
//Trích đoạn bài viết
<div class="entry">
 
   //120 là số ký tự bạn muốn hiển thị, còn Đọc tiếp là chữ bạn muốn hiện thị để link đến bài viết chi tiết, nếu để trắng thì sẽ là ký tự [...]
 
   //Nếu plugin limit post không được active thì sẽ dùng hàm the_excerpt</div>
</div>

Ok, như vậy là bạn đã có đoạn code mà bao gồm một ảnh minh họa, một tiêu đề và một mô tả ngắn. Bạn có thể đặt ở bất cứ chỗ nào bạn thích, ngoài trang chủ, sidebar ….

Phản hồi (34) / Gửi một phản hồi

  1. Mới tìm hiểu wordpress mà thấy nhiều cái hay thiệt.

    HUTEK giới thiệu bài trên, ai không biết coding thì đúng là bó chiếu..hii.
    Bài trên phải đi kèm với themes “webzine” thì mới chạy được nội dung như trên.
    Nếu bạn chạy themes khác thì vào file functions.php của themes webzine copy:

    /********************************************************************
    Content Limit
    ********************************************************************/
    //bản phải bỏ hw_ đi hoặc là sửa lại tên function ở đoàn code HUTEK giới thiệu ở trên
     
    function hw_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;', ']]&gt;', $content);
        $content = strip_tags($content);
     
       if (strlen($_GET['p']) &gt; 0) {
          echo "";
          echo $content;
          echo " ...";
          echo "";
       }
       else if ((strlen($content)&gt;$max_char) &amp;&amp; ($espacio = strpos($content, " ", $max_char ))) {
            $content = substr($content, 0, $espacio);
            $content = $content;
            echo "";
            echo $content;
            echo " ...";
            echo "$more_link_text";
            echo "";
       }
       else {
          echo "";
          echo $content;
          echo "";
       }
    }

    bỏ vào functions.php trong themes của bạn.

  2. anh hutek ơi qua blog em giúp em với,em đã cài 2 cai plugin trên rùi mà vẫn ko hiện thumnail.Anh wa blog em cho ý kiến nhé.
    Comment lại cho em ở đây nhé.thanks anh.
    http://themes4free.org/?p=19

  3. Bạn hãy help cho mình bỏ đoạn code này ở đâu đc hok ??

  4. bài này khá hữu ích đối với theme không hỗ trợ thumnail đi kèm post, chúc hutek phát triển thêm, lâu rồi mới come back hutek, hihi :D

  5. Có cái nào tạo slide featured content ko bác.
    Em tìm cả chục cái mà chưa có cái nào vưà ý.
    Đâm ra magazine cũng chả ra magazine :(

    • Bác vô trang này xem, đủ thể loại luôn, chọn lấy một cái ưng ý rồi … clone thôi :D http://themeforest.net/category/site-templates

      • À ko :-j Theme magazine thì em ko thiếu.
        Em chỉ muốn tìm một cái featured content thôi. Giá có cái plugin nào ngon ngon thì tốt. Em thử 5, 6 cái rồi mà có duy nhất cái D13slideshow là tàm tạm.
        H muốn tìm 1 cái chuyên nghiệp hơn mà ko có.

        • Vấn đề là muốn chuyên nghiệp hơn như thế nào, cái d13 nhìn cũng được đấy chứ

          • Cũng tạm bác ạ. Em muốn tìm cái nào mà nó có hình ảnh chính và những hình ảnh nhỏ bên cạnh, có nút next và prev.
            Cái D13slideshow thì ko có mấy cái đấy đâm ra ko đc chuyên nghiệp lắm :-??
            Em thấy cái featured content gallery plugin cũng đc mà cấu hình mãi nó ko hiện ra nên cũng nản luôn.

        • Ý mình là clone cái js của nó ấy, ở đó có nhiều js hay lắm, chịu khó tìm một tí

  6. Em download http://sites.google.com/site/hutekwebzine/Home/limit-post.rar?attredirects=0 rồi setting thì báo lõi này. Là sao anh nhỉ? Em khắc phục như thế nào ạ?

    Plugin không được kích hoạt do một lỗi không sửa được.

    Fatal error: Cannot redeclare the_content_limit() (previously declared in C:\AppServ\www\seavn\wp-content\themes\seavn\functions.php:329) in C:\AppServ\www\seavn\wp-content\plugins\limit-post.php on line 51

    • Lỗi này là do theme em đang dùng cũng đã tích hợp plugin này rồi (tích hợp thẳng vào funtions.php), vì vậy em không cần cài plugin này nữa mà có thể sử dụng luôn

  7. The best information i have found exactly here. Keep going Thank you

  8. Thx bác, giờ em mới biết cách hoạt động của thumbnail trong WP.

    Bài viết mới trên blog của Misao là: Miễn phí game Starcraft:Broodwar có bản quyền!

    • Thực ra Wordpress mặc định không tích hợp tính năng này nhưng lại cung cấp các hàm, chúng ta chỉ việc vận dụng khéo léo là có thể đáp ứng được hầu hết các yêu cầu của người dùng.

  9. Blog bạn nhìn chuyên nghiệp quá

    Rất vui khi biết đến Blog bạn,hy vọng mình sẽ biết được nhiều điều từ Blog bạn

    Bài viết mới trên blog của aBlogz là: Magasin Uno – Free Premium Blogger Template

  10. Hi, Congratulations to the site owner for this marvelous work you’ve done. It has lots of useful and interesting data.

  11. Hi, cool post. I have been wondering about this topic,so thanks for writing.

  12. Xin chào! sao cái “plugin tôi đang dùng” vẫn chưa show thế hả bác?


  13. kid_240195
    23/05/2009

    Thế muốn chuyển từ dạng magazine sang dạng blog cổ điển thì có plugin gì hỗ trợ ko bác.

    • cái này thì lại càng đơn giản, bạn có thể download webzine về tham khảo, webzine hỗ trợ cả 2 kiểu blog layout và magazine layout mà


      • kid_240195
        23/05/2009

        Thế còn đối với những theme khác thì sao hả bạn. VD như theme The Gazette Edition của Woothemes chẳng hạn, nếu mình muốn chuyển nó từ dạng mag sang cổ điển thì phải làm như thế nào ?

        • Cái này bạn phải chỉnh code, nếu ko biết thì có thể gửi theme mình edit hộ


          • kid_240195
            23/05/2009

            Oh, vậy thì cám ơn bạn nhé, khi nào có nhu cầu mình sẽ gửi cho bạn :D .

  14. Bác tác giả của plugin Get the image là Justin Tadlock (không phải tailock) :D

    Hai plugin này khá hữu ích, tuy nhiên em cũng đang sài một plugin có tên là Thumbnail for Excerpts cũng khá hay, các bạn có thể sử dụng và không cần mất công sức để chèn link hình ảnh thumbnail, tất nhiên là bài nào cũng phải có hình ảnh nữa mới được

    Bài viết mới trên blog của Tinh là: Revver Có Thể Giúp Bạn Kiếm Tiền Trên Mạng Khi Adsense for YouTube Không Còn Hỗ Trợ?

    • Em thấy cái get the image rất mạnh nên hướng dẫn bạn ấy sử dụng, mà bạn ấy làm được rồi chứng tỏ bạn ấy cũng có thể edit được code. Cái bác giới thiệu em cũng có nghe tên nhưng chưa xài bao giờ

    • Trước mình cũng thử mấy cái không được, giờ mới biết cái này : Thumbnail for Excerpts


  15. Guest
    20/05/2009

    Thanks bác. Em đã làm được, có điều ảnh và text nó không ngang nhau như trong hình minh họa. Không biết cái đó là do plugin hay do theme?

Gửi phản hồi

CommentLuv Enabled
:bomb: :soldier: :chem: :godfather: :cuoi_duyen: :D :x :-O :(( :2: :vic: more »

  Tự động TELEX Tắt

music

Music

Let music heal your soul ...

Các bạn đang nghe Gomenasai – Một bản nhạc nhẹ nhàng của t.A.t.U

Top chém gió ...

Around the world