Sådan tilføjes en cool CSS3-knapkode i WordPress

Hvis du ikke er en stor fan af at arbejde med HTML-editoren i WordPress eller ønsker at give nogle seje forbedringer til dine premium-temaer, er shortcodes en fantastisk løsning til at udvide dine postredigerings muligheder, mens du holder tingene enkle.


Jeg tænkte, at det ville være cool at tilføje en slags knap til mit websted, når jeg leverede links til gratis filer eller andre websteder (ved hjælp af kortkoder selvfølgelig), så efter at have tilføjet kortkoden til mit tema regnede jeg med at jeg ville dele koden her på blog, så andre mennesker, der er interesseret i at tilføje knapkortkoder til deres websted, simpelthen kunne kopiere og indsætte min kode i deres tema og ikke skulle bruge for meget tid på at lave kortkoden og styling af knappen.

Hvad er kortkoder?

Kortkoder blev introduceret tilbage i WordPress 2.5, og de giver dig mulighed for at oprette makrokoder til brug i postindhold. En simpel kortkode ser sådan ud:

[Kortkode]

Hvilket, når det tilføjes til posteditoren, returnerer værdien af ​​kortkoden som defineret i dine temafiler. Jeg viser dig, hvordan du opretter en kortkode, der giver dig mulighed for nemt at tilføje knapper til din indlægseditor uden at røre ved nogen kode.

Tilføjelse af en brugerdefineret “knap” -kode

Den første ting du skal gøre er at tilføje php-koden til din kortkode til dit tema. Følgende kode kan bruges til at føje en enkel knap til dit websted. Denne kode kan placeres i filen features.php. Hvis du bruger et tredjeparts tema, gøres det bedst via et WordPress Child Theme.

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

// Uddrag attributter til shortcode
ekstrakt (shortcode_atts (array (
'url' => '',
'title' => '',
'mål' => '',
'text' => '',
'color' => 'grøn',
), $ atts));

// Brug tekstværdi for elementer uden indhold
$ indhold = $ tekst? $ tekst: $ indhold;

// Retur-knap med link
if ($ url) {

$ link_attr = matrix (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('blank' == $ target)? '_blank' : '',
'class' => 'myprefix-knap farve-'. esc_attr ($ farve),
);

$ link_attrs_str = '';

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

if ($ val) {

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

}

}


Vend tilbage ''. do_shortcode ($ indhold). '';

}

// Intet link defineret, så returnér knap som et spænd
ellers {

Vend tilbage ''. do_shortcode ($ indhold). '';

}

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

Brug af kortkoden i din posteditor

Nu når du har en kortkode, kan du tilføje den nye “knap” (som ligner et almindeligt link nu, da vi ikke har stylet det) til din indlægseditor.

// Eksempel på brug 1
[knap href = "DIN LINK" mål = "selv"] Knaptekst [/ knap]

// Eksempel anvendelse 2
[knap href = "DIN LINK" mål = "selv" tekst = "Knaptekst"]

Styling af knappen

Hvad er poenget med at oprette en kortkode, hvis det bare ser ud som et almindeligt link? Ikke noget. Derfor vil jeg vise dig, hvordan du tilføjer nogle seje CSS3 til at style download-knappen og få det til at se sexet ud.

Som du bemærkede i kortkoden tilføjede jeg klassen “myprefix-knap”, så du nemt kan style den via din style.css-fil. Indsæt følgende kode til dit stilark for at lave en dejlig blå knap som den på billedet.

/ * Main Button Style * /
.myprefix-knap {baggrund: # 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); kasseskygge: 1 px 2 px 1 px rgba (0, 0, 0, 0,1); markør: markør; display: inline-block; overløb: skjult; polstring: 1px; lodret linje: midt; }

.myprefix-knapspænd {border-top: 1px solid rgba (255, 255, 255, 0,25); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; farve: #fff; display: blokering; font-vægt: fed; skriftstørrelse: 1em; polstring: 6px 12px; tekstskygge: 1 px 1 px 1 px rgba (0, 0, 0, 0,25); }

/ * Hold markøren * /
.myprefix-knap: hover {baggrund: # 558938; tekst-dekoration: ingen; }

/ * Aktiv * /
.myprefix-knap: aktiv {baggrund: # 446F2D; }

Grøn kortkodeknap

Multiple Color Support

Hvis du bemærkede, at kortkoden har en farveparameter, som du kan bruge til at tilføje CSS-stilarter til forskellige knapfarver. Hvis du f.eks. Kan tilføje en blå farveindstilling ved at tilføje denne ekstra CSS:

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

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

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

Brug nu blot farveparameteren i kortkoden:

[knap href = "DIN LINK" mål = "selv" farve = "blå"] Knaptekst [/ knap]

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