Kako dodati prilagođene stilove u WordPress Visual Editor

Kako dodati prilagođene stilove u WordPress Visual Editor

Pogledajte svoj WordPress vizualni uređivač. Postoje neke standardne opcije formatiranja i stiliziranja vašeg sadržaja, ali ne mnogo u smislu prilagodbe kako bi vaši postovi i stranice izgledali pomalo fantastično.


WordPress Editor

Sada možda znate da možete preskočiti napred i nazad između uređivača Text i Visual u WordPressu i bacati CSS za stvaranje stvari poput gumba i blokova teksta, ali ovo je bol, a ako nemate mnogo iskustva s uređivanjem koda Tekst editor izgleda pomalo zastrašujuće.

Ne bi li bilo jednostavnije kada biste mogli kreirati vlastite prilagođene stilove, smjestiti ih u padajući izbornik u WordPress uređivaču i odlučiti ih koristiti kad god ih zatrebate? Da, to je puno lakše, pa želimo ovdje opisati kako to učiniti. Imajte na umu da, iako pokušavamo taj proces učiniti što jednostavnijim, pomaže malo CSS znanja ako želite otkriti sve prednosti prilagođenih stilova.

Pogledajmo kako dodati prilagođene stilove u WordPress vizualni uređivač.

Dodajte prilagođene stilove u WordPress Visual Editor dodavanjem koda

Ova prva opcija zahtijeva da znate malo o tome kako uključiti i izmijeniti CSS, ali ću vam malo prošetati kako bih vam pomogao da naučite osnove kako biste to znanje mogli koristiti u budućnosti. Ovo je lijepa opcija ako ne želite nadograditi web lokaciju pomoću dodatka.

Svrha ovoga je dodavanje novog padajućeg izbornika koji uključuje prilagođene stilove u vašem WordPress vizualnom uređivaču, što vam daje mogućnost odabira elemenata u vašem uređivaču i zatim na njih primijeniti prilagođene stilove. Ako razvijate novu temu, pronađite svoje functions.php datoteku i stavite kôd dolje u tu datoteku ili ako radite s već ugrađenom temom zalijepite ovaj kod u funkciju dječje teme.php datoteku.

funkcija myprefix_mce_buttons_1 ($ gumbi) {
array_unshift ($ gumbi, 'styleselect');
vratiti $ gumbe;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Vratite se uredniku u jedan od svojih WordPress postova i sada biste trebali vidjeti novi gumb “Formati” u gornjem redu uređivača. Primijetite kako smo se priključili na “mce_buttons_1?” Ovo postavlja gumb izbornika formata u prvi red uređivača mce. Pomoću filtra “mce_buttons_2” možete ga staviti i u drugi red ili “mce_buttons_3” da biste ga postavili u 3. red.

Dakle, sada kada ste omogućili stavku izbornika, vrijeme je da dodate svoje prilagođene stilove koji ćete upotrebljavati u svojim postovima. Uzmite dolje navedeni kod i zalijepite ga u svoj functions.php datoteka koja će dodati dva nova stila na padajućem izborniku Formati – “gumb teme” i “označi”.

/ **
* Dodajte prilagođene stilove na padajući oblik mce formata
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
funkcija myprefix_add_format_styles ($ init_array) {
$ style_formats = niz (
// Svako dijete matrice je formata s vlastitim postavkama - dodajte onoliko koliko želite
array (
'title' => __ ('Gumb za temu', 'text-domain'), // Naslov za padajući izbornik
'selector' => 'a', // Element za ciljanje u uređivaču
'class' => 'gumb-tema' // Naziv klase koji se koristi za CSS
),
array (
'title' => __ ('Označi', 'Tekst-domena'), // Naslov za padajući
'inline' => 'span', // Omotajte raspon oko odabranog sadržaja
'class' => 'text -light' // Naziv klase koji se koristi za CSS
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
vratiti $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

Možete promijeniti naslove da prikazuju različita imena u padajućem izborniku, dodavati / uklanjati stavke iz polja itd. Možete mijenjati gotovo sve u ovom kodu da biste otkrili svoje vlastite stilove prilagođenog formata, svakako provjerite WordPress Codex za detaljnije objašnjenje prihvaćenih parametara i povratnih vrijednosti.

Sada kada imate nove stilove, možete istaknuti sadržaj u svom uređivaču i primijeniti stilove. Primijetite, kako format “gumb teme” ima parametar odabira? To znači da se stil može primijeniti samo na taj određeni selektor (u ovom slučaju oznaku “a” ili “link”). Drugi format koji smo dodali „Označi“ nema parametar odabira, već parametar „inline“ koji mu govori da primijeni stil na bilo koji tekst koji ste istaknuli u svom uređivaču i omotao ga u rasponu sa svojim jedinstvenim imenima klase. Možete vidjeti primjer iz naše Total WordPress teme o tome kako smo koristili formate tako da korisnici mogu lako primijeniti izgled kontrolnog popisa na sve oznake u uređivaču.

spisak

Sada možete koristiti svoje prilagođene formate, ali oni se neće razlikovati sve dok na web mjesto ne dodate neki prilagođeni CSS kako biste ih oblikovali. Trebate pronaći tablicu stilova za svoju temu (ako izgradite vlastitu) ili podređenu temu i zalijepiti sljedeći CSS kôd u datoteku.

.gumb-tema {
zaslon: linijski blok;
padding: 10 15px;
boja: #fff;
pozadina: # 1796c6;
uređenje teksta: nema;
}
.gumb teme: zadržite pokazivač {
uređenje teksta: nema;
neprozirnost: 0,8;
}
.isticanje teksta {
pozadina: # FFFF00;
}

E sad, ovo će dodati styling u vaše nove formate za prednji dio, tako da kada ih primijenite možete ih vidjeti uživo. Yay! Ali ne bi li bilo lijepo vidjeti i svoje stilove u stvarnom uređivaču kada se primjenjuju? Da biste to učinili, morat ćete koristiti WordPress funkciju “editora stilova uređivača”. Ako gradite svoju vlastitu temu, tada ćete u svojoj temi htjeti stvoriti novu css datoteku koja se naziva “editor-style.css” (možete je imenovati bilo čime što želite, budite sigurni da u skladu s tim uredite isječak) s prilagođenim CSS-om. dodajte za svoje formate, a zatim dodajte donju funkciju da biste je učitali u pozadini.

funkcija myprefix_theme_add_editor_styles () {
add_editor_style ('editor-style.css');
}
dodavanje ('init', 'myprefix_theme_add_editor_styles');

Ako radite s tuđom temom, morat ćete to dodati u svoju podređenu temu, samo pripazite da joj date jedinstveno ime kako ne bi bilo u sukobu s vašom roditeljskom temom ili ako vaša roditeljska tema već ima CSS datoteku za uređivač ga zapravo možete kopirati i zalijepiti u podređenu temu (bez dodavanja gornjeg PHP koda), a zatim dodajte svoj novi CSS jer će WordPress prvo provjeriti podređenu temu prije nego što će učitati CSS datoteku roditelja teme i ako je pronađe učitajte ga umjesto s podređene teme.

Dodajte prilagođene stilove u WordPress vizualni urednik s lijepim dodatkom

Ako nemate vremena za igru ​​s kôdom ili ne možete sami smisliti to, tu su dobre vijesti. Postoji dodatak koji vam omogućuje da dovršite točno ono što smo upravo napravili gore, a da se ne morate šaliti sa kodom.

TinyMCE dodatak za prilagođene stilove

Jednostavno potražite, instalirajte i aktivirajte Dodatak prilagođenih stilova TinyMCE i aktivirajte ga na svojoj web stranici WordPress.

Postavke prilagođenih stilova TinyMCE

Ići Postavke> TinyMCE prof.styles na lijevoj strani vaše WordPress nadzorne ploče. Ovdje mijenjate svoje postavke za dodatak.

Postavke prilagođenih stilova TinyMCE

Dodatak vam omogućuje da odaberete gdje su vaše tablice stilova ili gdje ih želite smjestiti. Preporučuje se izrada novog prilagođenog direktorija. Odaberite treću mogućnost i imenujte imenik, a zatim pomaknite stranicu prema dolje da biste kliknuli na vašu Spremi postavke opciju prije nego što nastavite na sljedeći korak.

TinyMCE prilagođeni stilovi Dodaj novo

Nakon što spremite postavke, pomaknite se prema dolje da biste odabrali gumb Dodaj novi stil.

Opcije prilagođenih stilova TinyMCE

Ovdje prilagodite ono što želite da izgledaju vaši prilagođeni stilovi. To je u osnovi jednostavan web-uređivač koji generira CSS kod za vas. U padajućem izborniku upišite naslov za sve što želite prikazati. Odaberite želite li tip odabirača, liniju ili blok. Slobodno upotrijebite gornju snimku zaslona za ispunjavanje CSS klasa i stilova ili izradite vlastiti ovisno o tome za što planirate koristiti padajući izbornik. Nakon završetka kliknite na Spremi postavke na dnu stranice.

TinyMCE format prilagođenih stilova

Sada je vrijeme da vidite kako novi prilagođeni stil izgleda u vašem uređivaču. Otvorite novi post ili stranicu i pronađite padajući izbornik Formati s lijeve strane uređivača Visual. Prikazuje se u drugom retku. Jednom kada kliknete padajući izbornik otkrit će se novi stil koji ste upravo stvorili.

TinyMCE korisnički stilovi koriste se

Kliknite opciju Big Blue Button ili sve što ste stvorili da biste je otkrili u svom uređivaču. Da biste ga koristili jednostavno označite tekst koji želite formatirati, a zatim kliknite na svoju opciju i voila!

Zaključak

To je sve za sada! Uvijek možete saznati više o tome kako koristiti nove stilove provjerom Stranica kodeksa WordPressa posvećen ovoj temi.

Javite nam u odjeljku komentara ako imate bilo kakvih pitanja o tome kako dodati prilagođene stilove u WordPress vizualni uređivač. Slobodno dijelite sve neobične stilove koje ste stvorili kako bi web mjesto izgledalo malo ljepše!

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