Thiết kế theme WP – phần 7: làm việc với content

Cuối cùng thì mình cũng viết xong cuốn giáo trình WordPress từ căn bản đến phức tạp. Vậy là tháng này gánh nặng đã nhẹ đi được 1/2 (xong một nửa công việc của tháng mà). Sẵn tiện, mình cũng sẽ đẩy nhanh tiến độ đăng bài viết liên quan đến chuỗi chủ đề thiết kế giao diện với WordPress lên luôn vì dữ liệu giờ đã có sẵn hết rồi, đều được rút từ giáo trình ra cho nhanh.

Lan man dài dòng sợ làm bạn đọc cụt hứng nên mình sẽ vào việc luôn cho nó nhanh chóng. Hôm nay chúng ta sẽ tìm hiểu về cách biên soạn và viết 1 trang thể hiện chi tiết nội dung một bài viết. Nếu bạn đã nghiên cứu các phần trước của chuỗi bài bạn sẽ thấy tôi đang muốn nói đến cách viết nội dung của một trang single.php.

the_content() – hàm chiến lược

Đây là hàm quan trọng nhất trong nội dung của phần này. Ở phần 6, chúng ta đã sử dụng hàm the_content() để lấy và thể hiện nội dung của một danh sách bài viết. Phần này chúng ta cũng sử dụng nó để thể hiện nội dung chi tiết – bạn thấy đấy, tính năng của nó thật nhiều phải không ?

Trước tiên, ta hãy quan sát một file single.php đơn giản:


<div class="box">
				<h2><a href="<?php echo get_option('home'); ?>/">Home</a> »  <?php the_category(' »'); ?>   » Currently Reading:</h2> 
				
				<?php if (have_posts()) : ?>
				<?php while (have_posts()) : the_post(); ?>
				
				<div class="block">
					<div class="article first_main_article">
						<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
					
						<div class="meta">
							<span class="time"><?php the_time('F j, Y'); ?></span>
							<span class="categories"><?php the_category(', ') ?></span>
							<span class="discuss"><?php comments_number('No Comments', '1 Comment', '% Comments'); ?></span>
							
							<?php if (is_user_logged_in()) : ?>
							<span class="editlink"><?php edit_post_link('Edit This Post', '', ''); ?></span>
							<?php endif; ?>
						</div>
						
						<?php echo get_video($post->ID); ?>
						
						<?php if (get_option(THEME_PREFIX . "post_thumbnails_single")) { ?>
							<a href="<?php the_permalink() ?>" class="image"><?php the_post_thumbnail(); ?></a>
						<?php } ?>
						
						<?php the_content(''); ?>
					</div>  
				</div>
				
				<?php endwhile; ?>
				<?php else : ?>
				<?php endif; ?>
			</div>

 

Một số giải thuật có trong đoạn code này mình đã giải thích với các bạn ở phần trước như vòng loop, toán tử điều kiện (if …else…) nên mình sẽ không nói lại những thứ này nữa. Chúng ta tìm hiểu những thành phần mới.

  1. get_option(): đây là một hàm quan trọng của wordpress. Nhiệm vụ của nó là lấy giá trị tương ứng từ table wp_options với keyword được đưa vào. Trong đoạn mã trên, thứ nó lấy ra là đường dẫn đến trang chủ thông qua keyword ‘home‘. Nếu bạn muốn lấy giá trị khác thì cứ theo đó mà lấy.
  2. the_category(): nhiệm vụ của hàm này là lấy các category chứa bài viết. Có nhiều đối số truyền vào nhưng theo đoạn mã trên thì chúng ta chỉ đưa vào một đối số đó là hậu tố đứng phía sau category được lấy ra. Category sẽ được đính kèm theo đường dẫn theo nên chúng ta cũng không cần quan tâm đến đường dẫn.
  3. the_title_attribute(): bạn chú ý là hàm này khác với the_title() mà chúng ta đã có dịp nhắc đến trước đây. Điểm giống nhau là nó đều lấy tiêu đề. Nhưng điểm khác nhau nó tiêu đề đã được remove các charater đặc biệt có thể làm ảnh hưởng đến cấu trúc đúng của HTML. Trong trường hợp bạn sử dụng the_title() ở vị trí của the_title_attribute() có thể dẫn đến bị lỗi code do các kí tự đặc biệt gây ra.
  4. the_time(): hàm này có tác dụng lấy ra ngày, giờ đăng bài viết lên.
  5. comments_number(): hàm này giúp ta lấy số lượng comment cho bài viết. Chúng ta có 3 đối số truyền vào đó là các giá trị nếu không có comment nào, có 1 comment và có nhiều hơn 1 comment. Cách đưa đối số bạn có thể tham khảo ở vị trí nó được sử dụng.
  6. is_user_logged_in(): đây là hàm giúp kiểm tra người dùng có đăng nhập hay chưa. Nếu người dùng đã đăng nhập và là tác giả của bài viết hàm này sẽ trả về true và đoạn code này bên trong nó sẽ được phép thực thi.
  7. edit_post_link(): hàm này là một hàm tuy không quan trọng nhưng hỗ trợ chúng ta đưa một đường dẫn chỉnh sửa nội dung bài vào bên dưới bài viết nhằm giúp việc chỉnh sửa bài viết được dễ dàng và nhanh chóng hơn. Như đã nói ở trên, hàm này được đặt vào bên trong điều kiện is_user_logged_in() nên nó chỉ thực thi khi người dùng đăng nhập. Khi viết giao diện bạn cũng nên chú ý chỗ này để tăng cường tính bảo mật và tránh user bình thường nghịch dại bấm bậy bạ.
  8. the_post_thumbnail(): hàm này mới được bổ sung từ phiên bản 3.0.0 của WordPress giúp lấy thumbnail của bài viết. Chúng ta có thể kết hợp với một điều kiện như sau:
    if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
      the_post_thumbnail();
    } 
    

    Ngoài ra mình cũng có một ghi chú nhỏ cho các bạn là hàm này chỉ có thể thực thi được khi bạn bổ sung thêm cho theme tính năng hỗ trợ thumbnail bằng cách thêm vào functions.php đoạn mã sau:

    add_theme_support( 'post-thumbnails' );
    
  9. the_content(): hàm này thì không cần phải nói nhiều nữa vì đã nói đến trong các phần trước khá nhiều

Lưu ý khi sử dụng the_content

Do đặc thù của bài viết được biên tập từ Admin, các bài viết đều được sử dụng thẻ <p> để nhập liệu. Do đó, để tránh việc các stylesheet bị nhầm lẫn hoặc bị override do sự kế thừa. Chúng ta nên đặt the_content vào một cặp thẻ <div> và định danh class (hoặc id) cho cặp thẻ này. Điều này sẽ giúp bạn dễ dàng phân biệt thẻ <p> của content và biên tập file styles.css dễ dàng hơn.

&lt;div id=&quot;the_content_here&quot; class=&quot;the_content&quot;&gt;
  &lt;?php the_content(''); ?&gt;
&lt;/div&gt;

Một số hàm thường được sử dụng khi xuất nội dung chi tiết một bài viết trong wordpress

Ngoài những hàm mình đã liệt kê ở trên, mình giới thiệu thêm với các bạn một số function hữu ích thường được sử dụng khi xuất content ở trang single.php hoặc page.php. Nội dung chi tiết bạn click vào liên kết để tham khảo nhé. Trong phạm vi một bài viết mình không thể nói hết với các bạn.

  • the_author(): trả về tên tác giả bài viết.
  • the_ID(): trả về ID của bài viết.
  • posts_nav_link(): hiển thị liên kết đến bài trước và bài sau. Ngoài ra bạn có thể sử dụng next_post_link() và previous_post_link() để hiển thị liên kết trước và sau của bài viết.

Bài viết hôm nay kết thúc ở đây. Mong rằng sẽ cung cấp cho các bạn những thông tin cần thiết khi thiết kế theme. Nhân tiện, mình cũng muốn chia sẻ một kinh nghiệm quí báu của mình khi tìm hiểu về theme và tập thiết kế theme WordPress: bạn cứ mở các theme đã được người khác làm và tìm hiểu, nghiên cứu về mục đích sử dụng của họ bạn sẽ có thể tự thiết kế… giống họ :)

Comments

  1. says

    Chào anh Nhân, cho em hỏi xíu nha anh
    website của em: xgamesfull.com , bài viết ở index thì hiển thị đầy đủ hình và text, nhưng khi em xem bài theo category (vd: xgamesfull.com/category/action-rpg/ ) thì nội dung chỉ hiển thị mỗi text mà ko có hình , em vào xem file archive.php thì phần hiển thị entry chỉ có thế này:

    “alignleft post_thumbnail”)); } ?>

    anh có thể sửa giúp em cho nó hiển thị đầy đủ cả hình và text khi xem bài theo category được ko anh :D

  2. Monster says

    Em bị lỗi cái đoạn này anh xem tại sao với

    ID); ?>

    Bỏ đi cái đoạn phía trên thì đc. Còn ko là nó báo:

    “Fatal error: Call to undefined function get_video() in C:\AppServ\www\wp\wp-content\themes\demo\single.php on line 19″

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

:D :) >:D< :P :(( :beat: ;):x L-) ;)) :shot: =)) :kill: >:) =P~ more »