Hướng dẫn tạo plugin Content Locker – khóa nội dung bài viết

Xem: 1020    Tải: 0   Thảo luận: 0   Mục: WordPress template   Lĩnh vực: Khác

0 điểm   ( 3 đánh giá ) File đã được kiểm thử


Bài viết sau sẽ hướng dẫn các bạn viết một plugin cho phép khóa một phần nội dung bài viết cho tới khi thỏa mãn điều kiện nào đó, mới cho phép hiển thị hết toàn bộ nội dung.

Một số bài viết yêu cầu bạn Like, +1 hoặc tweet mới có thể thấy nội dung để download. Bài viết sau sẽ hướng dẫn bạn làm được như vậy.
Trong bài viết này sẽ có 2 ví dụ:

  • 1. Tạo một shortcode đơn giản cho phép người dùng chỉ nhìn thấy nội dung khi đã đăng ký thành viên
  • 2. Các shortcode khác sẽ yêu cầu người dùng cần phải chia sẻ url bài viết lên các mạng xã hội mới thấy nội dung.

Nguyên liệu cần thiết cho bài học

  • Một trang web
  • Một trình soạn thảo để viết code như notepad++ chẳng hạn
  • Bạn có thể sử dụng một chương trình FTP để upload plugin như CuteFTP

Bắt đầu viết plugin

Trước tiên, bạn vô thư mục wp-content/plugins tạo một thư mục mới có tên Content Locker chẳng hạn. Tiếp theo, tạo một file mới trong thư mục đó có tên content-locker.php. Và thêm đoạn chú thích sau để khai báo cho WordPress biết rằng, thư mục này là thư mục chứa plugin của chúng ta

<?php
/*
Plugin Name: Tuts+ Content Locker Shortcode
Plugin URI: http://sharecodeweb.net/huong-dan-tao-plugin-content-locker-khoa-noi-dung-bai-viet
Description: This plugin provides a shortcode that let you hide premium content to users until they log in or share with facebook
Version: 1.0
Author: Sharecodeweb
Author URI: http://sharecodeweb.net
License: GPLv2
*/
  • Dòng 3: Tên plugin của bạn, dòng này bắt buộc phải có
  • Dòng 4: Đường dẫn đến trang hướng dẫn sử dụng, hướng dẫn viết code….
  • Dòng 5: Dòng miêu tả, sẽ xuất hiện trong mục Plugin của bạn
  • Dòng 7-9: Tên tác giả thiết kế ra plugin, đường dẫn đến website và bản quyền của plugin

Tạo shortcode

Để tạo shortcode, chúng ta sử dụng hàm add_shortcode. Và trong bài viết này, chúng ta sẽ thêm shortcode có tên premium-content thông qua hàm wptuts_content_locker

// register the shortcode that accepts one parameter
add_shortcode ( 'premium-content', 'wptuts_content_locker' );
  
// shortcode function
function wptuts_content_locker( $atts, $content ) {
    extract( shortcode_atts( array (
        'method' => ''
    ), $atts ) );
    
    global $post;
    
    // if the method is not 'facebook', then we check for logged user
    if ( 'facebook' != $method ) {
    
        if ( is_user_logged_in() ) {
        
            // We return the content
            return do_shortcode($content);
            
        } else {
        
            // We return a login link that will redirect to this post after user is logged
            return '<div class="wptuts-content-locker">You need to <a href="' . wp_login_url( get_permalink( $post->ID ) ) . '">Log in</a> to see this content</div>';
            
        }
        
    // We are using the facebook method
    } else {
        
        // Check if we have a cookie already set for this post
        if ( isset( $_COOKIE['wptuts-lock'][$post->ID] ) ) {
        
            // We return the content
            return do_shortcode( $content );
        
        // We ask the user to like post to see content
        } else {
            
            return'<div id="fb-root"></div><div class="wptuts-content-locker">Please share this post to see the content <div class="fb-like" data-href="' . get_permalink( $post->ID ) . '" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></div>';
        
        }
        
    }
    
}

Với đoạn code trên, chúng ta sẽ có shortcode như sau:
[premium-content method=""]Premium content goes here[/premium-content]
Bạn có thể có hình dung rõ hơn về đoạn mã trên thông qua sơ đồ sau


Nếu một user chưa login sẽ thực thi hàm wp_login_url để điều hướng đến trang login, bắt đăng nhập, đăng nhập xong sẽ redirect lại trang ban đầu. Để làm được việc này, chúng ta cần sử dụng một chút kiến thức liên quan đến cookies

Javascript File

Chúng ta cần thêm một số đoạn mã js như dưới đây:

function createCookie( name, value, days ) {
  
    var expires;
  
    if ( days ) {
    
        var date = new Date();
        date.setTime( date.getTime() + (days * 24 * 60 * 60 * 1000) );
        expires = "; expires=" + date.toGMTString();
        
    } else {
        expires = "";
    }
    
    document.cookie = escape( name ) + "=" + escape( value ) + expires + "; path=/";
    
}
(function( $ ) {
    $(function() {
        FB.Event.subscribe( 'edge.create', function( href ) {
            createCookie('wptuts-lock[' + wptuts_content_locker.ID + ']', true, 9999 );
            location.reload();
        });
        
    });
    
}( jQuery ));

Cách chèn file js và css vào plugin

Bạn tạo một file style.css trong thư mục plugin với đoạn css đơn giản như sau:

/* Stylesheet for Tuts+ Content Locker Shortcode */
.wptuts-content-locker {
    width: 80%;
    display: block;
    border: 3px dashed #ccc;
    padding: 20px;
    text-align: center;
    margin: 20px auto
}
.wptuts-content-locker div.fb-like.fb_iframe_widget {
    overflow: hidden;
}
Để đăng ký javascript và style chúng ta sử dụng hàmwp_enqueue_scripts
// Register stylesheet and javascript with hook 'wp_enqueue_scripts', which can be used for front end CSS and JavaScript
add_action( 'wp_enqueue_scripts', 'wptuts_content_locker_scripts' );
  
//function that enqueue script only if shortcode is used
function wptuts_content_locker_scripts() {
    global $post;
    wp_register_style( 'wptuts_content_locker_style', plugins_url( 'style.css', __FILE__ ) );
    wp_register_script( 'wptuts_content_locker_js', plugins_url( 'script.js', __FILE__ ), array( 'jquery' ), '', true );
    
    if( has_shortcode( $post->post_content, 'premium-content' ) ) {
    
        wp_enqueue_style( 'wptuts_content_locker_style' );
        wp_enqueue_script( 'wptuts_content_locker_js-fb', 'http://connect.facebook.net/en_US/all.js#xfbml=1', array( 'jquery' ),'',FALSE );
        wp_enqueue_script( 'wptuts_content_locker_js' );
        wp_localize_script( 'wptuts_content_locker_js', 'wptuts_content_locker', array( 'ID'=> $post->ID ) );
        
    }  
    
}
Ở đoạn code trên chúng ta sử dụng hàm has_shortcode để xác định rằng, đoạn js chỉ được sử dụng trên những trang có chứa shortcode của chúng ta mà không phải sử dụng trên toàn trang, giảm thiểu thời gian load trang cho website.
 
Với khoảng 120 dòng code, bạn đã có một plugin cho phép khóa nội dung rất đơn giản phải không? Chúc bạn thành công

Hướng dẫn tạo plugin Content Locker – khóa nội dung bài viết

Hướng dẫn tạo plugin Content Locker – khóa nội dung bài viết Đăng ngày 08-09-2014  Bài viết sau sẽ hướng dẫn các bạn viết một plugin cho phép khóa một phần nội dung bài viết cho tới khi thỏa mãn điều kiện nào đó, mới cho phép hiển thị hết toàn bộ nội dung. 5/10 1020

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn