Thêm danh sách các bài đăng mới trên trang chủ tĩnh sử dụng WordPress

Loading...

Một trang chủ tĩnh (cố định) có thể thấy ở nhiều website giới thiệu công ty, sản phẩm hay dịch vụ mà đặc biệt là trong wordpress. Thông thường những website này thường chỉ bao gồm slide, các mục giới thiệu và chúng được cố định sẵn có khi mãi mãi chả thay đổi tí nào. Mình cũng đang làm một dự án như thế và ngày nào cũng nhìn thấy nó đến phát ngán cả lên nên vọc và viết bài này hướng dẫn một chút cho bạn nào cần. Mục đích cuối cùng là chúng ta sẽ thêm một danh sách các bài viết mới vào trang chủ dạng này hoặc bất kỳ đâu bạn muốn và làm cho nó trông … mới hơn như thế này:

shot_140503_102644

Bạn có thể kiểm tra kỹ càng hơn và xem nó làm việc thông qua demo. Cá nhân mình nghĩ phương pháp này là cách đơn giản nhất vì mình chả hiểu biết quái gì về code mà còn làm được nữa là 😀 .

Các bước thực hiện

1. Tìm và cài đặt Plugin Special Recent Posts. Chúng ta sẽ cần plugin này để làm nền tảng đơn giản hóa mọi chuyện. 😉 Nó sẽ giúp bạn tìm các bài mới, hiển thị chúng ra và bạn chỉ việc nghĩ xem nên hiển thị ở đâu và trông nó như thế nào.

shot_140503_102650

Chỉ cần cài đặt và bạn sẽ có ngay phiên bản miễn phí của Plugin này, không cần quan tâm đến phần Setting của Special Recent Posts vì trong phiên bản miễn phí bạn có muốn quan tâm cũng …chẳng có gì để quan tâm. Đương nhiên bạn cũng có thể sử dụng Plugin này trong widgets theo đúng mục đích nó ra đời.

2. Đăng nhập vào quản trị wordpress, truy cập đến Appearance > Editor.

shot_140503_102656

3.Tìm đến file front-page.php và chèn đoạn code sau vào vị trí bạn muốn hiển thị danh sách các bài viết mới (ở đây mình dùng theme Local Business của  Inkthemes, trang chủ của nó là Front-page, điều này có thể khác với một vài theme hay framework cá biệt ).

 5, //thay bằng số bài mới mà bạn muốn hiển thị.
           'widget_title' => ‘Bài đăng mới nhất’ //thay bằng tiêu đề bạn muốn
);
        special_recent_posts($args);
    }
?> 

4. Xong rồi nhưng xấu hoắc, nhìn nó như thế này này:   Chúng ta sẽ chỉnh sửa một chút cho nó giống demo nhé.shot_140516_143408

5. Loại bỏ ngày tháng đăng bài và tăng thêm ký tự cho đoạn trích. Từ trang quảntrị WordPress, truy cập đến Plugin > Editor. Tìm Plugin Special Recent Posts FREE Edition và nhấn Select.shot_140516_145317

6. Trong file: special-recent-posts/srp-defaults.php, nhấn Ctrl + F, gõ post_date thay đổi giá trị này thành “no” . Trên đấy một chút, thay đổi giá trị post_content_length thành “200”.

Mấy cái option này là tùy bạn nhé. Mình chỉ làm theo ý mình thôi, bạn có thể để ngày tháng đăng bài nếu thích, tăng hoặc giảm số ký tự trong đoạn trích theo nhu cầu hoặc thay đổi bất cứ cái gì bạn muốn.

shot_140516_145430

Nhấn vào nút Update File bên dưới. F5 lại website của bạn (nhớ delete cache) và thấy nó được như thế này là ok nhé:

shot_140516_145542

7. Tiếp tục chỉnh sửa thêm trong CSS. Chỉ với một vài thao tác nhỏ trong CSS bạn có thể làm cho danh sách các bài viết này trông bắt mắt hơn nhiều.

Trong quản trị wordpress, bạn sẽ không thể tìm thấy tệp tin CSS của Special Recent Posts.Chúng ta phải truy cập vào Hosting Cpanel hoặc FTP để chỉnh sửa theo đường dẫn: … /wp-content/plugins/special-recent-posts/assets/css/css-front.css. Giữ nguyên các giá trị cũ và thêm vào các giá trị mới tương ứng dưới đây:

h4.srp-post-title {

margin: -16px -2px;

}

div.srp-widget-container a {

font-size: 18px;

}

p.srp-widget-excerpt {

padding-top: 17px;

}

div.srp-content-box {

padding: 0 18px;

}

div.srp-widget-container {

margin: auto;

width: 80%;

}

h3.srp-widget-title {

margin-bottom: 10px;

color: rgb(252, 245, 245);

text-shadow: 1px 1px black;

font-size: 30px;

background: #0989C7;

text-align: center;

border: 1px solid rgb(104, 101, 101);

border-radius: 4px;

}

Bây giờ thêm chút hiệu ứng nhìn cho chuyên nghiệp. Bạn có thể thêm đoạn mã CSS sau vào tệp tin CSS của theme hoặc vào ngay tệp tin CSS của Plugin này.

div.srp-widget-container a:hover{

color:red;

}

img.srp-widget-thmb:hover{

padding-left: 2px;

opacity: 0.6;

}

.menu-menu-side-bar-container li a:hover{

padding-left:4px;

}

Save lại là xong. Nhắc lại một lần nữa, cái này mình chỉ lấy làm ví dụ chứ không phải áp dụng chung cho tất cả mọi người. Màu mè các thứ từ CSS bạn phải căn cứ vào thiết kế trên website của mình để thay đổi lại sao cho hợp lý.

Lời kết

Như các bạn thấy, các bước thực hiện để thêm danh sách các bài viết mới vào một trang tĩnh (hay động nếu bạn muốn)  rất đơn giản, chỉ mất khoảng 5 phút  là bạn đã có thể thay đổi bộ mặt cho website của mình hoặc công ty mình quản lý. Khách hàng truy cập vào website có thể ngay lập tức nhận được những thông tin mới và liên tục cập nhật, họ sẽ cảm thấy tin tưởng hơn, hài lòng hơn hay ít nhất họ cũng nhận thấy rằng công ty hay dịch vụ bạn cung cấp vẫn… đang hoạt động . Bình luận theo mẫu dưới đây nếu bạn có một phương pháp hiệu quả hơn muốn chia sẻ!

Viết một bình luận

bình luận

Leave a Reply

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