با سلام و عرض ادب ، در این اموزش از سری آموزش های وردپرس قصد داریم تا نحوه ساخت Testimonial در وردپرس را ارائه کنیم که در برخی از موارد موردنیاز سایت ها می باشد اگر شما هم به چنین امکانی در سایت خود نیاز دارید ما را تا پایان همراهی کنید تا بتوانید با استفاده از کد های ارائه شده آن را به سایت اضافه کنید.حال Testimonial چیست و چه کاربردی دارد؟ اگر کوتاه عرض کنیم باید گفت همان دیدگاه کاربران می باشد که نکته به نکته آموزش خواهیم داد …
برای ایجاد چنین امکانی باید قبل از هر کاری post type این بخش را بسازید خب از داخل فایل های قالب وردپرس function.php را پیدا و به حالت ویرایش در آورید و کد زیر را در آن جای دهید.قبل از هر کاری یک پشتیبان تهیه کنید تا در صورت بروز مشکل بتوانید به حالت قبل برگردانید.
add_action( 'init', 'testimonials_post_type' ); function testimonials_post_type() { $labels = array( 'name' => 'دیدگاه های مشتریان', 'singular_name' => 'Testimonial', 'add_new' => 'افزودن جدید', 'add_new_item' => 'افزودن دیدگاه جدید', 'edit_item' => 'ویرایش دیدگاه', 'new_item' => 'دیدگاه جدید', 'search_items' => 'جستجو دیدگاه', 'not_found' => 'دیدگاهی پیدا نشد', 'not_found_in_trash' => 'دیدگاهی در زباله دان پیدا نشد', 'parent_item_colon' => '', ); register_post_type( 'testimonials', array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'exclude_from_search' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => 10, 'supports' => array( 'editor' ), 'register_meta_box_cb' => 'testimonials_meta_boxes', // فراخوانی تابع متاباکس ) ); }
بعد از جای دادن کد در فایل گفته شده آن را ذخیره سازی کنید و وارد پیشخوان بشوید.تا گزینه جدید با عنوان دیدگاه مشتریان را که با کد بالا اضافه شده ا ببینید.خب در نوبت بعدی باید متاباکس هایی را به این بخش اضافه کنید.برای این کار از تابع add_meta_box() در قالب استفاده کنید برای این کار کد زیر را در ادامه کد بالا در فایل function.php اضافه کنید.
function testimonials_meta_boxes() { add_meta_box( 'testimonials_form', 'جزئیات مشتری', 'testimonials_form', 'testimonials', 'normal', 'high' ); } function testimonials_form() { $post_id = get_the_ID(); $testimonial_data = get_post_meta( $post_id, '_testimonial', true ); $client_name = ( empty( $testimonial_data['client_name'] ) ) ? '' : $testimonial_data['client_name']; $source = ( empty( $testimonial_data['source'] ) ) ? '' : $testimonial_data['source']; $link = ( empty( $testimonial_data['link'] ) ) ? '' : $testimonial_data['link']; $image = ( empty( $testimonial_data['image'] ) ) ? '' : $testimonial_data['image']; wp_nonce_field( 'testimonials', 'testimonials' ); ?> <label>نام مشتری</label> <input type="text" value="<?php echo $client_name; ?>" name="testimonial[client_name]" size="40" /> <label>بیزینس / آدرس سایت</label> <input type="text" value="<?php echo $source; ?>" name="testimonial" size="40" /> <label>لینک</label> <input type="text" value="<?php echo $link; ?>" name="testimonial[link]" size="40" /> <label>تصویر</label> <input type="text" value="<?php echo $image; ?>" name="testimonial[image]" size="40" /> <?php }
دوباره فایل را ذخیره سازی کنید و وارد پیشخوان و وارد قسمت افزودن دیدگاه مشتان شوید خواهید دید متاباکسی اضافه شده که نوبت به ذخیره اطلاعات متاباکس می باشد برای این کار از کد زیر استفاده کنید.
add_action( 'save_post', 'testimonials_save_post' ); function testimonials_save_post( $post_id ) { if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return; if ( ! empty( $_POST['testimonials'] ) && ! wp_verify_nonce( $_POST['testimonials'], 'testimonials' ) ) return; if ( ! empty( $_POST['post_type'] ) && 'page' == $_POST['post_type'] ) { if ( ! current_user_can( 'edit_page', $post_id ) ) return; } else { if ( ! current_user_can( 'edit_post', $post_id ) ) return; } if ( ! wp_is_post_revision( $post_id ) && 'testimonials' == get_post_type( $post_id ) ) { remove_action( 'save_post', 'testimonials_save_post' ); wp_update_post( array( 'ID' => $post_id, 'post_title' => 'Testimonial - ' . $post_id ) ); add_action( 'save_post', 'testimonials_save_post' ); } if ( ! empty( $_POST['testimonial'] ) ) { $testimonial_data['client_name'] = ( empty( $_POST['testimonial']['client_name'] ) ) ? '' : sanitize_text_field( $_POST['testimonial']['client_name'] ); $testimonial_data['source'] = ( empty( $_POST['testimonial']['source'] ) ) ? '' : sanitize_text_field( $_POST['testimonial']['source'] ); $testimonial_data['link'] = ( empty( $_POST['testimonial']['link'] ) ) ? '' : esc_url( $_POST['testimonial']['link'] ); $testimonial_data['image'] = ( empty( $_POST['testimonial']['image'] ) ) ? '' : esc_url( $_POST['testimonial']['image'] ); update_post_meta( $post_id, '_testimonial', $testimonial_data ); } else { delete_post_meta( $post_id, '_testimonial' ); } }
با انجام کار بالا و قرار دادن کد در سایت وردپرسی خود دیگر اطلاعات مشتران از بین نرفته و ذخیره خواهد شد.
در نوبت بعدی به نمایش در آوردن لیست دیدگا های مشتریان می باشد که برای این کار از کد زیر استفاده کنید یعنی کد زیر را در ادامه کد بالا قار دهید.
add_filter( 'manage_edit-testimonials_columns', 'testimonials_edit_columns' ); function testimonials_edit_columns( $columns ) { $columns = array( 'cb' => '<input type="checkbox" />', 'title' => 'عنوان', 'testimonial' => 'دیدگاه مشتری', 'testimonial-client-name' => 'نام مشتری', 'testimonial-source' => 'بیزینس / سایت', 'testimonial-link' => 'لینک', 'author' => 'نویسنده', 'date' => 'تاریخ' ); return $columns; } add_action( 'manage_posts_custom_column', 'testimonials_columns', 10, 2 ); function testimonials_columns( $column, $post_id ) { $testimonial_data = get_post_meta( $post_id, '_testimonial', true ); switch ( $column ) { case 'testimonial': the_excerpt(); break; case 'testimonial-client-name': if ( ! empty( $testimonial_data['client_name'] ) ) echo $testimonial_data['client_name']; break; case 'testimonial-source': if ( ! empty( $testimonial_data['source'] ) ) echo $testimonial_data['source']; break; case 'testimonial-link': if ( ! empty( $testimonial_data['link'] ) ) echo $testimonial_data['link']; break; case 'testimonial-image': if ( ! empty( $testimonial_data['image'] ) ) echo $testimonial_data['image']; break; } }
در نوبت بعدی باید Testimonials یا همان دیدگاه مشتریان را نمایش داد برای این کار از کد زیر استفاده کنید و در هرکجا که دوست دارید نمایش دهید قرار دهید.
function get_testimonial( $posts_per_page = 1, $orderby = 'none', $testimonial_id = null ) { $args = array( 'posts_per_page' => (int) $posts_per_page, 'post_type' => 'testimonials', 'orderby' => $orderby, 'no_found_rows' => true, ); if ( $testimonial_id ) $args['post__in'] = array( $testimonial_id ); $query = new WP_Query( $args ); $testimonials = ''; if ( $query->have_posts() ) { while ( $query->have_posts() ) : $query->the_post(); $post_id = get_the_ID(); $testimonial_data = get_post_meta( $post_id, '_testimonial', true ); $client_name = ( empty( $testimonial_data['client_name'] ) ) ? '' : $testimonial_data['client_name']; $source = ( empty( $testimonial_data['source'] ) ) ? '' : ' - ' . $testimonial_data['source']; $link = ( empty( $testimonial_data['link'] ) ) ? '' : $testimonial_data['link']; $image = ( empty( $testimonial_data['image'] ) ) ? '' : $testimonial_data['image']; $cite = ( $link ) ? '<a href="' . esc_url( $link ) . '" target="_blank">' . $client_name . $source . '</a>' : $client_name . $source; $testimonials .= ' <aside class="testimonial">'; $testimonials .= ' <div class="entry-content">'; $testimonials .= ' ' . get_the_content() . '<span></span> '; $testimonials .= ' <cite>' . $cite . '</cite><img src='.$image.' width="50" height="50"/>'; $testimonials .= '</div> '; $testimonials .= '</aside> '; endwhile; wp_reset_postdata(); } return $testimonials; } <div class="line number1 index0 alt2"></div>
در آخرین نوبت باید برای این امکان استایل دهی بدهید شما می توانید از css زیر استفاده کنید ویا اگر با استایل نویسی آشنایی دارید خود از نو طراحی کنید.این کد باید در داخل فایل stily.css قالب وردپرس جای داده شود.
p.testimonial-text { background: #f5f5f5; padding: 12px; text-align: justify; border-radius: 15px; } p.testimonial-text:after { background: url(image/btmarrow.png) no-repeat; width: 63px; display: block; position: absolute; content: " "; color: #f5f5f5; height: 40px; } .testimonial-client-name img { display: inline-block; border-radius: 50px; margin-bottom: -20px; margin-right: 10px; }
خب کار در این قسمت از آموزش هک وردپرس و ساخت Testimonials در وردپرس به اتمام رسید و در قسمت دوم این آموزش خواهیم پرداخت به ساخت ابزارک آن در صورت تمایل می توانید از طریق لینک زیر به قسمت بعدی مراجعه کنید.
قسمت دوم آموزش ساخت Testimonials در وردپرس
منبع: وردپرس