Activarea ThickBox în WordPress


Pe acest sit folosim pluginul WordPress Shadowbox JS şi sunt mulţumit (mai ales prin generalitatea lui). Dar ştiaţi că puteţi avea ceva destul de similar, fără nici un plugin? WordPress ascunde multe sub „capotă”, şi printre acestea sunt diverse biblioteci şi pluginuri JavaScript. Despre jQuery şi WordPress am mai scris de-a lungul timpului, şi poate am mai spus că ThickBox (un proiect folosit de WP, din păcate abandonat de autori în favoarea la jQuery UI) este de asemenea inclus… dar puţin ascuns. Obiectivul nostru va fi fără vreun plugin să putem arăta imaginile ca în captura de mai jos.

Lucrul e valabil şi pentru text, ascuns într-un post de exemplu.

Am pornit de la un articol interesant dar şchiopătând: Quick WP tip #2: Conditional Thickbox loading. Pe scurt ideea autorului este: dacă într-un articol se găseşte secvenţa class=”thickbox” înseamnă că se doreşte folosirea pluginului ThickBox; atunci e cazul să îl activăm. Ideea e genială. În primul rând îmi place că se adaugă ThickBox doar când se foloseşte, multe pluginuri încărcând cu JavaScript-uri şi CSS-uri chiar şi când nu e nevoie. În al doilea rând codul e la obiect: introduceţi liniile de mai jos în functions.php din folderul temei WordPress curentă şi apoi la linkurile spre imagini adăugaţi class=”thickbox”. Atât.

[PHP]function yst_conditional_thickbox() {
global $post;
if (is_singular() &&
strpos($post->post_content,’class=”thickbox”‘) !== false) {
wp_enqueue_script(‘thickbox’);
wp_enqueue_style(‘thickbox’);
}
}
add_action(‘wp_print_styles’,’yst_conditional_thickbox’);[/PHP]

Nu merge însă perfect. Sunt probleme cu afişarea unor imagini proprii ThickBox şi apoi utilizarea poate fi simplificată. Săpând prin alte articole referite în comentariile la cel amintit mai sus, am descoperit trei lucruri: 1) că există o linie ce înlocuieşte codul de mai sus (o funcţie nedocumentată); 2) că se poate rezolva problema cu imaginile; 3) că putem automatiza la imagini, să nu trebuiască pus manual class=”thickbox”. Direct codul:

[PHP]add_thickbox();

function thickbox_image_paths() {
global $post;
wp_reset_query();
if (is_singular() && strpos($post->post_content,’class=”thickbox”‘) !== false) {
$thickbox_path = get_option(‘siteurl’) . ‘/wp-includes/js/thickbox/’;
echo „\n”;
}
}
add_action(‘wp_footer’, ‘thickbox_image_paths’);[/PHP]

Codul de mai sus pus în functions.php va transforma în afişare deasupra un cod de genul <a href=”http://cale/spre/imagine.jpg”><img src=”http://cale/spre/imagine-mica.jpg”></a>. Dacă vreţi să fie un şir de imagini (galerie), folosiţi rel=”orice”. Pentru altele… contactaţi documentaţia ThickBox. A! Pentru ca să nu trebuiască automat pusă clasa, am apelat în linia 11 la un truc jQuery. Va trebui să înlocuiţi „post-content” cu clasa care „înveleşte” conţinutul articolelor Dvs. Succes!


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *