Hur man lägger till en cool CSS3-knappkod i WordPress

Om du inte är ett stort fan av att arbeta med HTML-redigeraren i WordPress eller vill erbjuda några coola förbättringar för dina premiumteman är kortkoder en utmärkt lösning för att utöka funktioner för din postredaktör och samtidigt hålla saker enkla.


Jag tänkte att det skulle vara coolt att lägga till någon slags knapp på min webbplats när jag tillhandahöll länkar till gratis filer eller andra webbplatser (med kortkoder naturligtvis) så efter att ha lagt till kortkoden till mitt tema tänkte jag att jag skulle dela koden här på blogga så att andra som är intresserade av att lägga till knappkoder på sin webbplats helt enkelt skulle kunna kopiera och klistra in min kod i deras tema och inte behöva spendera för mycket tid på att göra kortkoden och styra knappen.

Vad är kortkoder?

Kortkoder introducerades tillbaka i WordPress 2.5 och de tillåter dig att skapa makrokoder för användning i postinnehåll. En enkel kortkod ser ut så här:

[Kortkod]

Vilket när det läggs till i postredigeraren kommer att returnera värdet på kortkoden som definieras i dina temafiler. Jag visar dig hur du skapar en kortkod som gör att du enkelt kan lägga till knappar i din inläggsredigerare utan att röra någon kod.

Lägga till en anpassad “knapp” -kodkod

Det första du behöver göra är att lägga till php-koden för din kortkod till ditt tema. Följande kod kan användas för att lägga till en enkel knapp på din webbplats. Den här koden kan placeras i filen features.php. Om du använder ett tredje parts tema görs det bäst via ett WordPress Child Theme.

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

// Extrahera kortkodattribut
extrakt (shortcode_atts (array (
'url' => '',
'title' => '',
'mål' => '',
'text' => '',
'color' => 'grön',
), $ atts));

// Använd textvärde för objekt utan innehåll
$ innehåll = $ text? $ text: $ innehåll;

// Retur-knapp med länk
if ($ url) {

$ link_attr = array (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('blank' == $ target)? '_ blank': '',
'class' => 'myprefix-knapp färg-'. esc_attr ($ färg),
);

$ link_attrs_str = '';

förhand ($ link_attr som $ key => $ val) {

if ($ val) {

$ link_attrs_str. = ''. $ -nyckel. '= "'. $ val. '"';

}

}


lämna tillbaka ''. do_shortcode ($ innehåll). '';

}

// Ingen länk definierad så återgå-knappen som ett spann
annars {

lämna tillbaka ''. do_shortcode ($ innehåll). '';

}

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

Använda kortkoden i din inläggsredigerare

Nu när du har en kortkod kan du lägga till den nya “knappen” (som ser ut som en vanlig länk nu eftersom vi inte har stylat den) till din inläggsredigerare.

// Exempel på användning 1
[knapp href = "DIN LINK" mål = "själv"] Knapptext [/ knapp]

// Exempel på användning 2
[knapp href = "DIN LINK" mål = "själv" text = "Knapptext"]

Styling Knappen

Vad är poängen med att skapa en kortkod om det bara kommer att se ut som en vanlig länk? Ingenting. Det är därför jag kommer att visa dig hur du lägger till en cool CSS3 för att utforma nedladdningsknappen och få den att se sexig ut.

Som du märkte i kortkoden lade jag till klassen “myprefix-knappen” så att du enkelt kan style den via din style.css-fil. Sätt in följande kod i ditt formatmall för att skapa en fin blå knapp som den i bilden.

/ * Huvudknappstil * /
.myprefix-knapp {bakgrund: # 65A343; text-skugga: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; kantradie: 5px; -webkit-box-skugga: 1px 2px 1px rgba (0, 0, 0, 0,1); -moz-box-skugga: 1px 2px 1px rgba (0, 0, 0, 0,1); box-skugga: 1px 2px 1px rgba (0, 0, 0, 0,1); markör: pekare; display: inline-block; översvämning: dold; stoppning: 1 st; vertikal-inriktning: mitt; }

.myprefix-knappspänn {border-top: 1px solid rgba (255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; färg: #fff; display: block; font-vikt: fet; typstorlek: 1em; stoppning: 6px 12px; text-skugga: 1px 1px 1px rgba (0, 0, 0, 0,25); }

/ * Hover * /
.myprefix-knapp: sväva {bakgrund: # 558938; text-decoration: none; }

/* Aktiva */
.myprefix-knapp: aktiv {bakgrund: # 446F2D; }

Grön kortknapp

Stöd för flera färger

Om du märkte att kortkoden har en färgparameter som du kan använda för att lägga till CSS-stilar för olika knappfärger. Om du till exempel kan lägga till ett blått färgalternativ genom att lägga till detta extra CSS:

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

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

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

Använd nu bara färgparametern i kortkoden:

[knapp href = "DIN LINK" mål = "själv" färg = "blå"] Knapptext [/ knapp]

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