Dacă nu sunteți un mare fan al colaborării cu editorul HTML în WordPress sau doriți să oferiți câteva îmbunătățiri interesante pentru temele dvs. premium, codurile scurte sunt o soluție excelentă pentru extinderea capabilităților editorului dvs. de post, păstrând lucrurile simple.
Mă gândeam că ar fi fain să adaug un fel de buton pe site-ul meu atunci când furnizez link-uri către fișiere gratuite sau alte site-uri (folosind coduri scurte, desigur), așa că după adăugarea shortcode-ului la tema mea, m-am gândit că voi împărtăși codul aici pe blog, astfel încât alte persoane interesate să adauge coduri scurte de buton pe site-ul lor ar putea pur și simplu să copieze și să lipească codul meu în tema lor și să nu fie nevoiți să petrec prea mult timp realizând codul scurt și stilizând butonul..
Codurile scurte au fost introduse în WordPress 2.5 și vă permit să creați coduri macro pentru utilizare în conținutul postării. Un simplu cod scurt ar arăta astfel:
[cod scurt]
Care atunci când este adăugat la editorul de poștă va returna valoarea codului scurt așa cum este definit în fișierele dvs. cu temă. Vă voi arăta cum puteți crea un cod scurt care vă va permite să adăugați ușor butoane la editorul dvs. de poștă, fără să atingeți niciun cod.
Adăugarea unui shortcode „buton” personalizat
Primul lucru pe care trebuie să-l faceți este să adăugați la tema dvs. codul php pentru codul scurt. Următorul cod poate fi utilizat pentru a adăuga un buton simplu pe site-ul dvs. Acest cod poate fi plasat în fișierul funcții.php. Dacă utilizați o temă a unei terțe părți, aceasta se realizează cel mai bine printr-o temă pentru copii WordPress.
Utilizarea codului scurt în editorul dvs. de poștă
Acum, dacă aveți un cod scurt, puteți adăuga noul „buton” (care arată ca un link simplu acum, deoarece nu l-am conceput) la editorul dvs. de postări.
// Exemplu de utilizare 1
[butonul href = „LINKUL TĂU” țintă = „sine”] Butonul Text [/ butonul]
// Exemplu de utilizare 2
[butonul href = „LINKUL TĂU” țintă = „auto” text = „Butonul text”]
Stilarea butonului
Care este rostul creării unui cod scurt dacă va arăta doar ca o legătură simplă? Nimic. Acesta este motivul pentru care îți voi arăta cum să adaugi niște CSS3 cool la stilul butonului de descărcare și să îl faci să pară sexy.
După cum ați observat în codul scurt, am adăugat clasa „myprefix-button”, astfel încât să puteți stila cu ușurință prin fișierul dvs. style.css. Introduceți următorul cod în foaia de stil pentru a crea un buton albastru frumos, precum cel din imagine.
Dacă ați observat că codul scurt are un parametru de culoare pe care îl puteți utiliza pentru a adăuga stiluri CSS pentru diferite culori de buton. De exemplu, dacă puteți adăuga o opțiune de culoare albastră adăugând acest CSS suplimentar:
07.06.2020
Cum să adăugați un scurt cod CSS3 pentru buton în WordPress
Jeffrey Wilson Tutoriale
Dacă nu sunteți un mare fan al colaborării cu editorul HTML în WordPress sau doriți să oferiți câteva îmbunătățiri interesante pentru temele dvs. premium, codurile scurte sunt o soluție excelentă pentru extinderea capabilităților editorului dvs. de post, păstrând lucrurile simple.
Mă gândeam că ar fi fain să adaug un fel de buton pe site-ul meu atunci când furnizez link-uri către fișiere gratuite sau alte site-uri (folosind coduri scurte, desigur), așa că după adăugarea shortcode-ului la tema mea, m-am gândit că voi împărtăși codul aici pe blog, astfel încât alte persoane interesate să adauge coduri scurte de buton pe site-ul lor ar putea pur și simplu să copieze și să lipească codul meu în tema lor și să nu fie nevoiți să petrec prea mult timp realizând codul scurt și stilizând butonul..
Contents
Ce sunt shortcodes?
Codurile scurte au fost introduse în WordPress 2.5 și vă permit să creați coduri macro pentru utilizare în conținutul postării. Un simplu cod scurt ar arăta astfel:
Care atunci când este adăugat la editorul de poștă va returna valoarea codului scurt așa cum este definit în fișierele dvs. cu temă. Vă voi arăta cum puteți crea un cod scurt care vă va permite să adăugați ușor butoane la editorul dvs. de poștă, fără să atingeți niciun cod.
Adăugarea unui shortcode „buton” personalizat
Primul lucru pe care trebuie să-l faceți este să adăugați la tema dvs. codul php pentru codul scurt. Următorul cod poate fi utilizat pentru a adăuga un buton simplu pe site-ul dvs. Acest cod poate fi plasat în fișierul funcții.php. Dacă utilizați o temă a unei terțe părți, aceasta se realizează cel mai bine printr-o temă pentru copii WordPress.
Utilizarea codului scurt în editorul dvs. de poștă
Acum, dacă aveți un cod scurt, puteți adăuga noul „buton” (care arată ca un link simplu acum, deoarece nu l-am conceput) la editorul dvs. de postări.
Stilarea butonului
Care este rostul creării unui cod scurt dacă va arăta doar ca o legătură simplă? Nimic. Acesta este motivul pentru care îți voi arăta cum să adaugi niște CSS3 cool la stilul butonului de descărcare și să îl faci să pară sexy.
După cum ați observat în codul scurt, am adăugat clasa „myprefix-button”, astfel încât să puteți stila cu ușurință prin fișierul dvs. style.css. Introduceți următorul cod în foaia de stil pentru a crea un buton albastru frumos, precum cel din imagine.
Suport color multiplu
Dacă ați observat că codul scurt are un parametru de culoare pe care îl puteți utiliza pentru a adăuga stiluri CSS pentru diferite culori de buton. De exemplu, dacă puteți adăuga o opțiune de culoare albastră adăugând acest CSS suplimentar:
Acum pur și simplu folosiți parametrul de culoare din codul scurt: