Hogyan adjunk hozzá egy hűvös CSS3 gomb rövid kódot a WordPress programban

Ha nem vagy nagy rajongó a WordPress HTML-szerkesztőjével való együttműködéshez, vagy szeretne néhány jó fejlesztést nyújtani a prémium témákhoz, a rövid kódok nagyszerű megoldást jelentenek a post-szerkesztő képességeinek bővítésére, miközben a dolgok egyszerűek.


Arra gondoltam, hogy jó lenne hozzáadni valamilyen gombot a webhelyemhez, amikor ingyenes fájlokra vagy más webhelyekre mutató linkeket szolgáltatok (természetesen rövid kódok segítségével), így miután a rövid kódot hozzáadtam a témámhoz, úgy gondoltam, megosztom a kódot a blog, így más emberek, akik érdeklődnek a gombok rövid kódjainak felvételéről a webhelyükre, egyszerűen lemásolhatják és beilleszthetik a kódomat a témájukba, és nem kell túl sok időt költeniük a rövid kód létrehozásához és a gomb stílusához..

Mik a rövid kódok??

A rövid kódok visszakerültek a WordPress 2.5-be, és lehetővé teszik makrókódok létrehozását a postai tartalomhoz. Egy egyszerű rövid kód úgy néz ki, mint ez:

[rövid kód]

Melyik hozzáadva a post szerkesztőhöz, visszatér a rövid fájl kódjának a témát tartalmazó fájlokban megadott értékéhez. Megmutatom, hogyan lehet létrehozni egy rövid kódot, amely lehetővé teszi a gombok hozzáadását a hozzászólói szerkesztőhöz, bármilyen kód megérintése nélkül.

Egyéni “gomb” rövid kód hozzáadása

Az első dolog, amit meg kell tennie, hozzá kell adnia a rövid kód php kódját a témához. A következő kód felhasználható egy egyszerű gomb hozzáadásához a webhelyéhez. Ezt a kódot el lehet helyezni a function.php fájlba. Ha harmadik féltől származó témát használ, ezt a legjobban a WordPress gyermek témáján keresztül lehet megtenni.

funkció myprefix_button_shortcode ($ atts, $ content = null) {

// Rövid kód attribútumok kibontása
kivonat (shortcode_atts (tömb (
'url' => '',
'title' => '',
'target' => '',
'text' => '',
'színes' => 'zöld',
), $ atts));

// Használjon szöveges értéket tartalom nélküli elemeknél
$ tartalom = $ szöveg? $ szöveg: $ tartalom;

// Vissza gomb linkkel
if ($ url) {

$ link_attr = tömb (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'cél' => ('üres' == $ cél)? '_üres' : '',
'class' => 'myprefix-button color-'. esc_attr ($ színes),
);

$ link_attrs_str = '';

foreach ($ link_attr mint $ kulcs => $ val) {

if ($ val) {

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

}

}


Visszatérés '” do_shortcode ($ content). '„

}

// Nincs megadva kapcsolat, tehát a visszatérés gomb mint span
más {

Visszatérés '” do_shortcode ($ content). '„

}

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

A rövid kód használata a Bejegyzés szerkesztőben

Most, hogy rendelkezik rövid kóddal, felveheti az új „gombot” (amely most egy egyszerű linknek tűnik, mivel mi még nem stílusozzuk meg) a postai szerkesztőbe.

// 1. példahasználat
[gomb href = "YOUR LINK" target = "self"] Gomb szövege [/ gomb]

// 2. példahasználat
[gomb href = "AZ ÖN LINK" target = "saját" text = "Gomb szöveg"]

A gomb stílusa

Mi értelme van létrehozni a rövid kódot, ha egyszerű sínnek látszik? Semmi. Ezért megmutatom, hogyan adhat hozzá néhány jó CSS3-t a letöltés gomb stílusához, és szexi megjelenésűvé tenni.

Amint a rövid kódban észrevetted, hozzáadtam a „myprefix-button” osztályt, így könnyen stílusozhatod a style.css fájl segítségével. Helyezze be a következő kódot a stíluslapjába, hogy egy szép kék gombot kapjon, mint a képen.

/ * Fő gomb stílus * /
.myprefix-gomb {háttér: # 65A343; text-shadow: 1 képpont 1 képpont 1 képpont # 000; -webkit-border-sugar: 5px; -moz-border-sugar: 5px; szélső sugár: 5 képpont; -webkit-box-árnyék: 1 képpont 2 képpont 1 képpont rgba (0, 0, 0, 0,1); -moz-box-shadow: 1 képpont 2 képpont 1 képpont rgba (0, 0, 0, 0,1); box-shadow: 1 képpont 2 képpont 1 képpont rgba (0, 0, 0, 0,1); kurzor: mutató; kijelző: inline-block; túlcsordulás: rejtett; párnázat: 1x; függőleges igazítás: közép; }

.myprefix-button span {border-top: 1xx szilárd rgba (255, 255, 255, 0,25); -webkit-border-sugar: 5px; -moz-határ sugár: 5px; határ-sugár: 5px; szín: #fff; kijelző: blokk; betűsúly: félkövér; betűméret: 1em; párnázás: 6x12px; szöveg-árnyék: 1 képpont 1 képpont 1 képpont rgba (0, 0, 0, 0,25); }

/ * Hover * /
.myprefix-gomb: lebeg {háttér: # 558938; text-decoration: none; }

/ * Aktív * /
.myprefix-gomb: aktív {háttér: # 446F2D; }

Zöld Shortcode gomb

Több színű támogatás

Ha észrevette, hogy a rövid kódnak van egy színparamétere, amellyel CSS stílusokat adhat a különböző gombszínekhez. Például, ha hozzáadhat egy kék színű opciót ezen extra CSS hozzáadásával:

/ * Kék gomb * /
.myprefix-button.color-kék {háttér: # 2981e4}

/ * Kék gomb lebeg *
.myprefix-button.color-blue: lebeg {háttér: # 2575cf}

/ * Kék gomb aktív * /
.myprefix-button.color-kék: aktív {háttér: # 0760AD}

Most egyszerűen használja a színparamétert a rövid kódban:

[gomb href = "AZ ÖN LINK" target = "saját" color = "kék"] Gomb szövege [/ gomb]

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