Kuinka lisätä viileä CSS3-painike Shortcode WordPressiin

Jos et ole suuri fani työskennelläksesi HTML-editorin kanssa WordPressissä tai haluat tarjota hienoja parannuksia premium-teemoihisi, lyhytkoodit ovat loistava ratkaisu laajentaa viestieditorisi ominaisuuksia pitäen asiat yksinkertaisina.


Ajattelin, että olisi hienoa lisätä jonkinlainen painike sivustooni tarjoamalla linkkejä ilmaisiin tiedostoihin tai muihin sivustoihin (tietysti käyttämällä lyhytkoodeja), joten sen jälkeen kun olen lisännyt lyhytkoodin teemaasi, tajusin jakavan koodin täällä blogi, jotta muut, jotka ovat kiinnostuneita painikkeiden lyhytkoodien lisäämisestä sivustoonsa, voisivat vain kopioida ja liittää koodini aiheeseensa, eikä heidän tarvitse viettää liian paljon aikaa lyhykoodin luomiseen ja painikkeen muotoiluun.

Mitä ovat lyhytkoodit?

Lyhytkoodit otettiin käyttöön WordPress 2.5: ssä, ja niiden avulla voit luoda makrokoodeja käytettäväksi postitussisältöön. Yksinkertainen lyhytkoodi näyttää tältä:

[lyhyt koodi]

Joka lisättäessä viestieditoriin palauttaa teeman tiedostojen määrittämän lyhytkoodin arvon. Näytän sinulle kuinka luoda lyhytkoodi, jonka avulla voit helposti lisätä painikkeita viestieditoriin koskettamatta mitään koodia.

Muokatun “-painikkeen” lyhytkoodin lisääminen

Ensin sinun täytyy lisätä lyhytkoodisi php-koodi teemaasi. Seuraavaa koodia voidaan käyttää yksinkertaisen painikkeen lisäämiseen sivustoosi. Tämä koodi voidaan sijoittaa function.php-tiedostoon. Jos käytät kolmannen osapuolen teemaa, tämä on parasta tehdä WordPress-lapsiteeman kautta.

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

// Pura lyhyen koodin määritteet
ote (shortcode_atts (taulukko (
'url' => '',
'otsikko' => '',
'tavoite' => '',
'text' => '',
'väri' => 'vihreä',
), $ atts));

// Käytä tekstiarvoa kohteille, joilla ei ole sisältöä
$ sisältö = $ teksti? $ teksti: $ sisältö;

// Paluu-painike linkillä
if ($ url) {

$ link_attr = taulukko (
'href' => esc_url ($ url),
'otsikko' => esc_attr ($ otsikko),
'target' => ('tyhjä' == $ target)? '_blank': '',
'class' => 'myprefix-painikkeen väri-'. esc_attr ($ väri),
);

$ link_attrs_str = '';

foreach ($ link_attr kuin $ avain => $ val) {

if ($ val) {

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

}

}


palata ''. do_shortcode ($ sisältö). '';

}

// Ei linkkiä määritetty, joten paluunäppäin on span
muuten {

palata ''. do_shortcode ($ sisältö). '';

}

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

Lyhytkoodin käyttäminen postieditorissa

Nyt kun sinulla on lyhytkoodi, voit lisätä uuden “painikkeen” (joka näyttää nyt selvältä linkiltä, ​​koska emme ole muotoillut sitä) viestieditoriin.

// Esimerkki käyttö 1
[painike href = "LINKIT" tavoite = "itse"] Painikkeen teksti [/ painike]

// Esimerkki käyttö 2
[painike href = "LINKI" target = "itse" text = "Painiketeksti"]

Painikkeen muotoilu

Mitä hyötyä on luoda lyhytkoodi, jos se näyttää vain tavalliselta linkiltä? Ei mitään. Siksi näytän sinulle, kuinka lisätä hienoa CSS3-tyyliä latauspainikkeen tyyliin ja tehdä siitä seksikäs.

Kuten huomasit lyhytkoodissa, lisäsin luokan “myprefix-button”, jotta voit muotoilla sen helposti style.css-tiedostosi kautta. Lisää seuraava koodi tyylitaulukkoosi, jotta saadaan mukava sininen painike, kuten kuvassa.

/ * Pääpainikkeen tyyli * /
.myprefix-painike {tausta: # 65A343; tekstivarjo: 1xx1x1xx1 000; -Webkit-reunan säde: 5px; -moz-border-säde: 5px; raja-säde: 5 px; -verkkopalkki-varjo: 1 px 2 px 1 px rgba (0, 0, 0, 0,1); -moz-box-varjo: 1 x 2 x 1 x x rgba (0, 0, 0, 0,1); laatikko-varjo: 1 px 2 px 1 px rgba (0, 0, 0, 0,1); kohdistin: osoitin; näyttö: inline-block; ylivuoto piilotettu; täyte: 1px; pystysuunnassa: keskimmäinen; }

.myprefix-painike span {reunan yläosa: 1xx kiinteä rgba (255, 255, 255, 0,25); -Webkit-reuna-säde: 5px; -moz-raja-säde: 5px; raja-säde: 5px; väri: #fff; näyttö: estää; kirjasinpaino: lihavoitu; kirjasinkoko: 1em; täyte: 6x12xx; tekstivarjo: 1 px 1 px 1 px rgba (0, 0, 0, 0,25); }

/ * Vie hiiri * /
.myprefix-painike: vie hiiri {tausta: # 558938; text-decoration: none; }

/ * Aktiivinen * /
.myprefix-painike: aktiivinen {tausta: # 446F2D; }

Vihreä lyhytkoodi-painike

Monivärinen tuki

Jos huomasit, että lyhytkoodilla on väriparametri, jonka avulla voit lisätä CSS-tyylejä eri painikeväreille. Jos esimerkiksi voit lisätä sinisen värivaihtoehdon lisäämällä tämä ylimääräinen CSS:

/ * Sininen painike * /
.myprefix-button.color-sininen {tausta: # 2981e4}

/ * Sininen painike leijuu * /
.myprefix-button.color-blue: vie hiiri {tausta: # 2575cf}

/ * Sininen painike aktiivinen * /
.myprefix-button.color-blue: aktiivinen {tausta: # 0760AD}

Käytä nyt vain lyhytkoodin väriparametria:

[painike href = "LINKI" tavoite = "itse" väri = "sininen"] Painikkeen teksti [/ painike]

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