WordPress Tự Code Trang Đăng Bài Viết Ngoài Front-end

Discussion in 'Thủ thuật mã nguồn' started by Twisted, Oct 24, 2014.

  1. Twisted Membership

    Chào mọi người, hôm nay 2-Tek hướng dẫn tạo trang đăng bài viết bên ngoài Front-End trên. Sau khi hoàn thành xong bài viết này, bạn có thể tạo được chức năng cho tác giả hoặc khách gửi bài bên ngoài giao diện admin của WordPress. Và bài viết này với mục đích là học tập và nghiên cứu để phát triển WordPress, bạn hoàn toàn có thể tìm kiếm các plugin với chức năng tương tự để thay thế, nhưng ở đây 2-Tek muốn giới thiệu để mọi người cùng tham khảo, nếu bạn tự tay làm thì dễ tùy biến và bạn sẽ hiểu rõ thêm về một phần nho nhỏ của thế giới WordPress bao la.

    Yêu cầu để thực hiện bài viết

    Để thực hiện được bài viết này thì bạn phải thỏa mãn những yêu cầu sau:
    • Một trang WordPress đang hoạt động ở localhost.
    • Một phần mềm có thể sử dụng để lập trình PHP.
    • Bạn phải biết kiến thức cơ bản về PHP, HTML và CSS.
    Bài viết này 2-Tek sẽ hướng dẫn dựa trên một trang WordPress đã cài đặt và đang sử dụng giao diện Twenty Twelve. 2-Tek thích sử dụng giao diện Twenty Twelve là vì nó đơn giản, dễ nhìn. Ngoài thực tế thì bạn có thể áp dụng cho bất kỳ trang nào bạn thích. Miễn là thiết kế sao cho phù hợp với giao diện hiện tại là được.

    Bước 1: Tạo custom template

    Bây giờ bạn mở thư mục của giao diện hiện tại lên, cụ thể trong bài hướng dẫn này là thư mục twentytwelve. Bạn tạo một tập tin mới với tên là template-create-post.php.

    Bạn khai báo để tạo custom template bằng cách thêm vào đầu của tập tin đoạn chú thích sau:
    PHP:
    <?php
    /*
    * Template Name: Create Post Front-End
    */
    ?>
    Bước 2: Tạo trang gửi bài viết trên WordPress

    Tiếp tục chuyển sang bước 2, bạn hãy đăng nhập vào bảng điều khiển và tạo một trang mới với tên là Gửi bài viết, trang này sẽ kế thừa từ template bạn vừa tạo bên trên.

    [​IMG]

    Bước 3: Tiến hành code cho trang gửi bài viết

    Bạn mở lại tập tin template-create-post.php tron theme và thêm vào đoạn code bên dưới:
    PHP:
    <?php
    // Kiểm tra nếu người dùng chưa đăng nhập thì hệ thống sẽ chuyển đến trang đăng nhập.
    if(!is_user_logged_in()) {
      
    // Lấy đường dẫn trang đăng nhập trên WordPress, sau khi đăng nhập thì chuyển tiếp về trang hiện tại.
      
    $login_url wp_login_url(get_the_permalink());
      
    // Hàm chuyển tiếp trới một địa chỉ được cho trước.
      
    wp_redirect($login_url);
      exit;
    }
    // Khai báo id cho HTML cho mục chứa nội dung bài viết.
    $editor_id 'post-content';
    // Mảng chứa các thông báo lỗi.
    $error_messages = array();
    // Biến trả về có gặp lỗi hay không?
    $has_error false;
    // Biến lưu giá trị bài viết có được lưu hay chưa?
    $post_saved false;
    // Biết mảng chứa các khai báo cho hàm wp_editor.
    $settings = array(
      
    "textarea_rows" => 10 // Số dòng của ô viết bài
    );
    // Kiểm tra nếu như form gửi bài đã được submit thì thực hiện hàm này.
    if(isset( $_POST['post-submit'] ) && isset( $_POST['post_nonce_field'] ) && wp_verify_nonce$_POST['post_nonce_field'], 'post_nonce' )) {
      
    // Lấy thông tin tiêu đề của bài viết.
      
    $post_title = isset($_POST["post-title"]) ? wp_strip_all_tags($_POST["post-title"]) : '';
      
    // Lấy thông tin nội dung của bài viết.
      
    $post_content = isset($_POST["post-content"]) ? stripslashes($_POST["post-content"]) : '';
      
    // Lấy thông tin chuyên mục của bài viết.
      
    $post_category = isset($_POST["post-category"]) ? $_POST["post-category"] : 0;
      
    // Lấy thông tin thẻ của bài viết.
      
    $post_tag = isset($_POST["post-tag"]) ? wp_strip_all_tags($_POST["post-tag"]) : '';
      
    // Kiểm tra nếu bài viết chưa có tiêu đề thì gán là bài viết lỗi.
      
    if(empty($post_title)) {
      
    $has_error true;
      
    array_push($error_messages'Bạn chưa điền tiêu đề cho bài viết.');
      }
      
    // Kiểm tra nếu bài viết chưa có nội dung thì gán là bài viết lỗi.
      
    if(empty($post_content)) {
      
    $has_error true;
      
    array_push($error_messages'Bạn chưa điền nội dung cho bài viết.');
      }
      
    // Kiểm tra nếu bài viết chưa có chuyên mục thì gán là bài viết lỗi.
      
    if(empty($post_category)) {
      
    $has_error true;
      
    array_push($error_messages'Bạn chưa chọn chuyên mục cho bài viết.');
      }
      
    // Nếu như qua các bước kiểm duyệt mà không gặp lỗi nào thì thực hiện code bên trong.
      
    if(!$has_error) {
      
    // Tạo mảng chứa thông tin của bài viết.
      
    $post_data = array(
      
    'post_title'  => $post_title// Tiêu đề của bài viết.
      
    'post_content'  => $post_content// Nội dung của bài viết.
      
    'post_type'  => 'post'// Kiểu bài viết là post.
      
    'post_status'  => 'pending'// Trạng thái của bài viết là pending để chờ xét duyệt.
      
    'post_author'  => get_current_user_id(), // Tác giả của bài viết.
      
    'post_category'  => array($post_category), // Chuyên mục của bài viết.
      
    'tags_input'  => $post_tag // Thẻ của bài viết.
      
    );
      
    // Thực hiện lưu bài viết vào cơ sở dữ liệu.
      
    $post_id wp_insert_post($post_data);
      
    // Kiểm tra xem bài viết đã được lưu thành công hay chưa?
      
    if($post_id) {
      
    // Nếu bài viết đã được lưu thì gán biến thông báo bài viết đã được lưu.
      
    $post_saved true;
      }
      }
    }
    ?>
    <?php get_header
    (); ?>
      <div id="primary" class="site-content">
      <div id="content" role="main">
      <?php while ( have_posts() ) : the_post(); ?>
      <div class="sb-create-post post-font-end">
      <?php if($has_error) : ?>
      <div class="message error">
      <?php foreach($error_messages as $message) : ?>
      <?php printf('<p class="message-line error-line">%s</p>'$message); ?>
      <?php endforeach; ?>
      </div>
      <?php endif; ?>
      <?php if($post_saved) : ?>
      <p class="message-line">Cảm ơn bạn đã gửi bài viết, chúng tôi sẽ xem xét và đăng bài của bạn trong thời gian sớm nhất.</p>
      <?php endif; ?>
      <?php if(!$post_saved) : ?>
      <form class="new-post" method="post">
      <p>
      <label for="post-title">Tiêu đề:</label>
      <input type="text" name="post-title" id="post-title" class="required" value="<?php echo $post_title?>" autocomplete="off">
      </p>
      <div class="post-content-area">
      <label for="post-content">Nội dung:</label>
      <?php wp_editor$post_content$editor_id$settings ); ?>
      </div>
      <p>
      <?php $cats get_categories(array('hide_empty' => 0)); ?>
      <label for="post-category">Chuyên mục:</label>
      <select id="post-category" name="post-category">
      <option value="0">Chọn chuyên mục cho bài viết</option>
      <?php foreach($cats as $cat) : ?>
      <option value="<?php echo $cat->term_id?>"<?php selected($post_category$cat->term_id); ?>><?php echo $cat->name?></option>
      <?php endforeach; ?>
      </select>
      </p>
      <p>
      <label for="post-tag">Từ khóa:</label>
      <input type="text" name="post-tag" id="post-tag" class="required" value="<?php echo $post_tag?>" autocomplete="off">
      <em>Mỗi từ khóa cách nhau bởi dấu phẩy.</em>
      </p>
      <p>
      <?php wp_nonce_field'post_nonce''post_nonce_field' ); ?>
      <input type="hidden" name="post-submit" id="post-submit" value="1">
      <button type="submit" class="button submit submit-post">Gửi bài</button>
      </p>
      </form>
      <?php endif; ?>
      </div>
      <?php endwhile; // end of the <a href="http://2-tek.org/blogs/thu-thuat-ma-nguon.71/" title="loop"><strong>loop</strong></a>. ?>
      </div><!-- #content -->
      </div><!-- #primary -->
    <?php get_sidebar(); ?>
    <?php get_footer
    (); ?>
    Đoạn code bên trên sẽ được chia thành 2 phần chính: phần kiểm tra thông tin người dùng nhập vào, phần hiển thị form cho người dùng nhập thông tin bài viết.
    PHP:
    // Kiểm tra nếu người dùng chưa đăng nhập thì hệ thống sẽ chuyển đến trang đăng nhập.
    if(!is_user_logged_in()) {
      
    // Lấy đường dẫn trang đăng nhập trên WordPress, sau khi đăng nhập thì chuyển tiếp về trang hiện tại.
      
    $login_url wp_login_url(get_the_permalink());
      
    // Hàm chuyển tiếp trới một địa chỉ được cho trước.
      
    wp_redirect($login_url);
      exit;
    }
    Chúng ta sẽ kiểm tra xem hiện tại tài khoản đã đăng nhập hay chưa? Nếu chưa đăng nhập thì chuyển tiếp sang trang cho người dùng nhập thông tin đăng nhập. Ngay chỗ này nếu bạn muốn cho khách gửi bài thì cũng được, nhưng bạn phải giới hạn nhiều quyền khác, nếu không tình trạng SPAM sẽ làm trang web của bạn như một bãi chiến trường, nếu tình hình nghiêm trọng hơn thì trang của bạn sẽ bị sập.
    PHP:
    // Kiểm tra nếu như form gửi bài đã được submit thì thực hiện hàm này.
    if(isset( $_POST['post-submit'] ) && isset( $_POST['post_nonce_field'] ) && wp_verify_nonce$_POST['post_nonce_field'], 'post_nonce' )) {
      
    // Lấy thông tin tiêu đề của bài viết.
      
    $post_title = isset($_POST["post-title"]) ? wp_strip_all_tags($_POST["post-title"]) : '';
      
    // Lấy thông tin nội dung của bài viết.
      
    $post_content = isset($_POST["post-content"]) ? stripslashes($_POST["post-content"]) : '';
      
    // Lấy thông tin chuyên mục của bài viết.
      
    $post_category = isset($_POST["post-category"]) ? $_POST["post-category"] : 0;
      
    // Lấy thông tin thẻ của bài viết.
      
    $post_tag = isset($_POST["post-tag"]) ? wp_strip_all_tags($_POST["post-tag"]) : '';
      
    // Kiểm tra nếu bài viết chưa có tiêu đề thì gán là bài viết lỗi.
      
    if(empty($post_title)) {
      
    $has_error true;
      
    array_push($error_messages'Bạn chưa điền tiêu đề cho bài viết.');
      }
      
    // Kiểm tra nếu bài viết chưa có nội dung thì gán là bài viết lỗi.
      
    if(empty($post_content)) {
      
    $has_error true;
      
    array_push($error_messages'Bạn chưa điền nội dung cho bài viết.');
      }
      
    // Kiểm tra nếu bài viết chưa có chuyên mục thì gán là bài viết lỗi.
      
    if(empty($post_category)) {
      
    $has_error true;
      
    array_push($error_messages'Bạn chưa chọn chuyên mục cho bài viết.');
      }
      
    // Nếu như qua các bước kiểm duyệt mà không gặp lỗi nào thì thực hiện code bên trong.
      
    if(!$has_error) {
      
    // Tạo mảng chứa thông tin của bài viết.
      
    $post_data = array(
      
    'post_title'  => $post_title// Tiêu đề của bài viết.
      
    'post_content'  => $post_content// Nội dung của bài viết.
      
    'post_type'  => 'post'// Kiểu bài viết là post.
      
    'post_status'  => 'pending'// Trạng thái của bài viết là pending để chờ xét duyệt.
      
    'post_author'  => get_current_user_id(), // Tác giả của bài viết.
      
    'post_category'  => array($post_category), // Chuyên mục của bài viết.
      
    'tags_input'  => $post_tag // Thẻ của bài viết.
      
    );
      
    // Thực hiện lưu bài viết vào cơ sở dữ liệu.
      
    $post_id wp_insert_post($post_data);
      
    // Kiểm tra xem bài viết đã được lưu thành công hay chưa?
      
    if($post_id) {
      
    // Nếu bài viết đã được lưu thì gán biến thông báo bài viết đã được lưu.
      
    $post_saved true;
      }
      }
    }
    Đoạn code bên trên sẽ chạy nhằm mục đích kiểm tra thông tin của bài viết khi người dùng nhấn nút gửi bài. Bước này bạn có thể bổ sung thêm code để giới hạn những điểm như: Tiêu đề bài viết phải có độ dài từ 30 đến 75 ký tự, nội dung bài viết phải ít nhất 600 ký tự, trong bài viết không được chứa quá 5 hình ảnh,…
    PHP:
    <form class="new-post" method="post">
      <p>
      <label for="post-title">Tiêu đề:</label>
      <input type="text" name="post-title" id="post-title" class="required" value="<?php echo $post_title?>" autocomplete="off">
      </p>
      <div class="post-content-area">
      <label for="post-content">Nội dung:</label>
      <?php wp_editor$post_content$editor_id$settings ); ?>
      </div>
      <p>
      <?php $cats get_categories(array('hide_empty' => 0)); ?>
      <label for="post-category">Chuyên mục:</label>
      <select id="post-category" name="post-category">
      <option value="0">Chọn chuyên mục cho bài viết</option>
      <?php foreach($cats as $cat) : ?>
      <option value="<?php echo $cat->term_id?>"<?php selected($post_category$cat->term_id); ?>><?php echo $cat->name?></option>
      <?php endforeach; ?>
      </select>
      </p>
      <p>
      <label for="post-tag">Từ khóa:</label>
      <input type="text" name="post-tag" id="post-tag" class="required" value="<?php echo $post_tag?>" autocomplete="off">
      <em>Mỗi từ khóa cách nhau bởi dấu phẩy.</em>
      </p>
      <p>
      <?php wp_nonce_field'post_nonce''post_nonce_field' ); ?>
      <input type="hidden" name="post-submit" id="post-submit" value="1">
      <button type="submit" class="button submit submit-post">Gửi bài</button>
      </p>
    </form>
    Đoạn code bên trên sẽ hiện thị form cho người dùng nhập thông tin bài viết, bạn có thể tạo thêm nhiều trường khác nhau. Nhưng bạn để ý tới dòng kiểm tra tính bảo mật của WordPress.
    PHP:
    <?php wp_nonce_field'post_nonce''post_nonce_field' ); ?>
    Đoạn code này rất quan trọng, nếu bạn không sử dụng hàm wp_verify_nonce( $_POST['post_nonce_field'], ‘post_nonce’ ) thì khả năng trang của bạn sẽ bị hacker dòm ngó là điều dĩ nhiên. Chúng ta không thể giới hạn hết các khả năng blog bị tấn công, tuy nhiên những việc 2-Tek và bạn có thể làm thì nên thực hiện bạn nhé.

    Bước 4: Chỉnh sửa định dạng CSS

    Sau khi bạn lưu lại đoạn code trên thì form viết bài đã được hiển thị, tuy nhiên thì giao diện sẽ không được đẹp lắm. Bạn tiếp tục mở tập tin style.css lên và thêm vào cuối cùng của tập tin đoạn code bên dưới:
    Code:
    /* ====================================
      Create Post Form Front-End
      ==================================== */
    .sb-create-post input[type="text"] {
      background-color: #f7f7f7;
      border-radius: 0;
      color: #333;
      display: block;
      width: 80%;
    }
    .sb-create-post input[type="text"]:focus {
      background-color: #fafafa;
    }
    .sb-create-post select {
      background-color: #fafafa;
      border-radius: 0;
    }
    .sb-create-post .post-content-area,
    .sb-create-post p {
      margin-bottom: 20px;
    }
    .sb-create-post .post-content-area {
      position: relative;
    }
    .sb-create-post label {
      display: block;
      margin-bottom: 5px;
    }
    .sb-create-post em {
      color: #999;
      display: block;
      margin-top: 5px;
    }
    .sb-create-post .wp-editor-container {
      border: 1px solid #ddd;
    }
    .sb-create-post .message-line {
      background-color: #f7f7f7;
      border-left: 3px solid #009900;
      line-height: 19px;
      padding: 8px 10px;
    }
    .sb-create-post .message-line.error-line {
      border-left-color: #e53030;
    }
    .sb-create-post .post-content-area &gt; .wp-editor-wrap {
      margin-top: 10px;
    }
    Sau khi đã hoàn thành xong mọi thứ thì bây giờ bạn đã có thể gửi bài viết bên ngoài Front-End của WordPress. Bên dưới là hình ảnh kết quả của đoạn code mà nãy giờ 2-Tek và bạn cũng làm.

    [​IMG]

    Kết luận:
    Link tải tập tin template-create-post.php: http://www.mediafire.com/download/3gazhrqwg3ai07f/template-create-post.zip

    Nếu bạn có những câu hỏi hoặc bạn có ý tưởng bổ sung cho bài viết này thì hãy gửi bình luận và thảo luận cùng mọi người nhé!
     
    #1

Share This Page