Cum Sa Adaug Tooltip La Imagine Thumbnail In Wordpress

[dani5555]

Buna tuturor
Cum se poate adauga un tooltip pentru imagine thumbnail
Am gasit exemple dar nu stiu cum se face
http://www.menucool....tip/css-tooltip
http://wpfaq.org/site/tooltips-2/
Vreau sa apara la fiecare poza cu chenar subtire textul "Vizualizare poza"

Site-ul meu www.retete-super.ro
Va multumesc

[gaby]

Va trebui sa modifici/adaugi CSS-ul WordPress-ului cu informatiile prezentate in exemplu, iar la adaugarea unei imagini sa folosesti clasa folosit pentru tooltip, ca de exemplu:

<a href="#" class="tooltip">Tooltip<span>
<img class="callout" src="src/callout.gif" /> <strong>Most Light-weight Tooltip</strong><br />
</span></a>

Calea mai simpla este folosirea unui plugin: http://wordpress.org/extend/plugins/wp-image-tooltip/ (care totusi este cam vechi)

 

De asemenea, vezi si: http://wplift.com/how-to-add-tooltips-to-wordpress sau http://wordpress.org/extend/plugins/search.php?q=jquery+tooltip&sort

[dani5555]

Ciao

Nu mai vreau sa mai adaug inca un plugin ca ma deja multe instalate

Problema e ca nu stiu cum sa adaug codul

Unde trebuie adaugat in Function.php

Eu vreau sa apara la fiecare imagine care este in chenar subtire textul "Vizualizare poza"

Sa apara acelasi text la toate pozele thumbnail in momentul in care se pune cursorul de la mouse sa apara textul "Vizualizare poza"

Exemplu din site Amandina la fel si la urmatoarele poze

Codul css gasesc unde sa il adaug

Multumesc de raspuns

[gaby]

Vezi daca nu te ajuta aceste link-uri:

• http://www.wpbeginner.com/wp-themes/how-to-add-tooltip-testimonials-in-wordpress-themes/
• http://www.wpbeginner.com/plugins/how-to-add-tooltip-in-your-wordpress-posts-and-pages/

[dani5555]

Am gasit un cod care functioneaza dar nu stiu cum sa il adaptez pentru site-ul meu

Codul css:

a.tooltip {outline:none; } a.tooltip strong {line-height:30px;} a.tooltip:hover {text-decoration:none;} a.tooltip span { z-index:10;display:none; padding:14px 20px; margin-top:60px; margin-left:-160px; width:240px; line-height:16px; } a.tooltip:hover span{ display:inline; position:absolute; border:2px solid #FFF; color:#EEE; background:#000 url(src/css-tooltip-gradient-bg.png) repeat-x 0 0; } .callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;} /*CSS3 extras*/ a.tooltip span { border-radius:2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-box-shadow: 0px 0px 8px 4px #666; -webkit-box-shadow: 0px 0px 8px 4px #666; box-shadow: 0px 0px 8px 4px #666; opacity: 0.8; }

Codul Html:

<a href="#" class="tooltip"> Tooltip <span> <img class="callout" src="src/callout_black.gif" /> <strong>Most Light-weight Tooltip</strong><br /> This is the easy-to-use Tooltip driven purely by CSS. </span> </a> <a href="#" class="tooltip"> <img src="../img/demo/css-tooltip-image.gif" /> <span> <img class="callout" src="src/callout_black.gif" /> <strong>CSS only Tooltip</strong><br /> <img src="../img/demo/css-tooltip-image.gif" style="float:right;" /> Pure CSS popup tooltips with clean semantic XHTML. </span> </a>

Cum adaug codul html in function php? In function.php am gasit urmatorul cod:

if (!function_exists('theme_get_post_thumbnail')){
function theme_get_post_thumbnail($args = array()){
global $post;
$size = theme_get_array_value($args, 'size', array(theme_get_option('theme_metadata_thumbnail_width'), theme_get_option('theme_metadata_thumbnail_height')));
$auto = theme_get_array_value($args, 'auto', theme_get_option('theme_metadata_thumbnail_auto'));
$featured = theme_get_array_value($args, 'featured', theme_get_option('theme_metadata_use_featured_image_as_thumbnail'));
$title = theme_get_array_value($args, 'title', get_the_title());
$result = '';
if ($featured && (function_exists('has_post_thumbnail')) && (has_post_thumbnail())) {
ob_start();
the_post_thumbnail($size, array('alt' => '', 'title' => $title));
$result = ob_get_clean();
} elseif ($auto) {
$attachments = get_children(array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID'));
if($attachments) {
$attachment = array_shift($attachments);
$img = wp_get_attachment_image_src($attachment->ID, $size);
if (isset($img[0])) {
$result = '<img src="'.$img[0].'" alt="" width="'.$img[1].'" height="'.$img[2].'" title="'.$title.'" class="wp-post-image" />';
}
}
}

 

Multumesc pentru ajutorul acordat

[dani5555]

Buna tuturor

Am urmatorul cod html si css pe site-ul http://www.menucool....tip/css-tooltip
Am primit un raspuns ca se poate adauga in felul urmator http://codex.wordpre...rg/Child_Themes
A mai facut cineva asa ceva?
Cum trebuie sa procedez eu?
Eu vreau sa apara acest tooltip la imaginea mica cu chenar rosu si sa fie scris textul "Vizualizare poza" cand se pune cursourul de la mouse pe poza mica thumbnail.
Va multumesc