Permalänk
Medlem

Shortcodes button

Hej på er!

Jag ska skapa en shortcode till min hemsida, men har aldrig jobbat med detta innan. Jag vill att admin ska kunna ange en egen url och text på sin knapp. I nuläget har jag dock bara fått till att de kan ange en egen text. Jag vill använda <button> pga att knappen ska få de färger som admin ställer den till i temat (jag gör ett child theme). Hur ska jag göra? Ska jag använda mig av href?

<?php
add_shortcode('button', 'funcButton');

function funcButton($attr) {
return '<button>' . $attr["text"] . '</button>';
}
?>

Tacksam för tips!

Permalänk
Medlem
Skrivet av Märta:

Hej på er!

Jag ska skapa en shortcode till min hemsida, men har aldrig jobbat med detta innan. Jag vill att admin ska kunna ange en egen url och text på sin knapp. I nuläget har jag dock bara fått till att de kan ange en egen text. Jag vill använda <button> pga att knappen ska få de färger som admin ställer den till i temat (jag gör ett child theme). Hur ska jag göra? Ska jag använda mig av href?

<?php
add_shortcode('button', 'funcButton');

function funcButton($attr) {
return '<button>' . $attr["text"] . '</button>';
}
?>

Tacksam för tips!

Eller är det kanske javascript jag får använda då? href och <button> fungerar väl inte ihop....

Permalänk
Medlem

Provat att Googla innan du frågade här? Fick upp detta som 2:a alternativet: http://diythemes.com/thesis/wordpress-shortcodes/

Visa signatur

Citera för svar!

Stationär: Fractal Design Define R6 | Asus Z370-P | Intel i7 8700k @ 3.7 Ghz | Corsair Vengeance LPX 32GB CL15 @ 3000 Mhz | Asus STRIX GTX960 4GB | Fractal Design Celsius S24 | 5 TB HDD | 250GB SSD (Samsung 850 EVO), 128GB SSD (Crucial M4) | Corsair HX 850W | W10
Bärbar: Sony Vaio Pro 13.3" | i7-4500U | 8GB RAM | 256GB SSD | Ubuntu

Permalänk
Medlem
Skrivet av RedRetro:

Provat att Googla innan du frågade här? Fick upp detta som 2:a alternativet: http://diythemes.com/thesis/wordpress-shortcodes/

Jo jag har googlat och jag har läst artiklen som du länkar till, men han använder ju a-taggen.

function sButton($atts, $content = null) {
extract(shortcode_atts(array('link' => '#'), $atts));
return '<a class="button" href="'.$link.'"><span>' . do_shortcode($content) . '</span></a>';
}
add_shortcode('button', 'sButton');

Permalänk
Medlem
Skrivet av Märta:

Jo jag har googlat och jag har läst artiklen som du länkar till, men han använder ju a-taggen.

function sButton($atts, $content = null) {
extract(shortcode_atts(array('link' => '#'), $atts));
return '<a class="button" href="'.$link.'"><span>' . do_shortcode($content) . '</span></a>';
}
add_shortcode('button', 'sButton');

Ja, precis. Och du kan inte använda a-taggen därför?

Visa signatur

Citera för svar!

Stationär: Fractal Design Define R6 | Asus Z370-P | Intel i7 8700k @ 3.7 Ghz | Corsair Vengeance LPX 32GB CL15 @ 3000 Mhz | Asus STRIX GTX960 4GB | Fractal Design Celsius S24 | 5 TB HDD | 250GB SSD (Samsung 850 EVO), 128GB SSD (Crucial M4) | Corsair HX 850W | W10
Bärbar: Sony Vaio Pro 13.3" | i7-4500U | 8GB RAM | 256GB SSD | Ubuntu

Permalänk
Medlem
Skrivet av RedRetro:

Ja, precis. Och du kan inte använda a-taggen därför?

Som jag skrev så vill jag inte använda a-taggen utan just taggen button. Mitt föräldratema använder taggen button för att styla alla knappar. Jag ville bara veta om det går annars får jag ju använda a-taggen, men då vet jag hur man gör och hade inte behövt skriva här.

Permalänk
Medlem
Skrivet av Märta:

Som jag skrev så vill jag inte använda a-taggen utan just taggen button. Mitt föräldratema använder taggen button för att styla alla knappar. Jag ville bara veta om det går annars får jag ju använda a-taggen, men då vet jag hur man gör och hade inte behövt skriva här.

Du måste använda javascript för att lägga funktionalitet på en knapp som inte tillhör ett formulär.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

@Teknocide: Jag kan inte så mycket Java script. Skulle du kunna visa skulle det vara jättesnällt! Hittar inte så mycket om det när jag googlar, men kanske inte söker på rätt saker.

Permalänk
Medlem
Skrivet av Märta:

@Teknocide: Jag kan inte så mycket Java script. Skulle du kunna visa skulle det vara jättesnällt! Hittar inte så mycket om det när jag googlar, men kanske inte söker på rätt saker.

I just ditt exempel, med PHP och allt, skulle jag gjort så här:

<?php add_shortcode('button', 'funcButton'); function funcButton($attr) { $action = "location.href='$attr[url]'"; $elem = "<button onclick='$action'>$attr[text]</button>"; return $elem; }

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

@Teknocide: Tack så mycket! Dock får jag det fortfarande inte att fungera att man skriver in en egen url via shortcoden. Egen text fungerar bra. Så samma resultat som innan.

Permalänk
Medlem
Skrivet av Elly:

@Teknocide: Tack så mycket! Dock får jag det fortfarande inte att fungera att man skriver in en egen url via shortcoden. Egen text fungerar bra. Så samma resultat som innan.

Det säger inte så mycket tyvärr. Blir det ingen knapp? Länkar den fel? Får den inget onclick-attribut satt?

Tittar vi på guiden ovan som använder ett <a>-element så använder de flera andra funktioner från wordpress när de hämtar in sitt innehåll och argumenten. Det kanske måste göras på det sättet.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

@Teknocide: Förlåt för lite dålig information. Det blir en knapp och den får texten som jag ger den, men när man klickar på den händer inget trots att jag länkat den. Den går att klicka på och den markeras som en knapp ska men inget händer.

Permalänk
Medlem
Skrivet av Elly:

@Teknocide: Förlåt för lite dålig information. Det blir en knapp och den får texten som jag ger den, men när man klickar på den händer inget trots att jag länkat den. Den går att klicka på och den markeras som en knapp ska men inget händer.

Jag slarvade med citationstecknena i förra stycket. Det här ska fungera

function funcButton($attr) { $action = "location.href='$attr[url]'"; $elem = "<button onclick=\"$action\">$attr[text]</button>"; return $elem; }

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av Teknocide:

Jag slarvade med citationstecknena i förra stycket. Det här ska fungera

function funcButton($attr) { $action = "location.href='$attr[url]'"; $elem = "<button onclick=\"$action\">$attr[text]</button>"; return $elem; }

Tack så mycket! Fungerade perfekt