Cách thêm thanh trượt vào trang chủ WordPress không cần plugin
|
Nếu bạn chưa quen với WordPress và đang trong quá trình thiết lập trang web chuyên nghiệp đầu tiên của mình, thì bạn chắc chắn sẽ muốn đọc bài viết này. Bài viết này là tất cả về cách thiết lập thanh trượt bài đăng cố định mà không cần plugin Tất nhiên, điều đầu tiên mà bạn hoặc bất kỳ ai về vấn đề đó nhất định phải hỏi là tại sao chúng ta phải thực hiện thủ công vì chúng ta có thể sử dụng plugin cho cùng một việc. Chà, hầu hết các plugin đều hoạt động trơn tru trong hầu hết thời gian, nhưng vì hầu hết chúng là plugin của bên thứ 3 nên bạn không thể lúc nào cũng dựa vào chúng một cách chính xác Bạn nên thực hiện thủ công nhưng điều thú vị là bạn cần phải thành thạo HTML, CSS3, PHP, v.v. Nếu bạn giỏi mã hóa, thì bạn chắc chắn có thể thiết lập thanh trượt bài đăng cố định của riêng mình, một thanh trượt hiển thị hoàn hảo các bài đăng cố định của bạn Chỉ cần làm theo các hướng dẫn được đăng bên dưới, đến thư và bạn sẽ có thể khởi động và chạy các thanh trượt bài đăng dính của mình, hoàn toàn không mất thời gian  Hãy nhớ rằng bất kỳ thay đổi nào bạn kết hợp có thể bị mất khi bạn cập nhật WordPress, vì vậy hãy luôn lưu các thay đổi của bạn khi bạn thực hiện chúng Một trong những lý do khiến bạn có thể muốn chọn thanh trượt bài đăng cố định thay vì bài đăng cố định là do phiên bản hiện tại trên WordPress thu hút quá nhiều sự chú ý từ các bài đăng mới nhất Đó là lý do tại sao bạn nên làm nổi bật các bài đăng cố định của mình dưới dạng thanh trượt thay vì sử dụng phiên bản hiện tại và bằng cách đó, bạn sẽ giúp người dùng dễ dàng xem các bài đăng khác nhau trên trang web của mình, từ những bài được gắn thẻ Bước để thêm Sticky Post Slider trong WordPress mà không cần PluginMooTools và noobSlide Và vì, chúng tôi sẽ sử dụng noobslide, bạn sẽ cần bao gồm thư viện MetoolsJavascript. Chỉ cần chuyển sang các chức năng. php trong mẫu của bạn và thêm các mã mà bạn thấy được liệt kê ngay bên dưới, thế là xong function register_custom_js() {
wp_register_script( 'mootools', 'http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js', '1.3.0' );
wp_register_script( 'noobslide', get_bloginfo('template_directory') . '/_class.noobSlide.packed.js' , array( 'mootools' ) );
}
add_action( 'init', 'register_custom_js' );
function enqueue_noobslide() {
if ( is_home() ) { // our slider only appear in the home page, so load the script only in home page
wp_enqueue_script( 'noobslide' );
}
}
add_action( 'wp_print_scripts', 'enqueue_noobslide' );
Hình thu nhỏ function custom_theme_setup() {
add_theme_support( 'post_thumbnails' );
}
add_action( 'after_setup_theme', 'custom_theme_setup' );
Liên kết đọc thêm tùy chỉnh Điều này sẽ dẫn đến nhiều lực kéo hơn cho các trang web của bạn và nhiều lần nhấp hơn. Chỉ cần làm theo mã được liệt kê dưới đây. Điều đầu tiên bạn cần làm là đi đến các chức năng. php và trích xuất dòng này, từ cùng một //add_filter( 'get_the_excerpt', 'twentyten_custom_excerpt_more' );
Now, you need to add the following codes in its place to create your own custom read more ‘link’.
function custom_excerpt_with_more( $excerpt ) {
if ( has_excerpt() && ! is_attachment() ) {
global $post;
return $excerpt . '';
}
return $excerpt;
}
add_filter( 'get_the_excerpt', 'custom_excerpt_with_more' );
function custom_excerpt_more( $more ) {
global $post;
return '';
}
add_filter( 'excerpt_more', 'custom_excerpt_more' );
Và hãy nhớ rằng hàm custom_excerpt_with_more() dành cho những đoạn trích được coi là đoạn trích tự động hoặc do người dùng chỉ định với thẻ đọc thêm CSS và JavaScript function custom_slider_css_js() {
if ( is_home() ) { // only in home page
#slider{border:1px solid #ccc;width:640px;position:relative;overflow:hidden;height:213px;margin-bottom:20px;}
#mask{position:absolute;height:213px;}
.items{float:left;height:213px;width:640px;position:relative;}
.items .wp-post-image {float:left;}
.info{width:320px;float:left;font-family:Arial, Helvetica, sans-serif;}
#content .info h2{font-size:20px;font-weight:bold;color:#1c3f95;margin:10px 10px 15px 10px;}
#content .info p{font-size:11px;color:#1c3f95;line-height:16px;margin:10px;}
.info a{font-size:10px;padding:5px 7px;background:#e1e1e1;text-decoration:none;text-transform:uppercase;font-weight:bold;color:#1c3f95;}
.info a:hover{color:#ffffff;background:#1c3f95;}
#slider .handle{position:absolute;bottom:0;right:5px;line-height:10px;text-align:center;font-size:25px;font-weight:bold;}
.handle a{color:#ccc;height:20px;width:20px;display:inline-block;cursor:pointer;}
.handle .active{color:#1c3f95;}
.handle a:hover{color:#1c9f65;}
/**/
}
}
add_action('wp_head', 'custom_slider_css_js' );
Sửa đổi chủ đề WordPress Xác định vị trí tệp cho chủ đề của bạn và khi bạn đã tìm thấy tệp đó, hãy đặt con trỏ chuột ngay phía trên khu vực vòng lặp và nhập mã cho thanh trượt của bạn, như được hiển thị bên dưới $sticky ) ); have_posts()): $count = 0; ?> Bây giờ, chúng tôi gần như đã hoàn tất – tất cả những gì bạn cần làm là kiểm tra trang web của mình để xem thanh trượt bài đăng cố định của bạn đã hoạt động chưa Nếu bạn muốn thực hiện các thay đổi bổ sung, bạn có thể thực hiện dễ dàng – tất cả những gì bạn cần làm là nhập mã được yêu cầu và đó phải là mã đó. Còn một việc nữa mà chúng ta cần làm đó là loại bỏ các bài đăng dính thông thường Toàn bộ ý tưởng đằng sau việc thiết lập một thanh trượt bài đăng cố định là để nó không làm mất đi sự chú ý từ các bài đăng mới nhất được liệt kê trên trang web của bạn Và đó chính xác là lý do tại sao chúng ta cần xóa biến thể cũ ngay lập tức, chỉ cần làm theo các mã được liệt kê bên dưới và điều đó sẽ thực hiện vào lúc này $sticky ) ); have_posts()): $count = 0; ?> Bây giờ, bạn sẽ có thể tận hưởng thanh trượt bài đăng Sticky đầy đủ chức năng của mình trong WordPress; Hãy nhớ rằng bạn cũng có thể thực hiện các thay đổi tương tự với các chủ đề và thanh trượt khác. Kết quả của thanh trượt này là bạn sẽ có thể có nhiều lực kéo trực tuyến hơn bao giờ hết, điều này sẽ dẫn đến nhiều lưu lượng truy cập hơn và SEO tốt hơn |
