Hvernig á að bæta við flottum CSS3 hnappastökkvum í WordPress

Ef þú ert ekki mikill aðdáandi af því að vinna með HTML ritlinum í WordPress eða vilt bjóða upp á svolítið endurbætur á úrvalsþemunum þínum eru stuttar kóða frábær lausn til að auka möguleika ritstjórans meðan þú heldur hlutunum einfalt.


Ég var að hugsa um að það væri svalt að bæta einhverskonar hnappi á síðuna mína þegar ég var að bjóða upp á tengla á ókeypis skrár eða aðrar síður (auðvitað með smákóða) svo eftir að stuttkóðanum var bætt við þemað mitt reiknaði ég með að ég myndi deila kóðanum hér á blogg svo aðrir sem hafa áhuga á að bæta við smákóða á síðuna þeirra gætu einfaldlega afritað og límt kóðann minn í þemað sitt og ekki þurft að eyða of miklum tíma í að búa til stutta kóða og stilla hnappinn.

Hvað eru styttingar?

Stuttur kóða var kynntur aftur í WordPress 2.5 og þeir leyfa þér að búa til þjóðhagslegan kóða til að nota í pósti. Einfaldur stuttkóða myndi líta svona út:

[stuttkóði]

Sem þegar það er bætt við ritstjórann mun skila gildi stuttkóða eins og skilgreint er í þemuskrám þínum. Ég mun sýna þér hvernig á að búa til stuttan kóða sem gerir þér kleift að auðveldlega bæta hnöppum við ritstjórann þinn án þess að snerta neinn kóða.

Bætir við sérsniðnum „hnappi“ smákóða

Það fyrsta sem þú þarft að gera er að bæta php kóða fyrir stutta kóða við þemað þitt. Eftirfarandi kóða er hægt að nota til að setja einfaldan hnapp á síðuna þína. Þessum kóða er hægt að setja í skrána function.php. Ef þú ert að nota þema frá þriðja aðila er það best gert með WordPress Child Theme þema.

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

// Dragðu út skammkóðaeiginleika
útdráttur (shortcode_atts (fylki (
'url' => '',
'title' => '',
'miða' => '',
'text' => '',
'litur' => 'grænn',
), $ atts));

// Notaðu textagildi fyrir hluti án efnis
$ innihald = $ texti? $ texti: $ innihald;

// Afturhnappur með hlekk
ef ($ url) {

$ link_attr = fylki (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('auður' == $ miða)? '_blank': '',
'class' => 'myprefix-hnappur lit-'. esc_attr ($ litur),
);

$ link_attrs_str = '';

foreach ($ link_attr sem $ lykill => $ val) {

ef ($ val) {

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

}

}


snúa aftur ''. do_shortcode ($ innihald). '';

}

// Enginn hlekkur skilgreindur svo afturhnappur sem span
Annar {

snúa aftur ''. do_shortcode ($ innihald). '';

}

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

Notaðu stuttan kóða í ritstjóranum þínum

Nú þegar þú ert með stuttan kóða geturðu bætt nýja „hnappnum“ (sem lítur út eins og venjulegur hlekkur núna þar sem við höfum ekki stílið það) í ritstjórann þinn.

// Dæmi um notkun 1
[hnappur href = "ÞINN LINK" miðun = "sjálf"] Texti hnapps [/ hnappur]

// Dæmi um notkun 2
[hnappur href = "ÞINN LINK" miðun = "sjálf" texti = "Hnappatexti"]

Stílhnappinn

Hvað er málið með að búa til stuttan kóða ef það er bara að líta út eins og einfaldur hlekkur? Ekkert. Þess vegna mun ég sýna þér hvernig á að bæta við einhverjum flottum CSS3 til að stilla niðurhnappinn og láta hann líta út fyrir að vera kynþokkafullur.

Eins og þú tókst eftir í stutta kóða bætti ég við flokknum „myprefix-hnappur“ svo þú getur auðveldlega stíl hann í gegnum style.css skrána þína. Settu eftirfarandi kóða í sniðið til að búa til fallega bláa hnapp eins og á myndinni.

/ * Aðalhnappastíll * /
.myprefix-hnappur {bakgrunnur: # 65A343; textaskuggi: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-skuggi: 1px 2px 1px rgba (0, 0, 0, 0,1); -moz-kassi-skuggi: 1px 2px 1px rgba (0, 0, 0, 0,1); kassaskuggi: 1px 2px 1px rgba (0, 0, 0, 0,1); bendill: bendill; sýna: inline-block; yfirfall: falið; padding: 1px; lóðrétt-samræma: miðja; }

.myprefix-hnappur span {border-top: 1px solid rgba (255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; litur: #fff; sýna: loka; leturvigt: feitletrað; leturstærð: 1em; padding: 6px 12px; textaskuggi: 1px 1px 1px rgba (0, 0, 0, 0,25); }

/ * Sveima * /
.myprefix-hnappur: sveima {bakgrunnur: # 558938; textaskreyting: engin; }

/* Virkur */
.myprefix-hnappur: virkur {bakgrunnur: # 446F2D; }

Grænn skammhnappur

Margfeldi litastuðningur

Ef þú tókst eftir því að stuttkóðinn er með litabreytu sem þú getur notað til að bæta við CSS stíl fyrir mismunandi hnappaliti. Til dæmis ef þú getur bætt við bláum litavalkosti með því að bæta við þessum auka CSS:

/ * Blár hnappur * /
.myprefix-button.color-blue {bakgrunnur: # 2981e4}

/ * Hnappur með bláum hnappi * /
.myprefix-button.color-blue: hover {bakgrunnur: # 2575cf}

/ * Blár hnappur virkur * /
.myprefix-button.color-blue: active {bakgrunnur: # 0760AD}

Notaðu einfaldlega litabreytuna í stuttkóðanum:

[hnappur href = "ÞINN LINK" miðun = "sjálf" litur = "blár"] Texti hnapps [/ hnappur]

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