如何在WordPress主題中添加工具提示推薦


過去,我們向您展示瞭如何在WordPress中添加旋轉推薦。 在為WPBeginner WordPress視頻創建新的著陸頁時,我們從StudioPress做一段時間以來的工作中汲取了靈感。 當用戶將鼠標移到照片上時,即在工具提示中顯示推薦。 由於我們也看到其他人也在使用該技術,因此它正在成為行業標準。 在本文中,我們將向您展示如何在WordPress中添加工具提示推薦窗口。

最後結果

這就是最終產品的外觀。 如果將鼠標移到某人的照片上,它將顯示一個工具提示證明。 您可以在此處觀看現場演示。 但是,本文可能會超出實時演示的範圍,因此請在下面附加屏幕截圖:

WordPress中的工具提示推薦

背景:

根據我們從行業專家那裡得到的消息,顯示突出的人臉往往會在頁面上增加個人感覺。 這就是為什麼我們要走這條路的原因。 我們做了一個簡單的Google搜索,以了解Loren Nason的文章。 他從本質上突出了StudioPress使用的代碼。 StudioPress最好的部分是他們的支持。 正如Loren所述,當他向Brian Gardner詢問如何在自己的網站上創建推薦書時,Brian只是發送了一個示例文件。

最大的問題是他們只是將功能硬編碼到模板中。 雖然這對我們的開發人員來說很好,但是如果您將網站交給客戶,這不是理想的解決方案嗎? 我們希望有一個解決方案,使客戶能夠隨意添加/刪除推薦。 這就是為什麼我們決定使用“自定義帖子類型”和meta字段與jQuery一起完成此操作的原因。

自定義帖子類型和元框

我們需要客戶有能力執行以下操作:

  • 添加用戶的照片(縮略圖)
  • 添加用戶名(帖子標題)
  • 添加推薦文字(帖子正文)
  • 客戶在公司中的職位(自定義字段或元框)

我們要做的第一件事是添加了一個稱為“推薦”的自定義帖子類型,它使我們獲得了除一個字段(客戶職位/公司)以外的所有內容。 是否要添加自定義元框或讓客戶使用自定義字段由您自己決定。 我們說不要懶惰,即使需要添加一些額外的代碼行,也可以為我們的客戶提供出色的後端體驗。

所有您需要做的就是獲取下面的代碼,並將其保存在一個空白的php文件中,該文件名為tooltip-testimonials.php或任何其他名稱。

 _x( 'Testimonials', 'testimonial' ),
        'singular_name' => _x( 'testimonial', 'testimonial' ),
        'add_new' => _x( 'Add New', 'testimonial' ),
        'add_new_item' => _x( 'Add New testimonial', 'testimonial' ),
        'edit_item' => _x( 'Edit testimonial', 'testimonial' ),
        'new_item' => _x( 'New testimonial', 'testimonial' ),
        'view_item' => _x( 'View testimonial', 'testimonial' ),
        'search_items' => _x( 'Search Testimonials', 'testimonial' ),
        'not_found' => _x( 'No testimonials found', 'testimonial' ),
        'not_found_in_trash' => _x( 'No testimonials found in Trash', 'testimonial' ),
        'parent_item_colon' => _x( 'Parent testimonial:', 'testimonial' ),
        'menu_name' => _x( 'Testimonials', 'testimonial' ),
    );

    $args = array( 
        'labels' => $labels,
        'hierarchical' => false,
        
        'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom-fields', 'revisions' ),
        
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archive' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,
        'capability_type' => 'post'
    );

    register_post_type( 'testimonial', $args );
}

//Custom Meta Box

$key = "testimonial";
$meta_boxes = array(
"position" => array(
"name" => "position",
"title" => "Position and Company",
"description" => "Enter their position and their company name.")
);
 
function create_meta_box() {
global $key;
 
if( function_exists( 'add_meta_box' ) ) {
add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Information', 'display_meta_box', 'testimonial', 'normal', 'high' );
}
}
 
function display_meta_box() {
global $post, $meta_boxes, $key;
?>
 
ID, $key, true); ?>

這將為我們提供開始所需的基本WordPress設置。 現在,您需要開始添加一些推薦,以便可以顯示它。 讓我們回顧一下每個元素的去向。

  • 添加用戶的照片(縮略圖/精選圖像)。 我們將其設置為將其尺寸調整為96 x 96px。 始終最好遵循該比例。
  • 添加用戶名(帖子標題)
  • 添加推薦文字(帖子正文)
  • 客戶在公司的職位(在推薦信息元框中)

在主題中顯示

工具提示推薦書主要用於自定義主題,因此,是的,它需要通過一些主題編輯來使您的手變髒。 因為每個主題都有不同的尺寸,配色方案和样式,所以我們決定將其發佈為教程而不是插件。 這是我們將在您的WordPress主題中顯示工具提示推薦的操作:

  • 在主題中添加自定義jQuery代碼。
  • 創建一個自定義循環,該循環將在我們想要的結構中顯示推薦。
  • 添加一些基本的CSS使其看起來很漂亮

您需要做的第一件事是複制並粘貼以下jQuery代碼,並將其保存在名為的空白文件中 tooltip-testimonials.js

jQuery(document).ready(function(){
     
    jQuery("#testimonials imgHow to Add Tooltip Testimonials in WordPress Themes").tooltip({
 
       // tweak the position
       offset: [0, 0],
     
       // use the "slide" effect
       effect: 'slide'
     
    // add dynamic plugin with optional configuration for bottom edge
    }).dynamic({ bottom: { direction: 'down', bounce: true } });
     
});

完成此操作後,我們需要將此文件加載到主題的標題中。 您可以選擇通過編輯header.php文件並將腳本代碼粘貼到頭部區域來手動執行此操作,或者遵循WP最佳實踐並使用wp_enqueue_script函數。 讓我們繼續並將我們的tooltip-testimonials.js文件上傳到主題的scripts文件夾中。 如果不存在,則只需創建一個名為scripts的文件夾。

將以下代碼添加到主題的functions.php文件中:

add_action('wp_enqueue_scripts', 'tooltip_enqueue_scripts');
function tooltip_enqueue_scripts() {
if (!is_admin()) {
    wp_register_script('jquery_tools', 'http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js?ver=3.4.2', 'jquery', '3.4.2', true);
        wp_enqueue_script('jquery_tools');
 
    wp_register_script('tooltip', get_stylesheet_directory_uri() . '/scripts/tooltip-testimonials.js', 'jquery', '1', true);
        wp_enqueue_script('tooltip');
}
}

現在,我們就位了,讓我們創建一個自定義循環,使我們可以使用基於網格的格式將這些工具提示推薦與用戶圖片一起顯示。 打開要在其中顯示此個人鑑定的文件。 無論是您的側邊欄,主頁還是您喜歡的任何地方。 然後粘貼以下循環:


'testimonial', 'posts_per_page' => 6 ); $loop = new WP_Query( $args ); if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post(); $data = get_post_meta( $loop->post->ID, 'testimonial', true ); $user_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($loop->post->ID), 'testimonial-thumb'); ?>

“ alt =”" />

上面的循環代碼將在頁面上顯示6個項目。 您可以隨意選擇樣式。 如果您有20個左右的推薦,甚至可以添加orderby = rand。 您可以隨機顯示6個。

現在,讓我們添加一些CSS樣式,使其看起來更漂亮。 以下是我們使用的一些示例CSS。 您可能需要根據主題樣式,配色方案等進行調整。

#testimonials .testimonials{width: 116px; float: left; margin: 35px 30px 0 0;}

#testimonials .center{text-align: center; margin: 0px 0 15px;; padding: 0px;}

#testimonials .center img{box-shadow: 0px 2px 2px #d2d2d2; -moz-box-shadow: 0px 2px 2px #d2d2d2; -webkit-box-shadow: 0px 2px 2px #d2d2d2; border: 3px solid #fff;}

#testimonials .testimonials-title{font-size: 14px; font-weight: 700; text-align: center; margin: 3px 0 0; padding: 0px;}

#testimonials .company{font-size: 12px; font-style: italic; text-align: center; margin: 0px; padding: 0px;}

#testimonials .tooltip {background: #111; color: #fff; width: 200px; padding: 20px; margin: 0 5px 20px;}

包起來:

我們希望本文能幫助您在WordPress主題中添加工具提示推薦。 這是一個非常基本的例子。 正如我們上面提到的,您始終可以將wp_query參數調整為具有隨機的推薦順序。 您還可以使用插件“過帳類型訂單”來允許您的客戶通過簡單的拖放界面確定訂單。

如果您有任何疑問或建議,請隨時在下面發表評論。