Sa postitad postitust WordPressis. Kahe rea vahele on vaja väikest pausi, mitte uut lõiku, vaid kerget eraldust. Lisad kaks <br> silti järjest, lülitad visuaalse redaktori peale ja tagasi, üks kadus. Paned tühja rea, WordPress muudab selle terve taandega uueks lõiguks. Mitte see, mida soovisid.

Asi pole teemas ega seadetes. Taustal töötab wpautop, sisseehitatud WordPressi filter, mis vormindab teksti automaatselt ja eemaldab „üleliigsed" HTML-sildid. Loogika on kasulik: see säästab sind lõikude käsitsi <p>-siltidesse pakkimisest. Aga kui sa kujundad luuletust, pildiseeria allkirju või samm-sammult juhiseid koos mikropausidega, jääb wpautop jalgu.

Allpool kolm võimalust reavahede kontrollimiseks ükskõik millises WordPressi redaktoris. Alates kiirest sisseehitatud meetodist kuni täielikult käsitsi juhitavani CSS-i abil. Kõiki on testitud WordPress 6.4+ versioonil, ilma pluginate kasutamiseta.

💡 Kiirülevaade:

• Registreeri [br] lühikood failis functions.php, universaalne tööriist suvalise arvu reavahede jaoks, mis redaktorit ei puuduta
• Kasuta teksti sisestamisel Shift+Enter, sisseehitatud meetod ühe reavahe jaoks, ilma ühegi koodireata
• Määra täpne vahe inline CSS-i kaudu, kui vajad kindlat pikslikaugust plokkidevaheliseks rõhutatud eralduseks

Video: kuidas luua WordPressi lühikoode nullist

Vaata kogu protsessi, alates registreerimisest failis functions.php kuni väljundini kasutajaliideses. Sama põhimõte kehtib kõigi kohandatud lühikoodide, mitte ainult [br] puhul.

Meetod 1: [br] lühikood, täielik kontroll reavahede üle

Lühikood lahendab probleemi lõplikult. Lisa kood üks kord ja sisesta [br] ükskõik kuhu: postituse teksti, vidinasse, isegi pealkirja läbi do_shortcode. Redaktor ei puuduta nurksulgudes olevat sisu, wpautop filter ignoreerib seda, reavahed jäävad püsima pärast suvalist arvu sakkide vahel vahetamist.

Lisa järgnev kood oma alamteema faili functions.php. Kui sul veel alamteemat pole, loo see esmalt meie juhendi järgi. Kui sa ei soovi teemafaile puudutada, paigalda Code Snippets plugin ja kleebi kood sinna, tulemus on sama.

1
/**
2
 * Shortcode for manual line breaks in the visual editor.
3
 * Usage: [br] for single break, [br][br] for double.
4
 */
5
function sdstudio_line_break_shortcode() {
6
    return '<br />';
7
}
8
add_shortcode( 'br', 'sdstudio_line_break_shortcode' );

Funktsioon sdstudio_line_break_shortcode tagastab HTML-i <br /> sildi ja add_shortcode registreerib [br] lühikoodi, WordPress asendab selle lehe renderdamisel selle sildiga. Funktsiooni nimes olev sdstudio_ prefiks kaitseb konfliktide eest: kui mõni teine plugin registreerib sama nimega funktsiooni, ei jookse sait kokku.

Pärast koodi lisamist kirjuta redaktoris nii:

1
This is the first paragraph.
2
[br]
3
This is the second line right below the first.
4
[br][br]
5
And this is with a double break.

Tulemus: esimest ja teist teksti eraldab üks reavahe, kolmandat eraldab topelt reavahe. WordPress töötleb lühikoode pärast wpautop filtrit, seega automaatvormindus neid ei mõjuta.

Nimi br on valitud lühiduse pärast, kuid tehniliselt on see risk: mõni teine plugin või teema võib registreerida oma [br]. Praktikas tuleb konflikte peaaegu mitte kunagi ette. Kui märkad kummalist käitumist, nimeta see ümber, näiteks [sd_br]-ks.

Enne faili functions.php muutmist tee sellest varukoopia FTP või oma majutusteenuse failihalduri kaudu. Kui sait pärast muudatusi ei avane, laadi salvestatud originaal tagasi, kõik hakkab jälle tööle.

Meetod 2: Shift+Enter, sisseehitatud meetod ilma koodita

Kui vajad ühte reavahet ega taha koodiga jännata, hoia visuaalses redaktoris Shift all ja vajuta Enter.

Kursor liigub järgmisele reale sama lõigu sees. HTML-is on see sama <br>, ainult et WordPress sisestab selle automaatselt. Tavaline Enter loob uue lõigu (<p>), samas kui Shift+Enter loob reavahe ilma tühikuta.

Meetodi miinus: töötab ainult ühe reavahe puhul. Kaks järjestikust Shift+Enter klahvivajutust liidab WordPress üheks <br>-ks ja kolmest saab uus lõik. Kui vajad märgatavat vertikaalset vahet ridade vahel, jätka 3. meetodiga.

Meetod 3: inline CSS täpse pikslivahe jaoks

Kui ei lühikood ega Shift+Enter anna vajalikku kaugust, määra vahe otse style atribuudi kaudu.

Lülitu klassikalise redaktori paremas ülanurgas vahekaardile „Tekst":

Leia lõik, mille järele on vaja vahet. Pakenda see <p> siltidesse ja lisa margin-bottom:

1
<p style="margin-bottom: 100px;">
2
This is a paragraph after which there will be 100 pixels of spacing.
3
</p>
4
<p>And this is the next paragraph, with a noticeable gap.</p>

Asenda 100px väärtus enda omaga. Mida suurem number, seda laiem vahe. Ülaltpoolt vahe jaoks kasuta margin-top. Saad neid kombineerida: <p style="margin-top: 50px; margin-bottom: 80px;">.

Meetod on mugav üksikjuhtudel, semantiliste plokkide rõhutatud eraldamiseks konkreetse postituse sees. Kuid sellise koodi sisestamine igasse lõiku on ebamugav. Süstemaatiliseks kasutamiseks pöördu tagasi 1. meetodi lühikoodi juurde.

⁉️🤔 Korduma kippuvad küsimused

Miks WordPress eemaldab minu <br>, kui ma redaktori sakkide vahel vahetan?

TinyMCE visuaalne redaktor töötleb visuaalsele sakile lülitudes HTML-i uuesti ja eemaldab sildid, mida ta peab üleliigseks. [br] lühikoodi see puhastus ei mõjuta: see dekodeeritakse <br>-ks alles kasutajaliideses väljastamisel ja redaktoris jääb see tavaliseks nurksulgudes tekstiks. Seetõttu on lühikood usaldusväärsem kui otsene HTML, sinu reavahed jäävad püsima pärast suvalist arvu sakkide vahel vahetamist.

Kas ma saan vertikaalse vahe jaoks kasutada ?

Tehniliselt jah, kuid see on halb tava. Mitu järjestikust näeb välja räpakas, ajab ekraanilugejad segadusse ja laguneb mobiiliekraanidel koost. Tühja ruumi jaoks kasuta CSS-vahesid (3. meetod) ja jäta nende sõnade sidumiseks, mida reavahe ei tohi katkestada, näiteks „WordPress 6.4". Katkematu tühik ei ole mõeldud vertikaalsete vahede tekitamiseks.

Kas [br] töötab Gutenbergi redaktoris?

Jah, [br] lühikood töötab igas WordPressi redaktoris: nii klassikalises kui ka plokipõhises Gutenbergis. Gutenbergis sisesta „Lühikoodi" plokk ja kirjuta [br]. Plokk on kategoorias „Vidinad", kui sa seda ei näe, klõpsa „Sirvi kõiki" ja leia see otsingu kaudu. Märkus: Gutenbergis töötab ka Shift+Enter, seega lihtsate üksikute reavahede puhul ei pruugi lühikoodi vaja minna.

Mida teha, kui lühikood kuvatakse tekstina, mitte reavahena?

Kaks tüüpilist põhjust. Esiteks: kood on sisestatud valesse faili. Kontrolli, et funktsioon on lisatud aktiivse teema või alamteema faili functions.php, mitte faili wp-config.php või mõne plugina faili. Teiseks: lühikood on koodiploki või HTML-kommentaari sees, WordPress ei töötle lühikoode siltide <pre>, <code> ja <!-- --> sees. Kiire kontroll: lisa [br] postituse päris algusesse kasutajaliideses ja vaata tulemust.

Kas ma pean lühikoodi töötamiseks wpautop välja lülitama?

Ei, wpautop väljalülitamine pole vajalik ja on isegi kahjulik: sa kaotad automaatse lõigu vormindamise kogu saidil. [br] lühikood töötab wpautop-st sõltumatult tänu töötlemise järjekorrale: WordPress rakendab lühikoode pärast automaatvormindamise filtrit. Tavalisi lõike vormindatakse jätkuvalt automaatselt ja sina juhid reavahesid käsitsi, täpselt seal, kus vaja. Käsk remove_filter('the_content', 'wpautop') on radikaalne meede, mille järel pead kogu saidil käsitsi <p> silte paigutama. Soovitame seda vältida.

Milline reavahe meetod on sulle õige

Valik sõltub ülesandest. Pole ühte universaalset lahendust, kuid on selge loogika:

Kui vajad kiiresti ja ilma koodita, Shift+Enter. Ühest reavahest piisab enamikul juhtudel: eralda allkiri pildist, murra pikk pealkiri, tee lõigu sisse mikropaus.

Kui reavahesid on palju ja need korduvad, [br]** lühikood**. Seadista üks kord ja unusta: kirjuta [br], kui vaja, kasvõi kümme korda järjest. Kood failis functions.php ei võta isegi kümmet rida.

Kui vajad täpset pikslivahet rõhutatud eralduse jaoks, inline CSS. margin-bottom: 80px paar annab täpselt nii palju õhku, kui konkreetse lehe kujundus nõuab. Ära liialda: regulaarseks kasutamiseks pöördu tagasi lühikoodi juurde.

Need kolm meetodit katavad kõik stsenaariumid reavahedega WordPressis. Vali vastavalt ülesandele ja ära lase redaktoril enda eest otsustada, kus peaks vahe olema ja kus mitte.