Jak přidat cool kód CSS3 Shortcode do WordPress

Pokud nejste velkým fanouškem práce s editorem HTML ve WordPressu nebo chcete poskytnout některá skvělá vylepšení pro vaše prémiová témata, krátké kódy jsou skvělým řešením pro rozšíření možností vašeho post editoru při zachování jednoduchosti..


Přemýšlel jsem, že by bylo super přidat nějaké tlačítko na můj web, když poskytuji odkazy na bezplatné soubory nebo jiné weby (samozřejmě pomocí krátkých kódů), takže po přidání krátkého kódu do mého tématu jsem si myslel, že bych kód sdílel zde blog, takže ostatní lidé, kteří se zajímají o přidání krátkých kódů tlačítek na své stránky, mohli jednoduše zkopírovat a vložit můj kód do svého tématu a nemuseli trávit příliš mnoho času vytvářením krátkého kódu a stylováním tlačítka.

Co jsou krátké kódy?

Krátké kódy byly zavedeny zpět do WordPress 2.5 a umožňují vám vytvářet makro kódy pro použití v obsahu post. Jednoduchý krátký kód by vypadal asi takto:

[zkratka]

Která po přidání do editoru příspěvků vrátí hodnotu krátkého kódu definovaného v souborech motivů. Ukážu vám, jak vytvořit zkratkový kód, který vám umožní snadno přidat tlačítka do editoru příspěvků, aniž byste se dotkli jakéhokoli kódu.

Přidání uživatelského krátkého kódu „tlačítka“

První věc, kterou musíte udělat, je přidat php kód pro váš shortcode do svého motivu. Následující kód lze použít k přidání jednoduchého tlačítka na váš web. Tento kód lze umístit do souboru function.php. Používáte-li motiv třetí strany, je to nejlepší pomocí dětského motivu WordPress.

function myprefix_button_shortcode ($ atts, $ content = null) {

// Extrahujte atributy krátkého kódu
extrakt (shortcode_atts (array (
'url' => '',
'title' => '',
'target' => '',
'text' => '',
'color' => 'green',
), $ atts));

// Použijte textovou hodnotu pro položky bez obsahu
$ content = $ text? $ text: $ content;

// Tlačítko návratu s odkazem
if ($ url) {

$ link_attr = array (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('blank' == $ target)? '_blank': '',
'class' => 'barva tlačítka myprefix-'. esc_attr ($ color),
);

$ link_attrs_str = '';

foreach ($ link_attr jako $ key => $ val) {

if ($ val) {

$ link_attrs_str. = ''. $ key. '= "'. $ val. '"';

}

}


vrátit se ''. do_shortcode ($ content). '';

}

// Žádný odkaz není definován, takže návratové tlačítko jako rozpětí
jinde {

vrátit se ''. do_shortcode ($ content). '';

}

}
add_shortcode ('button', 'myprefix_button_shortcode');

Použití krátkého kódu v editoru příspěvků

Nyní, když máte zkratku, můžete do svého editoru příspěvků přidat nové „tlačítko“ (které nyní vypadá jako obyčejný odkaz, protože jsme ho nestanovili)..

// Příklad použití 1
Text tlačítka [/ button] // Příklad použití 2

Styling The Button

Jaký je smysl vytvoření krátkého kódu, pokud to bude vypadat jako obyčejný odkaz? Nic. Proto vám ukážu, jak přidat nějaké skvělé CSS3, aby se styl stahování stáhl a vypadal sexy.

Jak jste si všimli v krátkém kódu, přidal jsem třídu „myprefix-button“, abyste ji mohli snadno stylovat pomocí souboru style.css. Vložte následující kód do šablony stylů a vytvořte pěkné modré tlačítko, jako je to na obrázku.

/ * Styl hlavního tlačítka * /
.tlačítko myprefix {pozadí: # 65A343; textový stín: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; poloměr ohraničení: 5px; -webkit-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); -moz-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); stín stínu: 1px 2px 1px rgba (0, 0, 0, 0,1); kurzor: ukazatel; display: inline-block; přetečení: skryté; čalounění: 1px; svislé zarovnání: střední; }

.rozpětí myprefix-button {border-top: 1px solidní rgba (255, 255, 255, 0,25); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; barva: #fff; displej: blok; font-weight: bold; velikost písma: 1em; čalounění: 6px 12px; textový stín: 1px 1px 1px rgba (0, 0, 0, 0,25); }

/ * Hover * /
.tlačítko myprefix: hover {background: # 558938; textové dekorace: žádné; }

/ * Aktivní * /
.tlačítko myprefix: aktivní {pozadí: # 446F2D; }

Zelené tlačítko krátkého kódu

Podpora více barev

Pokud jste si všimli, že krátký kód má parametr barvy, který můžete použít k přidání stylů CSS pro různé barvy tlačítek. Pokud například můžete přidat možnost modré barvy přidáním této další CSS:

/ * Modré tlačítko * /
.myprefix-button.color-blue {background: # 2981e4}

/ * Modré tlačítko Hover * /
.myprefix-button.color-blue: hover {background: # 2575cf}

/ * Modré tlačítko aktivní * /
.myprefix-button.color-blue: active {background: # 0760AD}

Nyní jednoduše použijte parametr barvy v krátkém kódu:

Text tlačítka [/ button]

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map