Hvis du ikke er en stor tilhenger av å jobbe med HTML-redigereren i WordPress eller ønsker å tilby noen kule forbedringer for de premium temaene dine, er kortkoder en flott løsning for å utvide funksjonene til innleggsredigeringen din, samtidig som du gjør ting enkelt.


Jeg tenkte at det ville være kult å legge til en slags knapp på nettstedet mitt når jeg ga koblinger til gratis filer eller andre nettsteder (ved å bruke kortkoder selvfølgelig), så etter å ha lagt kortnummeret til temaet mitt, regnet jeg med at jeg ville dele koden her på blogg slik at andre mennesker som er interessert i å legge til knappekoder på nettstedet, ganske enkelt kan kopiere og lime inn koden min i temaet deres og ikke trenger å bruke for mye tid på å lage kortkoden og style knappen.

Hva er kortkoder?

Kortkoder ble introdusert i WordPress 2.5, og de lar deg lage makrokoder for bruk i innlegg. En enkel kortkode vil se slik ut:

[kort kode]

Hvilket når det legges til postredigeringsprogrammet vil returnere verdien av kortkoden som definert i temafilene dine. Jeg vil vise deg hvordan du oppretter en kortkode som lar deg enkelt legge til knapper i redigeringsprogrammet uten å berøre noen kode.

Legge til en tilpasset “knapp” -kode

Det første du trenger å gjøre er å legge til php-koden for kortkoden til temaet ditt. Følgende kode kan brukes til å legge til en enkel knapp på nettstedet ditt. Denne koden kan plasseres i filen funksjoner.php. Hvis du bruker et tredjeparts tema, gjøres dette best via et WordPress Child Theme.

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

// Pakk ut kortkodeattributter
trekke ut (shortcode_atts (matrise (
'url' => '',
'title' => '',
'mål' => '',
'text' => '',
'color' => 'grønn',
), $ atts));

// Bruk tekstverdi for elementer uten innhold
$ innhold = $ tekst? $ tekst: $ innhold;

// Returknapp med lenke
if ($ url) {

$ link_attr = matrise (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('blank' == $ target)? '_blank': '',
'class' => 'myprefix-knapp farge-'. esc_attr ($ farge),
);

$ link_attrs_str = '';

foreach ($ link_attr som $ nøkkel => $ val) {

if ($ val) {

$ link_attrs_str. = ''. $ nøkkel. '= "'. $ val. '"';

}

}


komme tilbake ''. do_shortcode ($ innhold). '';

}

// Ingen kobling definert, så returner-knappen som et spenn
ellers {

komme tilbake ''. do_shortcode ($ innhold). '';

}

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

Bruke kortkoden i redigeringsprogrammet ditt

Nå som du har en kortkode, kan du legge til den nye “knappen” (som ser ut som en vanlig lenke nå, siden vi ikke har stylet den) i innleggets redigeringsprogram.

// Eksempelbruk 1
[knapp href = "DIN LINK" mål = "selv"] Knapptekst [/ knapp]

// Eksempelbruk 2
[knapp href = "DIN LINK" mål = "egen" tekst = "Knapptekst"]

Styling av knappen

Hva er vitsen med å lage en kortkode hvis det bare skal se ut som en vanlig lenke? Ingenting. Derfor vil jeg vise deg hvordan du legger til noen kule CSS3 for å style nedlastningsknappen og få den til å se sexy ut.

Som du la merke til i kortkoden la jeg til klassen “myprefix-knapp” slik at du enkelt kan style den via din style.css-fil. Sett inn følgende kode i stilarket for å lage en fin blå knapp som den på bildet.

/ * Hovedknappstil * /
.myprefix-knapp {bakgrunn: # 65A343; tekstskygge: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-skygge: 1px 2px 1px rgba (0, 0, 0, 0,1); -moz-box-skygge: 1px 2px 1px rgba (0, 0, 0, 0,1); boksskygge: 1px 2px 1px rgba (0, 0, 0, 0,1); markør: peker; skjerm: inline-block; overløp: skjult; polstring: 1px; vertikal-justering: midten; }

.myprefix-knappspenn {border-top: 1px solid rgba (255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; farge: #fff; skjerm: blokkering; font-vekt: fet; skriftstørrelse: 1em; polstring: 6px 12px; tekstskygge: 1px 1px 1px rgba (0, 0, 0, 0,25); }

/* Sveve */
.myprefix-knapp: hover {bakgrunn: # 558938; text-decoration: none; }

/ * Aktiv * /
.myprefix-knapp: aktiv {bakgrunn: # 446F2D; }

Grønn kortknapp

Støtte for flere farger

Hvis du la merke til at kortkoden har en fargeparameter som du kan bruke til å legge til CSS-stiler for forskjellige knappfarger. For eksempel hvis du kan legge til et alternativ med blå farge ved å legge til denne ekstra CSS:

/ * Blå knapp * /
.myprefix-button.color-blue {bakgrunn: # 2981e4}

/ * Blue Button Hover * /
.myprefix-button.color-blue: hover {bakgrunn: # 2575cf}

/ * Blå knapp aktiv * /
.myprefix-button.color-blue: active {bakgrunn: # 0760AD}

Nå bruker du bare fargeparameteren i kortkoden:

[knapp href = "DIN LINK" mål = "egen" farge = "blå"] Knapptekst [/ knapp]

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me