WordPress mini-plugin – tooltip shortcode

Piszemy mini-plugin dodający tooltipy w CSS oraz własny shortcode, który nam te tooltipy generuje. Bardzo prosty, łatwy plugin, wręcz drobne ćwiczenie w porównaniu z tym, co już robiliśmy, a zarazem rzecz bardzo praktyczna i świetne utrwalenie poznanych już jakiś czas temu umiejętności.

Tooltip w CSS – jak to działa

Opisywałem to w szybkim CSS – mamy taki element ze spanem, a w nim treść tooltipa w data-secie:

<p><span data-tooltip="Taki tekst pseudołaciński do testowania na stronach">Lorem ipsum</span>, dolor sit amet consectetur adipisicing elit. Temporibus sed in corrupti eius consectetur a molestiae quo praesentium, voluptate quam, aliquid labore magnam. Aliquid inventore cumque doloribus, quaerat dolorem qui!</p>

Nasz kod do wyświetlania tooltipa:

[data-tooltip]:hover::after {
    display: block;
    position: absolute;
    content: attr(data-tooltip);
    border: 1px solid black;
    background: #eee;
    padding: .25em;
}

Pobiera tooltip z data-setu i ładuje do 'content’ za pomocą funkcji 'attr’. Działa na elementach posiadających data-tooltip w data-secie, po najechaniu na nie myszką, wykorzystując pseudo-element ::after. Stylowanie możemy dostosować do własnych potrzeb.

Opcjonalnie możemy też dać podkreślenie spanom posiadającym tooltipa:

span[data-tooltip]{
 border-bottom: 1px dotted #000;
 text-decoration: none;
}

To nasz cały CSS.

Tworzymy nasz plugin i dodajemy CSS

W wp-content, w folderze plugins tworzymy folder shortcode-tooltip. W nim plik shortcode-tooltip.php ze standardowymi zabezpieczeniami:

<?php
/**
 * Plugin Name: Shortcode Tooltip Plugin
 * Description: Tooltips with shortcodes.
 * Version: 1.0
 * Author: Your Name
 */

if (!defined('ABSPATH')) {
    exit;
}

Poniżej dodajemy nasze style CSS:

function shortcode_tooltip_add_styles(){
    echo "<style>
        [data-tooltip]:hover::after {
        display: block;
        position: absolute;
        content: attr(data-tooltip);
        border: 1px solid black;
        background: #eee;
        padding: .25em;
        }
        span[data-tooltip]{
            border-bottom: 1px dotted #000;
            text-decoration: none;
           }
       </style>";
}
add_action('wp_head', 'shortcode_tooltip_add_styles');

Teraz tworzymy jeszcze w tym samym folderze plik index.php o następującej treści:

<?php
# Silence is golden.

Plugin prawie gotowy. Potrzebny nam teraz nasz shortcode, który napiszemy sobie w shortcode-tooltip.php.

Tworzymy shortcode dla tooltipa

Chcemy, aby nasz shortocode wyglądał tak:

[custom-tooltip tooltip="blabla blabla blabla"]bla[/custom-tooltip]

Zaś po wykonaniu, na stronie mamy dostać taki element <span>:

<span data-tooltip="blabla blabla blabla">bla</span>

Resztą zajmie się CSS, który dołączyliśmy. Potrzebujemy zatem shortcode, który przyjmuje atrybut tooltip oraz jakiś content i odpowiednio to obrabia:

function custom_tooltip_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'tooltip' => '', 
    ), $atts);
    return '<span data-tooltip="' . esc_attr($atts['tooltip']) . '">' . esc_html($content) . "</span>";

}
add_shortcode('custom-tooltip', 'custom_tooltip_shortcode');

Tyle wystarczy. Mamy tutaj odpowiedni kod + wszystkie możliwe zabezpieczenia. Teraz tylko musimy dodać nasz shortcode. Dodajemy wewnątrz jakiegoś paragrafu – nie pustego, tylko wewnątrz tekstu (inaczej nasz tooltip może się źle wyświetlać, to częste gdy dodajemy shortcodes, które mają robić coś w tekście a później testujemy je na „dummy contencie” na localhoście w pustym paragrafie i coś się źle wyświetla).

Ogólnie shortcodes są od tego, aby wewnątrz tekstu pewne elementy modyfikować. Używanie ich w pustym paragrafie nie ma sensu, jeżeli już musimy to robić to CSS (odpowiednio centrujący z lewej i prawej) też będziemy musieli sami dopisać – ale po co. Kiedyś tak się robiło i pewnie nadal tak się robi (pluginy tworzące różne formularze potem generujące shortcode do wklejenia) – tutaj ciężar odpowiedniego CSS spoczywa na twórcy pluginu.

My jednak, w dzisiejszych czasach, jak będziemy chcieli napisać coś co wygląda jak blok i działa jak blok, to napiszemy blok. Który, blokiem będąc jak cała reszta bloków z domyślnymi włącznie, sam się będzie odpowiednio centrował i łapał marginesy lewo/prawo tak, jak wszystkie inne nasze bloki.

Natomiast shortcodes do pracy z tekstem dobrze działają z tekstem. Ale wrzucając do pustego paragrafu sam shortcode i żadnego tekstu poza nim możemy mieć nieoczekiwane działanie w postaci naszego elementu gdzieś zupełnie po lewej, inaczej niż reszta bloków.

Cóż, wtedy polecam, zanim zaczniemy panikować, wkleić jakieś „lorem ipsum” do paragrafu i tam użyć shortcode i zobaczyć, że działa, jak ma działać.