SÄ hÀr lÀgger du till tips om verktygstips i WordPress-teman

Tooltip Testimonials in WordPress

Tidigare har vi visat dig hur du lÀgger till roterande vittnesmÄl i WordPress. NÀr vi skapade den nya mÄlsidan för WPBeginner WordPress-videor, tog vi inspiration frÄn nÄgot som vi har sett StudioPress göra under en tid. Det Àr att visa vittnesmÄl i ett verktygstips nÀr anvÀndaren tar med sig musen pÄ ett foto. Denna teknik blir en industristandard eftersom vi ocksÄ har sett andra mÀnniskor som anvÀnder den. I den hÀr artikeln kommer vi att visa dig hur du lÀgger till popup-meddelanden om verktygstips i WordPress.

Slutresultat

SÄ hÀr kommer slutprodukten att se ut. Om du tar med musen över en persons foto, kommer det att visas ett verktygstips. Du kan se live demo hÀr. Den hÀr artikeln kommer dock sannolikt att överleva live-demo, sÄ bifoga en skÀrmdump nedan:

Bakgrund:

Enligt vad vi har hört frÄn branschexperter, visar framtrÀdande mÀnskliga ansikten en personlig kÀnsla pÄ sidan. Detta Àr anledningen till att vi ville gÄ denna vÀg. Vi gjorde en enkel google-sökning för att komma över Loren Nasons artikel. I vilken han i huvudsak markerade koden som StudioPress anvÀnde. Det bÀsta med StudioPress Àr deras stöd. Som Loren beskrev, nÀr han frÄgade Brian Gardner om hur han skapade vittnesmÄlen pÄ sin webbplats, skickade Brian helt enkelt en exempelfil.

Det största problemet var att de helt enkelt hĂ„rdkodade funktionen i sin mall. Även om detta skulle fungera bra för oss utvecklare Ă€r det inte en idealisk lösning om du lĂ€mnar webbplatsen till en klient? Vi ville ha en lösning dĂ€r vi ger kunden möjlighet att lĂ€gga till / ta bort vittnesmĂ„l efter eget val. Det Ă€r dĂ€rför vi bestĂ€mde oss för att anvĂ€nda anpassade inlĂ€ggstyper och metafĂ€lt för att Ă„stadkomma detta tillsammans med jQuery.

Anpassade inlÀggstyper och meta-rutor

Vi behöver att klienten har förmÄgan att göra följande:

LÀgg till anvÀndarens foto (miniatyrer) LÀgg till anvÀndarnamn (inlÀggstitel) LÀgg till vittnesmÄlstext (inlÀggsdel) Kundens position i företaget (anpassat fÀlt eller metaruta)

Det första vi gjorde var att lÀgga till en anpassad posttyp som heter Testimonials som fick oss allt utom ett fÀlt (kundposition / företag). Det Àr upp till dig om du vill lÀgga till en anpassad metaruta eller göra att din klient anvÀnder anpassade fÀlt. Vi sÀger kan inte vara lat, och ge vÄra kunder en fantastisk backend-upplevelse Àven om det krÀver att lÀgga till nÄgra extra rader kod.

Allt du behöver göra Àr att ta koden nedan och spara den i en tom php-fil som heter tooltip-testimonials.php eller nÄgot annat namn för den skull.


<?php
/*
Plugin Name: Tooltip Testimonial
Plugin URI: https://www.wpbeginner.com/
Description: Tooltip Testimonial in WordPress
Version: 0.1
Author: Syed Balkhi
Author URI: https://www.wpbeginner.com/
License: GPL v2 or higher
License URI: License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


//Add Image Size
add_image_size( 'testimonial-thumb', 96, 96, true ); // Hard Crop Mode

//Register Custom Post Types

add_action( 'init', 'register_cpt_testimonial' );

function register_cpt_testimonial() {

    $labels = array( 
        'name' => _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;
?>
 
<div class="form-wrap">
 
<?php
wp_nonce_field( plugin_basename( __FILE__ ), $key . '_wpnonce', false, true );
 
foreach($meta_boxes as $meta_box) {
$data = get_post_meta($post->ID, $key, true);
?>
 
<div class="form-field form-required">
<label for="<?php echo $meta_box[ 'name' ]; ?>"><?php echo $meta_box[ 'title' ]; ?></label>
<input type="text" name="<?php echo $meta_box[ 'name' ]; ?>" value="<?php echo htmlspecialchars( $data[ $meta_box[ 'name' ] ] ); ?>" />
<p><?php echo $meta_box[ 'description' ]; ?></p>
</div>
 
<?php } ?>
 
</div>
<?php
}
 
function save_meta_box( $post_id ) {
global $post, $meta_boxes, $key;
 
foreach( $meta_boxes as $meta_box ) {
$data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ];
}
 
if ( !wp_verify_nonce( $_POST[ $key . '_wpnonce' ], plugin_basename(__FILE__) ) )
return $post_id;
 
if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;
 
update_post_meta( $post_id, $key, $data );
}
 
add_action( 'admin_menu', 'create_meta_box' );
add_action( 'save_post', 'save_meta_box' );


Detta ger oss den grundlÀggande WordPress-installationen som vi behöver för att börja med. Nu mÄste du börja lÀgga till nÄgra vittnesmÄl, sÄ att du kan visa det. LÄt oss sammanfatta vart varje element gÄr.

LÀgg till anvÀndarens foto (miniatyrer / utvalda bilder). Vi har stÀllt in att Àndra storlek pÄ den med 96 x 96 pixlar. Det Àr alltid bÀst att följa det förhÄllandet. LÀgg till anvÀndarnamn (inlÀggstitel) LÀgg till vittnesmÄlstext (inlÀggsdel) Kundens position i företaget (i en meta-ruta för informationsinformation)

Visas i tema

Tooltip testimonials Àr mestadels avsedda för anpassade teman, sÄ ja det kommer att krÀva att dina hÀnder blir smutsiga med lite temaredigering. Eftersom varje tema har olika dimensioner, fÀrgscheman och stilar bestÀmde vi oss för att slÀppa detta som en handledning snarare Àn som ett plugin. HÀr Àr vad vi kommer att göra för att visa vittnesmÄl om verktygstips i ditt WordPress-tema:

LÀgg till en anpassad jQuery-kod i temat. Skapa en anpassad slinga som visar vittnesmÄlen i en struktur vi vill ha. LÀgg till nÄgra grundlÀggande CSS sÄ att det ser vackert ut

Det första du behöver göra Àr att kopiera och klistra in följande jQuery-kod och spara den i en tom fil som heter:


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 } });
     
});

NÀr du har gjort det mÄste vi ladda den hÀr filen i ditt temas rubrik. Du kan antingen vÀlja att göra detta manuellt genom att redigera din header.php-fil och klistra in en skriptkod i huvudomrÄdet, eller följa WP: s bÀsta praxis och anvÀnda funktionen wp_enqueue_script. LÄt oss fortsÀtta och ladda upp vÄr tooltip-testimonials.js-fil i vÄrt temas skriptmapp. Om det inte finns, skapa bara en mapp som heter skript.

LÀgg till följande kod i ditt temas funktioner.php-fil:


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');
}
}

Nu har vi det pĂ„ plats, kan vi skapa en anpassad slinga som lĂ„ter oss visa dessa verktygstipsbevis med anvĂ€ndarens bilder i ett rutnĂ€tbaserat format. Öppna filen dĂ€r du vill att dessa vittnesmĂ„l ska visas. Oavsett om det Ă€r din sidofĂ€lt, hemsida eller var du vill. Klistra sedan in följande slinga:




<div id="testimonials">
<div class="wrap">
<?php
$args = array( 'post_type' => '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');
?>    
    <div class="testimonials">
        <p class="center"><img class="frame" src="<?php echo $user_image_url[0] ?>" title="<?php echo get_the_content(); ?>" alt="<?php echo get_the_title(); ?>" /></p>
        <p class="testimonials-title"><?php echo get_the_title(); ?></p>
        <p class="company"><?php echo $data[ 'position' ]; ?></p>
    </div>
<?php
endwhile; 
endif; ?>

</div>
</div>


Loop-koden ovan visar 6 objekt pÄ sidan. Du kan utforma dem hur du Àn vÀljer. Du kan till och med lÀgga till orderby = rand om du har ungefÀr 20 eller sÄ vittnesmÄl. Du kan ha 6 slumpmÀssigt visas.

LÄt oss nu lÀgga till nÄgra CSS-stilar sÄ att det ser vackert ut. Nedan följer nÄgra exempel pÄ CSS som vi anvÀnde. Du skulle antagligen behöva justera det baserat pÄ dina temastilar, fÀrgscheman etc.


#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;}

Avslutar:

Vi hoppas att den hÀr artikeln hjÀlper dig att lÀgga till tips om verktygstips i dina WordPress-teman. Detta Àr ett mycket grundlÀggande exempel. Som vi nÀmnde ovan kan du alltid justera wp_query-argumenten för att fÄ ordning pÄ slumpmÀssiga testimonials. Du kan ocksÄ anvÀnda insticksprogrammet Posttypsorder för att lÄta dina kunder bestÀmma bestÀllningen med ett enkelt dra-slÀpp-grÀnssnitt.

Om du har nÄgra frÄgor eller förslag, lÀmna gÀrna en kommentar nedan.